Adjustning header, heading and img margins.
This commit is contained in:
parent
5ea8ebff46
commit
d33769b257
4 changed files with 21 additions and 8 deletions
|
|
@ -53,14 +53,11 @@ li {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Figures
|
// Header
|
||||||
|
|
||||||
figure {
|
header {
|
||||||
// Add vertical rhythm margins.
|
// Add vertical rhythm margins.
|
||||||
@include margin-block(0 1);
|
@include margin-block(0 .3);
|
||||||
|
|
||||||
// Remove defult inline margins.
|
|
||||||
@include margin-inline(0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Horizontal rule
|
// Horizontal rule
|
||||||
|
|
|
||||||
|
|
@ -15,13 +15,18 @@ h5,
|
||||||
%h5,
|
%h5,
|
||||||
h6,
|
h6,
|
||||||
%h6 {
|
%h6 {
|
||||||
@include margin-block(1 0.375, 'em');
|
@include margin-block(1 .3, 'em');
|
||||||
color: var(--color-headings);
|
color: var(--color-headings);
|
||||||
font-family: var(--ff-headings);
|
font-family: var(--ff-headings);
|
||||||
font-weight: var(--fw-headings);
|
font-weight: var(--fw-headings);
|
||||||
line-height: var(--heading-line-height);
|
line-height: var(--heading-line-height);
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
|
|
||||||
|
// Smaller margin when a headeing is right after another heading.
|
||||||
|
& + & {
|
||||||
|
@include margin-block-start(.5, 'em');
|
||||||
|
}
|
||||||
|
|
||||||
// Set max text line width in main for readability.
|
// Set max text line width in main for readability.
|
||||||
.main & {
|
.main & {
|
||||||
max-width: var(--max-line-width);
|
max-width: var(--max-line-width);
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,9 @@
|
||||||
|
|
||||||
figure,
|
figure,
|
||||||
img {
|
img {
|
||||||
|
// Add vertical rhythm margins.
|
||||||
|
@include margin-block(0 1);
|
||||||
|
|
||||||
&.image {
|
&.image {
|
||||||
--image-padding: .75rem;
|
--image-padding: .75rem;
|
||||||
|
|
||||||
|
|
@ -30,6 +33,14 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
|
// Remove defult inline margins.
|
||||||
|
@include margin-inline(0);
|
||||||
|
|
||||||
|
// Remove margin from img inside figure.
|
||||||
|
img {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&.image {
|
&.image {
|
||||||
figcaption {
|
figcaption {
|
||||||
padding-block-start: var(--image-padding);
|
padding-block-start: var(--image-padding);
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin margin-block-end($x, $unit: 'rem') {
|
@mixin margin-block-end($x, $unit: 'rem') {
|
||||||
@include spacing(margin-inline-end, $x, $unit);
|
@include spacing(margin-block-end, $x, $unit);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin margin-top($x, $unit: 'rem') {
|
@mixin margin-top($x, $unit: 'rem') {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue