From e1a43513cec6d01016ae7b1fd9f06c1f032a801e Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Thu, 7 Nov 2019 12:49:17 +0100 Subject: [PATCH] fix: make sup/sub no longer affect lineheight --- CHANGELOG.md | 4 ++++ css/clear-typography.css | 20 ++++++++++++++++++++ css/clear-typography.css.map | 2 +- scss/clear-typography.scss | 35 ++++++++++++++++++++++++++++------- 4 files changed, 53 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d52659..29817e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Auto-calculate lineheight for titles +### Fixed + +- Line-height is no longer affected by sup and sub + ## Clear Typography 1.2 [] ### Changed diff --git a/css/clear-typography.css b/css/clear-typography.css index 9c5534a..d110be1 100644 --- a/css/clear-typography.css +++ b/css/clear-typography.css @@ -137,6 +137,24 @@ ol li { margin-left: 1.5rem; } +/* sup, sub */ +sup, sub { + margin: 0; + padding: 0; + line-height: 1.5rem; + font-size: 0.8rem; + vertical-align: baseline; + position: relative; +} + +sup { + top: -0.375rem; +} + +sub { + top: 0.375rem; +} + ::selection { background: #2484c1; color: #fff; @@ -213,6 +231,8 @@ hr { border-bottom: 1px; border-color: rgba(1, 1, 1, 0.15); border-style: solid; + padding: 0; + margin: 0; margin-bottom: 1.5rem; } diff --git a/css/clear-typography.css.map b/css/clear-typography.css.map index 37042ff..787c766 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;;;AAuEb;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD,WAlGY;EAmGZ,aA9FY;EA+FZ;EACA;EACA;;;AAGD;EAfC;EACA;EACA,eAvFY;EAwFZ,aAa2B;;;AAG5B;EAnBC;EACA;EACA,eAvFY;EAwFZ,aAiBmB;;;AAGpB;EAvBC;EACA;EACA,eAvFY;EAwFZ,aAqBqB;;;AAGtB;EA3BC;EACA;EACA,eAvFY;EAwFZ,aAyBqB;;;AAGtB;EA/BC;EACA;EACA,eAvFY;EAwFZ,aA6B0B;;;AAG3B;EAnCC;EACA;EACA,eAvFY;EAwFZ,aAiCqB;;;AAGtB;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,eArIY;;;AAwIb;AAcA;EAXE;EACD;EACA;EACA;EACA,eA/IY;EAgJZ,SAhJY;EAiJT;EAEH;EAKA;;AAEA;EACG;;;AAIJ;EApBE;EACD;EACA;EACA;EACA,eA/IY;EAgJZ,SAhJY;EAiJT;EAEH;EAcA;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;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;AAcA;EAXE;EACD;EACA;EACA;EACA,eApKY;EAqKZ,SArKY;EAsKT;EAEH;EAKA;;AAEA;EACG;;;AAIJ;EApBE;EACD;EACA;EACA;EACA,eApKY;EAqKZ,SArKY;EAsKT;EAEH;EAcA;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 aeef417..0f1528b 100644 --- a/scss/clear-typography.scss +++ b/scss/clear-typography.scss @@ -76,6 +76,25 @@ ol { } } +/* sup, sub */ + +sup, sub { + margin:0; + padding:0; + line-height:$lineheight; + font-size: 0.8rem; + vertical-align:baseline; + position:relative; +} + +sup { + top: -$lineheight/4; +} + +sub { + top: $lineheight/4; +} + ::selection { background: #2484c1; color: #fff; } ::-moz-selection { background: #2484c1; color: #fff; } @@ -133,13 +152,15 @@ h6 { /* ------------------ HR ------------------- */ hr { - border-top: 0px; - border-left: 0px; - border-right: 0px; - border-bottom: 1px; - border-color: rgba(1,1,1,0.15); - border-style: solid; - margin-bottom: $lineheight; + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-bottom: 1px; + border-color: rgba(1,1,1,0.15); + border-style: solid; + padding:0; + margin:0; + margin-bottom: $lineheight; } /* ------------------ QUOTE ------------------- */