|
|
/**
|
|
|
* Typography
|
|
|
*/
|
|
|
|
|
|
// Reboot based on :
|
|
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
|
|
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
|
|
// ––––––––––––––––––––
|
|
|
|
|
|
// Add the correct font weight in Chrome, Edge, and Safari
|
|
|
b,
|
|
|
strong {
|
|
|
font-weight: bolder;
|
|
|
}
|
|
|
|
|
|
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
|
|
|
sub,
|
|
|
sup {
|
|
|
position: relative;
|
|
|
font-size: 0.75em;
|
|
|
line-height: 0;
|
|
|
vertical-align: baseline;
|
|
|
}
|
|
|
sub {
|
|
|
bottom: -0.25em;
|
|
|
}
|
|
|
sup {
|
|
|
top: -0.5em;
|
|
|
}
|
|
|
|
|
|
// Pico
|
|
|
// ––––––––––––––––––––
|
|
|
|
|
|
address,
|
|
|
blockquote,
|
|
|
dl,
|
|
|
figure,
|
|
|
form,
|
|
|
ol,
|
|
|
p,
|
|
|
pre,
|
|
|
table,
|
|
|
ul {
|
|
|
margin-top: 0;
|
|
|
margin-bottom: var(--typography-spacing-vertical);
|
|
|
color: var(--color);
|
|
|
font-style: normal;
|
|
|
font-weight: var(--font-weight);
|
|
|
font-size: var(--font-size);
|
|
|
}
|
|
|
|
|
|
// Links
|
|
|
// 1. Remove the gray background on active links in IE 10
|
|
|
a,
|
|
|
[role="link"] {
|
|
|
--color: var(--primary);
|
|
|
--background-color: transparent;
|
|
|
outline: none;
|
|
|
background-color: var(--background-color); // 1
|
|
|
color: var(--color);
|
|
|
text-decoration: var(--text-decoration);
|
|
|
|
|
|
@if $enable-transitions {
|
|
|
transition: background-color var(--transition), color var(--transition),
|
|
|
text-decoration var(--transition), box-shadow var(--transition);
|
|
|
}
|
|
|
|
|
|
&:is([aria-current], :hover, :active, :focus) {
|
|
|
--color: var(--primary-hover);
|
|
|
--text-decoration: underline;
|
|
|
}
|
|
|
|
|
|
&:focus {
|
|
|
--background-color: var(--primary-focus);
|
|
|
}
|
|
|
|
|
|
@if $enable-classes {
|
|
|
// Secondary
|
|
|
&.secondary {
|
|
|
--color: var(--secondary);
|
|
|
|
|
|
&:is([aria-current], :hover, :active, :focus) {
|
|
|
--color: var(--secondary-hover);
|
|
|
}
|
|
|
|
|
|
&:focus {
|
|
|
--background-color: var(--secondary-focus);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Contrast
|
|
|
&.contrast {
|
|
|
--color: var(--contrast);
|
|
|
|
|
|
&:is([aria-current], :hover, :active, :focus) {
|
|
|
--color: var(--contrast-hover);
|
|
|
}
|
|
|
|
|
|
&:focus {
|
|
|
--background-color: var(--contrast-focus);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Headings
|
|
|
h1,
|
|
|
h2,
|
|
|
h3,
|
|
|
h4,
|
|
|
h5,
|
|
|
h6 {
|
|
|
margin-top: 0;
|
|
|
//margin-bottom: var(--typography-spacing-vertical);
|
|
|
margin-bottom: calc(var(--typography-spacing-vertical) * 0.7);
|
|
|
color: var(--color);
|
|
|
font-weight: var(--font-weight);
|
|
|
font-size: var(--font-size);
|
|
|
font-family: var(--font-family);
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
--color: var(--h1-color);
|
|
|
}
|
|
|
h2 {
|
|
|
--color: var(--h2-color);
|
|
|
}
|
|
|
h3 {
|
|
|
--color: var(--h3-color);
|
|
|
}
|
|
|
h4 {
|
|
|
--color: var(--h4-color);
|
|
|
}
|
|
|
h5 {
|
|
|
--color: var(--h5-color);
|
|
|
}
|
|
|
h6 {
|
|
|
--color: var(--h6-color);
|
|
|
}
|
|
|
|
|
|
// Margin-top for headings after a typography block
|
|
|
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
|
|
~ :is(h1, h2, h3, h4, h5, h6) {
|
|
|
margin-top: var(--typography-spacing-vertical);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Heading group
|
|
|
@if $enable-classes == false {
|
|
|
hgroup {
|
|
|
margin-bottom: var(--typography-spacing-vertical);
|
|
|
|
|
|
> * {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
> *:last-child {
|
|
|
--color: var(--muted-color);
|
|
|
--font-weight: unset;
|
|
|
font-size: 1rem;
|
|
|
font-family: unset;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@if $enable-classes {
|
|
|
hgroup,
|
|
|
.headings {
|
|
|
margin-bottom: var(--typography-spacing-vertical);
|
|
|
|
|
|
> * {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
> *:last-child {
|
|
|
--color: var(--muted-color);
|
|
|
--font-weight: unset;
|
|
|
font-size: 1rem;
|
|
|
font-family: unset;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Paragraphs
|
|
|
p {
|
|
|
margin-bottom: var(--typography-spacing-vertical);
|
|
|
}
|
|
|
|
|
|
// Small
|
|
|
small {
|
|
|
font-size: var(--font-size);
|
|
|
}
|
|
|
|
|
|
// Lists
|
|
|
:where(dl, ol, ul) {
|
|
|
padding-right: 0;
|
|
|
padding-left: var(--spacing);
|
|
|
padding-inline-start: var(--spacing);
|
|
|
padding-inline-end: 0;
|
|
|
|
|
|
li {
|
|
|
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Margin-top for nested lists
|
|
|
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
|
|
:where(dl, ol, ul) {
|
|
|
:is(dl, ol, ul) {
|
|
|
margin: 0; // 1
|
|
|
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
ul li {
|
|
|
list-style: square;
|
|
|
}
|
|
|
|
|
|
// Highlighted text
|
|
|
mark {
|
|
|
padding: 0.125rem 0.25rem;
|
|
|
background-color: var(--mark-background-color);
|
|
|
color: var(--mark-color);
|
|
|
vertical-align: baseline;
|
|
|
}
|
|
|
|
|
|
// Blockquote
|
|
|
blockquote {
|
|
|
display: block;
|
|
|
margin: var(--typography-spacing-vertical) 0;
|
|
|
padding: var(--spacing);
|
|
|
border-right: none;
|
|
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
|
|
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
|
|
border-inline-end: none;
|
|
|
|
|
|
footer {
|
|
|
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
|
|
color: var(--blockquote-footer-color);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Abbreviations
|
|
|
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
|
|
|
abbr[title] {
|
|
|
border-bottom: 1px dotted;
|
|
|
text-decoration: none; // 1
|
|
|
cursor: help;
|
|
|
}
|
|
|
|
|
|
// Ins
|
|
|
ins {
|
|
|
color: var(--ins-color);
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
// del
|
|
|
del {
|
|
|
color: var(--del-color);
|
|
|
}
|
|
|
|
|
|
// selection
|
|
|
::selection {
|
|
|
background-color: var(--primary-focus);
|
|
|
}
|