better link usability

_src/_assets/styl/_kremalicious/code.styl

@@ -36,6 +36,8 @@ pre
     line-height: $line-height
     color: $code-color
     background-color: $code-bg
+    margin-left: -($spacer)
+    margin-right: -($spacer)
 
     // make 'em scrollable
     overflow: scroll

_src/_assets/styl/_kremalicious/content-photo.styl

@@ -69,6 +69,12 @@
 .photo-link
     display: block
 
+    &,
+    &:hover,
+    &:focus,
+    &:active
+        box-shadow: none
+
     &:hover
         img
             border-color: $link-color

_src/_assets/styl/_kremalicious/content-related.styl

@@ -18,13 +18,13 @@
             @extend .media-frame
 
     .post-title
-        @extend .h5, .transition
+        @extend .h5, .transition, .text-dimmed
         margin-top: ($spacer / 3)
         margin-bottom: 0
         padding: 0 2px
 
     .post-title-link
-        @extend .transition
+        @extend .transition, .link--nounderline
         display: block
 
         &:hover,

_src/_assets/styl/_kremalicious/content.styl

@@ -57,6 +57,9 @@
     margin-top: 0
     margin-bottom: $spacer
 
+    a
+        @extend .link--nounderline
+
     .format-link &
         @extend .h3
 
@@ -123,6 +126,9 @@
     @extend .small
     margin-top: ($spacer*2)
 
+    a
+        @extend .link--nounderline
+
 .byline,
 .time,
 .tags,
@@ -150,7 +156,7 @@
     margin-bottom: ($spacer/2)
 
 .category
-    @extend .h6, .textcenter, .mini
+    @extend .h6, .textcenter, .mini, .link--nounderline
     color: $text-color
     line-height: 1
     text-transform: uppercase
@@ -171,6 +177,7 @@
         color: #fff
 
 .tag
+    @extend .link--nounderline
     color: $text-color
     margin-right: 5px
 

_src/_assets/styl/_kremalicious/footer.styl

@@ -16,6 +16,9 @@
         color: $text-color-light
         line-height: $spacer
 
+    a
+        @extend .link--nounderline
+
 .footer-description
     @extend .h5
     a
@@ -44,7 +47,7 @@
         margin: 0
 
     .link
-        @extend .textcenter
+        @extend .textcenter, .link--nounderline
         width: 42px
         padding: $padding-small-vertical
         margin: 0

_src/_assets/styl/_kremalicious/header.styl

@@ -58,7 +58,7 @@
     @extend .logo
 
 .header__logo
-    @extend .ir
+    @extend .ir, .link--nounderline
     // repeat logo
     // but display hover version
     @extend .logo

_src/_assets/styl/_kremalicious/layout.styl

@@ -35,7 +35,10 @@
     border-bottom: 1px solid rgba(255,255,255,.7)
     box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
 
-    transform: translate3d(0,-($spacer*7.2),0)
+    transform: translate3d(0,-($spacer*7.7),0)
+
+    @media $screen-xs
+        transform: translate3d(0,-($spacer*7.2),0)
 
     @media $screen-sm
         transform: translate3d(0,-($spacer*5),0)

_src/_assets/styl/_kremalicious/media.styl

@@ -44,6 +44,10 @@ img.aligncenter
 
 .media-frame
     @extend .transition
-    border: 2px solid transparent
+    border-top: 2px solid transparent
+    border-bottom: 2px solid transparent
     border-radius: $border-radius-base
     box-shadow: 0 1px 3px alpha($brand-grey,.2)
+
+    @media $screen-sm
+        border: 2px solid transparent

_src/_assets/styl/_kremalicious/navigation.styl

@@ -63,7 +63,7 @@
         opacity: 1
 
 .nav-link
-    @extend .category
+    @extend .link--nounderline, .category
     font-size: $font-size-small
     text-shadow: 0 1px 0 rgba(#fff, .5)
     padding: $padding-base-horizontal
@@ -85,6 +85,7 @@
         margin-bottom: -5px
 
 .paginator__link
+    @extend .link--nounderline
     width: 2rem
     height: 2rem
     line-height: 1.7

_src/_assets/styl/_kremalicious/tagcloud.styl

@@ -1,3 +1,4 @@
 
 .tagcloud__tag
+    @extend .link--nounderline
     padding: .3rem .5rem

_src/_assets/styl/_kremalicious/typography.styl

@@ -10,7 +10,10 @@
 
 // Body reset
 html
-    font-size: $font-size-root
+    font-size: $font-size-root-xs
+
+    @media $screen-xs
+        font-size: $font-size-root
 
     @media $screen-lg
         font-size: $font-size-root-lg
@@ -117,25 +120,35 @@ h6, .h6
 // Links
 /////////////////////////////////////
 
-a
+a,
+.link
     color: $link-color
     text-decoration: none
-    transition: color .2s ease-in-out
+    transition: .2s ease-in-out
+    box-shadow: 0 1px 0 rgba($link-color, 40%)
 
     &:hover,
     &:focus
         outline: 0
         color: $link-color-hover
+        box-shadow: 0 1px 0 rgba($link-color-hover, 70%)
 
     &:active
         transition: none
         color: darken($link-color, 30%)
+        box-shadow: 0 1px 0 darken($link-color, 30%)
 
     h1 &,
     h2 &,
     h3 &
         color: $headings-color
 
+.link--nounderline
+    &,
+    &:hover,
+    &:focus,
+    &:active
+        box-shadow: none
 
 // Lists
 /////////////////////////////////////
@@ -233,7 +246,9 @@ hr
     margin-bottom: ($spacer*2)
 
 .large
-    font-size: $font-size-large
+    font-size: $font-size-large-xs
+    @media $screen-xs
+        font-size: $font-size-large
 
 .small
     font-size: $font-size-small

_src/_assets/styl/_kremalicious/variables.styl

@@ -40,10 +40,12 @@ $text-color-light           = $brand-grey-light
 // Typography
 /////////////////////////////////////
 
+$font-size-root-xs          = 16px
 $font-size-root             = 18px
 $font-size-root-lg          = 20px
 
 $font-size-base             = 1rem
+$font-size-large-xs         = 1.15rem
 $font-size-large            = 1.45rem
 $font-size-small            = 0.8rem
 $font-size-mini             = 0.6rem

_src/tag.html

@@ -12,7 +12,7 @@ title: tags
         <section class="tagcloud">
             {% for tag in site.tags %}
                 <span style="font-size: {{ tag | last | size | times: 500 | divided_by: site.tags.size | plus: 70 }}%">
-                    <a class="tagcloud__tag" href="/{{ tag | first | slugize }}/">
+                    <a class="tagcloud__tag" href="/tag/{{ tag | first | slugize }}/">
                         {{ tag | first }}
                     </a>
                 </span>