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;
}
/* Vertical rythm for blocks */
p,
.p-like,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
caption,
details,
figure {
margin-top: 0.75em;
margin-bottom: 0;
line-height: 1.5;
/* Vertical rythm */
h1,
h2,
h3,
h4,
h5,
h6,
dd {
margin-top: 0;
margin-bottom: 0.5rem;
}
/* Avoid top margins on first content element */
p:first-child,
.p-like:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
label:first-child,
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 {
p,
address,
ol,
ul,
dl,
li,
blockquote,
pre {
margin-top: 0;
margin-bottom: 1rem;
}
/* Avoid margins on nested elements */
li p,
li .p-like,
li ul,
li ol {
li ol,
ol ol,
ul ul {
margin-top: 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-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
$weight-light : 200 !default;
$weight-book : 300 !default;

View File

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