You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
aSkelly/scss/base/_typography.scss

53 lines
1.1 KiB
SCSS

@use '../utilities/main_utilities' as *;
p {
padding: 0;
width: 100%;
}
p+p, h1+p{ /* Para after para should space out */
margin-top: rems(10px);
}
/* Set shorter line heights on headings and interactive elements */
h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5 h6,.h6,
button, input, label{
line-height: 1.35;
}
/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6{
text-wrap: balance;
}
h1, .h1{
font-size: rems(30px);
margin-bottom: rems(18px);
}
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
padding: rems(2px);
background: $color-highlight;
@include color-scheme(dark) {
background: $color-highlight--dark;
}
}
small {
color: $color-text;
@include color-scheme(dark) {
color: $color-text--dark;
}
}
hr{
background-color: $color-background--dark; // Dark by default so it is shown
border: none;
height: 1px; // Doesn't need to be rem's y'kno
width: 100%;
max-width: $width-content;
margin: rems(24px) auto;
@include color-scheme(dark) {
color: $color-background;
}
}