Typography updates (#16)

* Overall updates to slab font. Futura to Franklin * Updates body text to freight pro
tylergaw · Dec 28, 2016 · 31812bd · 31812bd
1 parent a681cb4
commit 31812bd
Show file tree

Hide file tree

Showing 25 changed files with 171 additions and 165 deletions.
diff --git a/src/_includes/footer.html b/src/_includes/footer.html
@@ -1,20 +1,24 @@
     </div>
     <footer role="contentinfo">
-      <ul class="the-others">
-        <li>
-          <a class="icon" href="https://github.com/tylergaw" rel="me">
-            {% include icon-github.html %}
-          </a>
-        </li>
-        <li>
-          <a class="icon" href="/rss.xml">
-            {% include icon-rss.html %}
-          </a>
-        </li>
-      </ul>
       <div class="contact">
-        <a href="mailto:me@tylergaw.com" rel="me">me@tylergaw.com</a>
-        <a href="/purpose">Purpose</a>
+        <a href="mailto:me@tylergaw.com" rel="me">
+          me@tylergaw.com
+        </a>
+        <a href="https://twitter.com/tylergaw" rel="me">
+          @tylergaw
+        </a>
+        <a href="https://github.com/tylergaw" rel="me">
+          GitHub
+        </a>
+        <a href="https://dribbble.com/tylergaw" rel="me">
+          Dribbble
+        </a>
+        <a href="/purpose">
+          /Purpose
+        </a>
+        <a href="/rss.xml">
+          RSS
+        </a>
       </div>
     </footer>
 

diff --git a/src/_includes/logo-svg.html b/src/_includes/logo-svg.html
@@ -1,4 +1,4 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" viewBox="-20 -70 3250 2240" aria-labelledby="title desc">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" viewBox="-20 -140 3250 2240" aria-labelledby="title desc">
     <title>Tyler Gaw Design &amp; Development - Brooklyn, NY U.S.A</title>
     <desc>A hand drawn version of the title.</desc>
 <g id="logo-group">

diff --git a/src/_layouts/article.html b/src/_layouts/article.html
@@ -6,10 +6,10 @@
 
 <article class="hentry">
   <header>
-    <h1 class="entry-title {{ page.title_size }}-title">{{ page.title }}</h1>
     <time class="published" datetime="{{ page.date }}">
       {{ page.date | date: '%B %d, %Y' }}
     </time>
+    <h1 class="entry-title {{ page.title_size }}-title">{{ page.title }}</h1>
     <p class="entry-author author vcard">
       By <span class="fn">Tyler Gaw</span>
     </p>

diff --git a/src/about.html b/src/about.html
@@ -6,14 +6,16 @@
 ---
 
 <div class="big-talker">
-  <h2 class="gaw-gives-a-shit">Tyler Gaw gives a shit</h2>
+  <h2 class="gaw-gives-a-shit">
+    Tyler Gaw gives a shit
+  </h2>
 
   <div class="my-big-dumb-faces"></div>
 
   <div class="all-about-me">
     <p class="number-one">
       The most important thing to know about me as a designer, developer,
-      and human is that <strong>I give a shit</strong> and I act accordingly.
+      and human is that <strong>I give a shit</strong> and act accordingly.
     </p>
 
     <p>
@@ -169,7 +171,7 @@ <h4>Python</h4>
 
 <div class="the-site">
   <div class="site-description">
-    <h2>About This Site</h2>
+    <h3>About This Site</h3>
     <p>
       I staked my claim on this piece of Internet property in 2006. Since then
       I’ve maintained this site as my portfolio and blog. You can access the source

diff --git a/src/articles.html b/src/articles.html
@@ -147,7 +147,7 @@ <h2>Why Write?</h2>
   </li>
   <li>
     <time datetime="2012-05-17">May 17, 2012</time>
-    <a href="./articles/reacting-to-media-queries-in-javascript">Reacting to Media Queries in Javascript</a>
+    <a href="./articles/reacting-to-media-queries-in-javascript">Reacting to Media Queries in JavaScript</a>
     <p>
       I was looking for a way for Javascript to know when a media query
       condition was met or not met. While window.matchMedia provides the

diff --git a/src/articles/reacting-to-media-queries-in-javascript.html b/src/articles/reacting-to-media-queries-in-javascript.html
@@ -1,6 +1,6 @@
 ---
 layout: article
-title: "Reacting to Media Queries in Javascript"
+title: "Reacting to Media Queries in JavaScript"
 title_size: long
 date: 2012-05-17
 disqus_id: reacting-to-media-queries-in-javascript

diff --git a/src/articles/sass-to-postcss.html b/src/articles/sass-to-postcss.html
@@ -290,12 +290,12 @@ <h3>Extend and Placeholder classes</h3>
 <pre><code class="language-css">:root {
   ...
 
-  --futura: {
+  --franklin: {
     font-family: 'futura-pt', helvetica, sans-serif;
   };
 
-  --futura-heading: {
-    @apply --futura;
+  --franklin-heading: {
+    @apply --franklin;
     font-weight: 700;
     line-height: 1.1;
     text-transform: uppercase;
@@ -307,7 +307,7 @@ <h3>Extend and Placeholder classes</h3>
 </p>
 
 <pre><code class="language-scss">.my-heading {
-  @apply --futura-heading;
+  @apply --franklin-heading;
 }</code></pre>
 
 <p>

diff --git a/src/css/modules/about.css b/src/css/modules/about.css
@@ -1,16 +1,17 @@
 [data-page='about'] {
-  & h2,
   & h3,
-  & h4,
-  & .design-to-me {
-    @apply --futura-heading;
+  & h4 {
+    @apply --franklin-heading;
   }
 }
 
 .gaw-gives-a-shit {
+  @apply --franklin-heading;
   font-size: 2.9em;
+  font-weight: 900;
   margin-bottom: 0.2em;
   text-align: center;
+  text-transform: uppercase;
   width: 98%;
 }
 
@@ -41,7 +42,7 @@
     text-align: center;
 
     & strong {
-      @apply --futura-heading;
+      @apply --franklin-heading;
       font-style: normal;
     }
 
@@ -53,7 +54,6 @@
 }
 
 .all-about-me {
-  box-sizing: border-box;
   box-sizing: border-box;
   font-size: 1.2em;
   margin: 0 auto;
@@ -64,6 +64,7 @@
 
 .number-one + p:first-letter {
   @apply --drop-cap;
+  margin-left: -0.1em;
 }
 
 .my-big-dumb-faces {
@@ -75,16 +76,20 @@
 }
 
 .design-to-me {
-  border-top: 8px solid var(--offwhite);
-  border-bottom: 8px solid var(--offwhite);
+  @apply --franklin-heading;
+  background-color: var(--grey);
+  border-top: 6px solid var(--offwhite);
+  border-bottom: 6px solid var(--offwhite);
   box-sizing: border-box;
   color: var(--offwhite);
-  font-size: 1.55em;
+  font-size: 1.8em;
+  font-weight: 900;
   line-height: 1.3 !important;
   margin: 0 auto;
-  padding: 0.3em 0;
+  padding: 0.4em 0.2em;
   position: relative;
   text-align: center;
+  text-transform: uppercase;
 }
 
 .things-i-do {
@@ -99,7 +104,7 @@
 }
 
 .services {
-  @apply --futura;
+  @apply --franklin;
   align-items: center;
   background-color: var(--yellow);
   color: var(--grey);
@@ -115,6 +120,7 @@
   & .boastin {
     border-bottom: 4px solid var(--grey);
     font-size: 1em;
+    font-weight: 500;
     margin: 0 auto;
     padding: 0.3em 0 0.6em 0;
     width: var(--width-services);
@@ -131,6 +137,7 @@
     border-top: 4px solid var(--grey);
     box-sizing: border-box;
     font-size: 1em;
+    font-weight: 500;
     line-height: 1.3;
     margin: 0 auto;
     padding: 0.3em 3%;
@@ -139,6 +146,7 @@
 
   & .no-bullshit {
     font-size: 1.3em;
+    font-weight: 700;
     padding: 0.6em 0;
   }
 }
@@ -149,7 +157,7 @@
 
   & h2 {
     font-size: 1.6em;
-    font-weight: 700;
+    font-weight: 900;
   }
 }
 
@@ -210,9 +218,9 @@
   line-height: 1.5;
   width: 100%;
 
-  & h2 {
+  & h3 {
     font-size: 1.2em;
-    padding: 0.6em 0 0.1em 0;
+    padding: 0.6em 0 0.25em 0;
   }
 
   & p {
@@ -236,7 +244,7 @@
   }
 
   & a {
-    @apply --futura-heading;
+    @apply --franklin-heading;
     background-color: var(--grey);
     background-size: 100%;
     background-repeat: no-repeat;
@@ -251,6 +259,7 @@
     & b {
       background-color: var(--yellow);
       color: var(--grey);
+      padding: 0 0.25em;
     }
   }
 
@@ -287,7 +296,8 @@
 
 @media (min-width: 500px) {
   .design-to-me {
-    font-size: 5.2vw;
+    box-sizing: border-box;
+    font-size: 5.4vw;
     width: 98%;
   }
 
@@ -318,18 +328,22 @@
 
 @media (min-width: 555px) {
   .skill-type {
-    & li {
+    & ul {
       display: flex;
       flex-wrap: wrap;
+      justify-content: space-between;
+    }
+
+    & li {
+      width: 48%;
     }
 
     & h4 {
       padding-top: 0.25em;
-      width: 20%;
     }
 
     & p {
-      width: 80%;
+      max-width: 20em;
     }
   }
 }

diff --git a/src/css/modules/article.css b/src/css/modules/article.css
@@ -15,34 +15,37 @@
   overflow: hidden;
 
   & header {
-    margin: 1.8em 0 2.3em 0;
+    margin: 2.4em 0 2.3em 0;
     text-align: center;
   }
 
   & .entry-title {
-    @apply --futura-heading;
+    @apply --franklin-heading;
     color: var(--offwhite);
-    font-size: 2.5em;
+    font-size: 3.2em;
+    font-weight: 900;
     margin: 0 auto;
     max-width: 95%;
   }
 
   & .published {
+    @apply --franklin-heading;
     color: var(--yellow);
     display: block;
     font-size: 1.2em;
-    margin-top: 0.4em;
+    font-weight: 500;
   }
 
   @media (min-width: 620px) {
     & .entry-title {
-      font-size: 6.5vw;
+      font-size: 7vw;
     }
   }
 }
 
 .entry-author {
   display: none;
+  visibility: hidden;
 }
 
 .entry-content {
@@ -64,7 +67,7 @@
   }
 
   & h2 {
-    @apply --futura-heading;
+    @apply --franklin-heading;
     font-size: 1.2em;
     padding: 0.7em 0 0.25em 0;
   }
@@ -142,6 +145,7 @@
   & ul,
   & ol {
     @apply --maxedText;
+    clear: both;
     padding: 0 0.2em 1.4em 0.2em;
   }