vertical rythm

This commit is contained in:
Raphael Goetter 2017-10-18 08:40:26 +02:00
parent 86c5ab4d22
commit 41fdb8ce1c
4 changed files with 47 additions and 81 deletions

View file

@ -443,55 +443,37 @@ h6, .h6-like {
font-weight: 500; font-weight: 500;
} }
/* Vertical rythm for blocks */ /* Vertical rythm */
p, h1,
.p-like, h2,
ul, h3,
ol, h4,
dl, h5,
blockquote, h6,
pre, dd {
td, margin-top: 0;
th, margin-bottom: 0.5rem;
label,
textarea,
caption,
details,
figure {
margin-top: 0.75em;
margin-bottom: 0;
line-height: 1.5;
} }
/* Avoid top margins on first content element */ p,
p:first-child, address,
.p-like:first-child, ol,
ul:first-child, ul,
ol:first-child, dl,
dl:first-child, li,
blockquote:first-child, blockquote,
label:first-child, pre {
pre:first-child,
h1:first-child,
.h1-like:first-child,
h2:first-child,
.h2-like:first-child,
h3:first-child,
.h3-like:first-child,
h4:first-child,
.h4-like:first-child,
h5:first-child,
.h5-like:first-child,
h6:first-child,
.h6-like:first-child {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem;
} }
/* Avoid margins on nested elements */ /* Avoid margins on nested elements */
li p, li p,
li .p-like, li .p-like,
li ul, li ul,
li ol { li ol,
ol ol,
ul ul {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }

File diff suppressed because one or more lines are too long

View file

@ -28,6 +28,11 @@ $line-height-s : 1.3 !default;
$line-height-base : 1.5 !default; $line-height-base : 1.5 !default;
$line-height-l : 1.7 !default; $line-height-l : 1.7 !default;
// default margin-bottom
$margin-bottom-base : 1rem !default;
$headings-margin-bottom : $margin-bottom-base /2 !default;
$paragraph-margin-bottom: $margin-bottom-base !default;
// font weights // font weights
$weight-light : 200 !default; $weight-light : 200 !default;
$weight-book : 300 !default; $weight-book : 300 !default;

View file

@ -80,62 +80,41 @@ h6, .h6-like {
font-weight: $weight-medium; font-weight: $weight-medium;
} }
/* Vertical rythm for blocks */ /* Vertical rythm */
p, h1,
.p-like, h2,
ul, h3,
ol, h4,
dl, h5,
blockquote, h6,
pre, dd {
td, margin-top: 0;
th, margin-bottom: $headings-margin-bottom;
label,
textarea,
caption,
details,
figure {
margin-top: 0.75em;
margin-bottom: 0;
line-height: $line-height-base;
} }
/* Avoid top margins on first content element */
p, p,
.p-like, address,
ul,
ol, ol,
ul,
dl, dl,
li,
blockquote, blockquote,
label, pre {
pre, margin-top: 0;
h1, margin-bottom: $paragraph-margin-bottom;
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like,
h6,
.h6-like {
&:first-child {
margin-top: 0;
}
} }
/* Avoid margins on nested elements */ /* Avoid margins on nested elements */
li p, li p,
li .p-like, li .p-like,
li ul, li ul,
li ol { li ol,
ol ol,
ul ul {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
/* Alternate font-sizing */ /* Alternate font-sizing */
.smaller { .smaller {
font-size: 0.6em; font-size: 0.6em;