m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-14 21:10:25 +01:00
Code

rem all the things

Browse Source 
- switch to rem based typography
- switch to rem based spacing
- responsive typography through root font size change
This commit is contained in:
Matthias Kretschmann 2016-04-16 19:32:58 +02:00
parent faaa45686b
commit 384b364a63
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
24 changed files with 165 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_src/_assets/styl/alerts.styl
View File

@ -6,7 +6,7 @@
.alert
padding: $padding-base-vertical $padding-base-horizontal
margin-bottom: $line-height-computed
margin-bottom: $spacer
border-radius: $border-radius-base
font-size: $font-size-small
border: 1px solid transparent

8
_src/_assets/styl/buttons.styl
View File

@ -32,7 +32,7 @@ a.btn
transition: all .2s ease-in-out
// Default Button
button-size($padding-base-vertical, $padding-base-horizontal, $font-size-small, $line-height-base, $border-radius-base)
button-size($padding-base-vertical, $padding-base-horizontal, $font-size-small, $line-height, $border-radius-base)
background-color: rgba(255,255,255,.1)
border: 1px solid rgba(94,131,162,.3)
border-bottom-color: rgba(94,131,162,.4)
@ -40,7 +40,7 @@ a.btn
font-weight: $headings-font-weight
color: $brand-grey
text-transform: uppercase
box-shadow: 0 1px 3px alpha($brand-grey-light, .2), inset 0 1px 0 rgba(255,255,255,.7)
box-shadow: 0 1px 3px alpha($brand-grey-light, .1), inset 0 1px 0 rgba(255,255,255,.7)
&:hover,
&:focus
@ -70,7 +70,7 @@ a.btn
// grid buttons
&.col2,
&.col3
margin-bottom: ($line-height-computed/2)
margin-bottom: ($spacer/2)
@media $breakpoint2
margin-bottom: 0
@ -86,7 +86,7 @@ a.btn-primary
text-shadow: 0 1px 0 rgba(255,255,255,.3)
background: lighten($link-color, 15%)
border-color: $link-color
box-shadow: 0 1px 3px $brand-grey-light, inset 0 1px 0 rgba(255,255,255,.4)
box-shadow: 0 1px 3px alpha($brand-grey-light, .4), inset 0 1px 0 rgba(255,255,255,.4)
&:hover,
&:focus

8
_src/_assets/styl/code.styl
View File

@ -10,8 +10,6 @@ pre,
samp
font-family: $font-family-monospace
font-size: $font-size-mini
@media $breakpoint3
font-size: $font-size-small
hyphens: none
code,
@ -34,9 +32,9 @@ kbd
pre
display: block
padding: ($line-height-computed/2) 12px
margin: 0 0 $line-height-computed
line-height: $line-height-base
padding: ($spacer/2) 12px
margin: 0 0 $spacer
line-height: $line-height
color: $code-color
background-color: $code-bg
border-radius: $border-radius-base

2
_src/_assets/styl/comments.styl
View File

@ -11,7 +11,7 @@
color: $text-color-dimmed
p
margin-bottom: ($line-height-computed/2)
margin-bottom: ($spacer/2)
.btn-wrap
height: 27px

6
_src/_assets/styl/content-featured.styl
View File

@ -6,7 +6,7 @@
.featured
@extend .divider-bottom
padding-bottom: ($line-height-computed*2)
padding-bottom: ($spacer*2)
.grid
margin-bottom: 0
@ -18,7 +18,7 @@
margin-right: -8%
@media $breakpoint2
padding-bottom: ($line-height-computed*3)
padding-bottom: ($spacer*3)
.grid__col
padding-top: 0
&:first-child
@ -50,7 +50,7 @@
font-weight: $headings-font-weight
font-style: normal
font-size: $font-size-small
padding: ($line-height-computed/3)
padding: ($spacer/3)
background: $link-color
background: alpha($link-color, .7)
color: #fff

2
_src/_assets/styl/content-link.styl
View File

@ -9,7 +9,7 @@
font-family: $font-family-base
font-size: $font-size-mini
color: $text-color-dimmed
padding: ($line-height-computed/3) 0
padding: ($spacer/3) 0
max-width: 70%
@media $breakpoint2

10
_src/_assets/styl/content-photo.styl
View File

