big customization chances such as hero banner isntallation

docs/index.md

@@ -4,12 +4,25 @@ hide:
   - navigation
   - toc
 ---
-
-# We don’t accept our reality but seek to alter it.
-
-**The clock is ticking. The systems we rely on are not solving the world's most critical problems fast enough. We need a new engine for change.**
-
-**0_timeline is that engine. A place to build what matters.**
+<div class="hero-banner">
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+  <h1> BING! YOU ARRIVED AT 0_TIMELINE
+  <h2>Here we don’t accept our reality but seek to alter it.</h1>
+  <p>The clock is ticking. The systems we rely on are not solving the world's most critical problems fast enough. We need a new engine for change.</p>
+  <p>0_timeline is that engine. A place to build a better reality.</p>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+</div>
 
 ---
 
@@ -26,7 +39,6 @@ What if we could change mindsets by changing toolsets? This is the **Smartup Hyp
 It defines a new model for building technology—one based on radical transparency and collective power.
 
 !!! abstract "The Smartup Model"
-
     A Smartup is a mission-driven company built on three pillars:
 
     *   **Co-Ownership:** 1 person = 1 vote. Democratic control.
@@ -39,7 +51,7 @@ It defines a new model for building technology—one based on radical transparen
 
 A hypothesis must be tested. **Smartup Zero is that test.** It is the first Smartup, Patient Zero, created to prove this model can work.
 
-Our mission is to build **ONLIFE**: a decentralized emergency communication network that works when all others fail. A tool built for resilience, not for profit.
+Our mission is to build **ONLIFE**: a decentralized emergency communication network that works when all others fail. A tool for resilience, not for profit.
 
 ### Your Role: You Are The Supply Side
 

docs/javascripts/extra.js

@@ -0,0 +1,53 @@
+document$.subscribe(function () {
+  const hero = document.querySelector(".hero-banner");
+  const header = document.querySelector(".md-header");
+  const sidebarLeft = document.querySelector(".md-sidebar--primary");
+  const sidebarRight = document.querySelector(".md-sidebar--secondary");
+
+  if (!hero || !header) return;
+
+  // Reveal hero banner
+  requestAnimationFrame(() => {
+    hero.style.opacity = 1;
+  });
+
+  // Scroll logic
+  function updateUI() {
+    const heroBottom = hero.getBoundingClientRect().bottom;
+
+    const hasScrolledPastHero = heroBottom <= 0;
+
+    // Update header
+    if (hasScrolledPastHero) {
+      header.classList.add("scrolled");
+    } else {
+      header.classList.remove("scrolled");
+    }
+
+    // Handle sidebar visibility (only on wide screens)
+    if (window.matchMedia("(min-width: 76.25em)").matches) {
+      const show = hasScrolledPastHero;
+
+      [sidebarLeft, sidebarRight].forEach((sidebar) => {
+        if (!sidebar) return;
+
+        if (show) {
+          sidebar.style.display = "block";
+          requestAnimationFrame(() => {
+            sidebar.style.opacity = "1";
+          });
+        } else {
+          sidebar.style.opacity = "0";
+          setTimeout(() => {
+            sidebar.style.display = "none";
+          }, 300);
+        }
+      });
+    }
+  }
+
+  // Initial and on scroll
+  window.addEventListener("scroll", updateUI);
+  updateUI(); // Initial run
+});
+

docs/stylesheets/extra.css

@@ -0,0 +1,111 @@
+/* === 1. HEADER: Starts transparent, turns indigo later === */
+.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;
+}
+
+/* Transparent before scroll */
+.md-header:not(.scrolled) {
+  background-color: rgba(0, 0, 0, 0.01) !important;
+
+}
+
+/* After scroll past hero */
+.md-header.scrolled {
+  background-color: var(--md-primary-fg-color);
+  box-shadow: var(--md-shadow-z2);
+}
+
+/* === 2. HERO BANNER === */
+.hero-banner {
+  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);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  min-height: 100vh;
+  padding: 6rem 2rem 2rem;
+  box-sizing: border-box;
+
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+  position: relative;
+  z-index: 0; /* Ensure it's underneath the header */
+}
+
+/* === 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 {
+  color: white !important;
+  fill: white !important;
+  transition: color 0.3s ease, fill 0.3s ease;
+}
+
+.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 {
+  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 */
+}
+
+
+/* === Sidebar Fade (desktop only) === */
+@media screen and (min-width: 76.25em) {
+  .md-sidebar--primary {
+    transition: opacity 0.3s ease;
+  }
+
+/* === Ensure sidebar menu text matches theme mode === */
+.md-sidebar__inner,
+.md-nav__title,
+.md-nav__link {
+  color: var(--md-typeset-color) !important;
+  background-color: var(--md-default-bg-color);
+  transition: color 0.3s ease, background-color 0.3s ease;
+}
+
+/* Optional: add better hover contrast */
+.md-nav__link:hover {
+  background-color: var(--md-accent-bg-color);
+}
+
+
+}
+
+
+

mkdocs.yml

@@ -1,18 +1,58 @@
-
 site_name: 0_timeline
 site_description: Building technology for the common good
 site_url: https://0_timeline.org
 
+extra_css:
+  - stylesheets/extra.css
+
+extra_javascript:
+  - javascripts/extra.js
+
 theme:
   name: material
+  custom_dir: overrides
   features:
     - navigation.instant
     - navigation.sections
     - navigation.expand
-    - content.hero 
+    - content.hero
+    - toggle
+  logo: assets/smartup icon white.png
+  favicon: assets/flavicon.png
   palette:
-    scheme: default
-    primary: indigo
+    - scheme: default
+      primary: amber
+      accent: lime
+      toggle:
+        icon: material/brightness-4
+        name: Switch to dark mode
+    - scheme: slate
+      primary: amber
+      accent: lime
+      toggle:
+        icon: material/brightness-7
+        name: Switch to light mode
+
+markdown_extensions:
+  - admonition
+  - pymdownx.details
+  - pymdownx.superfences
+  - attr_list
+  - md_in_html
+  - footnotes
+  - def_list
+  - pymdownx.tabbed:
+      alternate_style: true
+  - pymdownx.emoji:
+      emoji_index: !!python/name:materialx.emoji.twemoji
+      emoji_generator: !!python/name:materialx.emoji.to_svg
+  - pymdownx.highlight
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.keys
+  - pymdownx.mark
+  - pymdownx.blocks.caption
+
 
 nav:
   - Home: index.md
@@ -33,4 +73,5 @@ plugins:
   - search
   - awesome-pages
   - git-revision-date
+  - glightbox
 

overrides/partials/hero.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block hero %}
+<div class="hero-banner">
+  <h1>Welcome to Smartup Zero</h1>
+  <p>Your journey starts here.</p>
+</div>
+{{ super() }}
+{% endblock %}