Fix narrow description/content width

src/site/_assets/css/main.css

@@ -9,18 +9,18 @@
   }
 
     /* -------------------- Main navigation -------------------- */
-    nav li a{
+    nav > ul > li > a{
       @apply relative
     }
 
-    nav li a:after{
+    nav > ul > li > a:after{
       content: '';
       transition: width .6s cubic-bezier(0.075, 0.82, 0.165, 1);
       @apply absolute -bottom-2 left-0 h-1 w-0 bg-savjeered dark:bg-savjeered-darkmode
     }
 
-    nav li a:hover:after, 
-    nav li a.active:after{
+    nav > ul > li > a:hover:after,
+    nav > ul > li > a.active:after{
       @apply w-5
     }
 

src/site/_assets/js/all.js

@@ -1,4 +1,5 @@
 import "./static-youtube-embed.js"
 import "./disqus-comments.js"
 import "./responsive-navigation.js"
-import "instant.page"
+import "instant.page"
+import "./more-menu.js"

src/site/_assets/js/more-menu.js

@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const menu = document.querySelector('#more-menu');
+    if (!menu) return;
+
+    document.addEventListener('click', (event) => {
+        if (!menu.open) return;
+        if (!menu.contains(event.target)) {
+            menu.open = false;
+        }
+    });
+
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+            menu.open = false;
+        }
+    });
+
+    menu.querySelectorAll('[data-more-menu-link]').forEach((link) => {
+        link.addEventListener('click', () => {
+            menu.open = false;
+        });
+    });
+});

src/site/_includes/layouts/default.html

@@ -108,15 +108,22 @@
                         Blog
                     </a>
                 </li>
-                <li>
-                    <a href="/trivia/" class="text-savjeered dark:text-savjeered-darkmode font-bold no-underline {% if page.url contains "/trivia/" -%}active{%endif%}">
-                        Trivia
-                    </a>
-                </li>
-                <li>
-                    <a href="/courses/" class="text-savjeered dark:text-savjeered-darkmode font-bold no-underline {% if page.url contains "/courses/" -%}active{%endif%}">
-                        Courses
-                    </a>
+                <li class="relative">
+                    <details id="more-menu" class="group relative" {% if page.url contains "/courses/" or page.url contains "/trivia/" or page.url contains "/about/" or page.url contains "/talks/" %}open{% endif %}>
+                        <summary class="list-none cursor-pointer select-none text-savjeered dark:text-savjeered-darkmode font-bold no-underline hover:no-underline inline-flex items-center gap-1">
+                            More
+                            <span class="text-xs transition-transform duration-200 group-open:rotate-180">▾</span>
+                        </summary>
+                        <ul class="mt-3 md:absolute md:right-0 md:top-full md:mt-3 md:min-w-52 rounded-xl border border-savjeelightgrey dark:border-savjeeblue bg-white dark:bg-savjeeblack shadow-xl p-2 z-50 overflow-hidden md:origin-top-right md:opacity-0 md:translate-y-1 md:pointer-events-none group-open:md:opacity-100 group-open:md:translate-y-0 group-open:md:pointer-events-auto transition-all duration-150 ease-out">
+                            <li class="bg-white dark:bg-savjeeblack">
+                                <a data-more-menu-link href="/trivia/" class="block rounded-lg px-3 py-2 no-underline hover:no-underline bg-white dark:bg-savjeeblack text-savjeered dark:text-savjeered-darkmode font-semibold hover:bg-savjeelightgrey5 dark:hover:bg-savjeeblue/20 {% if page.url contains "/trivia/" -%}bg-savjeelightgrey5 dark:bg-savjeeblue/20{%endif%}">Trivia</a>
+                            </li>
+                            <li class="bg-white dark:bg-savjeeblack">
+                                <a data-more-menu-link href="/courses/" class="block rounded-lg px-3 py-2 no-underline hover:no-underline bg-white dark:bg-savjeeblack text-savjeered dark:text-savjeered-darkmode font-semibold hover:bg-savjeelightgrey5 dark:hover:bg-savjeeblue/20 {% if page.url contains "/courses/" -%}bg-savjeelightgrey5 dark:bg-savjeeblue/20{%endif%}">Courses</a>
+                            </li>
+                            {% comment %}Future entries for this menu: /talks/ and /about/{% endcomment %}
+                        </ul>
+                    </details>
                 </li>
             </ul>
         </nav>

src/site/_includes/layouts/narrow.html

@@ -2,6 +2,6 @@
 layout: default
 ---
 
-<div class="max-w-3xl mx-auto mt-10">
+<div class="max-w-4xl mx-auto mt-10 px-4">
     {{ content }}
 </div>