Improve mobile experience

hugo.toml

@@ -1,28 +1,29 @@
-baseURL = 'https://t4eq.org/'
-languageCode = 'en-us'
-title = 'T4EQ – Tech for Equality'
-theme = 'ananke'
-
-SectionPagesMenu = "main"
-googleAnalytics = ""
-enableRobotsTXT = true
-Paginate = 2
-
-[sitemap]
-changefreq = "monthly"
-priority = 0.5
-filename = "sitemap.xml"
-
-[params]
-text_color = "black"
-author = ""
-favicon = ""
-site_logo = "/images/logo/2026-03-26_T4EQ_Logo-Screen-negative.png"
-description = "The last theme you'll ever need. Maybe."
-body_classes = "avenir bg-near-white"
-fontWeight = "normal"
-# choose a background color from any on this page: https://tachyons.io/docs/themes/skins/ and preface it with "bg-"
-# background_color_class = "bg-dark-blue "
-recent_posts_number = 1
-heading_font = "serif"
-canonicalURL = 'https://t4eq.org/'
+baseURL = 'https://t4eq.org/'
+languageCode = 'en-us'
+title = 'T4EQ – Tech for Equality'
+theme = 'ananke'
+
+SectionPagesMenu = "main"
+googleAnalytics = ""
+enableRobotsTXT = true
+Paginate = 2
+
+[sitemap]
+changefreq = "monthly"
+priority = 0.5
+filename = "sitemap.xml"
+
+[params]
+text_color = "black"
+author = ""
+favicon = ""
+site_logo = "/images/logo/2026-03-26_T4EQ_Logo-Screen-negative.png"
+description = "The last theme you'll ever need. Maybe."
+body_classes = "avenir bg-near-white"
+fontWeight = "normal"
+# choose a background color from any on this page: https://tachyons.io/docs/themes/skins/ and preface it with "bg-"
+# background_color_class = "bg-dark-blue "
+recent_posts_number = 1
+heading_font = "serif"
+canonicalURL = 'https://t4eq.org/'
+custom_css = ["ananke/css/custom.css"]

layouts/partials/site-navigation.html

@@ -0,0 +1,19 @@
+<nav class="flex justify-between items-center pv3 ph3">
+  <!-- Logo -->
+  <a href="/">
+    <img src="/images/logo/2026-03-26_T4EQ_Logo-Screen-negative.png" alt="Logo">
+  </a>
+
+  <!-- The Toggle -->
+  <input type="checkbox" id="menu-toggle" class="dn">
+  <label for="menu-toggle" class="dn-l pointer">☰</label>
+
+  <!-- The Links -->
+  <ul class="list pa0 ma0 nav-menu">
+    {{ range .Site.Menus.main }}
+      <li class="dib-l ml3-l">
+        <a class="white-90 hover-white" href="{{ .URL }}">{{ .Name }}</a>
+      </li>
+    {{ end }}
+  </ul>
+</nav>

static/ananke/css/custom.css

@@ -0,0 +1,108 @@
+/* ============================================================
+   1. DESKTOP STYLES
+   ============================================================ */
+
+header img {
+    height: 130px !important; 
+    width: auto !important;
+}
+
+header nav.flex-l {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    padding-right: 40px !important; 
+}
+
+header .nav-menu {
+    display: flex !important;
+    list-style: none !important;
+}
+
+header .nav-menu li {
+    margin-left: 0.8rem !important; 
+}
+
+header .nav-menu li a {
+    font-size: 1.4rem !important;
+    text-decoration: none !important;
+    border-bottom: none !important;
+}
+
+article p, .nested-copy-line-height p {
+    font-size: 1.15rem !important; 
+    line-height: 1.6 !important;
+}
+
+header h2.fw1 {
+    font-size: 1.5rem !important;
+}
+
+.nested-links a, .f6, section.bt a {
+    font-size: 1.1rem !important; 
+    text-decoration: none !important;
+}
+
+/* ============================================================
+   2. MOBILE STYLES (Under 600px)
+   ============================================================ */
+@media screen and (max-width: 900px) {
+
+    /* HIDE THE TITLE */
+    header h1.f2, header h1.f1-l, header h1.f2-m, 
+    header .f2.athelas, header .white-70.athelas {
+        display: none !important;
+    }
+
+    /* LOGO LEFT ALIGNED */
+    header img {
+        height: 110px !important; 
+        margin-left: -23px !important; 
+        padding-left: 1rem !important; 
+        display: block !important;
+    }
+
+    /* SUBTITLE - Balanced size */
+    header h2.fw1 {
+        display: block !important;
+        text-align: left !important;
+        padding-left: 1rem !important;
+        margin-top: 4rem !important;
+        font-size: 1.4rem !important; 
+        line-height: 1.3 !important;
+    }
+
+    /* HAMBURGER - Reduced to 1.8rem and White */
+    label[for="menu-toggle"] {
+        display: block !important;
+        position: absolute !important;
+        top: 38px !important; 
+        right: 1.5rem !important;
+        font-size: 1.8rem !important; /* Reduced from 2.5rem */
+        color: #ffffff !important;   
+        z-index: 9999 !important;
+        cursor: pointer;
+    }
+
+    header .nav-menu {
+        display: none !important; 
+        flex-direction: column;
+        background: black;
+        position: absolute;
+        top: 110px;
+        left: 0;
+        width: 100%;
+        z-index: 998;
+    }
+
+    #menu-toggle:checked ~ .nav-menu {
+        display: flex !important;
+    }
+
+    header .nav-menu li a {
+        padding: 15px 1rem !important;
+        font-size: 1.2rem !important;
+        display: block !important;
+        color: #ffffff !important;
+    }
+}