1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
$titleFontStack: 'Beiruti', 'Arial', system-ui, sans-serif;
$mainFontStack: 'Sen Variable', 'Arial', system-ui, sans-serif;
$monoFontStack: 'Fira Code', 'Consolas', monospace;
$accent: hsl(209, 94%, 42%);
$accentLight: hsl(215, 90%, 60%);
$accentDark: hsl(215, 90%, 30%);
$secondary: hsl(48, 100%, 50%);
$dark: hsl(340, 13%, 5%);
$background: hsl(210, 40%, 96%);
$light: hsl(214, 64%, 98%);
$lightAlt: hsl(0, 0%, 100%);
$noteBackground: hsl(210, 40%, 96%);
$noteText: hsl(210, 40%, 40%);
$shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
$floatingRadius: 0.5rem;
$breakpointTablet: 480px;
$breakpointDesktop: 1024px;
:root {
font: 400 16px/1.65 $mainFontStack;
}
%heading {
font-family: $titleFontStack;
line-height: 1.25;
margin-block-start: 0.75em;
margin-block-end: 0.25em;
}
h1 {
@extend %heading;
font-size: 3.25rem;
}
h2 {
@extend %heading;
font-size: 2.5rem;
}
h3 {
@extend %heading;
font-size: 1.5rem;
}
h4 {
@extend %heading;
font-size: 1.25rem;
}
|