@ -31,14 +31,14 @@
font-weight: $headings-font-weight
font-style: normal
font-size: $font-size-small
padding: ($line-height-computed/3)
padding: ($spacer/3)
background: $link-color
background: alpha($link-color, .7)
color: #fff
text-shadow: 0 1px 0 #000
left: -8%
top: $line-height-computed
top: $spacer
@media $breakpoint2
left: -16%
@ -52,15 +52,15 @@
.entry-content
text-align: left
margin-top: $line-height-computed
margin-top: $spacer
.page-single &
padding-top: 0
padding-bottom: ($line-height-computed*3)
padding-bottom: ($spacer*3)
@media $breakpoint2
padding-top: 0
padding-bottom: ($line-height-computed*6)
padding-bottom: ($spacer*6)
figure img
max-height: none

6
_src/_assets/styl/content-related.styl
View File

@ -10,7 +10,7 @@
.related-posts-title
@extend .heading-band, .h3
margin-bottom: $line-height-computed
margin-bottom: $spacer
.related-post
@ -39,8 +39,8 @@
//
.related-photos
@extend .divider-top
margin-top: $line-height-computed
padding-top: $line-height-computed
margin-top: $spacer
padding-top: $spacer
.photo-link
display: block

30
_src/_assets/styl/content.styl
View File

@ -11,8 +11,8 @@
.page-title
@extend .h2, .heading-band
color: $brand-grey-light
margin-top: $line-height-computed
margin-bottom: $line-height-computed
margin-top: $spacer
margin-bottom: $spacer
.hash
@extend .h3
@ -21,13 +21,13 @@
.hentry
@extend .divider-bottom
padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2)
padding-top: ($spacer*2)
padding-bottom: ($spacer*2)
width: 100%
@media $breakpoint2
padding-top: ($line-height-computed*3)
padding-bottom: ($line-height-computed*3)
padding-top: ($spacer*3)
padding-bottom: ($spacer*3)
.page-single &
border: none
@ -43,7 +43,7 @@
@extend .h1, .textcenter
color: $headings-color
margin-top: 0
margin-bottom: $line-height-computed
margin-bottom: $spacer
.format-link &
@extend .h3
@ -56,7 +56,7 @@
picture
max-width: none
display: block
margin: ($line-height-computed*1.5) -8%
margin: ($spacer*1.5) -8%
@media $breakpoint2
margin-left: -16%
@ -79,10 +79,14 @@
@extend .heading-band
h1
font-size: ceil($font-size-base * 2.5)
@extend .h2
h2
@extend .h3
h3
@extend .h4
img:not(.hentry__teaser img)
margin-bottom: ($line-height-computed/2)
margin-bottom: ($spacer/2)
p:last-child
margin-bottom: 0
@ -92,7 +96,7 @@
/////////////////////////////////////
.entry-meta
margin-top: ($line-height-computed*2)
margin-top: ($spacer*2)
font-size: $font-size-small
.byline,
@ -113,13 +117,13 @@
display: block
.time
margin-bottom: ($line-height-computed*2)
margin-bottom: ($spacer*2)
// Categories & Tags
/////////////////////////////////////
.categories
margin-bottom: ($line-height-computed/2)
margin-bottom: ($spacer/2)
.category
@extend .h6, .textcenter

14
_src/_assets/styl/footer.styl
View File

@ -6,15 +6,15 @@
.site__footer
@extend .textcenter
padding-top: ($line-height-computed*2)
padding-top: ($spacer*2)
.gravatar
margin-bottom: ($line-height-computed/2)
margin-bottom: ($spacer/2)
&,
.footer-description
color: $text-color-light
line-height: $line-height-computed
line-height: $spacer
.footer-description
@extend .h5
@ -23,8 +23,8 @@
.footer-copyright
@extend .divider-top
padding-top: $line-height-computed
padding-bottom: $line-height-computed
padding-top: $spacer
padding-bottom: $spacer
p
margin-bottom: 0
@ -38,7 +38,7 @@
// Subscribe component
.subscribe
margin: $line-height-computed auto
margin: $spacer auto
p
@extend .textcenter
margin: 0
@ -74,4 +74,4 @@
.subscribe-title
@extend .h5
color: $text-color-dimmed
margin-bottom: ($line-height-computed/2)
margin-bottom: ($spacer/2)

8
_src/_assets/styl/forms.styl
View File

@ -18,7 +18,7 @@ legend
display: block
width: 100%
padding: 0
margin-bottom: $line-height-computed
margin-bottom: $spacer
font-size: ($font-size-base * 1.5)
line-height: inherit
border: 0
@ -69,7 +69,7 @@ select[size]
padding: $padding-base-vertical $padding-base-horizontal
font-size: $input-font-size
font-weight: $input-font-weight
line-height: $line-height-base
line-height: $line-height
color: $input-color
background-color: $input-bg
background-image: none // Reset unusual Firefox-on-Android default style
@ -108,7 +108,7 @@ select[size]
/////////////////////////////////////
.form-group
margin-bottom: $line-height-computed
margin-bottom: $spacer
// Search inputs
@ -124,7 +124,7 @@ input[type="search"]
.radio,
.checkbox
display: block
min-height: $line-height-computed // clear the floating input if there is no label text
min-height: $spacer // clear the floating input if there is no label text
margin-top: 10px
margin-bottom: 10px

8
_src/_assets/styl/header.styl
View File

@ -7,12 +7,12 @@
.site__header
width: 100%
background: $body-bg
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
margin-top: ($spacer/2)
margin-bottom: ($spacer/2)
@media $breakpoint2
margin-top: $line-height-computed
margin-bottom: $line-height-computed
margin-top: $spacer
margin-bottom: $spacer
.grid
position: relative

3
_src/_assets/styl/kremalicious3.styl
View File

@ -14,10 +14,9 @@
@import 'mixins'
// Core CSS
@import 'scaffolding'
@import 'typography'
@import 'grid'
@import 'layout'
@import 'typography'
@import 'forms'
@import 'buttons'
@import 'icons'

22
_src/_assets/styl/layout.styl
View File

@ -18,10 +18,10 @@
margin: 0 auto
.site__document
padding-top: ($line-height-computed*2)
padding-top: ($spacer*2)
@media $breakpoint2
padding-top: ($line-height-computed*4)
padding-top: ($spacer*4)
// topbar and footer as fixed
@ -34,27 +34,24 @@
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,-200px,0)
@media $breakpoint1
transform: translate3d(0,-200px,0)
transform: translate3d(0,-($spacer*6),0)
@media $breakpoint2
transform: translate3d(0,-160px,0)
transform: translate3d(0,-($spacer*5),0)
.has-menu-open &
transform: translate3d(0,0,0)
.site__footer
margin-top: -200px;
margin-top: -200px
@media $breakpoint2
margin-top: -160px;
margin-top: -160px
.has-menu-open &
margin-top: 0
@media only screen and (min-width: 40.625em) and (min-height: 650px)
@media $breakpoint2 and (min-height: 650px)
.site
position: relative
@ -62,12 +59,11 @@
@extend .transition
position: relative
z-index: 2
margin-top: 80px
margin-bottom: 420px
transform: translate3d(0,0,0)
transform: translate3d(0,($spacer*3),0)
.has-menu-open &
transform: translate3d(0,140px,0)
transform: translate3d(0,($spacer*8),0)
.site__header,
.site__footer

6
_src/_assets/styl/media.styl
View File

@ -30,10 +30,10 @@ img.alignright,
img.aligncenter
float: none
display: block
margin: $line-height-computed auto
margin: $spacer auto
@media $breakpoint2
img.alignleft
margin: 0 $line-height-computed $line-height-computed 0
margin: 0 $spacer $spacer 0
img.alignright
margin: 0 0 $line-height-computed $line-height-computed
margin: 0 0 $spacer $spacer

4
_src/_assets/styl/mixins.styl
View File

@ -195,7 +195,7 @@ transition()
display: inline-block
clear: both
background: rgba(255,255,255,.55)
padding: ($line-height-computed/2) $line-height-computed ($line-height-computed/2) 100%
padding: ($spacer/2) $spacer ($spacer/2) 100%
margin-left: -100%
// Lead paragraph
@ -203,7 +203,7 @@ transition()
.lead
font-size: $font-size-large
line-height: ($line-height-computed*1.15)
line-height: ($spacer*1.15)
// Button sizing

10
_src/_assets/styl/navigation.styl
View File

