From ef80ad8ef84a65f07350c6c2ad952e3ffe7c2f2f Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Fri, 14 Jan 2022 14:54:16 +0100 Subject: [PATCH] Set unitless lineheight. Not bigger font for mobile. --- assets/sass/_variables.scss | 31 ++------- assets/sass/_zen.scss | 20 ++---- assets/sass/components/button/_button.scss | 2 +- .../cookieconsent/_cookieconsent.scss | 2 +- .../_list-straight-left.scss | 8 --- assets/sass/reset/document/_document.scss | 8 +-- assets/sass/reset/sections/_sections.scss | 67 ++++--------------- 7 files changed, 29 insertions(+), 109 deletions(-) diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 7c32a6a..0023a5b 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -11,36 +11,19 @@ // homepage](https://github.com/jptaranto/typey). // The font size set on the root html element. -$base-font-size: 22px; -$base-font-size-2: 18px; +$base-font-size: 18px; // The base line height determines the basic unit of vertical rhythm. -$base-line-height: 31px; -$base-line-height-2: 25px; - -$base-multiplier: $base-font-size / $base-font-size-2; - -$xxl-2: 34px * $base-multiplier; -$xl-2: 28px * $base-multiplier; -$l-2: 22px * $base-multiplier; -$m-2: 18px * $base-multiplier; -$s-2: 16px * $base-multiplier; -$xs-2: 14px * $base-multiplier; +$base-line-height: 25px; // The font sizes in our type hierarchy as tee shirt sizes. $font-size: ( - xxl: 28px, - xl: 26px, - l: 24px, + xxl: 34px, + xl: 28px, + l: 22px, m: $base-font-size, - s: 18px, - xs: 16px, - xxl-2: $xxl-2, - xl-2: $xl-2, - l-2: $l-2, - m-2: $m-2, - s-2: $s-2, - xs-2: $xs-2 + s: 16px, + xs: 14px, ); // Typey allows you to alter font weights site-wide with this map. diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index 7f398a4..9bdf61b 100644 --- a/assets/sass/_zen.scss +++ b/assets/sass/_zen.scss @@ -35,22 +35,14 @@ th, label, legend, figcaption { - @include type-layout(s, 1); - - @include respond-to(xxl) { - @include type-layout(s-2, 1); - } + @include font-size(s); } .language-selector, article > header, .content-dates, .footer { - @include type-layout(xs, 1); - - @include respond-to(xxl) { - @include type-layout(xs-2, 1); - } + @include font-size(xs); } // Apply heading font stack to heading, labels etc. @@ -119,12 +111,8 @@ article { } code { - @include type-layout(xs, 1); + @include font-size(xs); overflow-wrap: break-word; - - @include respond-to(xxl) { - @include type-layout(xs-2, 1); - } } pre { @@ -257,7 +245,7 @@ figure { } .search-text { - @include type-layout(l, 1); + @include font-size(l); max-width: 80%; } diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss index 8efb873..baa5a09 100644 --- a/assets/sass/components/button/_button.scss +++ b/assets/sass/components/button/_button.scss @@ -44,7 +44,7 @@ button, .button, %button { &--small { - @include type-layout(xs, 1); + @include font-size(xs); @include margin-right(.3); @include margin-bottom(.3); @include padding(.1 .5); diff --git a/assets/sass/components/cookieconsent/_cookieconsent.scss b/assets/sass/components/cookieconsent/_cookieconsent.scss index 401a68b..0ed86f9 100644 --- a/assets/sass/components/cookieconsent/_cookieconsent.scss +++ b/assets/sass/components/cookieconsent/_cookieconsent.scss @@ -1,7 +1,7 @@ // Cookieconsent .cookieconsent { - @include type-layout(s, 1); + @include font-size(s); position: sticky; bottom: 0; width: 100%; diff --git a/assets/sass/components/list-straight-left/_list-straight-left.scss b/assets/sass/components/list-straight-left/_list-straight-left.scss index 42e3c27..49a3c16 100644 --- a/assets/sass/components/list-straight-left/_list-straight-left.scss +++ b/assets/sass/components/list-straight-left/_list-straight-left.scss @@ -13,10 +13,6 @@ @include padding-right(.5); display: table-cell; content: '\2022'; - - @include respond-to(xxl) { - @include font-size(s-2); - } } } } @@ -36,10 +32,6 @@ display: table-cell; content: counter(table-ol) '.'; text-align: right; - - @include respond-to(xxl) { - @include font-size(s-2); - } } } } diff --git a/assets/sass/reset/document/_document.scss b/assets/sass/reset/document/_document.scss index 07cf3a7..025d40f 100644 --- a/assets/sass/reset/document/_document.scss +++ b/assets/sass/reset/document/_document.scss @@ -6,8 +6,10 @@ html { // Change the default font family in all browsers (opinionated). @include typeface(body); + // Set base font size in percent. + font-size: $base-font-size / $browser-font-size * 100%; // Correct the line height in all browsers. - @include define-type-sizing(); + line-height: 1.5; // Prevent adjustments of font size. -webkit-text-size-adjust: none; text-size-adjust: none; @@ -20,10 +22,6 @@ html { scroll-behavior: smooth; // Improve text rendering. -webkit-font-smoothing: antialiased; - - @include respond-to(xxl) { - @include define-type-sizing($base-font-size-2, $base-line-height-2); - } } diff --git a/assets/sass/reset/sections/_sections.scss b/assets/sass/reset/sections/_sections.scss index f981210..7f6a332 100644 --- a/assets/sass/reset/sections/_sections.scss +++ b/assets/sass/reset/sections/_sections.scss @@ -21,92 +21,51 @@ body { // `article` contexts in Chrome, Firefox, and Safari. h1, %h1 { - // Set the font-size and line-height while keeping a proper vertical rhythm. - @include type-layout(xxl, 1.5); + // Set the font-size while keeping a proper vertical rhythm. + @include font-size(xxl); // Set 1 unit of vertical rhythm on the top and bottom margins. @include margin-top(1, xxl); @include margin-bottom(1, xxl); + line-height: 1.3; } h2, %h2 { - @include type-layout(xl, 1.5); + @include font-size(xl); @include margin-top(1, xl); @include margin-bottom(1, xl); + line-height: 1.3; } h3, %h3 { - @include type-layout(l, 1.5); + @include font-size(l); @include margin-top(1, l); @include margin-bottom(1, l); + line-height: 1.3; } h4, %h4 { - @include type-layout(m, 1); + @include font-size(m); @include margin-top(1, m); @include margin-bottom(1, m); + line-height: 1.3; } h5, %h5 { - @include type-layout(s, 1); + @include font-size(s); @include margin-top(1, s); @include margin-bottom(1, s); + line-height: 1.3; } h6, %h6 { - @include type-layout(xs, 1); + @include font-size(xs); @include margin-top(1, xs); @include margin-bottom(1, xs); -} - -@include respond-to(s) { - h1, - %h1 { - // Set the font-size and line-height while keeping a proper vertical rhythm. - @include type-layout(xxl-2, 2); - - // Set 1 unit of vertical rhythm on the top and bottom margins. - @include margin-top(1, xxl-2); - @include margin-bottom(1, xxl-2); - } - - h2, - %h2 { - @include type-layout(xl-2, 1.5); - @include margin-top(1, xl-2); - @include margin-bottom(1, xl-2); - } - - h3, - %h3 { - @include type-layout(l-2, 1.5); - @include margin-top(1, l-2); - @include margin-bottom(1, l-2); - } - - h4, - %h4 { - @include type-layout(m-2, 1); - @include margin-top(1, m-2); - @include margin-bottom(1, m-2); - } - - h5, - %h5 { - @include type-layout(s-2, 1); - @include margin-top(1, s-2); - @include margin-bottom(1, s-2); - } - - h6, - %h6 { - @include type-layout(xs-2, 1); - @include margin-top(1, xs-2); - @include margin-bottom(1, xs-2); - } + line-height: 1.3; }