From 384b364a63e0cc6d3947e92531d2279b176ddf7c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 16 Apr 2016 19:32:58 +0200 Subject: [PATCH] rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change --- _src/_assets/styl/alerts.styl | 2 +- _src/_assets/styl/buttons.styl | 8 +- _src/_assets/styl/code.styl | 8 +- _src/_assets/styl/comments.styl | 2 +- _src/_assets/styl/content-featured.styl | 6 +- _src/_assets/styl/content-link.styl | 2 +- _src/_assets/styl/content-photo.styl | 10 +- _src/_assets/styl/content-related.styl | 6 +- _src/_assets/styl/content.styl | 30 +++--- _src/_assets/styl/footer.styl | 14 +-- _src/_assets/styl/forms.styl | 8 +- _src/_assets/styl/header.styl | 8 +- _src/_assets/styl/kremalicious3.styl | 3 +- _src/_assets/styl/layout.styl | 22 ++--- _src/_assets/styl/media.styl | 6 +- _src/_assets/styl/mixins.styl | 4 +- _src/_assets/styl/navigation.styl | 10 +- _src/_assets/styl/page-404.styl | 6 +- _src/_assets/styl/scaffolding.styl | 7 +- _src/_assets/styl/search.styl | 6 +- _src/_assets/styl/tables.styl | 2 +- _src/_assets/styl/tooltips.styl | 2 +- _src/_assets/styl/typography.styl | 117 ++++++++++++++---------- _src/_assets/styl/variables.styl | 40 ++++---- 24 files changed, 165 insertions(+), 164 deletions(-) diff --git a/_src/_assets/styl/alerts.styl b/_src/_assets/styl/alerts.styl index 1061e70e..e17b9ab6 100644 --- a/_src/_assets/styl/alerts.styl +++ b/_src/_assets/styl/alerts.styl @@ -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 diff --git a/_src/_assets/styl/buttons.styl b/_src/_assets/styl/buttons.styl index c7342886..fb6ef420 100644 --- a/_src/_assets/styl/buttons.styl +++ b/_src/_assets/styl/buttons.styl @@ -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 diff --git a/_src/_assets/styl/code.styl b/_src/_assets/styl/code.styl index 5b59add8..8e87230f 100644 --- a/_src/_assets/styl/code.styl +++ b/_src/_assets/styl/code.styl @@ -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 diff --git a/_src/_assets/styl/comments.styl b/_src/_assets/styl/comments.styl index 338c0a16..4f017849 100644 --- a/_src/_assets/styl/comments.styl +++ b/_src/_assets/styl/comments.styl @@ -11,7 +11,7 @@ color: $text-color-dimmed p - margin-bottom: ($line-height-computed/2) + margin-bottom: ($spacer/2) .btn-wrap height: 27px diff --git a/_src/_assets/styl/content-featured.styl b/_src/_assets/styl/content-featured.styl index 81dee64b..a8a392c4 100644 --- a/_src/_assets/styl/content-featured.styl +++ b/_src/_assets/styl/content-featured.styl @@ -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 diff --git a/_src/_assets/styl/content-link.styl b/_src/_assets/styl/content-link.styl index 295a97ee..ce0b7d37 100644 --- a/_src/_assets/styl/content-link.styl +++ b/_src/_assets/styl/content-link.styl @@ -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 diff --git a/_src/_assets/styl/content-photo.styl b/_src/_assets/styl/content-photo.styl index 360bbfe1..b55184f8 100644 --- a/_src/_assets/styl/content-photo.styl +++ b/_src/_assets/styl/content-photo.styl @@ -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 diff --git a/_src/_assets/styl/content-related.styl b/_src/_assets/styl/content-related.styl index 6ebca981..5d0bf593 100644 --- a/_src/_assets/styl/content-related.styl +++ b/_src/_assets/styl/content-related.styl @@ -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 diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl index 745526ae..852bbdeb 100644 --- a/_src/_assets/styl/content.styl +++ b/_src/_assets/styl/content.styl @@ -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 diff --git a/_src/_assets/styl/footer.styl b/_src/_assets/styl/footer.styl index bcf3a809..4fa5794f 100644 --- a/_src/_assets/styl/footer.styl +++ b/_src/_assets/styl/footer.styl @@ -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) diff --git a/_src/_assets/styl/forms.styl b/_src/_assets/styl/forms.styl index 0c742428..2197493d 100644 --- a/_src/_assets/styl/forms.styl +++ b/_src/_assets/styl/forms.styl @@ -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 diff --git a/_src/_assets/styl/header.styl b/_src/_assets/styl/header.styl index 1aaa7e7c..25f63e53 100644 --- a/_src/_assets/styl/header.styl +++ b/_src/_assets/styl/header.styl @@ -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 diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl index 21986684..89f4013d 100644 --- a/_src/_assets/styl/kremalicious3.styl +++ b/_src/_assets/styl/kremalicious3.styl @@ -14,10 +14,9 @@ @import 'mixins' // Core CSS -@import 'scaffolding' +@import 'typography' @import 'grid' @import 'layout' -@import 'typography' @import 'forms' @import 'buttons' @import 'icons' diff --git a/_src/_assets/styl/layout.styl b/_src/_assets/styl/layout.styl index 11d162f2..8ca29eea 100644 --- a/_src/_assets/styl/layout.styl +++ b/_src/_assets/styl/layout.styl @@ -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 diff --git a/_src/_assets/styl/media.styl b/_src/_assets/styl/media.styl index 146a4c9d..ea8828e1 100644 --- a/_src/_assets/styl/media.styl +++ b/_src/_assets/styl/media.styl @@ -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 diff --git a/_src/_assets/styl/mixins.styl b/_src/_assets/styl/mixins.styl index 1414eca5..bc9d9c0a 100644 --- a/_src/_assets/styl/mixins.styl +++ b/_src/_assets/styl/mixins.styl @@ -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 diff --git a/_src/_assets/styl/navigation.styl b/_src/_assets/styl/navigation.styl index f40b6ed2..d16582a3 100644 --- a/_src/_assets/styl/navigation.styl +++ b/_src/_assets/styl/navigation.styl @@ -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 diff --git a/_src/_assets/styl/page-404.styl b/_src/_assets/styl/page-404.styl index 3c76ec1b..0e1a2e3c 100644 --- a/_src/_assets/styl/page-404.styl +++ b/_src/_assets/styl/page-404.styl @@ -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 diff --git a/_src/_assets/styl/scaffolding.styl b/_src/_assets/styl/scaffolding.styl index d505fe31..c0ebd647 100644 --- a/_src/_assets/styl/scaffolding.styl +++ b/_src/_assets/styl/scaffolding.styl @@ -5,13 +5,8 @@ // -// Body reset +// Body ///////////////////////////////////// - -html - font-size: 62.5% - -webkit-tap-highlight-color: alpha($link-color, .2) - body background: $body-bg diff --git a/_src/_assets/styl/search.styl b/_src/_assets/styl/search.styl index eceeb78e..9e3b85ea 100644 --- a/_src/_assets/styl/search.styl +++ b/_src/_assets/styl/search.styl @@ -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 diff --git a/_src/_assets/styl/tables.styl b/_src/_assets/styl/tables.styl index b228db80..6f9119c7 100644 --- a/_src/_assets/styl/tables.styl +++ b/_src/_assets/styl/tables.styl @@ -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 diff --git a/_src/_assets/styl/tooltips.styl b/_src/_assets/styl/tooltips.styl index dfe1974e..203d28c1 100644 --- a/_src/_assets/styl/tooltips.styl +++ b/_src/_assets/styl/tooltips.styl @@ -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 diff --git a/_src/_assets/styl/typography.styl b/_src/_assets/styl/typography.styl index 1fc9e4a9..f32def73 100644 --- a/_src/_assets/styl/typography.styl +++ b/_src/_assets/styl/typography.styl @@ -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 diff --git a/_src/_assets/styl/variables.styl b/_src/_assets/styl/variables.styl index 2b5c0e9d..e9a71ecf 100644 --- a/_src/_assets/styl/variables.styl +++ b/_src/_assets/styl/variables.styl @@ -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)