@ -13,7 +13,7 @@
margin: 0
position: absolute
right: 0
top: -($line-height-computed/4)
top: -($spacer/4)
&:focus
outline: 0
@ -44,8 +44,8 @@
.nav-popover
@extend .divider-top, .list-unstyled
padding: $line-height-computed 0
margin-top: $line-height-computed
padding: $spacer 0
margin-top: $spacer
margin-bottom: 0
width: 100%
background: $body-bg
@ -74,8 +74,8 @@
/////////////////////////////////////
.paginator
padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2)
padding-top: ($spacer*2)
padding-bottom: ($spacer*2)
.icon
margin-bottom: -3px

6
_src/_assets/styl/page-404.styl
View File

@ -12,7 +12,7 @@
.srverror-title
font-size: 2em
margin-bottom: ($line-height-computed/4)
margin-bottom: ($spacer/4)
color: $text-color-light
.srverror-text
@ -30,8 +30,8 @@ $hal-size = 72px
border-radius: $hal-size
background: #444
padding: 1.5em
margin-top: $line-height-computed
margin-bottom: $line-height-computed
margin-top: $spacer
margin-bottom: $spacer
position: relative
border: 4px solid #ccc
box-shadow: inset 0 0 10px #000

7
_src/_assets/styl/scaffolding.styl
View File

@ -5,13 +5,8 @@
//
// Body reset
// Body
/////////////////////////////////////
html
font-size: 62.5%
-webkit-tap-highlight-color: alpha($link-color, .2)
body
background: $body-bg

6
_src/_assets/styl/search.styl
View File

@ -49,7 +49,7 @@
top: 80px
z-index: 6
width: 100%
padding-top: ($line-height-computed/2)
padding-top: ($spacer/2)
background: lighten($page-bg, 3%)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1)
@ -68,8 +68,8 @@
padding-top: 0
@media $breakpoint2
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
margin-top: ($spacer/2)
margin-bottom: ($spacer/2)
> li
padding: 0

2
_src/_assets/styl/tables.styl
View File

@ -11,7 +11,7 @@ table
width: 100%
max-width: 100%
background-color: transparent
margin-bottom: $line-height-computed
margin-bottom: $spacer
border-bottom: 1px solid #cfd9e1
td

2
_src/_assets/styl/tooltips.styl
View File

@ -17,7 +17,7 @@
font-weight: normal
letter-spacing: normal
line-break: auto
line-height: $line-height-base
line-height: $line-height
text-align: left; // Fallback for where `start` is not supported
text-align: start
text-decoration: none

117
_src/_assets/styl/typography.styl
View File

