Improved global styles, vertical rhythm and typography

Author: KittyGiraudel

_sass/base/_base.scss

@@ -14,7 +14,7 @@ html {
 body {
     color: $black;
     position: relative;
-    line-height: 1.4;
+    line-height: 1.5;
     font-family: $text-font-stack;
 }
 

_sass/base/_typography.scss

@@ -1,6 +1,6 @@
 h2, h3, h4 {
-    text-transform: capitalize;
     position: relative;
+    margin-top: 0;
 
     @include respond-to("large") {
         &:hover  .header-link,
@@ -24,6 +24,19 @@ table, img,
 
 h2 {
     margin-bottom: 1em;
+    text-transform: uppercase;
+    margin-top: 3em;
+    color: $blue;
+
+    a {
+        color: $blue;
+    }
+}
+
+h3 {
+    font-size: 1.2em;
+    margin-bottom: 1.25em;
+    color: mix($black, white, 80%);
 }
 
 p {
@@ -37,26 +50,34 @@ ul, ol {
 }
 
 li {
-    line-height: 1.4;
+    margin-bottom: .5em;
 }
 
 .header-link {
     position: absolute;
     top: 0;
     right: 101%;
     transition: .15s;
+    color: $pink;
 
     @include respond-to("large") {
         opacity: 0;
     }
 }
 
-body:not(.home) h2 {
-    color: $blue;
-    text-transform: uppercase;
-    margin-top: 3em;
+.main ul > li:not([class]) {
+    position: relative;
+    padding-left: 1.5em;
+    list-style: none;
 
-    a {
-        color: $blue;
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: .4em;
+        height: .4em;
+        border-radius: 50%;
+        top: .6em;
+        background: $blue;
     }
-}
+}

_sass/pages/_theme-picker.scss

@@ -40,6 +40,10 @@
     &.active {
         box-shadow: 0 0 0 .25em rgba($pink, .5);
     }
+
+    img {
+        margin-bottom: 0;
+    }
 }
 
 .theme-picker__preview {
@@ -65,20 +69,20 @@
 }
 
 .metadata__list {
+    width: 100%;
+    height: 100%;
     list-style: none;
     padding: .5em;
     font-size: 1.2em;
     position: absolute;
     top: 50%;
     left: 50%;
+    margin: 0;
     transform: translate(-50%, -50%);
 }
 
 .metadata__item {
     height: 33.33%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
     text-align: center;
 
     a {

_sass/partials/_header.scss

@@ -54,24 +54,26 @@
         text-decoration: none;
     }
 
-    &::after {
-        content: '';
-        opacity: 0;
-        transition: .15s ease-out;
-        position: absolute;
-        width: 0;
-        height: 0;
-        bottom: -2em;
-        border-left: .6em solid transparent;
-        border-right: .6em solid transparent;
-        border-bottom: .75em solid $pink;
-        left: 50%;
-        margin-left: -.3em;
-    }
-
-    &:hover::after {
-        opacity: 1;
-        bottom: -1.2em;
+    @include respond-to("large") {
+        &::after {
+            content: '';
+            opacity: 0;
+            transition: .15s ease-out;
+            position: absolute;
+            width: 0;
+            height: 0;
+            bottom: -2em;
+            border-left: .6em solid transparent;
+            border-right: .6em solid transparent;
+            border-bottom: .75em solid $pink;
+            left: 50%;
+            margin-left: -.3em;
+        }
+
+        &:hover::after {
+            opacity: 1;
+            bottom: -1.2em;
+        }
     }
 }
 

_sass/partials/_sidebar.scss

@@ -15,7 +15,7 @@
     padding-top: 1em;
 
     @include respond-to("large") {
-        padding-top: 0;
+        padding-top: 2em;
     }
 }
 
@@ -28,33 +28,37 @@
     color: $yellow !important;
 
     @include respond-to("large") {
-        margin-bottom: 1em;
-        margin-top: 2em;
         border: none;
         padding: 0;
+        margin-bottom: 1em;
     }
 }
 
 .sidebar__list {
     list-style: none;
     padding-left: 0;
     font-size: .9em;
-    line-height: 1.5;
-    margin: 0;
     padding-bottom: 1.5em;
     border-bottom: .25em solid $yellow;
+    margin: 0;
 
     @include respond-to("large") {
-        margin-bottom: 1em;
+        margin-bottom: 1.5em;
     }
 }
 
 .sidebar__list-item {
     border-bottom: 1px solid rgba(black, .1);
     position: relative;
+    margin-bottom: 0;
 
     @include respond-to("large") {
         border: none;
+        margin-bottom: .5em;
+
+        &:last-of-type {
+            margin-bottom: 0;
+        }
     }
 
     &.active::after {
@@ -90,7 +94,7 @@
     }
 
     @include respond-to("large") {
-        padding: .25em 0;
+        padding: 0;
     }
 }
 

_sass/vendor/_pygments.scss

@@ -1,12 +1,12 @@
 .highlight {
-    background: $black;
+    background: mix($blue, $black, 80%);
     font-family: $code-font-stack;
     overflow: auto;
-    border-left: .5em solid #666;
+    border-left: .5em solid $black;
     font-size: .9em;
 
     pre {
-        padding: .5em 1em;
+        padding: 1em;
         margin: 0;
     }
 
@@ -34,7 +34,7 @@
 }
 
 .highlight .c {
-    color: #75715e;
+    color: mix($black, white, 40%);
 }
 
 .highlight .err {
@@ -55,11 +55,11 @@
 }
 
 .highlight .o {
-    color: #f92672;
+    color: white;
 }
 
 .highlight .p {
-    color: #f8f8f2;
+    color: white;
 }
 
 .highlight .c1,
@@ -79,7 +79,7 @@
 
 .highlight .kc,
 .highlight .kd {
-    color: #66d9ef;
+    color: mix($blue, white, 30%);
 }
 
 .highlight .kn {
@@ -139,7 +139,7 @@
 }
 
 .highlight .nx {
-    color: #a6e22e;
+    color: $pink;
 }
 
 .highlight .py {
@@ -148,7 +148,7 @@
 
 .highlight .nt,
 .l-Scalar-Plain {
-    color: #f92672;
+    color: $pink;
 }
 
 .highlight .nv {
@@ -174,7 +174,7 @@
 .highlight .sb,
 .highlight .sc,
 .highlight .sd {
-    color: #e6db74;
+    color: $yellow;
 }
 
 .highlight .se {