Style refactor (#77)

* Change fonts

* Fix colors and sizes

* Fix link colors

* Fix headings and links

* Fix icon size

assets/scss/_base.scss

@@ -13,20 +13,19 @@ body {
   display:flex;
   color: $fg-color;
   background-color: $bg-color;
-	font-family: 'Fira Mono', monospace;
+	font-family: $text-font-family;
 	font-size: 1.6em;
-	font-weight: 400;
-	letter-spacing: 0.0625em;
+	font-weight: 300;
   line-height: 1.8em;
-  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    font-size: 1.4em;
+  @media only screen and (max-device-width : 768px) {
+    font-size: 1.6em;
     line-height: 1.6em;
   }
 }
 
 a {
-  font-weight: 700;
-  color: $alt-fg-color;
+  font-weight: 300;
+  color: $link-color;
   text-decoration: none;
   &:focus,
   &:hover {
@@ -35,17 +34,7 @@ a {
 }
 
 p {
-  margin: 1.6rem 0 1.6rem 0;
-  a {
-    font-weight: 400;
-    color: $alt-fg-color;
-    text-decoration: underline;
-    text-underline-position: under;
-    &:focus,
-    &:hover {
-      color: $link-color;
-    }
-  }
+  margin: 2.0rem 0 2.0rem 0;
 }
 
 h1,
@@ -54,73 +43,94 @@ h3,
 h4,
 h5,
 h6 {
+  font-family: $heading-font-family;
+  font-weight: 700;
   color: $alt-fg-color;
-  text-transform: uppercase;
-  letter-spacing: 0.0625em;
-  margin: 3.2rem 0 1.6rem 0;
+  margin: 6.4rem 0 3.2rem 0;
 }
 
 h1 {
   font-size: 3.2rem;
-  line-height: 3.2rem;
-  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    font-size: 2.8rem;
-    line-height: 2.8rem;
+  line-height: 3.6rem;
+  @media only screen and (max-device-width : 768px) {
+    font-size: 3.0rem;
+    line-height: 3.4rem;
   }
 }
 h2 {
   font-size: 2.8rem;
-  line-height: 2.8rem;
-  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    font-size: 2.4rem;
-    line-height: 2.4rem;
+  line-height: 3.2rem;
+  @media only screen and (max-device-width : 768px) {
+    font-size: 2.6rem;
+    line-height: 3.0rem;
   }
 }
 h3 {
   font-size: 2.4rem;
-  line-height: 2.4rem;
-  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    font-size: 2.0rem;
-    line-height: 2.0rem;
+  line-height: 2.8rem;
+  @media only screen and (max-device-width : 768px) {
+    font-size: 2.2rem;
+    line-height: 2.6rem;
   }
 }
 h4 {
   font-size: 2.2rem;
-  line-height: 2.2rem;
-  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    font-size: 1.8rem;
-    line-height: 1.8rem;
+  line-height: 2.6rem;
+  @media only screen and (max-device-width : 768px) {
+    font-size: 2.0rem;
+    line-height: 2.4rem;
   }
 }
 h5 {
   font-size: 2.0rem;
-  line-height: 2.0rem;
-  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    font-size: 1.6rem;
-    line-height: 1.6rem;
+  line-height: 2.4rem;
+  @media only screen and (max-device-width : 768px) {
+    font-size: 1.8rem;
+    line-height: 2.2rem;
   }
 }
 h6 {
-  font-size: 1.4rem;
-  line-height: 1.4rem;
+  font-size: 1.8rem;
+  line-height: 2.2rem;
+  @media only screen and (max-device-width : 768px) {
+    font-size: 1.6rem;
+    line-height: 2.0rem;
+  }
+}
+
+b, strong {
+  font-weight: 700;
 }
 
 pre {
-  margin: 1.6rem 0 1.0rem 0;
-  padding: 1.6rem;
+  display: block;
+  font-family: $code-font-family;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.6rem;
+  margin: 2.0rem 0 2.0rem 0;
+  padding: 2.0rem;
   overflow-x: auto;
+  code {
+    background-color: inherit;
+    color: inherit;
+  }
 }
 
 code {
-  display: inline-block;
-  background-color: $alt-fg-color;
-  color: $bg-color;
-  padding: 0.4rem 0.8rem 0.4rem 0.8rem;
+  font-family: $code-font-family;
+  font-size: 1.6rem;
+  font-weight: 400;
+  background-color: $alt-bg-color;
+  color: $fg-color;
+  padding: 0.2rem 0.4rem 0.2rem 0.4rem;
 }
 
 blockquote {
   border-left: 2px solid $alt-bg-color;
-  padding-left: 1.6rem;
+  padding-left: 2.0rem;
+  line-height: 2.2rem;
+  font-weight: 400;
   font-style: italic;
 }
 
@@ -155,18 +165,27 @@ img {
 .wrapper {
   display: flex;
   flex-direction: column;
+
   min-height: 100vh;
   width: 100%;
 }
 
 .container {
   margin: 0 auto;
-  max-width: 120.0rem;
+  max-width: 90.0rem;
   width: 100%;
   padding-left: 2.0rem;
   padding-right: 2.0rem;
 }
 
+.fab {
+  font-weight: 400;
+}
+
+.fas {
+  font-weight: 700;
+}
+
 .float-right {
   float: right;
 }

assets/scss/_colors.scss

@@ -1,6 +0,0 @@
-// Colors
-$bg-color: #fefefe !default;
-$fg-color: #323232 !default;
-$alt-bg-color: #dcdcdc !default;
-$alt-fg-color: #000 !default;
-$link-color: #3366CC !default;

assets/scss/_content.scss

@@ -4,15 +4,16 @@
   margin-bottom: 3.2rem;
   article {
     header {
-      margin-top: 3.2rem;
+      margin-top: 6.4rem;
       margin-bottom: 3.2rem;
       h1, h2 {
         margin: 0;
       }
       h2 {
-        margin-top: 1.0rem;
         font-size: 1.8rem;
+        line-height: 2.2rem;
         color: $fg-color;
+        margin-top: 1.8rem;
         @media only screen and (max-device-width : 768px) {
           font-size: 1.6rem;
         }
@@ -38,7 +39,6 @@
     li {
       font-size: 1.6rem;
       @media only screen and (max-device-width : 768px) {
-        font-size: 1.4rem;
         margin: 1.6rem 0 1.6rem 0;
       }
       span {
@@ -52,7 +52,14 @@
         }
       }
       a {
-        text-transform: uppercase;
+        font-size: 1.8rem;
+        color: $fg-color;
+        font-family: $heading-font-family;
+        font-weight: 700;
+        &:hover,
+        &:focus {
+          color: $link-color
+        }
       }
     }
   }
@@ -85,15 +92,20 @@
         display: inline-block;
         position: relative;
         a {
+          color: $fg-color;
           text-transform: uppercase;
           margin-left: 1.0rem;
           margin-right: 1.0rem;
           font-size: 1.6rem;
+          &:hover,
+          &:focus {
+            color: $link-color;
+          }
           @media only screen and (max-device-width : 768px) {
             font-size: 1.4rem;
           }
           i {
-            font-weight: 400;
+            font-size: 3.2rem;
           }
         }
       }

assets/scss/_footer.scss

@@ -3,4 +3,7 @@
   text-align: center;
   line-height: 2.0rem;
   margin-bottom:1.0rem;
+  a {
+    color: $link-color;
+  }
 }

assets/scss/_navigation.scss

@@ -4,14 +4,21 @@
   a, span {
     display: inline;
     font-size: 1.6rem;
-    text-transform: uppercase;
+    font-family: $heading-font-family;
+    font-weight: 700;
     line-height: 6.0rem;
-    letter-spacing: 0.1rem;
-    @media only screen and (max-device-width : 768px) {
-      font-size: 1.4rem;
+    color: $fg-color;
+  }
+  a {
+    &:hover,
+    &:focus {
+      color: $link-color
     }
   }
-
+  .navigation-title {
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
   .navigation-list {
     float: right;
     list-style: none;
@@ -58,7 +65,6 @@
       }
     }
   }
-
   #menu-toggle {
     display: none;
     @media only screen and (max-device-width : 768px) {
@@ -81,6 +87,10 @@
       line-height: 6.0rem;
       color: $fg-color;
       cursor: pointer;
+      &:hover,
+      &:focus {
+        color: $link-color
+      }
     }
   }
 }

assets/scss/_variables.scss

@@ -0,0 +1,11 @@
+// Fonts
+$text-font-family: Merriweather, Georgia, serif;
+$heading-font-family: Lato, Helvetica, sans-serif;
+$code-font-family: 'Source Code Pro', 'Lucida Console', monospace;
+
+// Colors
+$bg-color: #FAFAFA !default;
+$fg-color: #212121 !default;
+$alt-bg-color: #E0E0E0 !default;
+$alt-fg-color: #000 !default;
+$link-color: #1565c0 !default;

assets/scss/coder.scss

@@ -1,6 +1,6 @@
-@import "_colors";
-@import "_base";
-@import "_content";
-@import "_navigation";
-@import "_pagination";
-@import "_footer";
+@import "variables";
+@import "base";
+@import "content";
+@import "navigation";
+@import "pagination";
+@import "footer";

layouts/_default/baseof.html

@@ -14,7 +14,7 @@
 
     <link rel="canonical" href="{{ .Permalink }}">
 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono:400,700">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Merriweather:300,700|Source+Code+Pro:400,700" rel="stylesheet">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" integrity="sha256-oSrCnRYXvHG31SBifqP2PM1uje7SJUyX0nTwO2RJV54=" crossorigin="anonymous" />