Add Medium font variant and update font weights globally

src/components/atoms/SiteTitle.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     export let variant: string = undefined
-    console.log(variant)
 </script>
 
 <h1 class="site-title {variant ? `site-title--${variant}` : ''}">

src/style/_base.scss

@@ -1,5 +1,6 @@
 html {
     font: #{$base-font-size}/1.2 $font-sans;
+    font-weight: 300;
     color: #fff;
     min-width: 320px;
     word-break: normal;
@@ -17,7 +18,7 @@ body {
     -moz-osx-font-smoothing: grayscale;
 }
 strong {
-    font-weight: 700;
+    font-weight: 600;
 }
 em {
     font-style: normal;

src/style/_fonts.scss

@@ -1,7 +1,8 @@
 /* Fonts list
 ========================================================================== */
-@include font-face("Garnett", "G-Light", 300);
+@include font-face("Garnett", "G-Light", 200);
-@include font-face("Garnett", "G-Regular", 400);
+@include font-face("Garnett", "G-Regular", 300);
+@include font-face("Garnett", "G-Medium", 400);
 @include font-face("Garnett", "G-Semibold", 500);
 @include font-face("Magnolia", "M-Extralight", 200);
 @include font-face("Magnolia", "M-Light", 300);

src/style/_typography.scss

@@ -67,7 +67,7 @@
 .text-medium {
     font-size: rem(20px);
     font-family: $font-sans;
-    font-weight: 300;
+    font-weight: 200;
     line-height: 1.4;
 
     @include bp (sm) {
@@ -102,5 +102,5 @@
     line-height: 1.4;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: 500;
+    font-weight: 400;
 }

src/style/atoms/_box-cta.scss

@@ -39,9 +39,10 @@
     }
     span {
         display: block;
+        margin-left: 24px;
         color: $color-secondary-light;
         text-align: left;
-        margin-left: 24px;
+        font-weight: 300;
 
         @include bp (sm) {
             margin-left: 0;

src/style/atoms/_discover.scss

@@ -1,17 +1,17 @@
 .discover {
+    padding: 0 20px;
     font-family: $font-sans;
     font-size: rem(28px);
-    color: $color-tertiary;
+    font-weight: 200;
-    font-weight: 300;
     line-height: 1.5;
-    padding: 0 20px;
+    color: $color-tertiary;
 
     @include bp (sm) {
         font-size: rem(32px);
     }
 
     strong {
-        font-weight: 300;
         color: $color-secondary;
+        font-weight: 200;
     }
 }

src/style/organisms/_footer.scss

@@ -62,6 +62,7 @@
             text-decoration: none;
             font-size: rem(16px);
             line-height: 1.3;
+            font-weight: 300;
         }
         svg {
             margin-right: 16px;

src/style/organisms/_newsletter.scss

@@ -24,9 +24,10 @@
             }
         }
         p {
+            max-width: 480px;
             margin-bottom: 32px;
             color: $color-text;
-            font-weight: 300;
+            font-weight: 200;
 
             @include bp (sm) {
                 margin-bottom: 40px;
@@ -50,9 +51,9 @@
         input {
             display: block;
             width: 100%;
-            font-family: $font-sans;
-            font-weight: 400;
             font-size: rem(18px);
+            font-family: $font-sans;
+            font-weight: 300;
             color: #333;
             background: none;
             border: none;
@@ -113,6 +114,8 @@
 
             @include bp (sm) {
                 margin-left: 12px;
+                padding-bottom: 0;
+                font-size: rem(16px);
             }
         }
         p {

src/style/organisms/_shop.scss

@@ -61,7 +61,7 @@
     }
 
     p {
-        font-weight: 300;
+        font-weight: 200;
         margin-bottom: 20px;
 
         @include bp (sm) {

src/style/pages/_credits.scss

@@ -17,7 +17,7 @@
         p {
             max-width: 320px;
             margin: 50px auto 0;
-            font-weight: 300;
+            font-weight: 200;
 
             @include bp (sm) {
                 margin: 72px auto 0;

src/style/pages/_location.scss

@@ -160,7 +160,7 @@
                 position: relative;
                 display: inline-block;
                 font-size: rem(160px);
-                color: rgba($color-text, 0.15);
+                color: rgba($color-text, 0.2);
                 font-family: $font-serif;
                 font-weight: 200;
                 line-height: 1;
@@ -191,7 +191,7 @@
                 color: $color-gray;
                 text-transform: uppercase;
                 letter-spacing: 0.1em;
-                font-weight: 300;
+                font-weight: 400;
                 font-size: rem(14px);
             }
         }