the home site for me: also iteration 3 or 4 of my site
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add crt effect and glowing stuff

+279 -15
+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/))
+1 -2
sass/css/_copy-button.scss
··· 1 1 i.icon { 2 2 display: inline-block; 3 3 mask-size: cover; 4 - background-color: currentColor; 4 + background-color: var(--accent-text); 5 5 width: 1rem; 6 6 height: 1rem; 7 7 font-style: normal; ··· 14 14 --icon-copy: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); 15 15 --icon-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); 16 16 17 - margin: 1rem 0 1rem; 18 17 border-radius: 0.75rem; 19 18 20 19 .header {
+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
··· 5 5 @use "mods"; 6 6 7 7 @use "copy-button"; 8 + @use "crt";
+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
static/blog/adding-a-copy-button/og.png

This is a binary file and will not be displayed.

+16 -1
static/js/copy-button.js
··· 6 6 if (navigator.clipboard) { 7 7 // Code block header title 8 8 const title = document.createElement("span"); 9 + title.style.color = "var(--accent-text)"; 9 10 const lang = block.getAttribute("data-lang"); 10 11 const comment = 11 12 block.previousElementSibling && ··· 35 36 36 37 // Container that holds header and the code block itself 37 38 const container = document.createElement("div"); 38 - container.classList.add("pre-container"); 39 + container.classList.add("pre-container", "crt", "scanlines"); 39 40 container.appendChild(header); 41 + 42 + const code = block.querySelector("code"); 43 + const cursor = document.createElement("span"); 44 + cursor.classList.add("cursor"); 45 + cursor.setAttribute("style", "display: inline;"); 46 + cursor.innerHTML = "█"; 47 + const lastline = code.lastChild; 48 + const spans = lastline.getElementsByTagName("span"); 49 + const lastspan = spans[spans.length - 1]; 50 + if (lastspan) { 51 + lastspan.appendChild(cursor); 52 + } else { 53 + lastline.appendChild(cursor); 54 + } 40 55 41 56 // Move code block into the container 42 57 block.parentNode.insertBefore(container, block);
static/tags/accessibility/og.png

This is a binary file and will not be displayed.

+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
··· 12 12 %} 13 13 <li> 14 14 {{ page.date | split(pat="T") | first }} &mdash; 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 }} &mdash; 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
··· 4 4 {% for nav_item in config.extra.header_nav %} 5 5 <a 6 6 href="{{ nav_item.url }}" 7 - class="{% if nav_item.url == current_url %}active{% endif %}" 7 + class="{% if nav_item.url == current_url %}active{% endif %} text-glow" 8 8 > 9 9 {{ nav_item.name }} 10 10 </a>
+1
templates/shortcodes/crt.html
··· 1 + <div class="crt scanlines" aria-hidden="true">{{ body | markdown | safe }}</div>