From 56a2c02b119642928ec026fea4e373ab61709311 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Thu, 7 Nov 2019 12:55:36 +0100 Subject: [PATCH] improvement: new default height --- CHANGELOG.md | 2 + css/clear-typography.css | 80 +++++++++++++++--------------------- css/clear-typography.css.map | 2 +- scss/clear-typography.scss | 4 +- 4 files changed, 39 insertions(+), 49 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9dc704e..352872d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Auto-calculate lineheight for titles +- Default lineheight is now 1.75 + ### Fixed - Line-height is no longer affected by sup and sub diff --git a/css/clear-typography.css b/css/clear-typography.css index 835b272..04fe308 100644 --- a/css/clear-typography.css +++ b/css/clear-typography.css @@ -76,7 +76,7 @@ html { } body { - line-height: 1.5rem; + line-height: 1.75rem; color: #444; font-weight: 400; } @@ -84,7 +84,7 @@ body { .debug { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(255, 255, 255, 0) 1px); background-repeat: repeat-y; - background-size: 100% 1.5rem; + background-size: 100% 1.75rem; } .night-mode { @@ -107,52 +107,40 @@ a { p, time { padding: 0; margin: 0; - margin-bottom: 1.5rem; + margin-bottom: 1.75rem; } p:last-child, time:last-child { margin-bottom: 0; } -ul { +ul, ol { padding: 0; margin: 0; - margin-bottom: 1.5rem; + margin-bottom: 1.75rem; } -ul ul { +ul ul, ol ul { margin-bottom: 0; } -ul li { - margin-left: 1.5rem; -} - -ol { - padding: 0; - margin: 0; - margin-bottom: 1.5rem; -} -ol ol { - margin-bottom: 0; -} -ol li { - margin-left: 1.5rem; +ul li, ol li { + margin-left: 1.75rem; } /* sup, sub */ sup, sub { margin: 0; padding: 0; - line-height: 1.5rem; + line-height: 1.75rem; font-size: 0.8rem; vertical-align: baseline; position: relative; } sup { - top: -0.375rem; + top: -0.4375rem; } sub { - top: 0.375rem; + top: 0.4375rem; } ::selection { @@ -175,7 +163,7 @@ sub { h1, h2, h3, h4, h5, h6, h7 { text-align: left; font-size: 18px; - line-height: 1.5rem; + line-height: 1.75rem; padding: 0; margin: 0; font-weight: 400; @@ -183,43 +171,43 @@ h1, h2, h3, h4, h5, h6, h7 { h1 { font-size: 2.3333333rem; - line-height: 3rem; - margin-bottom: 1.5rem; + line-height: 3.5rem; + margin-bottom: 1.75rem; font-weight: 700; } h2 { font-size: 2rem; - line-height: 3rem; - margin-bottom: 1.5rem; + line-height: 3.5rem; + margin-bottom: 1.75rem; font-weight: 700; } h3 { font-size: 1.5rem; - line-height: 1.5rem; - margin-bottom: 1.5rem; + line-height: 1.75rem; + margin-bottom: 1.75rem; font-weight: 700; } h4 { font-size: 1.5rem; - line-height: 1.5rem; - margin-bottom: 1.5rem; + line-height: 1.75rem; + margin-bottom: 1.75rem; font-weight: 600; } h5 { font-size: 1.333333rem; - line-height: 1.5rem; - margin-bottom: 1.5rem; + line-height: 1.75rem; + margin-bottom: 1.75rem; font-weight: 600; } h6 { font-size: 1.1rem; - line-height: 1.5rem; - margin-bottom: 1.5rem; + line-height: 1.75rem; + margin-bottom: 1.75rem; font-weight: 600; } @@ -233,17 +221,17 @@ hr { border-style: solid; padding: 0; margin: 0; - margin-bottom: 1.5rem; + margin-bottom: 1.75rem; } /* ------------------ QUOTE ------------------- */ blockquote { - border-width: 0 0 0 0.375rem; + border-width: 0 0 0 0.4375rem; border-style: solid; - border-radius: 0.1875rem; + border-radius: 0.21875rem; margin: 0; - margin-bottom: 1.5rem; - padding: 1.5rem; + margin-bottom: 1.75rem; + padding: 1.75rem; font-size: 1.1rem; max-width: 100%; overflow: auto; @@ -254,12 +242,12 @@ blockquote { } pre { - border-width: 0 0 0 0.375rem; + border-width: 0 0 0 0.4375rem; border-style: solid; - border-radius: 0.1875rem; + border-radius: 0.21875rem; margin: 0; - margin-bottom: 1.5rem; - padding: 1.5rem; + margin-bottom: 1.75rem; + padding: 1.75rem; font-size: 1.1rem; max-width: 100%; overflow: auto; @@ -274,7 +262,7 @@ pre { /* ------------------ SPECIAL STYLING ------------------- */ mark { border-radius: 0.2em; - padding: 0 0.375rem 0 0.375rem; + padding: 0 0.4375rem 0 0.4375rem; 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 795f606..2a5d085 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;;ACvGJ;EACC;EACA;EACA,WAhBY;;;AAmBb;EACC,aAfY;EAgBZ;EACA;;;AAGD;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EAxCE;EACA;EACA,eALW;;AA6CX;EACE;;;AAIJ;EA/CE;EACA;EACA,eALW;;AAoDX;EACE;;AAEF;EACE,aAxDS;;;AA4Db;EAzDE;EACA;EACA,eALW;;AA8DX;EACE;;AAEF;EACE,aAlES;;;AAsEb;AAEA;EACE;EACA;EACA,aA3EW;EA4EX;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD,WArHY;EAsHZ,aAjHY;EAkHZ;EACA;EACA;;;AAGD;EAfC;EACA;EACA,eA1GY;EA2GZ,aAa2B;;;AAG5B;EAnBC;EACA;EACA,eA1GY;EA2GZ,aAiBmB;;;AAGpB;EAvBC;EACA;EACA,eA1GY;EA2GZ,aAqBqB;;;AAGtB;EA3BC;EACA;EACA,eA1GY;EA2GZ,aAyBqB;;;AAGtB;EA/BC;EACA;EACA,eA1GY;EA2GZ,aA6B0B;;;AAG3B;EAnCC;EACA;EACA,eA1GY;EA2GZ,aAiCqB;;;AAGtB;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eA1JW;;;AA6Jb;AAeA;EAZE;EACD;EACA;EACA;EACA,eApKY;EAqKZ,SArKY;EAsKT;EAEH;EACG;EAKH;;AAEA;EACG;;;AAIJ;EArBE;EACD;EACA;EACA;EACA,eApKY;EAqKZ,SArKY;EAsKT;EAEH;EACG;EAcH;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA;EACG","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;EACA;EACA;;;AAGF;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EAxCE;EACA;EACA,eALW;;AA6CX;EACE;;;AAIJ;EA/CE;EACA;EACA,eALW;;AAoDX;EACE;;AAEF;EACE,aAxDS;;;AA4Db;AAEA;EACE;EACA;EACA,aAjEW;EAkEX;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD,WA3GY;EA4GZ,aAvGY;EAwGZ;EACA;EACA;;;AAGD;EAfC;EACA;EACA,eAhGY;EAiGZ,aAa2B;;;AAG5B;EAnBC;EACA;EACA,eAhGY;EAiGZ,aAiBmB;;;AAGpB;EAvBC;EACA;EACA,eAhGY;EAiGZ,aAqBqB;;;AAGtB;EA3BC;EACA;EACA,eAhGY;EAiGZ,aAyBqB;;;AAGtB;EA/BC;EACA;EACA,eAhGY;EAiGZ,aA6B0B;;;AAG3B;EAnCC;EACA;EACA,eAhGY;EAiGZ,aAiCqB;;;AAGtB;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAhJW;;;AAmJb;AAeA;EAZE;EACD;EACA;EACA;EACA,eA1JY;EA2JZ,SA3JY;EA4JT;EAEH;EACG;EAKH;;AAEA;EACG;;;AAIJ;EArBE;EACD;EACA;EACA;EACA,eA1JY;EA2JZ,SA3JY;EA4JT;EAEH;EACG;EAcH;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA;EACG","file":"clear-typography.css"} \ No newline at end of file diff --git a/scss/clear-typography.scss b/scss/clear-typography.scss index 5c0f408..5e30f72 100644 --- a/scss/clear-typography.scss +++ b/scss/clear-typography.scss @@ -2,7 +2,7 @@ // Change these two variables for styling $baseheight: 18px; -$baseline: 1.5; +$baseline: 1.75; // Don't change this one, it's just to // make code more readable @@ -29,7 +29,7 @@ body { .debug { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(255, 255, 255, 0) 1px); background-repeat: repeat-y; - background-size: 100% 1.5rem; + background-size: 100% $lineheight; } .night-mode {