Header tweaks, guidelines link

public/style.css

@@ -8298,6 +8298,8 @@ header .hmn-logo {
   font-size: 1.6rem;
   padding: 0.6rem 0.8rem;
   line-height: 1;
+  display: flex;
+  align-items: center;
 }
 header .menu-chevron {
   display: inline-block;
@@ -8309,7 +8311,7 @@ header .avatar {
 }
 header .header-nav {
   position: absolute;
-  top: calc(100% + 1px);
+  top: calc(100% + var(--border-header));
   left: 0;
   width: 100%;
   background-color: var(--bg-header);
@@ -8323,7 +8325,7 @@ header .header-nav {
     width: auto;
     flex-direction: row;
     align-items: center;
-    background-color: none;
+    background-color: transparent;
   }
 }
 header .header-nav > a,
@@ -8379,13 +8381,20 @@ header .root-item:not(:hover):not(.clicked) .submenu {
 header .root-item.clicked .svgicon {
   transform: rotate(180deg);
 }
+header.mobile-open {
+  --bg-header: var(--c3) !important;
+  --border-header: 1px !important;
+}
+header.mobile-open .header-nav {
+  display: block;
+}
 header:not(.clicked) .root-item:not(:hover) > .submenu,
 header.clicked .root-item:not(.clicked) > .submenu {
   display: none;
 }
 .header-transparent header {
   --bg-header: rgba(0, 0, 0, 0.4);
-  --border-header: 0;
+  --border-header: 0px;
   --color: #fff;
 }
 

src/rawdata/scss/header.css

@@ -128,6 +128,8 @@ header {
     font-size: 1.6rem;
     padding: 0.6rem 0.8rem;
     line-height: 1;
+    display: flex;
+    align-items: center;
   }
 
   .menu-chevron {
@@ -143,7 +145,7 @@ header {
 
   .header-nav {
     position: absolute;
-    top: calc(100% + 1px);
+    top: calc(100% + var(--border-header));
     left: 0;
     width: 100%;
     background-color: var(--bg-header);
@@ -156,7 +158,7 @@ header {
       width: auto;
       flex-direction: row;
       align-items: center;
-      background-color: none;
+      background-color: transparent;
     }
 
     >a,
@@ -217,6 +219,19 @@ header {
     }
   }
 
+  &.mobile-open {
+    /*
+      A bit of a hack, but the transparency we use for the
+      header doesn't work great for an open menu.
+    */
+    --bg-header: var(--c3) !important;
+    --border-header: 1px !important;
+
+    .header-nav {
+      display: block;
+    }
+  }
+
   &:not(.clicked) .root-item:not(:hover),
   &.clicked .root-item:not(.clicked) {
     >.submenu {
@@ -228,7 +243,8 @@ header {
 .header-transparent {
   header {
     --bg-header: rgba(0, 0, 0, 0.4);
-    --border-header: 0;
+    /* The units are important; it makes `calc` work. */
+    --border-header: 0px;
     --color: #fff;
   }
 }

src/templates/src/include/header-2024.html

@@ -100,7 +100,6 @@ July 19-21, 2024.
 <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
         const header = document.querySelector("#site-header");
-        const headerNav = document.querySelector("#header_nav");
         const mobileMenuButton = document.querySelector("#mobile_menu");
         
         // set up dropdown stuff for mobile / touch
@@ -159,7 +158,7 @@ July 19-21, 2024.
         mobileMenuButton.addEventListener("click", e => {
             e.preventDefault();
             e.stopPropagation();
-            headerNav.classList.toggle("dn");
+            header.classList.toggle("mobile-open");
         });
     });
 </script>

src/templates/src/landing.html

@@ -134,7 +134,8 @@
 				</div>
 			{{ end }}
 			<div class="f7 tc link-normal">
-				<a href="{{ .ManifestoUrl }}">Manifesto</a> - <a href="{{ .AboutUrl }}">Our Team</a> - TODO: HISTORY
+				<!-- TODO(redesign): Add history link -->
+				<a href="{{ .ManifestoUrl }}">Manifesto</a> - <a href="{{ .AboutUrl }}">Our Team</a> - <a href="{{ .GuidelinesUrl }}">Guidelines</a>
 			</div>
 		</div>
 

src/website/landing.go

@@ -33,7 +33,7 @@ func Index(c *RequestContext) ResponseData {
 
 		ManifestoUrl   string
 		AboutUrl       string
-		PodcastUrl     string
+		GuidelinesUrl  string
 		AtomFeedUrl    string
 		MarkAllReadUrl string
 		NewProjectUrl  string
@@ -144,7 +144,7 @@ func Index(c *RequestContext) ResponseData {
 
 		ManifestoUrl:   hmnurl.BuildManifesto(),
 		AboutUrl:       hmnurl.BuildAbout(),
-		PodcastUrl:     hmnurl.BuildPodcast(),
+		GuidelinesUrl:  hmnurl.BuildCommunicationGuidelines(),
 		AtomFeedUrl:    hmnurl.BuildAtomFeed(),
 		MarkAllReadUrl: hmnurl.HMNProjectContext.BuildForumMarkRead(0),
 		NewProjectUrl:  hmnurl.BuildProjectNew(),