Make typography refinements

_posts/2013-01-11-markup-html-tags-and-formatting.md

@@ -34,9 +34,10 @@ Single line blockquote:
 
 Multi line blockquote with a cite reference:
 
-> People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things. 
+> People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.
 
 <cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
+{: .small}
 
 ## Tables
 

assets/_scss/_archive.scss

@@ -41,6 +41,7 @@
 }
 
 .archive__item-excerpt {
+  margin-top: 0;
   font-size: $type-size-6;
 
   & + p {

assets/_scss/_base.scss

@@ -7,7 +7,7 @@ body {
   padding: 0;
   color: $text-color;
   font-family: $serif;
-  line-height: 1.45;
+  line-height: 1.5;
   background-color: $background-color;
 
   &.overflow--hidden {
@@ -20,6 +20,7 @@ h1, h2, h3, h4, h5, h6 {
   margin: 1.414em 0 0.5em;
   line-height: 1.2;
   font-family: $sans-serif;
+  font-weight: bold;
 }
 
 h1 {
@@ -99,8 +100,7 @@ blockquote {
 
   cite {
     font-family: $sans-serif;
-    font-size: $type-size-6;
+    font-style: italic;
-    font-style: normal;
 
     &:before {
       content: "\2014";

assets/_scss/_buttons.scss

@@ -148,6 +148,6 @@
   /* small button */
 
   &--small {
-    font-size: $type-size-7;
+    font-size: $type-size-6;
   }
 }

assets/_scss/_footer.scss

@@ -7,6 +7,7 @@
   @include clearfix;
   margin-top: 3em;
   padding: 0 2em 3em;
+  color: mix(#fff, $gray, 25%);
 
   @include breakpoint($large) {
     padding-left: 1em;
@@ -27,6 +28,9 @@
 }
 
 .page__footer-copyright {
+  font-family: $sans-serif;
+  font-size: $type-size-7;
+
   @include breakpoint($large) {
     @include prefix(2 of 12);
   }
@@ -34,8 +38,6 @@
   @include breakpoint($x-large) {
     @include prefix(2.5 of 12);
   }
-
-  font-size: $type-size-6;
 }
 
 .page__footer-follow {

assets/_scss/_navigation.scss

@@ -188,10 +188,10 @@
     position: absolute;
     height: 100%;
     right: 0;
-    padding: 0 10px;
+    padding: 0 8px;
     border: 0;
     outline: none;
-    background-color: #000;
+    background-color: $primary-color;
     color: #fff;
     cursor: pointer;
   }
@@ -306,11 +306,11 @@
    ========================================================================== */
 
 .nav__list {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
 
   a {
     display: block;
-    padding: 4px 0;
+    padding: 0.125em 0;
 
     &:hover {
       text-decoration: underline;
@@ -325,7 +325,7 @@
 
 .nav__title {
   margin: 0;
-  padding: 10px 20px;
+  padding: 0.5em 1em;
   font-family: $sans-serif-narrow;
   font-size: $type-size-5;
   font-weight: bold;
@@ -334,8 +334,8 @@
 
 .nav__sub-title {
   display: block;
-  margin: 10px 0;
+  margin: 0.5em 0;
-  padding: 10px 0;
+  padding: 0.5em 0;
   font-family: $sans-serif-narrow;
   font-size: $type-size-5;
   font-weight: bold;

assets/_scss/_page.scss

@@ -42,8 +42,6 @@
 
 .page__title {
   margin-top: 0;
-  font-family: $serif;
-  font-weight: normal;
   line-height: 1;
   & + .page__meta {
     margin-top: -0.5em;
@@ -75,11 +73,24 @@
 
   dt {
     margin-top: 1em;
+    font-family: $sans-serif;
     font-weight: bold;
   }
 
   dd {
     margin-left: 1em;
+    font-family: $sans-serif;
+    font-size: $type-size-6;
+  }
+
+  .small {
+    font-size: $type-size-6;
+  }
+
+  /* blockquote citations */
+  blockquote + .small {
+    margin-top: -1.5em;
+    padding-left: 1.25rem;
   }
 }
 

assets/_scss/_sidebar.scss

@@ -9,6 +9,7 @@
 .sidebar {
   @include clearfix();
   margin-bottom: 1em;
+  color: mix(#fff, $gray, 25%);
 
   @include breakpoint($large) {
     @include span(2 of 12);
@@ -23,23 +24,27 @@
     font-family: $sans-serif-narrow;
   }
 
-  h3 {
+  h3, h4 {
-    font-size: $type-size-4;
+    font-size: $type-size-5;
-  }
-
-  h4 {
-    font-size: $type-size-4;
   }
 
   p, li {
     font-family: $sans-serif;
     font-size: $type-size-6;
-    line-height: 1.45;
+    line-height: 1.5;
   }
 
   img {
     width: 100%;
   }
+
+  a {
+    color: mix(#fff, $gray, 25%);
+
+    &:hover {
+      color: $link-color-hover;
+    }
+  }
 }
 
 .sidebar__right {
@@ -109,10 +114,6 @@
 .sidebar .author__name {
   font-family: $sans-serif;
   font-size: $type-size-5;
-
-  @include breakpoint($large) {
-    font-size: $type-size-4;
-  }
 }
 
 .author__bio {

assets/_scss/_tables.scss

@@ -7,7 +7,7 @@ table {
   font-family: $sans-serif;
   font-size: $type-size-6;
   border-collapse: collapse;
-  border-bottom: 2px solid $border-color;
+  border: 2px solid $border-color;
 
   & + table {
     margin-top: 1em;
@@ -15,6 +15,7 @@ table {
 }
 
 thead {
+  background-color: $lighter-gray;
   border-bottom: 2px solid $border-color;
 }
 
@@ -22,11 +23,13 @@ th {
   padding: 0.5em;
   font-weight: bold;
   text-align: left;
+  border-right: 2px solid $border-color;
 }
 
 td {
-  border-bottom: 1px solid $border-color;
   padding: 0.5em;
+  border-bottom: 2px solid $border-color;
+  border-right: 2px solid $border-color;
 }
 
 tr, td, th {

assets/_scss/_utilities.scss

@@ -160,6 +160,10 @@ body:hover .visually-hidden button {
 // social icons
 
 .social-icons {
+  .fa {
+    color: #000;
+  }
+
   .fa-behance,
   .fa-behance-square {
     color: $behance-color;
@@ -268,7 +272,7 @@ body:hover .visually-hidden button {
    Navicons
    ========================================================================== */
 
-$navicon-width  : 32px;
+$navicon-width  : 28px;
 $navicon-height : 4px;
 
 .navicon {
@@ -357,7 +361,14 @@ $navicon-height : 4px;
    Footnotes
    ========================================================================== */
 
+.footnote {
+  color: mix(#fff, $gray, 25%);
+  text-decoration: none;
+}
+
 .footnotes {
+  color: mix(#fff, $gray, 25%);
+
   ol, li, p {
     margin-bottom: 0;
     font-size: $type-size-6;
@@ -365,6 +376,7 @@ $navicon-height : 4px;
 }
 
 a.reversefootnote {
+  color: $gray;
   text-decoration: none;
 
   &:hover {

assets/_scss/_variables.scss

@@ -29,14 +29,13 @@ $calisto                    : "Calisto MT", serif;
 $garamond                   : Garamond, serif;
 
 /* type scale */
-$type-size-1                : 3.998em;
+$type-size-1                : 2.441em;
-$type-size-2                : 2.827em;
+$type-size-2                : 1.953em;
-$type-size-3                : 1.999em;
+$type-size-3                : 1.563em;
-$type-size-4                : 1.414em;
+$type-size-4                : 1.25em;
 $type-size-5                : 1em;
-$type-size-6                : 0.707em;
+$type-size-6                : 0.8em;
-$type-size-7                : 0.5em;
+$type-size-7                : 0.7em;
-$type-size-8                : 0.354em;
 
 
 /*
@@ -51,6 +50,7 @@ $lighter-gray               : mix(#fff, $gray, 90%);
 $body-color                 : #fff;
 $background-color           : #f5f5f5;
 $code-background-color      : #fff;
+$code-background-color-dark : #1b1a24;
 $text-color                 : #333332;
 $border-color               : $lighter-gray;
 $base-color                 : #343434;