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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
@use './fonts.scss';
:root {
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
--color-accent: #ff5d01;
}
* {
box-sizing: border-box;
margin: 0;
}
html {
background-color: #000014;
}
html,
body {
padding: 0;
font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
font-family: var(--font-sans);
font-weight: 400;
background-repeat: no-repeat;
color: #f3f4f6;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
a {
position: relative;
text-decoration: none;
color: var(--color-accent);
padding: 0.05em 0.125em;
margin: -0.05em -0.125em;
transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: 0;
display: inline-block;
&:hover,
&:focus {
color: rgba(0, 0, 0, 1);
&::before {
transform: scaleY(1);
background: var(--color-accent);
}
}
&:visited {
// color: var(--color-accent);
color: var(--color-accent);
&:hover,
&:focus {
color: rgba(0, 0, 0, 1);
}
}
&::before {
transform-origin: bottom center;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
background: var(--color-accent);
pointer-events: none;
transform: scaleY(0.05);
transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: -1;
}
}
a + a {
margin-left: 2px;
}
section.error-content {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
p.error-code {
color: #ff5d01;
text-transform: uppercase;
}
h1 {
margin-top: -0.5rem;
margin-bottom: 1rem;
font-size: 2rem;
}
p {
margin: 1rem 0;
}
a {
margin: 1rem 0;
}
}
|