@ -8,34 +8,54 @@
// Base
/////////////////////////////////////
// Body reset
html
font-size: $font-size-root
@media $breakpoint3
font-size: $font-size-root-lg
body
font-family: $font-family-base
font-weight: $font-weight-base
font-size: $font-size-base
line-height: $line-height-base
line-height: $line-height
color: $font-color-base
background: $body-bg
// handling long text, like URLs
overflow-wrap: break-word
word-wrap: break-word
text-rendering: optimizeLegibility;
word-break: 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';
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-moz-font-feature-settings: 'liga', 'kern'
letter-spacing: -0.01em
.wf-active &
letter-spacing: normal
@media $breakpoint3
font-size: $font-size-large
line-height: $line-height-large
p,
ul,
ol
margin: 0 0 $line-height-computed
margin: 0 0 $spacer
// Reset fonts for relevant elements
/////////////////////////////////////
input,
button,
select,
textarea
font-family: inherit
font-size: inherit
line-height: inherit
// Headings
@ -55,53 +75,43 @@ h1, h2, h3, h4, h5, h6,
h1, .h1,
h2, .h2
margin-top: ($line-height-computed*2)
margin-bottom: ($line-height-computed*2)
margin-top: ($spacer*2)
margin-bottom: ($spacer*2)
h3, .h3
h4, .h4,
h5, .h5,
h6, .h6
margin-top: $line-height-computed
margin-bottom: $line-height-computed
margin-top: $spacer
margin-bottom: $spacer
h1, .h1
font-size: $font-size-h1-small
font-size: $font-size-h2
@media $breakpoint1
font-size: $font-size-h1
@media $breakpoint3
font-size: $font-size-h1-large
h2, .h2
font-size: $font-size-h2-small
font-size: $font-size-h3
@media $breakpoint1
font-size: $font-size-h2
@media $breakpoint3
font-size: $font-size-h2-large
h3, .h3
font-size: $font-size-h3-small
font-size: $font-size-h4
@media $breakpoint1
font-size: $font-size-h3
@media $breakpoint3
font-size: $font-size-h3-large
h4, .h4
font-size: $font-size-h4-small
font-size: $font-size-h5
@media $breakpoint1
font-size: $font-size-h4
@media $breakpoint3
font-size: $font-size-h4-large
h5, .h5
font-size: $font-size-h5
@media $breakpoint3
font-size: $font-size-h5-large
font-size: $font-size-h6
@media $breakpoint1
font-size: $font-size-h5
h6, .h6
font-size: $font-size-h6
@media $breakpoint3
font-size: $font-size-h6-large
// Links
@ -133,30 +143,34 @@ a
ul,
ol
margin-top: 0
margin-bottom: $line-height-computed
padding-left: $line-height-computed*2
> li
margin-bottom: ($line-height-computed/2)
position: relative
ol
counter-reset: ol-counter
margin-bottom: $spacer
padding-left: ($spacer * 1.5)
list-style: none
li
position: relative
&:before
@extend .textcenter
position: absolute
left: -($line-height-computed*2)
left: -($spacer * 1.5)
top: -1px
color: $text-color-light
user-select: none
ul
li
&:before
content: " \2015" // horizontal bar: ― ―
ol
counter-reset: ol-counter
li
&:before
content: counter(ol-counter)'.'
counter-increment: ol-counter
color: $text-color-light
font-style: italic
width: $font-size-base
display: block
user-select: none
ul li:before
display: none
ul,
ol
@ -171,6 +185,9 @@ list-unstyled()
list-style: none
display: block
li:before
display: none
.list-unstyled
list-unstyled()
@ -213,7 +230,7 @@ cite
hr
@extend .divider-bottom
border: 0
margin-bottom: ($line-height-computed*2)
margin-bottom: ($spacer*2)
.small
font-size: $font-size-small
@ -231,7 +248,7 @@ blockquote > p
blockquote
padding-left: 25px
margin: 0 0 $line-height-computed
margin: 0 0 $spacer
position: relative
padding-left: 20px

40
_src/_assets/styl/variables.styl
View File

@ -39,33 +39,23 @@ $text-color-dimmed = lighten($brand-grey-light, 50%)
// Typography
/////////////////////////////////////
$font-size-base = 18px
$font-size-large = ceil($font-size-base * 1.35) // ~24px
$font-size-small = ceil($font-size-base * 0.8) // ~14px
$font-size-mini = ceil($font-size-base * 0.7) // ~12px
$font-size-root = 18px
$font-size-root-lg = 20px
$font-size-h1 = floor(($font-size-base * 2.75))
$font-size-h2 = floor(($font-size-base * 2))
$font-size-h3 = ceil(($font-size-base * 1.75))
$font-size-base = 1rem
$font-size-large = 1.35rem
$font-size-small = 0.8rem
$font-size-mini = 0.7rem
$font-size-h1 = 3rem
$font-size-h2 = 2rem
$font-size-h3 = 1.75rem
$font-size-h4 = $font-size-large
$font-size-h5 = $font-size-base
$font-size-h6 = $font-size-small
$font-size-h1-large = floor(($font-size-large * 2.75))
$font-size-h2-large = floor(($font-size-large * 2))
$font-size-h3-large = ceil(($font-size-large * 1.75))
$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
$line-height = 1.5
$line-height-large = 1.5
$line-height-small = 1.1428571429
$font-family-base = 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif
@ -97,11 +87,13 @@ $link-color-hover = lighten($link-color, 15%)
// Grid
/////////////////////////////////////
$gutter-space = $line-height-computed
$gutter-space = $spacer
// Components spacing
/////////////////////////////////////
$spacer = ($font-size-base * $line-height)
$border-radius-base = 3px
$border-radius-small = $border-radius-base
$border-radius-large = $border-radius-base
@ -133,7 +125,7 @@ $input-border = $brand-grey-light
$input-border-radius = $border-radius-base
$input-border-focus = $brand-cyan
$input-height-base = ($line-height-computed + ($padding-base-vertical * 2) + 2)
$input-height-base = ($spacer + ($padding-base-vertical * 2) + 2)
$input-height-large = (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 1)
$input-height-small = (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2)