the home site for me: also iteration 3 or 4 of my site
feat: add crt effect and glowing stuff
+279
-15
+7
-5
content/_index.md
+7
-5
content/_index.md
···
1
1
+++
2
2
+++
3
3
4
-
<div style="display: flex; justify-content: center;">
5
-
<img src="/pfps/instsqc-rat-pfp.webp" alt="kieran with an orange cast in a polaroid over a pinkish background" width="512" height="512" class="u-photo"/>
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>
6
8
</div>
7
9
8
-
## About me
10
+
# About me
9
11
10
12
Erlo! My name is Kieran Klukas and i'm a homeschooled coder who is {{ age(length=0) }} years old and loves film making, fpv, and typescript :)
11
13
···
21
23
22
24
this site has page hits (<code id="visits">0</code> and counting) via [abacus](https://jasoncameron.dev/abacus/) but they are completely anonymous and just http requests!
23
25
24
-
## Want to talk to me?
26
+
# Want to talk to me?
25
27
26
-
Do you want to hire me? (I will answer immediately :) If you just have a question or want to talk I'll still answer (admittedly more slowly).
28
+
Do you want to hire me for a project? If you just have a question or want to talk I'll still answer (admittedly more slowly ^-^).
27
29
28
30
- Email: [me@dunkirk.sh](mailto:me@dunkirk.sh)
29
31
- Hackclub Slack: [@krn](https://hackclub.slack.com/team/U062UG485EE) (only if you are a highschooler or younger; [join here](https://hackclub.com/slack/))
+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
-2
sass/css/suCSS.css
+1
-2
sass/css/suCSS.css
···
547
547
iframe[src^="https://www.youtube-nocookie.com"],
548
548
iframe[src^="https://www.youtube.com"] {
549
549
max-width: 90%;
550
+
margin: 1rem;
550
551
height: auto;
551
-
padding: 0.125rem;
552
552
border: dashed 2px var(--accent);
553
553
border-radius: 15px;
554
-
z-index: 1;
555
554
opacity: 0.95;
556
555
}
557
556
+4
-2
templates/blog-page.html
+4
-2
templates/blog-page.html
···
15
15
By
16
16
<a
17
17
rel="author"
18
-
class="accent-data p-author h-card"
18
+
class="accent-data p-author h-card text-glow"
19
19
href="https://dunkirk.sh"
20
20
>{{config.extra.author}}</a
21
21
>
···
56
56
57
57
<p class="tags-data">
58
58
{% if page.taxonomies.tags %} {% for tag in page.taxonomies.tags %}
59
-
<a href="/tags/{{ tag | slugify }}" class="p-category">|{{ tag }}|</a>
59
+
<a href="/tags/{{ tag | slugify }}" class="p-category text-glow"
60
+
>|{{ tag }}|</a
61
+
>
60
62
{% endfor %} {% endif %}
61
63
</p>
62
64
</article>
+7
-2
templates/blog.html
+7
-2
templates/blog.html
···
12
12
%}
13
13
<li>
14
14
{{ page.date | split(pat="T") | first }} —
15
-
<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
15
+
<a href="{{ page.permalink | safe }}" class="text-glow"
16
+
>{{ page.title }}</a
17
+
>
16
18
</li>
17
19
{% endif %} {% endfor %}
18
20
</ul>
···
25
27
{% for page in section.pages %} {% if "archival" in page.taxonomies.tags %}
26
28
<li>
27
29
{{ page.date }} —
28
-
<a href="{{ page.permalink | safe }}">{{ page.title }}</a> (archival)
30
+
<a href="{{ page.permalink | safe }}" class="text-glow"
31
+
>{{ page.title }}</a
32
+
>
33
+
(archival)
29
34
</li>
30
35
{% endif %} {% endfor %}
31
36
</ul>
+1
-1
templates/header.html
+1
-1
templates/header.html
+1
templates/shortcodes/crt.html
+1
templates/shortcodes/crt.html
···
1
+
<div class="crt scanlines" aria-hidden="true">{{ body | markdown | safe }}</div>