Add variables for nav and header styles

johno · Feb 14, 2019 · b15bd0f · b15bd0f · ostrodmit · Feb 15, 2019
1 parent 0f30943
commit b15bd0f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -4,9 +4,9 @@
 }
 
 .site-header a {
- color: #333;
+ color: $header-color;
  font-size: $h3;
- font-weight: 300;
+ font-weight: $header-font-weight;
  background-image: none;
 }
 
@@ -15,11 +15,11 @@
 }
 
 .site-nav {
- margin-top: $space-2;
+ padding-top: $nav-padding;
 }
 
 .site-header nav a {
- color: #666;
+ color: $nav-color;
 }
 
 .site-header nav a:hover,
@@ -28,17 +28,17 @@
 .site-header nav a.nav-active:hover,
 .site-header nav a.nav-active:focus,
 .site-header nav a.nav-active:active {
- color: #444;
+ color: $nav-link-color;
  opacity: 1;
- border-bottom: 2px solid #444;
+ border-bottom: $nav-link-border-bottom;
 }
 
 .site-header nav a.nav-active {
- border-bottom: 1px solid $light-gray;
+ border-bottom: $nav-active-border-bottom;
 }
 
 .site-nav a + a {
- margin-left: 1em;
+ padding-left: $nav-link-padding-x;
 }
 
 .site-header a:hover,

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -112,6 +112,20 @@ $hljs-addition: $light-green;
 $hljs-change: $dark-blue;
 $hljs-chunk: $light-gray;
 
+// Header
+$header-border-top: thin solid #f3f3f3;
+$header-color: $dark-gray;
+$header-bg-color: #fafafa;
+$header-font-weight: 300;
+
+// Nav
+$nav-color: $mid-gray;
+$nav-link-color: #444;
+$nav-padding: $space-2;
+$nav-link-padding-x: $space-2;
+$nav-link-border-bottom: 2px solid #444;
+$nav-active-border-bottom: 1px solid $light-gray;
+
 // Footer
 $footer-border-top: thin solid #f3f3f3;
 $footer-padding: $space-3;