fix: use margin instead of padding for paragraphs delimitations

This commit is contained in:
Kazhnuz 2019-11-04 15:47:24 +01:00
parent f716db73c7
commit 0e1fee29bd
3 changed files with 29 additions and 28 deletions

View file

@ -102,19 +102,19 @@ a {
p { p {
padding: 0; padding: 0;
margin: 0; margin: 0;
padding-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
p:last-child { p:last-child {
padding-bottom: 0; margin-bottom: 0;
} }
ul { ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
padding-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
ul ul { ul ul {
padding-bottom: 0; margin-bottom: 0;
} }
ul li { ul li {
margin-left: 1.5rem; margin-left: 1.5rem;
@ -123,10 +123,10 @@ ul li {
ol { ol {
padding: 0; padding: 0;
margin: 0; margin: 0;
padding-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
ol ol { ol ol {
padding-bottom: 0; margin-bottom: 0;
} }
ol li { ol li {
margin-left: 1.5rem; margin-left: 1.5rem;
@ -195,42 +195,42 @@ h1, h2, h3, h4, h5, h6, h7 {
h1 { h1 {
font-size: 2.3333333em; font-size: 2.3333333em;
line-height: 1em; line-height: 1em;
padding: 0.333333em 0 0.6em 0; margin-bottom: 1.5rem;
font-weight: 700; font-weight: 700;
} }
h2 { h2 {
font-size: 2em; font-size: 2em;
line-height: 1.5em; line-height: 1.5em;
padding: 0.333333em 0 0.4em 0; margin-bottom: 1.5rem;
font-weight: 700; font-weight: 700;
} }
h3 { h3 {
font-size: 1.5em; font-size: 1.5em;
line-height: 1em; line-height: 1em;
padding: 0em 0 1em 0; margin-bottom: 1.5rem;
font-weight: 700; font-weight: 700;
} }
h4 { h4 {
font-size: 1.5em; font-size: 1.5em;
line-height: 1em; line-height: 1em;
padding: 0em 0 1em 0; margin-bottom: 1.5rem;
font-weight: 600; font-weight: 600;
} }
h5 { h5 {
font-size: 1.333333em; font-size: 1.333333em;
line-height: 1em; line-height: 1em;
padding: 0.1em 0 1.133333em 0; margin-bottom: 1.5rem;
font-weight: 600; font-weight: 600;
} }
h6 { h6 {
font-size: 1.1em; font-size: 1.1em;
line-height: 1.4em; line-height: 1.4em;
padding: 0.1em 0 1.2em 0; margin-bottom: 1.5rem;
font-weight: 600; font-weight: 600;
} }
@ -250,10 +250,12 @@ blockquote {
border-width: 0 0 0 0.2em; border-width: 0 0 0 0.2em;
border-style: solid; border-style: solid;
border-radius: 3px; border-radius: 3px;
margin: -0.75em -0.2em 0.75em -0.2em; margin: 0;
padding: 0.75em 1em 0.75em 1em; margin-bottom: 1.5rem;
padding: 0.75rem;
max-width: 100%; max-width: 100%;
border-color: rgba(1, 1, 1, 0.15); border-color: rgba(1, 1, 1, 0.15);
font-size: 1.1rem;
} }
.night-mode blockquote { .night-mode blockquote {
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
@ -263,12 +265,12 @@ pre {
border-width: 0 0 0 0.2em; border-width: 0 0 0 0.2em;
border-style: solid; border-style: solid;
border-radius: 3px; border-radius: 3px;
margin: -0.75em -0.2em 0.75em -0.2em; margin: 0;
padding: 0.75em 1em 0.75em 1em; margin-bottom: 1.5rem;
padding: 0.75rem;
max-width: 100%; max-width: 100%;
border-color: rgba(1, 1, 1, 0.2); border-color: rgba(1, 1, 1, 0.2);
background-color: #EEE; background-color: #EEE;
overflow-x: scroll;
} }
.night-mode pre { .night-mode pre {
background-color: #222; background-color: #222;

View file

@ -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"} {"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"}

View file

@ -8,7 +8,7 @@ $baseheight: 18px;
@mixin paragraph() { @mixin paragraph() {
padding:0; padding:0;
margin:0; margin:0;
padding-bottom: $baseline * 1rem; margin-bottom: $baseline * 1rem;
} }
html { html {
@ -43,14 +43,14 @@ a {
p { p {
@include paragraph(); @include paragraph();
&:last-child { &:last-child {
padding-bottom:0; margin-bottom:0;
} }
} }
ul { ul {
@include paragraph(); @include paragraph();
ul { ul {
padding-bottom:0; margin-bottom:0;
} }
li { li {
margin-left: $baseline * 1rem; margin-left: $baseline * 1rem;
@ -60,7 +60,7 @@ ul {
ol { ol {
@include paragraph(); @include paragraph();
ol { ol {
padding-bottom:0; margin-bottom:0;
} }
li { li {
margin-left: $baseline * 1rem; margin-left: $baseline * 1rem;
@ -121,8 +121,8 @@ ol {
@mixin title($size, $height, $top, $bottom, $weight) { @mixin title($size, $height, $top, $bottom, $weight) {
font-size: $size; font-size: $size;
line-height: $height; line-height: $height;
padding: $top 0 $bottom 0; margin-bottom: $baseline * 1rem;
font-weight: $weight; font-weight: $weight;
} }
@ -177,9 +177,9 @@ hr {
border-width: 0 0 0 0.2em; border-width: 0 0 0 0.2em;
border-style: solid; border-style: solid;
border-radius: 3px; border-radius: 3px;
margin:0;
margin: -0.75em -0.2em 0.75em -0.2em; margin-bottom: $baseline * 1rem;
padding: 0.75em 1em 0.75em 1em; padding: $baseline/2 * 1rem;
max-width: 100%; max-width: 100%;
} }
@ -197,7 +197,6 @@ pre {
@include well(); @include well();
border-color: rgba(1,1,1,0.20); border-color: rgba(1,1,1,0.20);
background-color:#EEE; background-color:#EEE;
overflow-x: scroll;
.night-mode & { .night-mode & {
background-color:#222; background-color:#222;