From 413f86856d110faf600ee629934a825cb246d10f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 2 Aug 2015 21:15:22 +0200
Subject: [PATCH] typography

---
 _src/_assets/styl/code.styl             |  3 +-
 _src/_assets/styl/content-featured.styl |  5 +--
 _src/_assets/styl/content-photo.styl    |  1 +
 _src/_assets/styl/content.styl          |  3 ++
 _src/_assets/styl/media.styl            |  3 +-
 _src/_assets/styl/typography.styl       | 10 +++--
 _src/_assets/styl/variables.styl        |  2 +-
 _src/_includes/head.html                | 56 ++++++++++++-------------
 8 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/_src/_assets/styl/code.styl b/_src/_assets/styl/code.styl
index 4c35ec97..21c6031b 100644
--- a/_src/_assets/styl/code.styl
+++ b/_src/_assets/styl/code.styl
@@ -29,7 +29,8 @@ kbd
     color: $kbd-color
     background-color: $kbd-bg
     border-radius: $border-radius-small
-    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)
+    border: 1px solid $kbd-bg
+    box-shadow: inset 0 1px 0 rgba(#fff, .4)
 
 pre
     display: block
diff --git a/_src/_assets/styl/content-featured.styl b/_src/_assets/styl/content-featured.styl
index fb4efdc8..e72e940b 100644
--- a/_src/_assets/styl/content-featured.styl
+++ b/_src/_assets/styl/content-featured.styl
@@ -28,6 +28,5 @@
 
 .featured-image
     display: block
-
-    img
-        margin-bottom: 0
+    margin-bottom: 0
+    box-shadow: 0 1px 3px rgba(0,0,0,.2)
diff --git a/_src/_assets/styl/content-photo.styl b/_src/_assets/styl/content-photo.styl
index c97bccc8..085eb9aa 100644
--- a/_src/_assets/styl/content-photo.styl
+++ b/_src/_assets/styl/content-photo.styl
@@ -19,6 +19,7 @@
         img
             max-height: 540px
             width: auto
+            box-shadow: 0 1px 3px rgba(0,0,0,.2)
 
         figcaption
             @extend .transition
diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl
index fb26e2e9..feb25dec 100644
--- a/_src/_assets/styl/content.styl
+++ b/_src/_assets/styl/content.styl
@@ -66,6 +66,9 @@
     h1
         font-size: ceil($font-size-base * 2.5)
 
+    .teaser
+        box-shadow: 0 1px 3px rgba(0,0,0,.2)
+
     p:last-child
         margin-bottom: 0
 
diff --git a/_src/_assets/styl/media.styl b/_src/_assets/styl/media.styl
index d2fca218..9d4c17ca 100644
--- a/_src/_assets/styl/media.styl
+++ b/_src/_assets/styl/media.styl
@@ -20,7 +20,6 @@ figure, img, svg, video, audio, embed, canvas
 
 img
     vertical-align: middle
-    box-shadow: 0 1px 3px rgba(0,0,0,.2)
 
 .teaser,
 .teaser img
@@ -42,4 +41,4 @@ img.aligncenter
     img.alignleft
         margin: 0 $line-height-computed $line-height-computed 0
     img.alignright
-        margin: 0 0 $line-height-computed $line-height-computed
\ No newline at end of file
+        margin: 0 0 $line-height-computed $line-height-computed
diff --git a/_src/_assets/styl/typography.styl b/_src/_assets/styl/typography.styl
index d3921ecd..38f069f2 100644
--- a/_src/_assets/styl/typography.styl
+++ b/_src/_assets/styl/typography.styl
@@ -15,6 +15,12 @@ body
     line-height: $line-height-base
     color: $font-color-base
     word-wrap: break-word
+    text-rendering: optimizeLegibility;
+    // Controversial! But prevents text flickering in
+    // Safari/Firefox when animations are running
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -moz-font-feature-settings: 'liga', 'kern';
 
     @media $breakpoint3
         font-size: $font-size-large
@@ -102,9 +108,7 @@ a
 
     &:active
         transition: none
-        background: $link-color
-        color: #fff
-        text-shadow: none
+        color: darken($link-color, 20%)
 
     h1 &,
     h2 &,
diff --git a/_src/_assets/styl/variables.styl b/_src/_assets/styl/variables.styl
index a9dffc0e..ab6ca6a2 100644
--- a/_src/_assets/styl/variables.styl
+++ b/_src/_assets/styl/variables.styl
@@ -65,7 +65,7 @@ $font-size-h2-small         = floor(($font-size-small * 2))
 $font-size-h3-small         = ceil(($font-size-small * 1.75))
 $font-size-h4-small         = ceil(($font-size-small * 1.25))
 
-$line-height-base           = 1.5555555556  // 28px/18px
+$line-height-base           = 1.4444444444  // 26px/18px
 $line-height-computed       = floor($font-size-base * $line-height-base)
 $line-height-large          = 1.5           // 36px/24px
 $line-height-small          = 1.1428571429
diff --git a/_src/_includes/head.html b/_src/_includes/head.html
index 8eb76c38..281e91e4 100644
--- a/_src/_includes/head.html
+++ b/_src/_includes/head.html
@@ -1,28 +1,28 @@
 <!DOCTYPE html>
 <!--
-	      ___           ___
-	     /__/\         /__/|
-	    |  |::\       |  |:|
-	    |  |:|:\      |  |:|
-	  __|__|:|\:\   __|  |:|
-	 /__/::::| \:\ /__/\_|:|____
-	 \  \:\~~\__\/ \  \:\/:::::/
-	  \  \:\        \  \::/~~~~
-	   \  \:\        \  \:\
-	    \  \:\        \  \:\
-	     \__\/         \__\/
+          ___           ___
+         /__/\         /__/|
+        |  |::\       |  |:|
+        |  |:|:\      |  |:|
+      __|__|:|\:\   __|  |:|
+     /__/::::| \:\ /__/\_|:|____
+     \  \:\~~\__\/ \  \:\/:::::/
+      \  \:\        \  \::/~~~~
+       \  \:\        \  \:\
+        \  \:\        \  \:\
+         \__\/         \__\/
 
-	 YOU EARNED THE GEEK ACHIEVEMENT
-	 FOR LOOKING AT MY SOURCE
+     YOU EARNED THE GEEK ACHIEVEMENT
+     FOR LOOKING AT MY SOURCE
 
-	 But because of all the minimizing and caching
-	 going on you better check out the code on
-	 github
-	 _____________________________________________
+     But because of all the minimizing and caching
+     going on you better check out the code on
+     github
+     _____________________________________________
 
-	 https://github.com/kremalicious/kremalicious3
+     https://github.com/kremalicious/kremalicious3
 
-	 _____________________________________________
+     _____________________________________________
 -->
 <html lang="en">
 <head>
@@ -48,8 +48,8 @@
     <meta name="author" content="{% if page.author %}{{ page.author }}{% else %}{{ site.author.name }}{% endif %}">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<meta name="HandheldFriendly" content="True">
-	<meta name="MobileOptimized" content="320">
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="cleartype" content="on">
 
@@ -58,7 +58,7 @@
         <link rel="stylesheet" href="/assets/css/{{ page.style }}">
     {% endif %}
 
-	<!--
+    <!--
         TypeKit
         Improved snippet from https://blog.5apps.com/2014/02/21/using-typekit-the-right-way-with-an-improved-loading-script.html
     -->
@@ -74,14 +74,14 @@
         })(document);
     </script>
 
