diff --git a/assets/sass/base/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss index 4c2f0af..da6b63c 100644 --- a/assets/sass/base/grouping/_grouping.scss +++ b/assets/sass/base/grouping/_grouping.scss @@ -53,14 +53,11 @@ li { } } -// Figures +// Header -figure { +header { // Add vertical rhythm margins. - @include margin-block(0 1); - - // Remove defult inline margins. - @include margin-inline(0); + @include margin-block(0 .3); } // Horizontal rule diff --git a/assets/sass/base/headings/_headings.scss b/assets/sass/base/headings/_headings.scss index 54a7f4a..8cbd2d7 100644 --- a/assets/sass/base/headings/_headings.scss +++ b/assets/sass/base/headings/_headings.scss @@ -15,13 +15,18 @@ h5, %h5, h6, %h6 { - @include margin-block(1 0.375, 'em'); + @include margin-block(1 .3, 'em'); color: var(--color-headings); font-family: var(--ff-headings); font-weight: var(--fw-headings); line-height: var(--heading-line-height); 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. .main & { max-width: var(--max-line-width); diff --git a/assets/sass/base/images/_images.scss b/assets/sass/base/images/_images.scss index d9cba47..52d67c1 100644 --- a/assets/sass/base/images/_images.scss +++ b/assets/sass/base/images/_images.scss @@ -2,6 +2,9 @@ figure, img { + // Add vertical rhythm margins. + @include margin-block(0 1); + &.image { --image-padding: .75rem; @@ -30,6 +33,14 @@ img { } figure { + // Remove defult inline margins. + @include margin-inline(0); + + // Remove margin from img inside figure. + img { + margin: 0; + } + &.image { figcaption { padding-block-start: var(--image-padding); diff --git a/assets/sass/mixins/spacing/_spacing.scss b/assets/sass/mixins/spacing/_spacing.scss index c4226ce..f73fc55 100644 --- a/assets/sass/mixins/spacing/_spacing.scss +++ b/assets/sass/mixins/spacing/_spacing.scss @@ -44,7 +44,7 @@ } @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') {