the home site for me: also iteration 3 or 4 of my site
chore: remove crt styles
+1
-259
+1
-3
content/_index.md
+1
-3
content/_index.md
···
2
2
+++
3
3
4
4
<div style="display: flex; justify-content: center; margin: 2rem;">
5
-
<div class="crt scanlines" style="width: 512px; height: 512px; box-shadow: var(--edge-highlight), var(--shadow-glow);">
6
-
<img src="/pfps/starry.webp" alt="kieran with a white and gray spotted kitten with a grainy background and star dust" width="512" height="512" class="u-photo"/>
7
-
</div>
5
+
<img src="/pfps/starry.webp" alt="kieran with a white and gray spotted kitten with a grainy background and star dust" width="512" height="512" class="u-photo"/>
8
6
</div>
9
7
10
8
# About me
-240
sass/css/_crt.scss
-240
sass/css/_crt.scss
···
1
-
::root {
2
-
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
3
-
--shadow-glow:
4
-
0 0 0 0.0625rem var(--accent),
5
-
0 0.125rem 0.375rem 0.125rem var(--accent),
6
-
0 0.25rem 1.5rem 0.25rem var(--accent);
7
-
--crt-bg: var(--gradient-average-light);
8
-
}
9
-
10
-
@media (prefers-color-scheme: light) {
11
-
::root {
12
-
--crt-bg: var(--gradient-average-light);
13
-
}
14
-
}
15
-
16
-
[data-theme="light"] {
17
-
::root {
18
-
--crt-bg: var(--gradient-average-light);
19
-
}
20
-
}
21
-
22
-
@media (prefers-color-scheme: dark) {
23
-
::root {
24
-
--crt-bg: color-mix(in oklab, var(--nightshade-violet) 65%, black);
25
-
}
26
-
}
27
-
28
-
[data-theme="dark"] {
29
-
::root {
30
-
--crt-bg: color-mix(in oklab, var(--nightshade-violet) 65%, black);
31
-
}
32
-
}
33
-
34
-
h1,
35
-
img,
36
-
video,
37
-
iframe[src^="https://www.youtube-nocookie.com"],
38
-
iframe[src^="https://www.youtube.com"]
39
-
{
40
-
border: none;
41
-
box-shadow: var(--edge-highlight), var(--shadow-glow);
42
-
animation: flicker 4s alternate infinite;
43
-
44
-
@keyframes flicker {
45
-
2% {
46
-
opacity: 0.95;
47
-
}
48
-
49
-
4% {
50
-
opacity: 0.85;
51
-
}
52
-
53
-
7% {
54
-
opacity: 1;
55
-
}
56
-
57
-
to {
58
-
opacity: 0.9;
59
-
}
60
-
}
61
-
}
62
-
63
-
.text-glow {
64
-
--text-shadow-1: hsl(from var(--accent) h s l / 0.2);
65
-
--text-shadow-2: hsl(from var(--accent) h calc(s * 1.2) l);
66
-
text-shadow:
67
-
var(--text-shadow-1) 0 0 0.25rem,
68
-
var(--text-shadow-2) 0 0 0.75rem;
69
-
70
-
animation: flicker 4s alternate infinite;
71
-
72
-
@keyframes flicker {
73
-
2% {
74
-
opacity: 0.95;
75
-
}
76
-
77
-
4% {
78
-
opacity: 0.85;
79
-
}
80
-
81
-
7% {
82
-
opacity: 1;
83
-
}
84
-
85
-
to {
86
-
opacity: 0.9;
87
-
}
88
-
}
89
-
}
90
-
91
-
.crt {
92
-
margin: 1rem 0 1rem;
93
-
box-shadow:
94
-
var(--edge-highlight),
95
-
0 0 0 0.03125rem var(--accent),
96
-
0 0.0625rem 0.1875rem 0.03125rem var(--accent),
97
-
0 0.125rem 0.75rem 0.0625rem var(--accent);
98
-
border-radius: 0.2rem;
99
-
background-image: radial-gradient(
100
-
color-mix(in oklab, var(--accent) 25%, var(--crt-bg)),
101
-
color-mix(in srgb, var(--accent) 10%, var(--crt-bg)) 80%,
102
-
color-mix(in srgb, var(--accent) 5%, var(--crt-bg))
103
-
);
104
-
105
-
pre {
106
-
--text-shadow-1: hsl(from var(--accent) h s l / 0.2);
107
-
--text-shadow-2: hsl(from var(--accent) h calc(s * 1.2) l);
108
-
animation: flicker 0.3s alternate infinite;
109
-
margin: 0;
110
-
box-shadow: none;
111
-
background-color: transparent !important;
112
-
padding: 1rem 1rem;
113
-
color: var(--accent) !important;
114
-
text-shadow:
115
-
var(--text-shadow-1) 0 0 0.25rem,
116
-
var(--text-shadow-2) 0 0 0.75rem;
117
-
118
-
@keyframes flicker {
119
-
25% {
120
-
opacity: 0.93;
121
-
}
122
-
123
-
50% {
124
-
opacity: 0.89;
125
-
}
126
-
127
-
75% {
128
-
opacity: 0.95;
129
-
}
130
-
131
-
to {
132
-
opacity: 0.9;
133
-
}
134
-
}
135
-
}
136
-
137
-
> img {
138
-
border-radius: 0.2rem;
139
-
margin: 0;
140
-
max-width: 100%;
141
-
}
142
-
}
143
-
144
-
.scanlines,
145
-
h1 {
146
-
position: relative;
147
-
overflow: hidden;
148
-
149
-
&::before {
150
-
display: block;
151
-
position: absolute;
152
-
z-index: 2;
153
-
animation: scanlines 0.1s linear infinite;
154
-
inset: 0;
155
-
background-image: repeating-linear-gradient(
156
-
to bottom,
157
-
rgb(0 0 0 / 0.15),
158
-
rgb(0 0 0 / 0.15) 0.125rem,
159
-
transparent 0.125rem,
160
-
transparent 0.25rem
161
-
);
162
-
pointer-events: none;
163
-
content: "";
164
-
165
-
@keyframes scanlines {
166
-
to {
167
-
background-position-y: 0.25rem;
168
-
}
169
-
}
170
-
}
171
-
172
-
&::after {
173
-
--scanline-color: rgb(from var(--accent) r g b / 0.03);
174
-
display: block;
175
-
position: absolute;
176
-
z-index: 2;
177
-
animation: scanline 5s linear infinite;
178
-
inset: 0;
179
-
background-image: linear-gradient(
180
-
to bottom,
181
-
transparent,
182
-
var(--scanline-color) 16rem
183
-
);
184
-
background-size: auto 16rem;
185
-
background-repeat: no-repeat;
186
-
background-position-y: -16rem;
187
-
pointer-events: none;
188
-
content: "";
189
-
190
-
@keyframes scanline {
191
-
to {
192
-
background-position-y: calc(100% + 16rem);
193
-
}
194
-
}
195
-
}
196
-
}
197
-
198
-
.scanlines {
199
-
&::before {
200
-
opacity: 0.8;
201
-
}
202
-
203
-
&::after {
204
-
opacity: 0.5;
205
-
}
206
-
}
207
-
208
-
@media (prefers-color-scheme: light) {
209
-
.scanlines {
210
-
&::before {
211
-
opacity: 0.35;
212
-
}
213
-
214
-
&::after {
215
-
opacity: 0.4;
216
-
}
217
-
}
218
-
}
219
-
220
-
[data-theme="light"] {
221
-
.scanlines {
222
-
&::before {
223
-
opacity: 0.35;
224
-
}
225
-
226
-
&::after {
227
-
opacity: 0.4;
228
-
}
229
-
}
230
-
}
231
-
232
-
.cursor {
233
-
animation: cursor-blink 1s infinite;
234
-
235
-
@keyframes cursor-blink {
236
-
50% {
237
-
opacity: 0;
238
-
}
239
-
}
240
-
}
-1
sass/css/main.scss
-1
sass/css/main.scss
-1
templates/shortcodes/crt.html
-1
templates/shortcodes/crt.html
···
1
-
<div class="crt scanlines" aria-hidden="true">{{ body | markdown | safe }}</div>