Only add margin att block end, not start on group elements.
This commit is contained in:
parent
f13595fad3
commit
5ea8ebff46
7 changed files with 23 additions and 45 deletions
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
form {
|
||||
// Add vertical rhythm margins.
|
||||
@include margin-block(1);
|
||||
@include margin-block(0 1);
|
||||
}
|
||||
|
||||
input,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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} {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue