sass-site/source/assets/sass/visual-design/_typography.scss

236 lines
3.5 KiB
SCSS
Raw Normal View History

2023-01-12 20:54:24 +01:00
@use 'sass:math';
2023-01-12 19:19:42 +01:00
2023-01-12 20:54:24 +01:00
@use '../breakpoints';
@use '../functions';
2023-01-12 19:19:42 +01:00
2023-01-09 20:10:02 +01:00
$sl-font-weight--light: 300 !default;
2023-01-06 22:40:29 +01:00
$sl-font-weight--regular: 400 !default;
2023-01-09 20:10:02 +01:00
$sl-font-weight--bold: 600 !default;
2023-01-06 22:40:29 +01:00
$sl-font-weights: (
2023-01-09 20:10:02 +01:00
light: $sl-font-weight--light,
2023-01-06 22:40:29 +01:00
regular: $sl-font-weight--regular,
2023-01-09 20:10:02 +01:00
bold: $sl-font-weight--bold,
2023-01-06 22:40:29 +01:00
);
2023-01-09 20:10:02 +01:00
@each $name, $value in $sl-font-weights {
.sl-font-weight--#{$name} {
font-weight: $value;
}
2023-01-06 22:40:29 +01:00
}
2023-01-09 20:10:02 +01:00
$sl-font-family--text: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI',
2023-01-09 23:19:15 +01:00
roboto, ubuntu, cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji',
2023-01-09 20:10:02 +01:00
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$sl-font-family--display: 'Source Serif Pro', 'Apple Garamond', 'Baskerville',
2023-01-09 23:19:15 +01:00
'Times New Roman', 'Droid Serif', times, serif, 'Apple Color Emoji',
2023-01-09 20:10:02 +01:00
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
2023-01-09 23:19:15 +01:00
$sl-font-family--code: 'Source Code Pro', 'SF Mono', monaco, inconsolata,
2023-01-09 20:10:02 +01:00
'Fira Mono', 'Droid Sans Mono', monospace, monospace !default;
2023-01-06 22:40:29 +01:00
$sl-font-families: (
2023-01-09 20:10:02 +01:00
text: $sl-font-family--text,
2023-01-06 22:40:29 +01:00
display: $sl-font-family--display,
2023-01-09 20:10:02 +01:00
code: $sl-font-family--code,
2023-01-06 22:40:29 +01:00
);
2023-01-09 20:10:02 +01:00
@each $name, $value in $sl-font-families {
.sl-font-family--#{$name} {
font-family: $value;
}
2023-01-06 22:40:29 +01:00
}
body,
h5,
2023-01-09 20:10:02 +01:00
h6 {
font-size: var(--sl-font-size--medium);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
body {
line-height: 1.5;
font-family: $sl-font-family--text;
2023-01-09 23:19:15 +01:00
text-rendering: optimizelegibility;
2023-01-06 22:40:29 +01:00
}
2023-01-09 20:10:02 +01:00
* {
min-width: 0;
}
2023-01-06 22:40:29 +01:00
2023-01-09 20:10:02 +01:00
a {
text-decoration: none;
}
2023-01-06 22:40:29 +01:00
strong,
b,
h5,
h6,
dt,
tbody th,
2023-01-09 20:10:02 +01:00
label {
font-weight: $sl-font-weight--bold;
}
2023-01-06 22:40:29 +01:00
h1,
h2,
caption,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
figure,
details {
2023-01-31 07:13:57 +01:00
margin: var(--gutter) 0;
2023-01-06 22:40:29 +01:00
padding: 0;
}
h2,
h3,
h4,
h5,
h6 {
margin-top: var(--gutter-double-sesqui);
2023-01-06 22:40:29 +01:00
2023-01-09 20:10:02 +01:00
aside &,
nav & {
2023-01-31 07:13:57 +01:00
margin-top: var(--gutter);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
ul,
ol,
2023-01-09 20:10:02 +01:00
dd {
margin-left: 1.75rem;
}
2023-01-06 22:40:29 +01:00
h1,
h2,
caption,
h3,
h4,
h5,
h6 {
font-weight: $sl-font-weight--regular;
line-height: 1.25;
}
h1,
h2,
2023-01-09 20:10:02 +01:00
caption {
2023-02-20 21:54:31 +01:00
letter-spacing: -0.03125em;
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
h1,
2023-01-09 20:10:02 +01:00
h2 {
font-weight: $sl-font-weight--light;
}
2023-01-06 22:40:29 +01:00
h1 {
margin-top: 0;
2023-02-20 21:54:31 +01:00
font-size: var(--h1-size, var(--sl-font-size--xx-large));
2023-01-06 22:40:29 +01:00
line-height: 1;
text-align: center;
2023-01-12 19:19:42 +01:00
@include breakpoints.sl-breakpoint--medium {
--h1-size: var(--sl-font-size--xxx-large);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
2023-01-12 19:19:42 +01:00
@include breakpoints.sl-breakpoint--large {
--h1-size: var(--sl-font-size--xxxx-large);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
h2,
caption,
legend,
h3,
2023-01-09 20:10:02 +01:00
thead th {
font-family: $sl-font-family--display;
}
2023-01-06 22:40:29 +01:00
h2,
caption {
font-size: var(--h2-size, var(--sl-font-size--x-large));
2023-01-06 22:40:29 +01:00
2023-01-12 19:19:42 +01:00
@include breakpoints.sl-breakpoint--medium {
--h2-size: var(--sl-font-size--xx-large);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
2023-01-12 19:19:42 +01:00
@include breakpoints.sl-breakpoint--large {
--h2-size: var(--sl-font-size--xxx-large);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
h3,
2023-01-09 20:10:02 +01:00
h4 {
font-size: var(--sl-font-size--large);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
nav,
2023-01-09 20:10:02 +01:00
footer {
font-size: var(--sl-font-size--small);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
.caps {
font-size: 0.875em;
2023-01-06 22:40:29 +01:00
text-transform: uppercase;
2023-02-20 21:54:31 +01:00
letter-spacing: 0.0625em;
2023-01-06 22:40:29 +01:00
line-height: 0;
}
code,
pre {
font-family: $sl-font-family--code;
}
code {
// Scale the code font size down, because the font itself is much larger.
font-size: 0.88889em;
2023-01-06 22:40:29 +01:00
line-height: 1;
2023-01-09 20:10:02 +01:00
nav & {
white-space: nowrap;
}
2023-01-09 23:19:15 +01:00
2023-01-06 22:40:29 +01:00
p & {
2023-01-12 19:19:42 +01:00
@include breakpoints.sl-breakpoint--x-large {
2023-01-09 20:10:02 +01:00
white-space: nowrap;
}
2023-01-06 22:40:29 +01:00
}
}
pre {
font-size: var(--sl-font-size--x-small);
2023-01-31 07:13:57 +01:00
padding: var(--gutter-minus) var(--gutter);
2023-01-06 22:40:29 +01:00
overflow: auto;
white-space: pre-wrap;
code {
2023-02-21 18:26:26 +01:00
font-size: inherit;
2023-01-06 22:40:29 +01:00
line-height: inherit;
}
}
img {
display: block;
margin: {
right: auto;
left: auto;
2023-01-09 20:10:02 +01:00
}
2023-01-09 23:19:15 +01:00
2023-01-06 22:40:29 +01:00
max-width: 100%;
height: auto;
}
hr {
margin: {
2023-01-31 07:13:57 +01:00
top: var(--gutter-triple);
bottom: var(--gutter-triple);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
2023-01-09 20:10:02 +01:00
dd {
margin: 0;
}