145 lines
2 KiB
SCSS
145 lines
2 KiB
SCSS
@use '../mixins' as *;
|
|
|
|
body {
|
|
font-size: 1rem;
|
|
color: #404040;
|
|
@include font-sans;
|
|
@include font-regular;
|
|
@include leading-tight;
|
|
|
|
// Font-smoothing
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
.theme {
|
|
font-size: calc(0.85 * var(--theme-font-size-base));
|
|
color: var(--theme-colour-text-primary);
|
|
}
|
|
}
|
|
|
|
// SIZE RANGE REFERENCE //
|
|
// xxs: 12.64px
|
|
// xs: 14.22px
|
|
// sm: 16.00px → 17.60px
|
|
// base: 18.00px → 22.00px
|
|
// lg: 20.25px → 27.50px
|
|
// xl: 22.78px → 34.38px
|
|
// 2xl: 25.63px → 42.97px
|
|
// 3xl: 28.83px → 53.71px
|
|
// 4xl: 32.44px → 67.14px
|
|
// 5xl: 36.49px → 83.92px
|
|
// 6xl: 41.05px → 104.90px
|
|
|
|
/////////////
|
|
// HEADINGS
|
|
/////////////
|
|
|
|
h1 {
|
|
@include h1;
|
|
}
|
|
|
|
h2 {
|
|
@include h2;
|
|
}
|
|
|
|
h3 {
|
|
@include h3;
|
|
}
|
|
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@include h4;
|
|
}
|
|
|
|
//////////////
|
|
// Body text
|
|
//////////////
|
|
|
|
%body-type-block {
|
|
display: block;
|
|
@include body-text;
|
|
}
|
|
|
|
text {
|
|
@include body-note;
|
|
}
|
|
|
|
p {
|
|
@extend %body-type-block;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
@extend %body-type-block;
|
|
padding-left: 2rem;
|
|
ol,
|
|
ul {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
a {
|
|
@include body-link;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
strong {
|
|
@include font-bold;
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
kbd {
|
|
@include font-mono;
|
|
@include text-sm;
|
|
@include text-secondary;
|
|
@include fmx-0;
|
|
@include fmt-0;
|
|
@include fmb-3;
|
|
}
|
|
|
|
kbd {
|
|
background-color: $theme-colour-text-primary;
|
|
color: $theme-colour-background;
|
|
border-radius: 0.3rem;
|
|
@include fpx-2;
|
|
@include fpy-1;
|
|
}
|
|
|
|
figcaption {
|
|
@include fmt-2;
|
|
@include body-caption;
|
|
}
|
|
|
|
blockquote {
|
|
@include fmx-0;
|
|
@include fpl-3;
|
|
@include fpy-3;
|
|
@include fpr-1;
|
|
border-left: 2px solid $theme-colour-brand-rules;
|
|
@include fmy-3;
|
|
p {
|
|
@include font-body;
|
|
@include text-lg;
|
|
@include leading-tight;
|
|
@include fmb-1;
|
|
font-style: italic;
|
|
}
|
|
blockquote {
|
|
@include fmb-0;
|
|
@include fmt-3;
|
|
border: 0;
|
|
@include fpy-0;
|
|
@include fpl-0;
|
|
p {
|
|
@include text-sm;
|
|
@include font-note;
|
|
@include fm-0;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|