secondary nav, group links in narrow view

1 files changed, 24 insertions, 8 deletions

diff --git a/src/static/site.css b/src/static/site.css
index 2dc6c6da..3ee02b07 100644
--- a/src/static/site.css
+++ b/src/static/site.css
@@ -106,12 +106,12 @@ a:hover {
     display: flex;
 }
 
-#header, #skippers, #footer {
+#header, #secondary-nav, #skippers, #footer {
     padding: 5px;
     font-size: 0.85em;
 }
 
-#header, #skippers {
+#header, #secondary-nav, #skippers {
     margin-bottom: 10px;
 }
 
@@ -133,11 +133,6 @@ a:hover {
     font-weight: 800;
 }
 
-#header > h2.dot-between-spans > span:not(:last-child)::after {
-    content: " \00b7 ";
-    font-weight: 800;
-}
-
 #header > h2 > span {
     white-space: nowrap;
 }
@@ -151,6 +146,15 @@ a:hover {
     font-weight: 800;
 }
 
+.dot-between-spans > span:not(:last-child)::after {
+    content: " \00b7 ";
+    font-weight: 800;
+}
+
+.dot-between-spans > span {
+    white-space: nowrap;
+}
+
 #header .chronology {
     display: inline-block;
 }
@@ -160,6 +164,14 @@ a:hover {
     display: inline-block;
 }
 
+#secondary-nav {
+    text-align: center;
+}
+
+#secondary-nav:not(.no-hide) {
+    display: none;
+}
+
 footer {
     text-align: center;
     font-style: oblique;
@@ -225,7 +237,7 @@ footer > :last-child {
     font-size: 1em;
 }
 
-.sidebar, #content, #header, #skippers, #footer {
+.sidebar, #content, #header, #secondary-nav, #skippers, #footer {
     background-color: rgba(0, 0, 0, 0.6);
     border: 1px dotted var(--primary-color);
     border-radius: 3px;
@@ -923,6 +935,10 @@ li > ul {
         display: none;
     }
 
+    #secondary-nav:not(.no-hide) {
+        display: block;
+    }
+
     .layout-columns.vertical-when-thin {
         flex-direction: column;
     }