Cover
Cover Style
.cover {
/* ↓ Establish a columnal flex context */
display: flex;
flex-direction: column;
/* ↓ Set a minimum height to match the viewport height
(any minimum would be fine) */
min-block-size: 100vh;
/* Set a padding value */
padding: $space-s;
}
.cover > * {
/* ↓ Give each child a top and bottom margin */
margin-block: $space-s;
}
.cover > :first-child:not(h1) {
/* ↓ Remove the top margin from the first-child
if it _doesn't_ match the centered element */
margin-block-start: 0;
}
.cover > :last-child:not(h1) {
/* ↓ Remove the bottom margin from the last-child
if it _doesn't_ match the centered element */
margin-block-end: 0;
}
.cover > h1 {
/* ↓ Center the centered element (h1 here)
in the available vertical space */
margin-block: auto;
}
Cover
Cover paragraph.