From 980b9bd262b39c642365ecb144d5f4c6f61613de Mon Sep 17 00:00:00 2001
From: Kim Nguyen <design@kimisgold.com>
Date: Wed, 8 Jan 2025 11:26:31 -0500
Subject: [PATCH] Reorganize secondary nav styles.

Previously the new pill-style secondary nav links only displayed that
way on desktop. They're now on all resolutions. Also made the tag inline
display style more specific, as it was overreaching into the
secondary nav.
---
 css/sass/_screen.scss     | 47 ++++++++++++++++++++-----
 css/sass/_screen_768.scss | 37 --------------------
 css/style.css             | 72 ++++++++++++++++-----------------------
 3 files changed, 68 insertions(+), 88 deletions(-)

diff --git a/css/sass/_screen.scss b/css/sass/_screen.scss
index d8eca0f..bd9adb0 100644
--- a/css/sass/_screen.scss
+++ b/css/sass/_screen.scss
@@ -840,22 +840,51 @@ ul.navigation { padding-left: 0; }
     }
 }
 
-.secondary-nav ul, #secondary-nav ul { margin: 0; }
+.secondary-nav {
+    border-bottom: 1px solid #ccc;
+    font-size:1.125em;
+    padding-bottom: $spacing-unit;
+    margin-top: -.5 * $spacing-unit;
 
-.secondary-nav li, #secondary-nav li {
-    display: inline-block;
-    margin: 0 10px 0 0;
-    padding: 0;
-    list-style-type: none;
-    font-size: .875 * $base-font-size;
+    a {
+        padding: 0.5em 1em 0.5em;
+        color: #666;
+        border-bottom: 0;
+    }
 
-    &:last-of-type { border-bottom: 0; }
+    ul { margin: 0 0 -1px 0; }
+
+    li {
+        display: inline-block;
+        padding: 0;
+        background-color: $gray;
+        margin: 0 10px 0 0;
+        border-radius: $spacing-unit;
+        list-style-type: none;
+        font-size: .875 * $base-font-size;
+    }
+
+    .active {
+        border-bottom-color: #fff;
+    }
 
     a {
         border-bottom: 0;
         padding: (.25 * $spacing-unit) (.5 * $spacing-unit);
         display: inline-block;
     }
+
+    .current a {
+        background:#fff;
+        color:#333;
+        font-weight:bold;
+        border: {
+            color: #ccc;
+            width: 1px;
+            style: solid;
+            bottom: { color: #fff; };
+        }
+    }
 }
 
 .pagination {
@@ -1360,7 +1389,7 @@ nav.pagination:nth-of-type(3) ul, #content > .pagination:nth-of-type(2) {
     .element { margin-bottom: 20px; }
 }
 
-.tags li { display:inline; }
+.hTagcloud li { display:inline; }
 
 #item-content img {padding:5px; border:1px solid #ccc; margin-bottom:2em;}
 
diff --git a/css/sass/_screen_768.scss b/css/sass/_screen_768.scss
index 892a6c4..75bf6cb 100644
--- a/css/sass/_screen_768.scss
+++ b/css/sass/_screen_768.scss
@@ -76,43 +76,6 @@ header {
     margin-bottom: $spacing-unit;
 }
 
-.secondary-nav, #secondary-nav {
-    border-bottom:1px solid #ccc;
-    font-size:1.125em;
-    padding-bottom: $spacing-unit;
-
-    a {
-        padding: 0.5em 1em 0.5em;
-        color: #666;
-        border-bottom: 0;
-    }
-
-    ul { margin: 0 0 -1px 0; }
-
-    li {
-        display: inline-block;
-        padding: 0;
-        background-color: $gray;
-        border-radius: $spacing-unit;
-    }
-
-    .active {
-        border-bottom-color: #fff;
-    }
-
-    .current a {
-        background:#fff;
-        color:#333;
-        font-weight:bold;
-        border: {
-            color: #ccc;
-            width: 1px;
-            style: solid;
-            bottom: { color: #fff; };
-        }
-    }
-}
-
 /* ----- Home ----- */
 
 #home #featured-records {
diff --git a/css/style.css b/css/style.css
index b05185d..e71d299 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1321,26 +1321,46 @@ select[multiple] {
   }
 }
 @media screen {
-  .secondary-nav ul, #secondary-nav ul {
-    margin: 0;
+  .secondary-nav {
+    border-bottom: 1px solid #ccc;
+    font-size: 1.125em;
+    padding-bottom: 24px;
+    margin-top: -12px;
   }
-}
-@media screen {
-  .secondary-nav li, #secondary-nav li {
+  .secondary-nav a {
+    padding: 0.5em 1em 0.5em;
+    color: #666;
+    border-bottom: 0;
+  }
+  .secondary-nav ul {
+    margin: 0 0 -1px 0;
+  }
+  .secondary-nav li {
     display: inline-block;
-    margin: 0 10px 0 0;
     padding: 0;
+    background-color: #f7f7f7;
+    margin: 0 10px 0 0;
+    border-radius: 24px;
     list-style-type: none;
     font-size: 14px;
   }
-  .secondary-nav li:last-of-type, #secondary-nav li:last-of-type {
-    border-bottom: 0;
+  .secondary-nav .active {
+    border-bottom-color: #fff;
   }
-  .secondary-nav li a, #secondary-nav li a {
+  .secondary-nav a {
     border-bottom: 0;
     padding: 6px 12px;
     display: inline-block;
   }
+  .secondary-nav .current a {
+    background: #fff;
+    color: #333;
+    font-weight: bold;
+    border-color: #ccc;
+    border-width: 1px;
+    border-style: solid;
+    border-bottom-color: #fff;
+  }
 }
 @media screen {
   .pagination {
@@ -1854,7 +1874,7 @@ select[multiple] {
   }
 }
 @media screen {
-  .tags li {
+  .hTagcloud li {
     display: inline;
   }
 }
@@ -2211,38 +2231,6 @@ input[type=button],
     margin-bottom: 24px;
   }
 
-  .secondary-nav, #secondary-nav {
-    border-bottom: 1px solid #ccc;
-    font-size: 1.125em;
-    padding-bottom: 24px;
-  }
-  .secondary-nav a, #secondary-nav a {
-    padding: 0.5em 1em 0.5em;
-    color: #666;
-    border-bottom: 0;
-  }
-  .secondary-nav ul, #secondary-nav ul {
-    margin: 0 0 -1px 0;
-  }
-  .secondary-nav li, #secondary-nav li {
-    display: inline-block;
-    padding: 0;
-    background-color: #f7f7f7;
-    border-radius: 24px;
-  }
-  .secondary-nav .active, #secondary-nav .active {
-    border-bottom-color: #fff;
-  }
-  .secondary-nav .current a, #secondary-nav .current a {
-    background: #fff;
-    color: #333;
-    font-weight: bold;
-    border-color: #ccc;
-    border-width: 1px;
-    border-style: solid;
-    border-bottom-color: #fff;
-  }
-
   /* ----- Home ----- */
   #home #featured-records {
     display: flex;