From dd51e1e170be565b085fd83981534150cdac3272 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Thu, 7 Nov 2019 12:22:09 +0100 Subject: [PATCH] improvement: add a $lineheight variable --- css/clear-typography.css | 7 +++---- css/clear-typography.css.map | 2 +- scss/clear-typography.scss | 31 +++++++++++++++++-------------- 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/css/clear-typography.css b/css/clear-typography.css index 03fffc9..5649016 100644 --- a/css/clear-typography.css +++ b/css/clear-typography.css @@ -69,7 +69,6 @@ font-weight: 800; font-style: italic; } -/* ------------------ GLOBAL STYLE ------------------- */ html { font-family: OpenSans, sans-serif; text-align: left; @@ -151,8 +150,8 @@ ol li { /* ------------------ TITLES ------------------- */ h1, h2, h3, h4, h5, h6, h7 { text-align: left; - font-size: 1em; - line-height: 1.5em; + font-size: 18px; + line-height: 1.5rem; padding: 0; margin: 0; font-weight: 400; @@ -245,7 +244,7 @@ pre { /* ------------------ SPECIAL STYLING ------------------- */ mark { border-radius: 0.2em; - padding: 0 0.2em 0 0.2em; + padding: 0 0.375rem 0 0.375rem; background-color: rgba(255, 255, 0, 0.33); color: inherit; } diff --git a/css/clear-typography.css.map b/css/clear-typography.css.map index 26cee2a..d1865e5 100644 --- a/css/clear-typography.css.map +++ b/css/clear-typography.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_font-face.scss","../scss/clear-typography.scss"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;ACrHJ;AAWA;EACC;EACA;EACA,WAXY;;;AAcb;EACC;EACA;EACA;;;AAGD;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EAlCE;EACA;EACA;;AAkCA;EACE;;;AAIJ;EAzCE;EACA;EACA;;AAyCA;EACE;;AAEF;EACE;;;AAIJ;EAnDE;EACA;EACA;;AAmDA;EACE;;AAEF;EACE;;;AAKJ;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD;EACA;EACA;EACA;EACA;;;AAGD;EAfC;EACA;EACA;EACA,aAa2B;;;AAG5B;EAnBC;EACA;EACA;EACA,aAiBmB;;;AAGpB;EAvBC;EACA;EACA;EACA,aAqBqB;;;AAGtB;EA3BC;EACA;EACA;EACA,aAyBqB;;;AAGtB;EA/BC;EACA;EACA;EACA,aA6B0B;;;AAG3B;EAnCC;EACA;EACA;EACA,aAiCqB;;;AAGtB;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAaA;EAVE;EACD;EACA;EACA;EACA;EACA;EAEA;EAKA;;AAEA;EACG;;;AAIJ;EAnBE;EACD;EACA;EACA;EACA;EACA;EAEA;EAcA;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA","file":"clear-typography.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/_font-face.scss","../scss/clear-typography.scss"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;ACvGJ;EACC;EACA;EACA,WAhBY;;;AAmBb;EACC,aAfY;EAgBZ;EACA;;;AAGD;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EAlCE;EACA;EACA,eALW;;AAuCX;EACE;;;AAIJ;EAzCE;EACA;EACA,eALW;;AA8CX;EACE;;AAEF;EACE,aAlDS;;;AAsDb;EAnDE;EACA;EACA,eALW;;AAwDX;EACE;;AAEF;EACE,aA5DS;;;AAiEb;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD,WA5FY;EA6FZ,aAxFY;EAyFZ;EACA;EACA;;;AAGD;EAfC;EACA;EACA,eAjFY;EAkFZ,aAa2B;;;AAG5B;EAnBC;EACA;EACA,eAjFY;EAkFZ,aAiBmB;;;AAGpB;EAvBC;EACA;EACA,eAjFY;EAkFZ,aAqBqB;;;AAGtB;EA3BC;EACA;EACA,eAjFY;EAkFZ,aAyBqB;;;AAGtB;EA/BC;EACA;EACA,eAjFY;EAkFZ,aA6B0B;;;AAG3B;EAnCC;EACA;EACA,eAjFY;EAkFZ,aAiCqB;;;AAGtB;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,eA/HY;;;AAkIb;AAaA;EAVE;EACD;EACA;EACA;EACA,eAzIY;EA0IZ;EAEA;EAKA;;AAEA;EACG;;;AAIJ;EAnBE;EACD;EACA;EACA;EACA,eAzIY;EA0IZ;EAEA;EAcA;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA","file":"clear-typography.css"} \ No newline at end of file diff --git a/scss/clear-typography.scss b/scss/clear-typography.scss index dfbb436..4e9ef2c 100644 --- a/scss/clear-typography.scss +++ b/scss/clear-typography.scss @@ -1,14 +1,17 @@ @import 'font-face'; -/* ------------------ GLOBAL STYLE ------------------- */ - -$baseline: 1.5; +// Change these two variables for styling $baseheight: 18px; +$baseline: 1.5; + +// Don't change this one, it's just to +// make code more readable +$lineheight: $baseline * 1rem; @mixin paragraph() { padding:0; margin:0; - margin-bottom: $baseline * 1rem; + margin-bottom: $lineheight; } html { @@ -18,7 +21,7 @@ html { } body { - line-height: $baseline * 1rem; + line-height: $lineheight; color: #444; font-weight: 400; } @@ -53,7 +56,7 @@ ul { margin-bottom:0; } li { - margin-left: $baseline * 1rem; + margin-left: $lineheight; } } @@ -63,7 +66,7 @@ ol { margin-bottom:0; } li { - margin-left: $baseline * 1rem; + margin-left: $lineheight; } } @@ -84,14 +87,14 @@ ol { $height: ceil($size / $baseline) * $baseline; font-size: $size * 1rem; line-height: $height * 1rem; - margin-bottom: $baseline * 1rem; + margin-bottom: $lineheight; font-weight: $weight; } h1, h2, h3, h4, h5, h6, h7 { text-align: left; - font-size: 1em; - line-height: 1.5em; + font-size: $baseheight; + line-height: $lineheight; padding:0; margin:0; font-weight:400; @@ -130,7 +133,7 @@ hr { border-bottom: 1px; border-color: rgba(1,1,1,0.15); border-style: solid; - margin-bottom: $baseline * 1rem; + margin-bottom: $lineheight; } /* ------------------ QUOTE ------------------- */ @@ -140,8 +143,8 @@ hr { border-style: solid; border-radius: 3px; margin:0; - margin-bottom: $baseline * 1rem; - padding: $baseline/2 * 1rem; + margin-bottom: $lineheight; + padding: $lineheight/2; max-width: 100%; } @@ -172,7 +175,7 @@ pre { mark { border-radius: 0.2em; - padding:0 0.2em 0 0.2em; + padding:0 $lineheight/4 0 $lineheight/4; background-color:rgba(255,255,0,0.33); color: inherit;