From 0e1fee29bd0b431cc4f0613511dd2fbcd0cd2da2 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Mon, 4 Nov 2019 15:47:24 +0100 Subject: [PATCH] fix: use margin instead of padding for paragraphs delimitations --- css/clear-typography.css | 36 +++++++++++++++++++----------------- css/clear-typography.css.map | 2 +- scss/clear-typography.scss | 19 +++++++++---------- 3 files changed, 29 insertions(+), 28 deletions(-) diff --git a/css/clear-typography.css b/css/clear-typography.css index 47f0d3e..1b6bc35 100644 --- a/css/clear-typography.css +++ b/css/clear-typography.css @@ -102,19 +102,19 @@ a { p { padding: 0; margin: 0; - padding-bottom: 1.5rem; + margin-bottom: 1.5rem; } p:last-child { - padding-bottom: 0; + margin-bottom: 0; } ul { padding: 0; margin: 0; - padding-bottom: 1.5rem; + margin-bottom: 1.5rem; } ul ul { - padding-bottom: 0; + margin-bottom: 0; } ul li { margin-left: 1.5rem; @@ -123,10 +123,10 @@ ul li { ol { padding: 0; margin: 0; - padding-bottom: 1.5rem; + margin-bottom: 1.5rem; } ol ol { - padding-bottom: 0; + margin-bottom: 0; } ol li { margin-left: 1.5rem; @@ -195,42 +195,42 @@ h1, h2, h3, h4, h5, h6, h7 { h1 { font-size: 2.3333333em; line-height: 1em; - padding: 0.333333em 0 0.6em 0; + margin-bottom: 1.5rem; font-weight: 700; } h2 { font-size: 2em; line-height: 1.5em; - padding: 0.333333em 0 0.4em 0; + margin-bottom: 1.5rem; font-weight: 700; } h3 { font-size: 1.5em; line-height: 1em; - padding: 0em 0 1em 0; + margin-bottom: 1.5rem; font-weight: 700; } h4 { font-size: 1.5em; line-height: 1em; - padding: 0em 0 1em 0; + margin-bottom: 1.5rem; font-weight: 600; } h5 { font-size: 1.333333em; line-height: 1em; - padding: 0.1em 0 1.133333em 0; + margin-bottom: 1.5rem; font-weight: 600; } h6 { font-size: 1.1em; line-height: 1.4em; - padding: 0.1em 0 1.2em 0; + margin-bottom: 1.5rem; font-weight: 600; } @@ -250,10 +250,12 @@ blockquote { border-width: 0 0 0 0.2em; border-style: solid; border-radius: 3px; - margin: -0.75em -0.2em 0.75em -0.2em; - padding: 0.75em 1em 0.75em 1em; + margin: 0; + margin-bottom: 1.5rem; + padding: 0.75rem; max-width: 100%; border-color: rgba(1, 1, 1, 0.15); + font-size: 1.1rem; } .night-mode blockquote { border-color: rgba(255, 255, 255, 0.15); @@ -263,12 +265,12 @@ pre { border-width: 0 0 0 0.2em; border-style: solid; border-radius: 3px; - margin: -0.75em -0.2em 0.75em -0.2em; - padding: 0.75em 1em 0.75em 1em; + margin: 0; + margin-bottom: 1.5rem; + padding: 0.75rem; max-width: 100%; border-color: rgba(1, 1, 1, 0.2); background-color: #EEE; - overflow-x: scroll; } .night-mode pre { background-color: #222; diff --git a/css/clear-typography.css.map b/css/clear-typography.css.map index 012f201..4ddb0c8 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;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;AASA;EACE;EACD;EACA;EACA;EACA;EACA;;;AAGD;EAfC,WAgBgB;EAfhB,aAe6B;EAd7B;EACA,aAaqD;;;AAGtD;EAnBC,WAoBgB;EAnBhB,aAmBqB;EAlBrB;EACA,aAiB+C;;;AAGhD;EAvBC,WAwBgB;EAvBhB,aAuBuB;EAtBvB;EACA,aAqBsC;;;AAGvC;EA3BC,WA4BgB;EA3BhB,aA2BuB;EA1BvB;EACA,aAyBsC;;;AAGvC;EA/BC,WAgCgB;EA/BhB,aA+B4B;EA9B5B;EACA,aA6BoD;;;AAGrD;EAnCC,WAoCgB;EAnChB,aAmCuB;EAlCvB;EACA,aAiC4C;;;AAG7C;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAaA;EAVE;EACD;EACA;EAEA;EACA;EAEA;EAKA;;AAEA;EACG;;;AAIJ;EAnBE;EACD;EACA;EAEA;EACA;EAEA;EAcA;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;;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;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;AASA;EACE;EACD;EACA;EACA;EACA;EACA;;;AAGD;EAfC,WAgBgB;EAfhB,aAe6B;EAd7B;EACA,aAaqD;;;AAGtD;EAnBC,WAoBgB;EAnBhB,aAmBqB;EAlBrB;EACA,aAiB+C;;;AAGhD;EAvBC,WAwBgB;EAvBhB,aAuBuB;EAtBvB;EACA,aAqBsC;;;AAGvC;EA3BC,WA4BgB;EA3BhB,aA2BuB;EA1BvB;EACA,aAyBsC;;;AAGvC;EA/BC,WAgCgB;EA/BhB,aA+B4B;EA9B5B;EACA,aA6BoD;;;AAGrD;EAnCC,WAoCgB;EAnChB,aAmCuB;EAlCvB;EACA,aAiC4C;;;AAG7C;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAaA;EAVE;EACD;EACA;EACA;EACA;EACA;EAEA;EAKA;EACG;;AAEH;EACG;;;AAIJ;EApBE;EACD;EACA;EACA;EACA;EACA;EAEA;EAeA;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 7209186..99b550e 100644 --- a/scss/clear-typography.scss +++ b/scss/clear-typography.scss @@ -8,7 +8,7 @@ $baseheight: 18px; @mixin paragraph() { padding:0; margin:0; - padding-bottom: $baseline * 1rem; + margin-bottom: $baseline * 1rem; } html { @@ -43,14 +43,14 @@ a { p { @include paragraph(); &:last-child { - padding-bottom:0; + margin-bottom:0; } } ul { @include paragraph(); ul { - padding-bottom:0; + margin-bottom:0; } li { margin-left: $baseline * 1rem; @@ -60,7 +60,7 @@ ul { ol { @include paragraph(); ol { - padding-bottom:0; + margin-bottom:0; } li { margin-left: $baseline * 1rem; @@ -121,8 +121,8 @@ ol { @mixin title($size, $height, $top, $bottom, $weight) { font-size: $size; - line-height: $height; - padding: $top 0 $bottom 0; + line-height: $height; + margin-bottom: $baseline * 1rem; font-weight: $weight; } @@ -177,9 +177,9 @@ hr { border-width: 0 0 0 0.2em; border-style: solid; border-radius: 3px; - - margin: -0.75em -0.2em 0.75em -0.2em; - padding: 0.75em 1em 0.75em 1em; + margin:0; + margin-bottom: $baseline * 1rem; + padding: $baseline/2 * 1rem; max-width: 100%; } @@ -197,7 +197,6 @@ pre { @include well(); border-color: rgba(1,1,1,0.20); background-color:#EEE; - overflow-x: scroll; .night-mode & { background-color:#222;