diff --git a/css/header-footer.css b/css/header-footer.css index 47a7863..04179e0 100644 --- a/css/header-footer.css +++ b/css/header-footer.css @@ -19,6 +19,27 @@ /* ─── Header ─────────────────────────────────────────────────────────────── */ +.site-notice { + height: var(--site-notice-height, 44px); + display: flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + padding: 0.45rem 1rem; + overflow: hidden; + background: #ffd84d; + border-bottom: 1px solid #d6ac16; + color: #332900; + font-family: 'Source Sans Pro', sans-serif; + font-size: clamp(0.82rem, 2.5vw, 0.98rem); + line-height: 1.15; + text-align: center; +} + +.site-notice strong { + font-weight: 700; +} + .header { --header-glass-background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(235, 249, 252, 0.72)), @@ -137,7 +158,7 @@ .dropdown-menu { display: block; position: fixed; - top: 82px; + top: calc(var(--site-notice-height, 44px) + 82px); left: 0; right: 0; z-index: 999; @@ -678,7 +699,7 @@ .nav { display: none; position: fixed; - top: 52px; + top: calc(var(--site-notice-height, 44px) + 52px); left: 0; right: 0; background: rgba(255, 255, 255, 0.92); @@ -768,7 +789,7 @@ .nav { display: none; position: fixed; - top: 52px; + top: calc(var(--site-notice-height, 44px) + 52px); left: 0; right: 0; background: rgba(255, 255, 255, 0.95); diff --git a/css/style.css b/css/style.css index 1d6e967..0e8af9b 100644 --- a/css/style.css +++ b/css/style.css @@ -10,6 +10,7 @@ html { } body { + --site-notice-height: 44px; --color-lm-primary: #5d8095; --color-lm-url: #007f96; --color-lm-url-10: #007f961a; @@ -48,7 +49,7 @@ a { } #header-placeholder { - min-height: 92px; + min-height: calc(92px + var(--site-notice-height)); position: sticky; top: 0; z-index: 1000; @@ -78,6 +79,25 @@ a { padding: 5rem 0 3rem; } +.home-progress { + min-height: calc(100vh - 370px); + display: flex; + flex-direction: column; + justify-content: center; +} + +.home-progress p { + max-width: 42rem; + color: var(--site-text-muted); +} + +.home-progress a { + color: var(--site-link); + font-weight: 700; + text-decoration: underline; + text-underline-offset: 0.14em; +} + .stub-kicker { display: inline-block; padding: 0.35rem 0.7rem; diff --git a/index.html b/index.html index baad766..421b14a 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,13 @@
-
+
+
+

Still in the works.

+

We are still building the new Imageomics Institute website.

+

In the meantime, explore our completed About, News, and Events sections.

+
+
diff --git a/js/load-components.js b/js/load-components.js index 344e26d..6dac154 100644 --- a/js/load-components.js +++ b/js/load-components.js @@ -2,7 +2,7 @@ (function() { 'use strict'; - const COMPONENT_CACHE_VERSION = '3'; + const COMPONENT_CACHE_VERSION = '5'; function getPathPrefix() { const path = window.location.pathname; @@ -66,6 +66,12 @@ target.innerHTML = adjustPaths(html, prefix); if (targetId === 'header-placeholder') { + const notice = document.createElement('div'); + notice.className = 'site-notice'; + notice.setAttribute('role', 'status'); + notice.innerHTML = 'Work in progressthis website is still being built.'; + target.prepend(notice); + if (typeof window.initHamburger === 'function') { window.initHamburger(); } @@ -105,10 +111,21 @@ }); } + function ensureFavicon(prefix) { + if (document.querySelector('link[rel~="icon"]')) return; + + const favicon = document.createElement('link'); + favicon.rel = 'icon'; + favicon.type = 'image/png'; + favicon.href = `${prefix}images/Imageomics-logo.png`; + document.head.appendChild(favicon); + } + function initComponents() { const prefix = getPathPrefix(); const componentsPath = `${prefix}html/components/`; + ensureFavicon(prefix); loadComponent(`${componentsPath}header.html`, 'header-placeholder'); loadComponent(`${componentsPath}footer.html`, 'footer-placeholder'); }