commit 11c2cbe219f9e3e0aa3cfdd93879feff66235d32 · dunkirk.sh/zera

+1 -3

content/_index.md

···

       2
        
       +++

     

       3
        
       

     

       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>

     

       8
        
       </div>

     

       9
        
       

     

       10
        
       # About me

···

       2
        
       +++

     

       3
        
       

     

       4
        
       <div style="display: flex; justify-content: center; margin: 2rem;">

     

       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"/>

     

       0
        
       
     

       0
        
       
     

       6
        
       </div>

     

       7
        
       

     

       8
        
       # About me

-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
        
       @use "mods";

     

       6
        
       

     

       7
        
       @use "copy-button";

     

       8
       -
       @use "crt";

     

       9
        
       @use "theme-toggle";

···

       5
        
       @use "mods";

     

       6
        
       

     

       7
        
       @use "copy-button";

     

       0
        
       
     

       8
        
       @use "theme-toggle";

-14

static/js/copy-button.js

···

       39
        
             container.classList.add("pre-container", "crt", "scanlines");

     

       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
       -
             }

     

       55
       -
       

     

       56
        
             // Move code block into the container

     

       57
        
             block.parentNode.insertBefore(container, block);

     

       58
        
             container.appendChild(block);

···

       39
        
             container.classList.add("pre-container", "crt", "scanlines");

     

       40
        
             container.appendChild(header);

     

       41
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       42
        
             // Move code block into the container

     

       43
        
             block.parentNode.insertBefore(container, block);

     

       44
        
             container.appendChild(block);

-1

templates/shortcodes/crt.html

···

       1
       -
       <div class="crt scanlines" aria-hidden="true">{{ body | markdown | safe }}</div>

···

       0