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 .alert
padding: $padding-base-vertical $padding-base-horizontal padding: $padding-base-vertical $padding-base-horizontal
margin-bottom: $line-height-computed margin-bottom: $spacer
border-radius: $border-radius-base border-radius: $border-radius-base
font-size: $font-size-small font-size: $font-size-small
border: 1px solid transparent border: 1px solid transparent

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

@ -32,7 +32,7 @@ a.btn
transition: all .2s ease-in-out transition: all .2s ease-in-out
// Default Button // 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) background-color: rgba(255,255,255,.1)
border: 1px solid rgba(94,131,162,.3) border: 1px solid rgba(94,131,162,.3)
border-bottom-color: rgba(94,131,162,.4) border-bottom-color: rgba(94,131,162,.4)
@ -40,7 +40,7 @@ a.btn
font-weight: $headings-font-weight font-weight: $headings-font-weight
color: $brand-grey color: $brand-grey
text-transform: uppercase 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, &:hover,
&:focus &:focus
@ -70,7 +70,7 @@ a.btn
// grid buttons // grid buttons
&.col2, &.col2,
&.col3 &.col3
margin-bottom: ($line-height-computed/2) margin-bottom: ($spacer/2)
@media $breakpoint2 @media $breakpoint2
margin-bottom: 0 margin-bottom: 0
@ -86,7 +86,7 @@ a.btn-primary
text-shadow: 0 1px 0 rgba(255,255,255,.3) text-shadow: 0 1px 0 rgba(255,255,255,.3)
background: lighten($link-color, 15%) background: lighten($link-color, 15%)
border-color: $link-color 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, &:hover,
&:focus &:focus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -6,15 +6,15 @@
.site__footer .site__footer
@extend .textcenter @extend .textcenter
padding-top: ($line-height-computed*2) padding-top: ($spacer*2)
.gravatar .gravatar
margin-bottom: ($line-height-computed/2) margin-bottom: ($spacer/2)
&, &,
.footer-description .footer-description
color: $text-color-light color: $text-color-light
line-height: $line-height-computed line-height: $spacer
.footer-description .footer-description
@extend .h5 @extend .h5
@ -23,8 +23,8 @@
.footer-copyright .footer-copyright
@extend .divider-top @extend .divider-top
padding-top: $line-height-computed padding-top: $spacer
padding-bottom: $line-height-computed padding-bottom: $spacer
p p
margin-bottom: 0 margin-bottom: 0
@ -38,7 +38,7 @@
// Subscribe component // Subscribe component
.subscribe .subscribe
margin: $line-height-computed auto margin: $spacer auto
p p
@extend .textcenter @extend .textcenter
margin: 0 margin: 0
@ -74,4 +74,4 @@
.subscribe-title .subscribe-title
@extend .h5 @extend .h5
color: $text-color-dimmed 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 display: block
width: 100% width: 100%
padding: 0 padding: 0
margin-bottom: $line-height-computed margin-bottom: $spacer
font-size: ($font-size-base * 1.5) font-size: ($font-size-base * 1.5)
line-height: inherit line-height: inherit
border: 0 border: 0
@ -69,7 +69,7 @@ select[size]
padding: $padding-base-vertical $padding-base-horizontal padding: $padding-base-vertical $padding-base-horizontal
font-size: $input-font-size font-size: $input-font-size
font-weight: $input-font-weight font-weight: $input-font-weight
line-height: $line-height-base line-height: $line-height
color: $input-color color: $input-color
background-color: $input-bg background-color: $input-bg
background-image: none // Reset unusual Firefox-on-Android default style background-image: none // Reset unusual Firefox-on-Android default style
@ -108,7 +108,7 @@ select[size]
///////////////////////////////////// /////////////////////////////////////
.form-group .form-group
margin-bottom: $line-height-computed margin-bottom: $spacer
// Search inputs // Search inputs
@ -124,7 +124,7 @@ input[type="search"]
.radio, .radio,
.checkbox .checkbox
display: block 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-top: 10px
margin-bottom: 10px margin-bottom: 10px

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

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

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

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

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

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

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

@ -30,10 +30,10 @@ img.alignright,
img.aligncenter img.aligncenter
float: none float: none
display: block display: block
margin: $line-height-computed auto margin: $spacer auto
@media $breakpoint2 @media $breakpoint2
img.alignleft img.alignleft
margin: 0 $line-height-computed $line-height-computed 0 margin: 0 $spacer $spacer 0
img.alignright 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 display: inline-block
clear: both clear: both
background: rgba(255,255,255,.55) 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% margin-left: -100%
// Lead paragraph // Lead paragraph
@ -203,7 +203,7 @@ transition()
.lead .lead
font-size: $font-size-large font-size: $font-size-large
line-height: ($line-height-computed*1.15) line-height: ($spacer*1.15)
// Button sizing // Button sizing

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

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

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

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

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

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

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

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

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

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

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

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

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

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