From 238131ada7876e7a340d67c4799dfd318f61f09a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 10 Jun 2015 22:53:29 +0200
Subject: [PATCH] kinda responsive typography

---
 _src/_assets/styl/content.styl    | 11 ++++-------
 _src/_assets/styl/typography.styl | 16 ++++++++++++----
 _src/_assets/styl/variables.styl  | 29 +++++++++++++++++------------
 _src/_includes/comments.html      |  1 -
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl
index 2ea9cf1e..0aa3514e 100644
--- a/_src/_assets/styl/content.styl
+++ b/_src/_assets/styl/content.styl
@@ -82,20 +82,18 @@
 .byline,
 .time
     font-style: italic
+    color: $text-color-dimmed
 
 .byline
     margin-bottom: 0
-    color: $text-color-light
 
     .by
         display: block
 
-.time
-    color: $text-color-dimmed
 
-//
 // Categories & Tags
-//
+/////////////////////////////////////
+
 .categories
     margin-bottom: 0
 
@@ -103,7 +101,7 @@
     text-transform: capitalize
 
 .tag
-    color: $text-color-dimmed
+    color: $text-color
     margin-right: 5px
 
     &:before
@@ -111,7 +109,6 @@
         color: darken($page-bg, 15%)
         margin-right: 2px
 
-
 .avatar
     width: 80px
     height: 80px
diff --git a/_src/_assets/styl/typography.styl b/_src/_assets/styl/typography.styl
index cc9cfc56..52d6b545 100644
--- a/_src/_assets/styl/typography.styl
+++ b/_src/_assets/styl/typography.styl
@@ -49,22 +49,30 @@ h6, .h6
     margin-bottom: $line-height-computed
 
 h1, .h1
-    font-size: $font-size-h1
+    font-size: $font-size-h1-small
+    @media $breakpoint1
+        font-size: $font-size-h1
     @media $breakpoint3
         font-size: $font-size-h1-large
 
 h2, .h2
-    font-size: $font-size-h2
+    font-size: $font-size-h2-small
+    @media $breakpoint1
+        font-size: $font-size-h2
     @media $breakpoint3
         font-size: $font-size-h2-large
 
 h3, .h3
-    font-size: $font-size-h3
+    font-size: $font-size-h3-small
+    @media $breakpoint1
+        font-size: $font-size-h3
     @media $breakpoint3
         font-size: $font-size-h3-large
 
 h4, .h4
-    font-size: $font-size-h4
+    font-size: $font-size-h4-small
+    @media $breakpoint1
+        font-size: $font-size-h4
     @media $breakpoint3
         font-size: $font-size-h4-large
 
diff --git a/_src/_assets/styl/variables.styl b/_src/_assets/styl/variables.styl
index 11f06427..62fc4674 100644
--- a/_src/_assets/styl/variables.styl
+++ b/_src/_assets/styl/variables.styl
@@ -16,7 +16,7 @@ support-for-ie              = false                 // Nib IE 8 support
 // Asset Paths
 /////////////////////////////////////
 
-$img-path                    = '/assets/images/'
+$img-path                    = '/assets/img/'
 $font-path                   = '/assets/fonts/'
 
 
@@ -27,7 +27,15 @@ $brand-dark                 = #015565
 $brand-light                = #e7eef4
 $brand-cyan                 = #3a9085
 $brand-grey                 = #56666e
-$brand-grey-light           = #96a6ad
+$brand-grey-light           = lighten($brand-grey, 10%)
+
+
+// Text Colors
+/////////////////////////////////////
+
+$text-color                 = $brand-grey-light
+$text-color-light           = lighten($brand-grey-light, 30%)
+$text-color-dimmed          = lighten($brand-grey-light, 40%)
 
 
 // Typography
@@ -52,6 +60,11 @@ $font-size-h4-large         = ceil(($font-size-large * 1.25))
 $font-size-h5-large         = $font-size-large
 $font-size-h6-large         = $font-size-base
 
+$font-size-h1-small         = floor(($font-size-small * 2.75))
+$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.4444444444  // 26px/18px
 $line-height-computed       = floor($font-size-base * $line-height-base)
 $line-height-large          = 1.5           // 36px/24px
@@ -59,7 +72,7 @@ $line-height-small          = 1.1428571429
 
 $font-family-base           = 'ff-tisa-sans-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif
 $font-weight-base           = 400
-$font-color-base            = $brand-grey
+$font-color-base            = $text-color
 
 $font-family-monospace      = Menlo, Monaco, Consolas, 'Courier New', monospace
 
@@ -69,14 +82,6 @@ $headings-line-height       = 1.1
 $headings-color             = $brand-dark
 
 
-// Text Colors
-/////////////////////////////////////
-
-$text-color                 = lighten($brand-grey, 5%)
-$text-color-light           = darken($brand-grey-light, 5%)
-$text-color-dimmed          = lighten($brand-grey-light, 5%)
-
-
 // Scaffolding
 /////////////////////////////////////
 
@@ -150,4 +155,4 @@ $breakpoint3                = 'only screen and (min-width: 87.500em)'
 /////////////////////////////////////
 
 $highDPI                    = 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) '
-$highDPI_3x                 = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) '
\ No newline at end of file
+$highDPI_3x                 = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) '
diff --git a/_src/_includes/comments.html b/_src/_includes/comments.html
index c393f80b..ffc80da6 100644
--- a/_src/_includes/comments.html
+++ b/_src/_includes/comments.html
@@ -1,7 +1,6 @@
 
 <aside class="comments">
 
-    <p>You should tweet this post</p>
     <p class="btn-wrap">
         <a class="btn twitter-share" target="_blank" href="https://twitter.com/intent/tweet?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&text={{ page.title | cgi_escape }}&via=kremalicious&related=kremaliciouscom">
             <svg class="icon icon-entypo icon-entypo-twitter">