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.
omeka · Jan 8, 2025 · 980b9bd · 980b9bd
1 parent f7e168b
commit 980b9bd
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 88 deletions.
diff --git 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
@@ -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
@@ -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;