Adding about link

components/byline.js

@@ -23,8 +23,12 @@ const html = `
     text-align: left;
   }
   dt-byline .name {
+    display: inline;
     text-transform: uppercase;
   }
+  dt-byline .affiliation {
+    display: inline;
+  }
   dt-byline .date {
     display: block;
     text-align: left;

components/header.js

@@ -53,6 +53,7 @@ dt-header .logo {
 }
 dt-header .nav {
   float: right;
+  font-weight: 300;
 }
 dt-header .nav a {
   font-size: 14px;
@@ -65,6 +66,7 @@ dt-header .nav a {
     Distill
   </a>
   <div class="nav">
+    <a href="/faq">About</a>
   </div>
 </div>
 `

components/styles-article.css

@@ -17,10 +17,9 @@ dt-article {
 dt-article h1 {
   margin-top: 48px;
   font-weight: 400;
-  font-size: 32px;
+  font-size: 36px;
   line-height: 1.1em;
-  -webkit-font-smoothing: antialiased;
-  font-family: Georgia, serif;
+  font-family: Cochin, Georgia, serif;
 }
 
 
@@ -30,7 +29,7 @@ dt-article h1 {
   }
 
   dt-article h1 {
-    font-size: 48px;
+    font-size: 50px;
     margin-bottom: 12px;
     letter-spacing: -0.02em;
   }
@@ -43,7 +42,7 @@ dt-article h1 {
 
 @media(min-width: 1200px) {
   dt-article h1 {
-    font-size: 52px;
+    font-size: 54px;
   }
 
   dt-article > h1:first-of-type {
@@ -68,9 +67,8 @@ dt-article h2 {
 }
 
 dt-article h1 + h2 {
-  font-family: Georgia, serif;
-  font-weight: normal;
-  font-size: 18px;
+  font-weight: 300;
+  font-size: 20px;
   line-height: 1.5em;
   margin-top: 8px;
 }
@@ -82,7 +80,8 @@ dt-article h1 + h2 {
   }
   dt-article h1 + h2 {
     margin-top: 12px;
-    font-size: 22px;
+    font-size: 24px;
+    letter-spacing: 0.015em;
   }
 }
 

components/styles-base.css

@@ -21,6 +21,10 @@ figure {
   margin: 0;
 }
 
+h1 {
+  font-family: Cochin, Georgia, serif;
+}
+
 /*
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,

components/styles-layout.css

@@ -1,3 +1,16 @@
+/*
+  Column: 60px
+  Gutter: 24px
+
+  Body: 648px
+    - 8 columns
+    - 7 gutters
+  Middle: 816px
+  Page: 984px
+    - 12 columns
+    - 11 gutters
+*/
+
 .l-body,
 .l-body-outset,
 .l-page,
@@ -175,6 +188,6 @@ dt-article > dt-byline {
     margin-top: 0;
     margin-left: 48px;
     margin-right: calc((100vw - 984px) / 2);
-    width: calc(648px / 2 - 24px);
+    width: 396px;
   }
 }