-	<!-- Picturefill  -->
-	<script src="/assets/js/picturefill.min.js" async></script>
+    <!-- Picturefill  -->
+    <script src="/assets/js/picturefill.min.js" async></script>
 
-	<!-- Canonical URL -->
+    <!-- Canonical URL -->
     <link rel="canonical" href="{{ site.url}}{{ page.url | replace:'index.html','' }}">
 
     <!-- Atom feed -->
-	<link href="{{ site.url }}/feed/" rel="alternate" type="application/atom+xml" title="{{ site.name }} posts feed" />
+    <link href="{{ site.url }}/feed/" rel="alternate" type="application/atom+xml" title="{{ site.name }} posts feed" />
 
     <!-- Apple  -->
     <meta name="apple-mobile-web-app-title" content="kremalicious">
@@ -94,8 +94,8 @@
     <link rel="icon" type="image/png" href="/assets/img/touch-icon-192x192.png" sizes="192x192">
     <link rel="icon" type="image/png" href="/assets/img/favicon-96x96.png" sizes="96x96">
     <link rel="icon" type="image/png" href="/assets/img/favicon-16x16.png" sizes="16x16">
-  	<meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/metro-tile.png"/>
-  	<meta name="msapplication-TileColor" content="#015565"/>
+      <meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/metro-tile.png"/>
+      <meta name="msapplication-TileColor" content="#015565"/>
 
     <!-- OpenGraph -->
     {% include opengraph.html %}