added hamburger menu

theme/static/css/custom.css

@@ -20,7 +20,7 @@
 }
 
 /*
- * Modified Pico settings 
+ * Modified Pico settings (standard Pico) 
  */
 :root {
   --pico-font-family-sans-serif: LinBiolinum, system-ui, "Segoe UI", Roboto,
@@ -35,30 +35,84 @@ a {
   --pico-text-decoration: none;
 }
 
-#sun-moon {
+
-  background-color: var(--pico-primary);
+/* 
+ * Override breakpoint settings for hamburger menu (overrides Yohn's Pico fork
+ */
+@media (max-width: 767px) {
+  nav[role=navigation][data-breakpoint=my-md] {
+    flex-wrap: wrap;
+    overflow: hidden;
+  }
+
+  nav[role=navigation][data-breakpoint=my-md]:has(input[type=checkbox]:checked) {
+    overflow: visible;
+  }
+
+  nav[role=navigation][data-breakpoint=my-md] label {
+    display: block;
+  }
+
+  nav[role=navigation][data-breakpoint=my-md]>[role=list] {
+    display: none;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 90vw;
+    max-height: 0;
+    margin: 0 auto;
+    background-color: var(--pico-muted-border-color);
+    box-shadow: var(--pico-box-shadow);
+    opacity: 0;
+    transition: max-height var(--pico-transition), opacity var(--pico-transition);
+  }
+
+  nav[role=navigation][data-breakpoint=my-md]>[role=list] li {
+    width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
+    margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
+    padding: 0;
+  }
+
+  nav[role=navigation][data-breakpoint=my-md]>[role=list] li>details.dropdown {
+    width: 100%;
+  }
+
+  nav[role=navigation][data-breakpoint=my-md]>[role=list] li>form[role=search] {
+    margin-block-end: 0;
+  }
+
+  nav[role=navigation][data-breakpoint=my-md]>[role=list] a {
+    display: block;
+    margin: 0;
+    border-radius: 0;
+    border-block-end: 1px solid transparent;
+    transition: border-color var(--pico-transition), color var(--pico-transition);
+  }
+
+  nav[role=navigation][data-breakpoint=my-md]>[role=list] a:hover {
+    border-bottom-color: var(--pico-underline);
+    text-decoration: none;
+  }
+
+  nav[role=navigation][data-breakpoint=my-md] input[type=checkbox]:checked~[role=list] {
+    display: block;
+    max-height: 100vh;
+    opacity: 1;
+  }
 }
 
-/* #sun-moon:not(:checked)::before {
-  background-color: var(--pico-color);
-}
-
-#sun-moon:not([aria-invalid]) {
-  border-color: var(--pico-primary-background);
-} */
 
 /*
  * Settings specific to breakpoints
  */
 @media (min-width: 576px) {
   .card {
-    max-width: calc(50% - var(--pico-block-spacing-horizontal));
+    max-width: calc(50% - var(--pico-block-spacing-horizontal) / 2);
   }
 }
 
 @media (min-width: 1024px) {
   .card {
-    max-width: calc(33% - var(--pico-block-spacing-horizontal));
+    max-width: calc(33% - var(--pico-block-spacing-horizontal) * 2 / 3);
   }
 }
 
@@ -70,7 +124,7 @@ a {
 
 @media screen and (min-width: 1536px) {
   .card {
-    max-width: calc(25% - var(--pico-block-spacing-horizontal));
+    max-width: calc(25% - var(--pico-block-spacing-horizontal) * 3 / 4);
   }
 
   .container {
@@ -149,24 +203,35 @@ a {
 }
 
 /* Navbar */
-#site-navar {
+#site-navbar {
-  padding-left: 0;
+  ul {
-  padding-right: 0;
+    /*  box-shadow: var(--pico-card-box-shadow); */
-}
+    margin-left: 0;
+    margin-right: 0;
 
-#site-navbar ul {
+    li:last-child {
-  /*  box-shadow: var(--pico-card-box-shadow); */
+      padding-right: 0;
-  margin-left: 0;
+    }
-  margin-right: 0;
+  }
 
-  li:last-child {
+  a {
-    padding-right: 0;
+    font-size: calc(var(--pico-font-size) * 0.9);
+    font-weight: bold;
+    text-align: right;
   }
 }
 
-#site-navbar a {
+#hamburger-label {
-  font-size: calc(var(--pico-font-size) * 0.9);
+  font-size: calc(var(--pico-font-size) * 2);
-  font-weight: bold;
+}
+
+#sun-moon {
+  background-color: var(--pico-primary);
+}
+
+#sun-moon-label {
+  margin-left: auto;
+  margin-right: 0;
 }
 
 /* Main content */
@@ -183,7 +248,8 @@ a {
   flex-flow: row wrap;
   list-style-type: none;
   padding-left: inherit;
-  column-gap: var(--pico-block-spacing-horizontal);
+  justify-content: space-between;
+  /*   column-gap: var(--pico-block-spacing-horizontal); */
 }
 
 .card {

theme/templates/includes/jumbotron.html

@@ -3,6 +3,4 @@
     <h1><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
   </div>
 </div>
-<div class="container" id="jumbotron-subtitle">
+<div class="container" id="jumbotron-subtitle">{% include "includes/navbar.html" %}</div>
-  <nav id="site-navbar">{% include "includes/navbar.html" %}</nav>
-</div>

theme/templates/includes/navbar.html

@@ -1,20 +1,26 @@
-<ul>
+<nav role="navigation" data-breakpoint="my-md" id="site-navbar">
-  <h2>{{ SITESUBTITLE }}</h2>
+  <ul>
-</ul>
+    <h2>{{ SITESUBTITLE }}</h2>
-<ul>
+  </ul>
-  {% for title, link in MENUITEMS %}
+  <input type="checkbox" id="hamburger">
-  {% if link == url %}
+  <label id="hamburger-label" for="hamburger" aria-label="Menu" aria-controls="main-menu-items">
-  <li aria-current="page">
+    &equiv;
-    {% else %}
+  </label>
-  <li>
+  <ul id="main-menu-items" role="list">
-    {% endif %}
+    {% for title, link in MENUITEMS %}
-    <a href="{{ link }}">{{ title }}</a>
+    {% if link == url %}
-  </li>
+    <li aria-current="page" role="listitem">
-  {% endfor %}
+      {% else %}
-  <li>
+    <li role="listitem">
-    <label>
+      {% endif %}
-      <input id="sun-moon" name="color-mode-toggle" role="switch" type="checkbox" value="1"
+      <a href="{{ link }}">{{ title }}</a>
-        aria-label="Toggle Light or Dark Mode">
+    </li>
-    </label>
+    {% endfor %}
-  </li>
+    <li role="listitem">
-</ul>
+      <label id="sun-moon-label">
+        <input id="sun-moon" name="color-mode-toggle" role="switch" type="checkbox" value="1"
+          aria-label="Toggle Light or Dark Mode">
+      </label>
+    </li>
+  </ul>
+</nav>