blog and header progress

src/css/base.scss

@@ -2,12 +2,6 @@
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  &:focus {
-    outline: none;
-    padding-bottom: 0.1rem;
-    margin-bottom: 0.1rem;
-    border-bottom: 1px solid $color-link;
-  }
 }
 
 html {

src/css/blog.scss

@@ -97,12 +97,16 @@
   .section-title {
     font-size: 4rem;
     line-height: 1.14;
+    @media (max-width: $media-s) {
+      font-size: 2.6rem;
+    }
   }
   .post-meta, .section-title {
     max-width: $width-l;
     margin: 0 auto 1rem;
   }
   .post-meta {
+    margin-bottom: 3rem;
     p {
       margin-left: 0;
     }

src/css/header.scss

@@ -2,6 +2,7 @@
   padding: 1rem 2rem;
   background: $color-black;
   display: flex;
+  justify-content: space-between;
 }
 
 .logo {
@@ -15,11 +16,16 @@
 
 .site-nav {
   display: block;
-  height: 100%;
   a {
     text-decoration: none;
     display: inline-block;
-    vertical-align: middle;
-    margin-right: 1rem;
+    margin-right: 1.6rem;
+
+    color: $color-white;
+    font-weight: 500;
+
+    &:hover {
+      color: $color-orange;
+    }
   }
 }

src/css/variables.scss

@@ -16,4 +16,6 @@ $color-hover: $color-yellow;
 $width-xs: 24rem;
 $width-s: 32rem;
 $width-m: 42rem;
-$width-l: 54rem;
+$width-l: 54rem;
+
+$media-s: 700px;