Use Copperplate as the primary display font to match coming logo

Top menu takes up the entire width of the context box using CSS flex layout Adjust metadata infobox positioning to avoid thumbnails being cut off.
charvolant · Jan 5, 2019 · 34a5e73 · 34a5e73
1 parent 479d5cf
commit 34a5e73
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 27 deletions.
diff --git a/css/sass/_base.scss b/css/sass/_base.scss
@@ -3,8 +3,8 @@
 $base-font-size: 12px;
 $base-line-height: 18px;
 
-$title-stack: 'Playfair Display', "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
-$header-stack: 'Playfair Display SC','Playfair Display', "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
+$title-stack: 'Copperplate', 'Playfair Display', "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
+$header-stack: 'Copperplate', 'Playfair Display', "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
 $minor-header-stack: Raleway, Verdana, sans-serif;
 $base-font-stack: Raleway, Verdana, sans-serif;
 $monospace-stack: 'Courier New',Courier,'Lucida Sans Typewriter','Lucida Typewriter',monospace;

diff --git a/css/sass/_screen.scss b/css/sass/_screen.scss
@@ -173,9 +173,9 @@ header {
     width: 50%;
     font-weight: 700;
     font-family: $title-stack;
-    letter-spacing: -.1ex;
+    font-variant: small-caps;
+    letter-spacing: .1ex;
     color: $light-border;
-    text-transform: uppercase;
     font-size: 5 * $base-font-size;
     line-height: 90%;
     position: relative;
@@ -359,14 +359,17 @@ header {
     clear: both;
     @include container;
     z-index: 50;
+    border: 1px solid $light-border;
+    background-color: $light-background;
 
     /* mega menu list */
     .nav-menu {
-        display: block;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
         position: relative;
+        width: 100%;
         list-style: none;
-        margin: 0 0 0 -1px;
-        padding: 0 0 0 1px;
         z-index: 15;
     }
 
@@ -391,18 +394,13 @@ header {
         float: left;
         position: relative;
         overflow: visible;
-
-        &:first-child > a {
-            border-left: 1px solid $light-border;
-        }
     }
 
     /* first descendant link within a top level navigation item */
     .nav-item > a {
         position: relative;
         display: inline-block;
         margin: 0 0 -1px 0;
-        border: 1px solid $light-border;
     }
 
     .nav-item:not(:first-child) > a {
@@ -489,7 +487,6 @@ header {
         text-decoration: none;
         display: block;
         padding: rhythm(.5) 18px;
-        background: $light-background;
     }
 
     a:hover,

diff --git a/css/style.css b/css/style.css
@@ -428,7 +428,7 @@ h1, h2, h3, h4, h5, h6 {
 
 h1, h2, h3 {
   color: #103cb1;
-  font-family: "Playfair Display SC", "Playfair Display", "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
+  font-family: "Copperplate", "Playfair Display", "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
   font-weight: 400;
 }
 
@@ -611,10 +611,10 @@ header:after {
   float: left;
   width: 50%;
   font-weight: 700;
-  font-family: "Playfair Display", "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
-  letter-spacing: -.1ex;
+  font-family: "Copperplate", "Playfair Display", "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
+  font-variant: small-caps;
+  letter-spacing: .1ex;
   color: #cccccc;
-  text-transform: uppercase;
   font-size: 60px;
   line-height: 90%;
   position: relative;
@@ -794,6 +794,8 @@ header:after {
   padding: 0;
   width: 960px;
   z-index: 50;
+  border: 1px solid #cccccc;
+  background-color: #fafafa;
   /* mega menu list */
   /* a top level navigation item in the mega menu */
   /* first descendant link within a top level navigation item */
@@ -829,11 +831,12 @@ header:after {
   }
 }
 #primary-nav .nav-menu {
-  display: block;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   position: relative;
+  width: 100%;
   list-style: none;
-  margin: 0 0 0 -1px;
-  padding: 0 0 0 1px;
   z-index: 15;
 }
 #primary-nav li {
@@ -855,14 +858,10 @@ header:after {
   position: relative;
   overflow: visible;
 }
-#primary-nav .nav-item:first-child > a {
-  border-left: 1px solid #cccccc;
-}
 #primary-nav .nav-item > a {
   position: relative;
   display: inline-block;
   margin: 0 0 -1px 0;
-  border: 1px solid #cccccc;
 }
 #primary-nav .nav-item:not(:first-child) > a {
   margin-left: -1px;
@@ -934,7 +933,6 @@ header:after {
   text-decoration: none;
   display: block;
   padding: 0.75em 18px;
-  background: #fafafa;
 }
 #primary-nav a:hover,
 #primary-nav a:focus,
@@ -1148,7 +1146,7 @@ header:after {
   }
 }
 #home #content h2 {
-  font-family: "Playfair Display SC", "Playfair Display", "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
+  font-family: "Copperplate", "Playfair Display", "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
   font-weight: normal;
 }
 

diff --git a/javascripts/bigstuff.js b/javascripts/bigstuff.js
@@ -17,7 +17,7 @@ if (!Bigstuff) {
     Bigstuff.showMetadata = function(metaid, itemid) {
         var meta = $(metaid);
         meta.position({
-            my: "left+100 top",
+            my: "left+100 center",
             at: "left bottom",
             of: itemid
         });