Only add margin att block end, not start on group elements.

This commit is contained in:
Fredrik Jonsson 2023-11-18 16:22:08 +01:00
commit 5ea8ebff46
7 changed files with 23 additions and 45 deletions

View file

@ -4,7 +4,7 @@
form {
// Add vertical rhythm margins.
@include margin-block(1);
@include margin-block(0 1);
}
input,

View file

@ -12,7 +12,7 @@
blockquote {
// Add vertical rhythm margins.
@include margin-block(1);
@include margin-block(0 1);
// Also indent the quote on both sides.
margin-inline: var(--indent-amount);
}
@ -24,7 +24,7 @@ ol,
ul,
menu {
// Add vertical rhythm margins.
@include margin-block(1);
@include margin-block(0 1);
}
dd {
@ -57,7 +57,7 @@ li {
figure {
// Add vertical rhythm margins.
@include margin-block(1);
@include margin-block(0 1);
// Remove defult inline margins.
@include margin-inline(0);
@ -74,7 +74,7 @@ hr {
p {
// Add vertical rhythm margins.
@include margin-block(.75);
@include margin-block(0 .75);
// Set max text line width in main for readability.
.main & {
@ -86,7 +86,7 @@ p {
pre {
// Add vertical rhythm margins.
@include margin-block(.75);
@include margin-block(0 .75);
font-family: var(--ff-monospace);
}

View file

@ -15,7 +15,7 @@ h5,
%h5,
h6,
%h6 {
@include margin-block(1 0, 'em');
@include margin-block(1 0.375, 'em');
color: var(--color-headings);
font-family: var(--ff-headings);
font-weight: var(--fw-headings);
@ -28,26 +28,6 @@ h6,
}
}
// Move content closer up to related header.
h2,
%h2,
h3,
%h3,
h4,
%h4,
h5,
%h5,
h6,
%h6 {
& + :is(p, ul, ol) {
@include margin-block-start(0.375);
}
& + & {
@include margin-block-start(0.5);
}
}
h1,
%h1 {
// h1 only on top of page so different margins.

View file

@ -3,7 +3,7 @@
figure,
img {
&.image {
--padding: .75rem;
--image-padding: .75rem;
@include respond-to(s) {
&.center {
@ -11,16 +11,16 @@ img {
}
&.left {
padding-inline-end: var(--padding);
padding-block-end: var(--padding);
padding-inline-end: var(--image-padding);
padding-block-end: var(--image-padding);
margin: 0;
float: left;
clear: both;
}
&.right {
padding-inline-start: var(--padding);
padding-block-end: var(--padding);
padding-inline-start: var(--image-padding);
padding-block-end: var(--image-padding);
margin: 0;
float: right;
clear: both;
@ -31,10 +31,8 @@ img {
figure {
&.image {
--padding: .75rem;
figcaption {
padding-block-start: var(--padding);
padding-block-start: var(--image-padding);
@include respond-to(s) {
display: table-caption;
@ -52,15 +50,15 @@ figure {
&.left {
figcaption {
padding-inline-end: var(--padding);
padding-block-end: var(--padding);
padding-inline-end: var(--image-padding);
padding-block-end: var(--image-padding);
}
}
&.right {
figcaption {
padding-inline-start: var(--padding);
padding-block-end: var(--padding);
padding-inline-start: var(--image-padding);
padding-block-end: var(--image-padding);
}
}
}

View file

@ -4,7 +4,7 @@
table {
// Add vertical rhythm margins.
@include margin-block(1);
@include margin-block(0 1);
// Remove default spacing between table cells.
border-collapse: collapse;
// Prevent cramped-looking tables

View file

@ -1,10 +1,10 @@
@each $name, $space in $spacing {
.mt--#{$name} {
@include margin-top($space);
@include margin-block-start($space);
}
.mb--#{$name} {
@include margin-bottom($space);
@include margin-block-end($space);
}
.mtb--#{$name} {

View file

@ -1,14 +1,14 @@
.zebra-table,
%zebra-table {
--padding: .5rem;
--cell-padding: .5rem;
@include respond-to-max(s) {
--padding: .3rem;
--cell-padding: .3rem;
}
th,
td {
padding: var(--padding);
padding: var(--cell-padding);
}
thead {