Make light mode prettier

themes/conspiracy/assets/css/style.css

@@ -16,6 +16,8 @@ html {
     --c-bg-secondary:       #ff9449;
 
     --shadow-opacity: 0.8;
+
+    --default-border: 0.5px dotted rgba(255, 255, 255, 0.3);
 }
 
 @font-face {
@@ -72,16 +74,6 @@ strong {
     font-style: italic;
 }
 
-nav {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    background-color: var(--c-bg-front);
-    box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity));
-    padding: 0 10px 0 10px;
-}
-
 a:hover, a:visited, a:active, a:link {
     color: var(--c-fg-secondary);
     text-decoration: none;
@@ -92,20 +84,36 @@ a:hover {
     color: var(--c-text);
 }
 
-nav > a:link, nav > a:active, nav > a:visited, nav > a:hover {
+nav {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    background-color: var(--c-bg-front);
+    box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity));
+    padding: 0 10px 0 10px;
+    justify-content: space-between;
+}
+
+nav > div {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    border-top: var(--default-border);
+    margin-top: -1px;
+}
+
+nav a:link, nav a:active, nav a:visited, nav a:hover {
     flex-grow: 1;
+    text-align: center;
     color: inherit;
     padding: 10px 10px 10px 10px;
 }
 
-nav > a:hover {
+nav a:hover {
     background: var(--c-bg-primary);
 }
 
-nav > .spacer {
-    flex-grow: 100;
-}
-
 .breadcrumbs {
     max-width: 40em;
     text-align: center;
@@ -136,13 +144,6 @@ main {
     hyphens: auto;
 }
 
-@media (max-width: 30em) {
-    main {
-        padding-left: 20px;
-        padding-right: 20px;
-    }
-}
-
 main > .intro {
     margin-top: 40px;
 }
@@ -238,7 +239,7 @@ main.cards {
 .card > .links {
     margin-left: -20px;
     margin-bottom: -30px;
-    border-top: 0.5px dotted rgba(255, 255, 255, 0.3);
+    border-top: var(--default-border);
     margin-top: 20px;
     width: calc(100% + 40px);
     display: flex;
@@ -254,7 +255,7 @@ main.cards {
 
 main > .links {
     margin: 20px 0px 40px 0px;
-    border: 0.5px dotted rgba(255, 255, 255, 0.3);
+    border: var(--default-border);
     border-left: none;
     border-right: none;
     width: calc(100%);
@@ -475,6 +476,17 @@ body .s1  { color: var(--c-text); font-weight: 600 } /* Literal.String.Single */
 body .ss  { color: var(--c-text); font-weight: 600 } /* Literal.String.Symbol */
 body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.Long */
 
+@media (max-width: 40em) {
+    nav > div {
+        flex-grow: 1;
+    }
+
+    main {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
 @media print, (prefers-color-scheme: light) {
     html {
         --c-bg-backdrop:        hsl(220, 10%, 90%);
@@ -493,13 +505,15 @@ body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
         --c-bg-secondary:       hsl(319, 98%, 52%);
 
         --shadow-opacity: 0.2;
+
+        --default-border: 0.5px dotted hsla(220, 10%, 30%, 50%);
     }
 
     body > header > h1 {
         filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
     }
 
-    a:hover, nav > a:hover {
+    a:hover, nav a:hover {
         color: var(--c-text-inverted);
     }
     

themes/conspiracy/layouts/partials/header.html

@@ -1,4 +1,5 @@
 <nav>
+    <div class="internal">
         {{- $currentPage := . }}
         <!-- todo: put this in a "pages" drop down on mobile -->
         {{- range site.Menus.main }}
@@ -10,8 +11,10 @@
             {{ .Post -}}
         </a>
         {{- end }}
-    <span class="spacer"></span>
+    </div>
+    <div class="external">
         {{- range site.Params.profile_links }}
         <a href="{{ .url | absURL }}" title="{{ .name }}">{{ .name }}</a>
         {{- end }}
+    </span>
 </nav>