chriskrycho.com
The (very WIP) home of the next versions of my web presences
Restore current placeholder page.
+250
+250
site/public/index.html
+250
site/public/index.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+
<title>Under Construction – v6.chriskrycho.com</title>
8
+
<meta
9
+
name="description"
10
+
content="What will someday be the next version of chriskrycho.com"
11
+
/>
12
+
<meta property="og:title" content="Under Construction – v6.chriskrycho.com" />
13
+
<meta
14
+
property="og:description"
15
+
content="What will someday be the next version of chriskrycho.com"
16
+
/>
17
+
<meta property="og:type" content="website" />
18
+
<meta
19
+
name="twitter:description"
20
+
content="What will someday be the next version of chriskrycho.com"
21
+
/>
22
+
<style>
23
+
@font-face {
24
+
font-family: 'Berkeley Mono';
25
+
src:
26
+
local('Berkeley Mono'),
27
+
url('https://cdn.chriskrycho.com/v6/fonts/BerkeleyMono-Regular.woff2')
28
+
format('woff2');
29
+
font-weight: 400;
30
+
font-style: normal;
31
+
}
32
+
33
+
@font-face {
34
+
font-family: 'Berkeley Mono';
35
+
src:
36
+
local('Berkeley Mono'),
37
+
url('https://cdn.chriskrycho.com/v6/fonts/BerkeleyMono-Italic.woff2')
38
+
format('woff2');
39
+
font-weight: 400;
40
+
font-style: italic;
41
+
}
42
+
43
+
@font-face {
44
+
font-family: 'Berkeley Mono';
45
+
src:
46
+
local('Berkeley Mono'),
47
+
url('https://cdn.chriskrycho.com/v6/fonts/BerkeleyMono-Bold.woff2')
48
+
format('woff2');
49
+
font-weight: 700;
50
+
font-style: normal;
51
+
}
52
+
53
+
@font-face {
54
+
font-family: 'Berkeley Mono';
55
+
src:
56
+
local('Berkeley Mono'),
57
+
url('https://cdn.chriskrycho.com/v6/fonts/BerkeleyMono-BoldItalic.woff2')
58
+
format('woff2');
59
+
font-weight: 700;
60
+
font-style: italic;
61
+
}
62
+
63
+
.Monument-Autum-1-hex {
64
+
color: #3e608c;
65
+
}
66
+
.Monument-Autum-2-hex {
67
+
color: #7a9fbf;
68
+
}
69
+
.Monument-Autum-3-hex {
70
+
color: #c9e2f2;
71
+
}
72
+
.Monument-Autum-4-hex {
73
+
color: #a69580;
74
+
}
75
+
.Monument-Autum-5-hex {
76
+
color: #735645;
77
+
}
78
+
79
+
/* Color Theme Swatches in RGBA */
80
+
.Monument-Autum-1-rgba {
81
+
color: rgba(62, 96, 140, 1);
82
+
}
83
+
.Monument-Autum-2-rgba {
84
+
color: rgba(122, 159, 191, 1);
85
+
}
86
+
.Monument-Autum-3-rgba {
87
+
color: rgba(201, 226, 242, 1);
88
+
}
89
+
.Monument-Autum-4-rgba {
90
+
color: rgba(166, 149, 128, 1);
91
+
}
92
+
.Monument-Autum-5-rgba {
93
+
color: rgba(115, 86, 69, 1);
94
+
}
95
+
96
+
/* Color Theme Swatches in HSLA */
97
+
.Monument-Autum-1-hsla {
98
+
color: hsl(213, 38, 39);
99
+
}
100
+
.Monument-Autum-2-hsla {
101
+
color: hsl(207, 35, 61);
102
+
}
103
+
.Monument-Autum-3-hsla {
104
+
color: hsl(203, 61, 86);
105
+
}
106
+
.Monument-Autum-4-hsla {
107
+
color: hsl(33, 17, 57);
108
+
}
109
+
.Monument-Autum-5-hsla {
110
+
color: hsl(22, 25, 36);
111
+
}
112
+
113
+
:root {
114
+
--dark-blue: hsl(213, 38%, 39%);
115
+
--medium-blue: hsl(207, 35%, 61%);
116
+
--light-blue: hsl(203, 61%, 86%);
117
+
--light-brown: hsl(33, 17%, 57%);
118
+
--dark-brown: hsl(22, 25%, 36%);
119
+
120
+
--fg: var(--dark-blue);
121
+
--fg-h: var(--medium-blue);
122
+
--bg: var(--light-blue);
123
+
124
+
--link: var(--dark-brown);
125
+
--link-hover: var(--dark-blue);
126
+
--link-shadow: var(--medium-blue);
127
+
--link-shadow-multiplier: 1.5;
128
+
}
129
+
130
+
@media screen and (min-width: 600px) {
131
+
:root {
132
+
--fs: 18px;
133
+
--lh: 1.7;
134
+
}
135
+
}
136
+
137
+
@media screen and (min-width: 800px) {
138
+
:root {
139
+
--fs: 20px;
140
+
}
141
+
}
142
+
143
+
@media screen and (min-width: 1000px) {
144
+
:root {
145
+
--fs: 24px;
146
+
}
147
+
}
148
+
149
+
@media screen and (min-width: 1100px) {
150
+
:root {
151
+
--fs: 26px;
152
+
}
153
+
}
154
+
155
+
@media screen and (min-width: 1200px) {
156
+
:root {
157
+
--fs: 28px;
158
+
}
159
+
}
160
+
161
+
@media screen and (min-width: 1300px) {
162
+
:root {
163
+
--fs: 32px;
164
+
}
165
+
}
166
+
167
+
@media screen and (min-width: 1400px) {
168
+
:root {
169
+
--fs: 36px;
170
+
}
171
+
}
172
+
173
+
@media screen and (min-width: 1760px) {
174
+
:root {
175
+
--fs: 40px;
176
+
}
177
+
}
178
+
179
+
@media screen and (min-width: 2160px) {
180
+
:root {
181
+
--fs: 48px;
182
+
}
183
+
}
184
+
185
+
@media (prefers-color-scheme: dark) {
186
+
:root {
187
+
--fg: var(--light-blue);
188
+
--bg: var(--dark-blue);
189
+
190
+
--link: var(--light-brown);
191
+
--link-hover: var(--light-blue);
192
+
--link-shadow-multiplier: 1;
193
+
}
194
+
}
195
+
196
+
html {
197
+
font-family: 'Berkeley Mono', ui-monospace, monospace;
198
+
font-size: var(--fs);
199
+
line-height: var(--lh);
200
+
color: var(--fg);
201
+
background: var(--bg);
202
+
}
203
+
204
+
body {
205
+
/* second wins if it can be interpreted. Still CSS-ing in 2022. */
206
+
height: 100vh;
207
+
height: 100dvh;
208
+
margin: 0;
209
+
padding: 0 1.7rem;
210
+
display: flex;
211
+
flex-direction: column;
212
+
justify-content: center;
213
+
flex-wrap: nowrap;
214
+
}
215
+
216
+
h1 {
217
+
font-style: italic;
218
+
color: var(--fg-h);
219
+
}
220
+
221
+
a:any-link {
222
+
color: var(--link);
223
+
transition: all 0.1s ease-out;
224
+
text-decoration: none;
225
+
border-bottom: 2px solid var(--fg-h);
226
+
}
227
+
228
+
a:any-link span:not([role='presentation']) {
229
+
text-decoration: underline;
230
+
font-style: italic;
231
+
}
232
+
233
+
a:any-link:hover {
234
+
color: var(--link-hover);
235
+
text-shadow:
236
+
0 0 calc(0.33em * var(--link-shadow-multiplier)) var(--link-shadow),
237
+
1px 1px calc(0.33em * var(--link-shadow-multiplier)) var(--link-shadow),
238
+
-1px -1px calc(0.33em * var(--link-shadow-multiplier)) var(--link-shadow);
239
+
}
240
+
</style>
241
+
</head>
242
+
<body>
243
+
<h1>Under construction!</h1>
244
+
<p>
245
+
Someday this will have interesting things to see. For now, though, there is
246
+
nothing here. Best to head to
247
+
<a href="https://v5.chriskrycho.com">the current version</a>!
248
+
</p>
249
+
</body>
250
+
</html>