1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-09-24 01:58:50 +02:00

typography

This commit is contained in:
Matthias Kretschmann 2015-08-02 21:15:22 +02:00
parent 35d9de9e69
commit 413f86856d
8 changed files with 45 additions and 38 deletions

View File

@ -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

View File

@ -28,6 +28,5 @@
.featured-image
display: block
img
margin-bottom: 0
box-shadow: 0 1px 3px rgba(0,0,0,.2)

View File

@ -19,6 +19,7 @@
img
max-height: 540px
width: auto
box-shadow: 0 1px 3px rgba(0,0,0,.2)
figcaption
@extend .transition

View File

@ -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

View File

@ -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

View File

@ -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 &,

View File

@ -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