🎨 style(writing): streamline colour palette, type

style(writing): streamline colour palette, type

Author: tatianamac

src/_includes/_writing.njk

@@ -2,7 +2,7 @@
   <div class="wrapper">
     <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl">
       <div>
-        <h1 class="t-eyebrow t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-royal-blue t-space-strip">
+        <h1 class="t-eyebrow t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-azure t-space-strip">
           Selected Writings</h1>
         <p class="t-thiccfont@xs t-thiccfont@s t-ultrachonkfont@m t-ultrachonkfont@l t-ultrachonkfont@xl t-height-tight
             t-serifweight t-white t-height-tight t-space-strip mb-teeny">

src/_includes/css/main.css

@@ -211,6 +211,7 @@ $bg-color: (
   "pale-peach": #{$pale-peach},
   "neon-yellow": #{$neon-yellow},
   "ochre": #{$ochre},
+  "midnight": #{$midnight},
 );
 
 @each $name, $colour in $bg-color {

src/_includes/css/main.css.map

@@ -373,12 +373,12 @@ article blockquote {
   border-left: 10px solid $pink;
   padding: 1em;
   p:first-of-type:before {
+    @include t-ltr-spaceout-m;
     content: "Note";
     color: $fuchsia;
     display: block;
     font-family: $sans-serif-bold;
     font-size: 1em;
-    letter-spacing: 0.2em;
     margin: 0;
     padding: 0;
     text-transform: uppercase;
@@ -594,13 +594,14 @@ $t-color: (
 }
 
 .t-link-accent-azure {
-  @include bdr--white;
+  @include t-link-hover($gild);
+  
   color: $azure;
   line-height: 1.25em;
   padding: 2px 0;
   text-decoration: none;
   &:hover {
-    @include t-link-hover($gild);
+    @include bdr--white;
   }
 
   &:focus {
@@ -631,7 +632,7 @@ $t-color: (
 }
 
 .t-titlingfont {
-  font-family: $sans-serif-bold;
+  font-family: $sans-serif-accent;
   font-size: 1.25em;
   text-transform: uppercase;
 }

src/scss/base/_base.scss

@@ -43,39 +43,43 @@
 
   a {
   border-bottom: none;
-  &:focus { 
+  &:focus-visible { 
     @include out--yellow;
   }
 	}
 }
 
 .dark {
   color: $black;
-
+    @include t-ltr-spaceout-s;
     @include t-uppercase;
     @include bdr--pink;
     text-decoration: none;
     font-size: .85rem;
+    font-family: $sans-serif-accent;
     padding: .3rem 0;
+
     &:hover {
-      @include bdr--pink;
+      @include bdr--white;
     }
 
-    &:focus {
+    &:focus-visible {
       @include out--blue;
     }
 
 }
 
 .light {
-  color: $white;
+    color: $white;
+    @include t-ltr-spaceout-s;
     @include t-uppercase;
     @include bdr--pink;
     text-decoration: none;
     font-size: .85rem;
+    font-family: $sans-serif-accent;
     padding: .3rem 0;
     &:hover {
-      @include bdr--pink;
+      @include bdr--white;
     }
 
     &:focus {

src/scss/base/_typography.scss

@@ -17,7 +17,7 @@
   height: 5em;
   background: linear-gradient(45deg, transparent 50%, $midnight 50%),
     linear-gradient(90deg, transparent 50%, $green 50%),
-    linear-gradient(135deg, $midnight 50%, $leaf-green 50%), 0 50%;
+    linear-gradient(135deg, $midnight 50.25%, $leaf-green 50%), 0 50%;
   background-repeat: repeat-x;
   background-size: 5em 5em, 5em 5em;
 }

src/scss/layout/_header.scss

@@ -6,9 +6,9 @@
   - nav
 navtitle: Writing
 templateClass: content
-navClass: bg-baby-blue
-bgColor: baby-blue
-colorMode: dark
+navClass: bg-midnight
+bgColor: midnight
+colorMode: light
 linkColour: orange
 canonical: https://www.tatianamac.com/writing
 ---