From 8f9a71d23527b9a34ec564eff1c70c71c9938690 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 8 Jan 2018 16:04:42 +0000
Subject: [PATCH] refactoring font sizes to use viewport-based typography mixin
which will scale fonts as the viewport resizes
---
.../src/sass/abstracts/_mixins.scss | 24 +++++++
.../src/sass/abstracts/_variables.scss | 10 +--
.../static_src/src/sass/base/_typography.scss | 63 +++++--------------
3 files changed, 43 insertions(+), 54 deletions(-)
diff --git a/opentech/static_src/src/sass/abstracts/_mixins.scss b/opentech/static_src/src/sass/abstracts/_mixins.scss
index ec2c41c0b..079f2da3a 100755
--- a/opentech/static_src/src/sass/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/abstracts/_mixins.scss
@@ -94,3 +94,27 @@
background: darken($bg, 25%);
}
}
+
+
+// Viewport sized typography mixin that takes a min and max pixel-based value
+@mixin responsive-font-sizes($min, $max) {
+
+ $vw-context: (1260 * 0.1) * 1px;
+ $responsive: ($max / $vw-context) * 10vw;
+
+ $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+ $dimension: if(unit($responsive) == 'vh', 'height', 'width');
+ $min-breakpoint: $min / $responsive-unitless * 100;
+
+ @media (max-#{$dimension}: #{$min-breakpoint}) {
+ font-size: $min;
+ }
+
+ $max-breakpoint: $max / $responsive-unitless * 100;
+
+ @media (min-#{$dimension}: #{$max-breakpoint}) {
+ font-size: $max;
+ }
+
+ font-size: $responsive;
+}
diff --git a/opentech/static_src/src/sass/abstracts/_variables.scss b/opentech/static_src/src/sass/abstracts/_variables.scss
index 1bb4eb164..344e99f35 100755
--- a/opentech/static_src/src/sass/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/abstracts/_variables.scss
@@ -27,15 +27,9 @@ $weight--normal: 400;
$weight--light: 200;
// Font sizes
-$base-font-size: 16px;
-$base-line-height: 25px;
+$base-font-size: 19px;
+$base-line-height: 29px;
$font-sizes: (
-
- // non-standard large sizes
- giga: 80px,
- mega: 60px,
- kilo: 48px,
-
// standard sizes
alpha: 72px,
beta: 42px,
diff --git a/opentech/static_src/src/sass/base/_typography.scss b/opentech/static_src/src/sass/base/_typography.scss
index f69ab26e1..cc32d1e7e 100755
--- a/opentech/static_src/src/sass/base/_typography.scss
+++ b/opentech/static_src/src/sass/base/_typography.scss
@@ -1,10 +1,5 @@
-/*------------------------------------*\
- $TYPOGRAPHY
-\*------------------------------------*/
-
-/* ============================================
- Base font
-*/
+// $TYPOGRAPHY
+// Base font
html {
font-size: ($base-font-size / 16px) * 100%;
line-height: $base-line-height / $base-font-size;
@@ -17,9 +12,10 @@ html {
:: to its default value, usually `inherit`) in all other font mixins.
*/
@mixin heading-text {
+ margin: 0 0 1rem;
font-family: $font--primary;
font-style: inherit;
- font-weight: inherit;
+ font-weight: $weight--bold;
}
@mixin body-text {
@@ -29,19 +25,6 @@ html {
text-transform: inherit;
}
-@mixin quote-text {
- font-family: $font--secondary;
- font-style: italic;
- font-weight: inherit;
- text-transform: inherit;
-}
-
-// sass-lint:disable single-line-per-selector
-h1, h2, h3, h4, h5, h6 {
- margin: 0 0 1rem;
-}
-// sass-lint:enddisable
-
// sass-lint:disable single-line-per-selector
h1, h2, h3, h4, h5, h6,
.heading-text {
@@ -51,47 +34,35 @@ h1, h2, h3, h4, h5, h6,
html,
.body-text {
- @include body-text;
-}
-
-blockquote {
- @include quote-text;
+ @include responsive-font-sizes(16px, 19px);
}
// Default sizes
-h1, .alpha {
- @include font-size(alpha);
+h1, %h1, .alpha {
+ @include responsive-font-sizes(40px, map-get($font-sizes, alpha));
font-weight: $weight--black;
}
-h2, .beta {
- @include font-size(beta);
- font-weight: $weight--bold;
+h2, %h2, .beta {
+ @include responsive-font-sizes(30px, map-get($font-sizes, beta));
}
-h3, .gamma {
- @include font-size(gamma);
- font-weight: $weight--light;
+h3, %h3, .gamma {
+ @include responsive-font-sizes(20px, map-get($font-sizes, gamma));
}
-h4, .delta {
- @include font-size(delta);
- font-weight: $weight--bold;
+h4, %h4, .delta {
+ @include responsive-font-sizes(18px, map-get($font-sizes, delta));
}
-h5, .epsilon {
- @include font-size(epsilon);
- font-weight: $weight--bold;
+h5, %h5, .epsilon {
+ @include responsive-font-sizes(15px, map-get($font-sizes, epsilon));
}
-h6, .zeta {
- @include font-size(zeta);
- font-weight: $weight--bold;
+h6, %h6, .zeta {
+ font-size: 15px;
}
-.giga { @include font-size(giga); }
-.mega { @include font-size(mega); }
-.kilo { @include font-size(kilo); }
small, .milli { @include font-size(milli); }
// thin
--
GitLab