From 9685fb299d23eafa7066db5a3719cc2b0df6be51 Mon Sep 17 00:00:00 2001 From: Robbert Schep Date: Mon, 14 Jul 2025 21:50:55 +0200 Subject: [PATCH] a lot of css and js issues resolved. Pretty enough --- docs/javascripts/extra.js | 14 ++- docs/stylesheets/extra.css | 189 +++++++++++++++++++++++++------------ mkdocs.yml | 4 +- site/javascripts/extra.js | 14 ++- site/sitemap.xml | 22 ++--- site/sitemap.xml.gz | Bin 297 -> 297 bytes site/stylesheets/extra.css | 189 +++++++++++++++++++++++++------------ 7 files changed, 293 insertions(+), 139 deletions(-) diff --git a/docs/javascripts/extra.js b/docs/javascripts/extra.js index 4c5df15..0161941 100644 --- a/docs/javascripts/extra.js +++ b/docs/javascripts/extra.js @@ -4,6 +4,16 @@ document$.subscribe(function () { const sidebarLeft = document.querySelector(".md-sidebar--primary"); const sidebarRight = document.querySelector(".md-sidebar--secondary"); + // Add class to body if hero exists + if (hero) { + document.body.classList.add("has-hero"); + } else { + // NO HERO - make header solid immediately + if (header) { + header.classList.add("scrolled"); + } + } + if (!hero || !header) return; // Reveal hero banner @@ -11,10 +21,9 @@ document$.subscribe(function () { hero.style.opacity = 1; }); - // Scroll logic + // Scroll logic - ONLY runs if hero exists function updateUI() { const heroBottom = hero.getBoundingClientRect().bottom; - const hasScrolledPastHero = heroBottom <= 0; // Update header @@ -50,4 +59,3 @@ document$.subscribe(function () { window.addEventListener("scroll", updateUI); updateUI(); // Initial run }); - diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index d154c1b..f8b6d9a 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,111 +1,180 @@ -/* === 1. HEADER: Starts transparent, turns indigo later === */ +/* === GLOBAL RESETS === */ +/* Remove all default spacing that causes the white gap */ +.md-main__inner { + margin-top: 0 !important; + padding-top: 0 !important; +} + +.md-content__inner { + margin-top: 0 !important; + padding-top: 0 !important; +} + +/* Add padding back ONLY for non-homepage content */ +body:not(.has-hero) .md-content__inner { + padding-top: 4rem !important; /* Adjust based on your header height */ +} + +/* === 1. HEADER: Fixed transparent to solid === */ .md-header { position: fixed; top: 0; width: 100%; z-index: 1000; - box-shadow: none !important; - transition: background-color 0.3s ease, box-shadow 0.3s ease; + transition: all 0.3s ease; } -/* Transparent before scroll */ +/* Force transparent background when not scrolled */ .md-header:not(.scrolled) { - background-color: rgba(0, 0, 0, 0.01) !important; - + background-color: transparent !important; + backdrop-filter: none !important; + box-shadow: none !important; } -/* After scroll past hero */ +/* Solid background after scroll */ .md-header.scrolled { background-color: var(--md-primary-fg-color); box-shadow: var(--md-shadow-z2); } -/* === 2. HERO BANNER === */ +/* === 2. HERO BANNER: Full viewport with proper positioning === */ .hero-banner { + /* Full viewport coverage */ + width: 100vw; + min-height: 100vh; + margin: 0; + padding: 0; + + /* Reset any container constraints */ + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + + /* Background setup */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url('../assets/banner1.png') no-repeat center center; background-size: cover; - color: white; - text-align: center; - - width: 100vw; - margin-left: calc(50% - 50vw); + background-attachment: fixed; /* Optional: parallax effect */ + /* Content centering */ display: flex; flex-direction: column; justify-content: center; align-items: center; - min-height: 100vh; - padding: 6rem 2rem 2rem; - box-sizing: border-box; - + /* Initial state for JS animation */ opacity: 0; transition: opacity 1s ease-in-out; + + /* Ensure it's behind header but above page background */ position: relative; - z-index: 0; /* Ensure it's underneath the header */ + z-index: 1; + + /* Content styling */ + color: white; + text-align: center; + padding: 2rem; + box-sizing: border-box; } -/* === 3. PAGE OFFSET FIX: eliminate top margin under fixed header === */ -.md-main__inner { - margin-top: 0 !important; -} -.md-content { - margin-top: 0 !important; -} - -/* === 4. HEADER TEXT COLOR: White on hero, revert on scroll === */ -.md-header__title, -.md-header__button, -.md-search__input, -.md-search__icon, -.md-nav__link, -.md-icon { +/* Hero text styling */ +.hero-banner h1, +.hero-banner p { color: white !important; - fill: white !important; - transition: color 0.3s ease, fill 0.3s ease; + text-shadow: 2px 2px 4px rgba(0,0,0,0.7); + margin: 0; + padding: 0.5rem 0; } +/* === 3. PAGE OFFSET FIX === */ +/* Remove white bar at top */ +.md-header + .md-container { + padding-top: 0 !important; +} + +/* === 4. HEADER COLORS: Amber when transparent, theme colors when solid === */ +/* Transparent state - Amber styling */ +.md-header:not(.scrolled) .md-header__title, +.md-header:not(.scrolled) .md-header__button, +.md-header:not(.scrolled) .md-nav__link, +.md-header:not(.scrolled) .md-icon, +.md-header:not(.scrolled) .md-search__icon { + color: #ffb300 !important; + fill: #ffb300 !important; +} + +/* Search box in transparent state */ +.md-header:not(.scrolled) .md-search__form { + background-color: rgba(255, 179, 0, 0.1) !important; + border: 1px solid rgba(255, 179, 0, 0.3) !important; + box-shadow: none !important; +} + +.md-header:not(.scrolled) .md-search__input { + background-color: transparent !important; + color: #ffb300 !important; +} + +.md-header:not(.scrolled) .md-search__input::placeholder { + color: rgba(255, 179, 0, 0.7) !important; +} + +/* Scrolled state - Default theme colors */ .md-header.scrolled .md-header__title, .md-header.scrolled .md-header__button, -.md-header.scrolled .md-search__input, -.md-header.scrolled .md-search__icon, .md-header.scrolled .md-nav__link, -.md-header.scrolled .md-icon { +.md-header.scrolled .md-icon, +.md-header.scrolled .md-search__icon { color: var(--md-primary-bg-color) !important; fill: var(--md-primary-bg-color) !important; } -.hero-banner h1, -.hero-banner p { - color: white !important; - text-shadow: 0 2px 4px rgba(0,0,0,0.4); /* Optional: adds readability over image */ +.md-header.scrolled .md-search__form { + background-color: var(--md-default-bg-color--light) !important; + border: none !important; } +.md-header.scrolled .md-search__input { + background-color: var(--md-default-bg-color--light) !important; + color: var(--md-default-fg-color) !important; +} -/* === Sidebar Fade (desktop only) === */ +/* === 5. SIDEBAR POSITIONING === */ @media screen and (min-width: 76.25em) { - .md-sidebar--primary { - transition: opacity 0.3s ease; + /* Default positioning for hero pages */ + body.has-hero .md-sidebar { + top: 0; + height: 100vh; } -/* === Ensure sidebar menu text matches theme mode === */ -.md-sidebar__inner, -.md-nav__title, -.md-nav__link { - color: var(--md-typeset-color) !important; + /* Push sidebars down on non-hero pages */ + body:not(.has-hero) .md-sidebar { + top: 5rem !important; + height: calc(100vh - 5rem) !important; + } + + /* Sidebar fade transition (managed by JS) */ + .md-sidebar--primary, + .md-sidebar--secondary { + transition: opacity 0.3s ease; + } +} + +/* === 6. CONTENT AFTER HERO === */ +/* Ensure content after hero has proper background */ +.md-content__inner > *:not(.hero-banner) { background-color: var(--md-default-bg-color); - transition: color 0.3s ease, background-color 0.3s ease; + position: relative; + z-index: 2; } -/* Optional: add better hover contrast */ -.md-nav__link:hover { - background-color: var(--md-accent-bg-color); +/* === 7. MOBILE ADJUSTMENTS === */ +@media screen and (max-width: 76.25em) { + .hero-banner { + min-height: 70vh; + } + + body:not(.has-hero) .md-content__inner { + padding-top: 3.5rem !important; /* Smaller header on mobile */ + } } - - -} - - - diff --git a/mkdocs.yml b/mkdocs.yml index ca569cb..905a9af 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -44,8 +44,8 @@ markdown_extensions: - pymdownx.tabbed: alternate_style: true - pymdownx.emoji: - emoji_index: !!python/name:materialx.emoji.twemoji - emoji_generator: !!python/name:materialx.emoji.to_svg + emoji_index: !!python/name:material.extensions.emoji.twemoji + emoji_generator: !!python/name:material.extensions.emoji.to_svg - pymdownx.highlight - pymdownx.inlinehilite - pymdownx.snippets diff --git a/site/javascripts/extra.js b/site/javascripts/extra.js index 4c5df15..0161941 100644 --- a/site/javascripts/extra.js +++ b/site/javascripts/extra.js @@ -4,6 +4,16 @@ document$.subscribe(function () { const sidebarLeft = document.querySelector(".md-sidebar--primary"); const sidebarRight = document.querySelector(".md-sidebar--secondary"); + // Add class to body if hero exists + if (hero) { + document.body.classList.add("has-hero"); + } else { + // NO HERO - make header solid immediately + if (header) { + header.classList.add("scrolled"); + } + } + if (!hero || !header) return; // Reveal hero banner @@ -11,10 +21,9 @@ document$.subscribe(function () { hero.style.opacity = 1; }); - // Scroll logic + // Scroll logic - ONLY runs if hero exists function updateUI() { const heroBottom = hero.getBoundingClientRect().bottom; - const hasScrolledPastHero = heroBottom <= 0; // Update header @@ -50,4 +59,3 @@ document$.subscribe(function () { window.addEventListener("scroll", updateUI); updateUI(); // Initial run }); - diff --git a/site/sitemap.xml b/site/sitemap.xml index 389ffa9..7db1e2d 100644 --- a/site/sitemap.xml +++ b/site/sitemap.xml @@ -2,46 +2,46 @@ https://0_timeline.org/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/0_timeline/history/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/0_timeline/the-experiment/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/0_timeline/the-observation/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/0_timeline/the-smartup-hypothesis/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/smartup-zero/1_general_forum/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/smartup-zero/2_workplace/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/smartup-zero/3_teams/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/smartup-zero/4_roles/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/smartup-zero/5_objectives/ - 2025-07-10 + 2025-07-14 https://0_timeline.org/smartup-zero/6_tasks/ - 2025-07-10 + 2025-07-14 \ No newline at end of file diff --git a/site/sitemap.xml.gz b/site/sitemap.xml.gz index 4dc120bb4fbbdfb8b14b9b79dfb8591eeff8a154..d3784229d241abb655b758e123a3091e46864742 100644 GIT binary patch delta 279 zcmV+y0qFjz0;vKAABzYGfJk(a2OWPm=}V4t>ld_VM4YWn11w@Uani3ZdGv9uDwVy! z45OKmK(woaHQ62lX>`lHE~`8P*W*UJVVS=?KNa`+s++aDU7b=V=Z0-N}WbO(j`dFxtV{q!p*bpIU!KY;n^y zRkJ9nyP}>)$(6g9i!b+I6wy3F0S6Bu5{^?fz%@bGD~^vKRRyvt@XiED`sM!!QqQOf}w1ZCtahMi4QqLCAZtv9NNGzD%XgR+UPU@ik1NEE)1xPF74 d^*&XDTgi&He+WM>@w@Im05b;yEeqZS008hUeQW># delta 279 zcmV+y0qFjz0;vKAABzYGfC6uk2OWR6X`9M%ZvBGxjEJ+fX@EuSCQkbGC67L?Ri&~Q zm|-+C5{PznuqN9>AdPOB*JYJw;CkF>H!Sm)=cnQ!Uv;x~7YqSsQS4}$kIep2h-sQi z(hOF4DlrU#`Y{3$S5j2vBJXBdoRh(2cb?W@-<@12+EkLY1*09DO$cUU7T`sVb0Ffp@+b zj~*i?P5;*9Gx{9@idqifASfeWG3;!b5{;ZNY`sxEq$zMC8I( *:not(.hero-banner) { background-color: var(--md-default-bg-color); - transition: color 0.3s ease, background-color 0.3s ease; + position: relative; + z-index: 2; } -/* Optional: add better hover contrast */ -.md-nav__link:hover { - background-color: var(--md-accent-bg-color); +/* === 7. MOBILE ADJUSTMENTS === */ +@media screen and (max-width: 76.25em) { + .hero-banner { + min-height: 70vh; + } + + body:not(.has-hero) .md-content__inner { + padding-top: 3.5rem !important; /* Smaller header on mobile */ + } } - - -} - - -