commit 01ae510b67c4b049c884d9a969673e10f6e998ea · dunkirk.sh/zera

.DS_Store

This is a binary file and will not be displayed.

.gitignore

···

       2
        
       node_modules

     

       3
        
       .env

     

       4
        
       .crush

     

       0

···

       2
        
       node_modules

     

       3
        
       .env

     

       4
        
       .crush

     

       5
       +
       .DS_Store

+190 -167

sass/css/mods.css

···

       1
        
       #nav-bar {

     

       2
       -
           padding: 0.625rem 0 0 0;

     

       3
       -
           display: flex;

     

       4
       -
           flex-direction: row;

     

       5
       -
           gap: 0.25rem;

     

       6
       -
           flex-wrap: wrap;

     

       7
       -
           justify-content: flex-end;

     

       8
       -
           align-items: center;

     

       9
       -
           align-content: flex-end;

     

       10
        
       }

     

       11
        
       

     

       12
        
       #footer-container {

     

       13
       -
           display: flex;

     

       14
       -
           flex-direction: column;

     

       15
       -
           justify-content: center;

     

       16
       -
           align-items: center;

     

       17
       -
           text-align: center;

     

       18
       -
           padding-bottom: 0.5rem;

     

       19
        
       }

     

       20
        
       

     

       21
        
       #footer-container p {

     

       22
       -
           margin: 0;

     

       23
        
       }

     

       24
        
       

     

       25
        
       .accent-data {

     

       26
       -
           color: var(--accent-dark);

     

       27
        
       }

     

       28
        
       

     

       29
        
       .tags-data {

     

       30
       -
           display: flex;

     

       31
       -
           flex-direction: row;

     

       32
       -
           flex-wrap: wrap;

     

       33
       -
           justify-content: flex-end;

     

       34
       -
           align-items: flex-start;

     

       35
       -
           align-content: flex-end;

     

       36
       -
           gap: 0.25rem;

     

       37
        
       }

     

       38
        
       

     

       39
        
       .title-list li {

     

       40
       -
           margin-bottom: 0.375rem;

     

       41
        
       }

     

       42
        
       

     

       43
        
       /* icons settings */

     

       44
        
       .icons {

     

       45
       -
           width: 1.3rem;

     

       46
       -
           height: 1.3rem;

     

       47
       -
           aspect-ratio: 1 / 1;

     

       48
       -
           display: inline-block;

     

       49
       -
           vertical-align: middle;

     

       50
       -
           color: var(--text);

     

       51
       -
           fill: var(--text);

     

       52
       -
           background-color: transparent;

     

       53
       -
           cursor: pointer;

     

       54
        
       }

     

       55
        
       

     

       56
        
       .icons:hover {

     

       57
       -
           background-color: transparent;

     

       58
       -
           color: var(--accent);

     

       59
        
       }

     

       60
        
       

     

       61
        
       /* footnotes */

     

       62
        
       .footnote-definition {

     

       63
       -
           margin: 0 0 0 0.125rem;

     

       64
        
       }

     

       65
        
       

     

       66
        
       .footnote-definition-label {

     

       67
       -
           color: var(--accent);

     

       68
        
       }

     

       69
        
       

     

       70
        
       .footnote-definition p {

     

       71
       -
           display: inline;

     

       72
       -
           margin: 0.625rem 0 0 0.625rem;

     

       73
        
       }

     

       74
        
       

     

       75
        
       /* general classes */

     

       76
        
       .no-style {

     

       77
       -
           padding: 0;

     

       78
       -
           margin: 0;

     

       79
       -
           border: none;

     

       80
       -
           border-radius: 0;

     

       81
        
       }

     

       82
        
       

     

       83
        
       .no-style:hover {

     

       84
       -
           background-color: transparent;

     

       85
       -
           color: var(--accent);

     

       86
        
       }

     

       87
        
       

     

       88
        
       .center {

     

       89
       -
           text-align: center;

     

       90
        
       }

     

       91
        
       

     

       92
        
       .center img {

     

       93
       -
           display: block;

     

       94
       -
           margin: 1rem auto;

     

       95
        
       }

     

       96
        
       

     

       97
        
       .center figcaption {

     

       98
       -
           text-align: center;

     

       99
        
       }

     

       100
        
       

     

       101
        
       .float-right {

     

       102
       -
           float: right;

     

       103
        
       }

     

       104
        
       

     

       105
        
       .float-left {

     

       106
       -
           float: left;

     

       107
        
       }

     

       108
        
       

     

       109
        
       div > code,

     

       110
        
       li code,

     

       111
        
       p code {

     

       112
       -
           padding: 0.1em 0.3em 0.1em 0.3em;

     

       113
       -
           color: var(--text-dark);

     

       114
       -
           background-color: var(--bg-light);

     

       115
        
       }

     

       116
        
       

     

       117
        
       pre {

     

       118
       -
           border-top-left-radius: 0;

     

       119
        
       }

     

       120
        
       

     

       121
        
       blockquote {

     

       122
       -
           padding-top: 0.2rem;

     

       123
       -
           padding-bottom: 0.2rem;

     

       124
        
       }

     

       125
        
       

     

       126
        
       blockquote:has(+ pre) {

     

       127
       -
           display: inline-block;

     

       128
       -
           border: none;

     

       129
       -
           font-family: "code", monospace !important;

     

       130
       -
           font-size: 0.8rem;

     

       131
       -
           font-weight: 600;

     

       132
       -
           margin: 0;

     

       133
       -
           margin-bottom: 0.2rem;

     

       134
       -
           margin-block: 0 0;

     

       135
       -
           border-top-left-radius: 0.2em;

     

       136
       -
           border-top-right-radius: 0.2em;

     

       137
       -
           padding-left: 0.75rem;

     

       138
       -
           padding-right: 0.75rem;

     

       139
       -
           padding-top: 0.25rem;

     

       140
       -
           padding-bottom: 0.25rem;

     

       141
       -
           position: relative;

     

       142
       -
           background-color: var(--accent);

     

       143
        
       }

     

       144
        
       

     

       145
        
       blockquote:has(+ pre) p {

     

       146
       -
           margin: 0;

     

       147
       -
           color: var(--accent-text);

     

       148
        
       }

     

       149
        
       

     

       150
        
       blockquote:has(+ pre) p::selection {

     

       151
       -
           background: var(--pink-puree);

     

       152
        
       }

     

       153
        
       

     

       154
        
       .yt-embed {

     

       155
       -
           width: 100%;

     

       156
       -
           display: flex;

     

       157
       -
           flex-direction: column;

     

       158
       -
           justify-content: center;

     

       159
       -
           align-content: center;

     

       160
       -
           text-align: center;

     

       161
        
       }

     

       162
        
       

     

       163
        
       .yt-embed iframe {

     

       164
       -
           width: 100%;

     

       165
       -
           aspect-ratio: 16 / 9;

     

       166
       -
           align-self: center;

     

       167
        
       }

     

       168
        
       

     

       169
        
       .yt-embed figcaption {

     

       170
       -
           margin-top: 1rem;

     

       171
       -
           text-align: center;

     

       172
        
       }

     

       173
        
       

     

       174
        
       #elr table {

     

       175
       -
           border-style: none;

     

       176
        
       }

     

       177
        
       

     

       178
        
       #elr td {

     

       179
       -
           border-style: dashed;

     

       180
        
       }

     

       181
        
       

     

       182
        
       img.avatar {

     

       183
       -
           width: 24px;

     

       184
       -
           height: 24px;

     

       185
       -
           aspect-ratio: 1 / 1;

     

       186
       -
           border-radius: 50%;

     

       187
       -
           vertical-align: middle;

     

       188
       -
           display: inline-block;

     

       189
       -
           border: none;

     

       190
       -
           padding: 0;

     

       191
       -
           margin: 0;

     

       192
        
       }

     

       193
        
       

     

       194
        
       cite {

     

       195
       -
           display: inline-flex;

     

       196
       -
           align-items: center;

     

       197
       -
           vertical-align: middle;

     

       198
        
       }

     

       199
        
       

     

       200
        
       cite a {

     

       201
       -
           display: inline-flex;

     

       202
       -
           align-items: center;

     

       203
        
       }

     

       204
        
       

     

       205
        
       cite a img.avatar {

     

       206
       -
           margin-right: 5px;

     

       207
        
       }

     

       208
        
       

     

       209
        
       .image-gallery {

     

       210
       -
           display: flex;

     

       211
       -
           flex-direction: column;

     

       212
       -
           gap: 0.5rem;

     

       213
       -
           padding-top: 0.5rem;

     

       214
        
       }

     

       215
        
       

     

       216
        
       .image-gallery img {

     

       217
       -
           max-width: 100%;

     

       218
       -
           border-radius: 0.25rem;

     

       219
       -
           padding: 0;

     

       220
       -
           margin: 0;

     

       221
        
       }

     

       222
        
       

     

       223
        
       .side-by-side {

     

       224
       -
           display: flex;

     

       225
       -
           flex-direction: row;

     

       226
        
       }

     

       227
        
       

     

       228
        
       .side-by-side img {

     

       229
       -
           max-width: calc(50% - 0.25rem);

     

       230
        
       }

     

       231
        
       

     

       232
        
       .gallery-grid {

     

       233
       -
           display: grid;

     

       234
       -
           grid-template-columns: repeat(2, 1fr);

     

       235
       -
           gap: 0.1rem;

     

       236
        
       }

     

       237
        
       

     

       238
        
       .gallery-grid img {

     

       239
       -
           width: 100%;

     

       240
       -
           height: auto;

     

       241
       -
           object-fit: cover;

     

       242
        
       }

     

       243
        
       

     

       244
        
       .inlined-bubbles {

     

       245
       -
           width: auto;

     

       246
       -
           pointer-events: none;

     

       247
       -
           display: block;

     

       248
       -
           margin-top: 10px;

     

       249
       -
           text-align: center;

     

       250
        
       }

     

       251
        
       

     

       252
        
       .bubble {

     

       253
       -
           padding: 0.7em 1.2em 0.7em 1.2em;

     

       254
       -
           background: var(--accent);

     

       255
       -
           border-bottom: 5px solid var(--bg-light);

     

       256
       -
           border-radius: 7px 7px 10px 10px;

     

       257
       -
           font-size: 1rem;

     

       258
       -
           font-weight: bold;

     

       259
       -
           color: var(--accent-text);

     

       260
       -
           display: inline-block;

     

       261
       -
           text-align: center;

     

       262
       -
           transition:

     

       263
       -
               transform 0.3s ease,

     

       264
       -
               opacity 0.3s ease;

     

       265
        
       }

     

       266
        
       

     

       267
        
       @keyframes bubbleIn {

     

       268
       -
           0% {

     

       269
       -
               opacity: 0;

     

       270
       -
               transform: translateY(10px) scale(0.95);

     

       271
       -
           }

     

       272
       -
           100% {

     

       273
       -
               opacity: 1;

     

       274
       -
               transform: translateY(0) scale(1);

     

       275
       -
           }

     

       276
        
       }

     

       277
        
       

     

       278
        
       @media (prefers-reduced-motion: no-preference) {

     

       279
       -
           .bubble.animate-in {

     

       280
       -
               animation: bubbleIn 0.3s ease-out forwards;

     

       281
       -
           }

     

       282
        
       }

     

       283
        
       

     

       284
        
       .bubble a {

     

       285
       -
           color: var(--accent-text);

     

       286
       -
           text-decoration: none;

     

       287
        
       }

     

       288
        
       

     

       289
        
       #time-ago {

     

       290
       -
           font-weight: normal;

     

       291
       -
           font-size: 0.8rem;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       292
        
       }

     

       293
        
       

     

       294
        
       :root {

     

       295
       -
           --nightshade-violet: oklch(0.27 0.0242 287.67);

     

       296
       -
           --purple-night: oklch(27.58% 0.0203 289.13);

     

       297
       -
           --red-crushed-grape: oklch(0.656 0.1189 296.74);

     

       298
       -
           --dark-crushed-grape: oklch(0.6261 0.1289 284.99);

     

       299
       -
           --light-crushed-grape: oklch(73.48% 0.1008 284.99);

     

       300
       -
           --reseda-green: oklch(62.33% 0.0475 126.94);

     

       301
       -
           --earth-yellow: oklch(86.49% 0.018 73.05);

     

       302
       -
           --sunset: oklch(0.86 0.0213 73.05);

     

       303
       -
           --ultra-violet: oklch(42.21% 0.0676 297.45);

     

       304
       -
           --rose-quartz: oklch(65.32% 0.0585 311.96);

     

       305
       -
           --pink-puree: oklch(75.65% 0.0555 290.76);

     

       306
       -
           --lavendar-breeze: oklch(91.06% 0.0223 290.76);

     

       307
       -
           --purple-gray: oklch(25.63% 0.0002 290.76);

     

       308
       -
           --alice-blue: oklch(95.38% 0.0118 239.91);

     

       309
        
       }

···

       1
        
       #nav-bar {

     

       2
       +
         padding: 0.625rem 0 0 0;

     

       3
       +
         display: flex;

     

       4
       +
         flex-direction: row;

     

       5
       +
         gap: 0.25rem;

     

       6
       +
         flex-wrap: wrap;

     

       7
       +
         justify-content: flex-end;

     

       8
       +
         align-items: center;

     

       9
       +
         align-content: flex-end;

     

       10
        
       }

     

       11
        
       

     

       12
        
       #footer-container {

     

       13
       +
         display: flex;

     

       14
       +
         flex-direction: column;

     

       15
       +
         justify-content: center;

     

       16
       +
         align-items: center;

     

       17
       +
         text-align: center;

     

       18
       +
         padding-bottom: 0.5rem;

     

       19
        
       }

     

       20
        
       

     

       21
        
       #footer-container p {

     

       22
       +
         margin: 0;

     

       23
        
       }

     

       24
        
       

     

       25
        
       .accent-data {

     

       26
       +
         color: var(--accent-dark);

     

       27
        
       }

     

       28
        
       

     

       29
        
       .tags-data {

     

       30
       +
         display: flex;

     

       31
       +
         flex-direction: row;

     

       32
       +
         flex-wrap: wrap;

     

       33
       +
         justify-content: flex-end;

     

       34
       +
         align-items: flex-start;

     

       35
       +
         align-content: flex-end;

     

       36
       +
         gap: 0.25rem;

     

       37
        
       }

     

       38
        
       

     

       39
        
       .title-list li {

     

       40
       +
         margin-bottom: 0.375rem;

     

       41
        
       }

     

       42
        
       

     

       43
        
       /* icons settings */

     

       44
        
       .icons {

     

       45
       +
         width: 1.3rem;

     

       46
       +
         height: 1.3rem;

     

       47
       +
         aspect-ratio: 1 / 1;

     

       48
       +
         display: inline-block;

     

       49
       +
         vertical-align: middle;

     

       50
       +
         color: var(--text);

     

       51
       +
         fill: var(--text);

     

       52
       +
         background-color: transparent;

     

       53
       +
         cursor: pointer;

     

       54
        
       }

     

       55
        
       

     

       56
        
       .icons:hover {

     

       57
       +
         background-color: transparent;

     

       58
       +
         color: var(--accent);

     

       59
        
       }

     

       60
        
       

     

       61
        
       /* footnotes */

     

       62
        
       .footnote-definition {

     

       63
       +
         margin: 0 0 0 0.125rem;

     

       64
        
       }

     

       65
        
       

     

       66
        
       .footnote-definition-label {

     

       67
       +
         color: var(--accent);

     

       68
        
       }

     

       69
        
       

     

       70
        
       .footnote-definition p {

     

       71
       +
         display: inline;

     

       72
       +
         margin: 0.625rem 0 0 0.625rem;

     

       73
        
       }

     

       74
        
       

     

       75
        
       /* general classes */

     

       76
        
       .no-style {

     

       77
       +
         padding: 0;

     

       78
       +
         margin: 0;

     

       79
       +
         border: none;

     

       80
       +
         border-radius: 0;

     

       81
        
       }

     

       82
        
       

     

       83
        
       .no-style:hover {

     

       84
       +
         background-color: transparent;

     

       85
       +
         color: var(--accent);

     

       86
        
       }

     

       87
        
       

     

       88
        
       .center {

     

       89
       +
         text-align: center;

     

       90
        
       }

     

       91
        
       

     

       92
        
       .center img {

     

       93
       +
         display: block;

     

       94
       +
         margin: 1rem auto;

     

       95
        
       }

     

       96
        
       

     

       97
        
       .center figcaption {

     

       98
       +
         text-align: center;

     

       99
        
       }

     

       100
        
       

     

       101
        
       .float-right {

     

       102
       +
         float: right;

     

       103
        
       }

     

       104
        
       

     

       105
        
       .float-left {

     

       106
       +
         float: left;

     

       107
        
       }

     

       108
        
       

     

       109
        
       div > code,

     

       110
        
       li code,

     

       111
        
       p code {

     

       112
       +
         padding: 0.1em 0.3em 0.1em 0.3em;

     

       113
       +
         color: var(--text-dark);

     

       114
       +
         background-color: var(--bg-light);

     

       115
        
       }

     

       116
        
       

     

       117
        
       pre {

     

       118
       +
         border-top-left-radius: 0;

     

       119
        
       }

     

       120
        
       

     

       121
        
       blockquote {

     

       122
       +
         padding-top: 0.2rem;

     

       123
       +
         padding-bottom: 0.2rem;

     

       124
        
       }

     

       125
        
       

     

       126
        
       blockquote:has(+ pre) {

     

       127
       +
         display: inline-block;

     

       128
       +
         border: none;

     

       129
       +
         font-family: "code", monospace !important;

     

       130
       +
         font-size: 0.8rem;

     

       131
       +
         font-weight: 600;

     

       132
       +
         margin: 0;

     

       133
       +
         margin-bottom: 0.2rem;

     

       134
       +
         margin-block: 0 0;

     

       135
       +
         border-top-left-radius: 0.2em;

     

       136
       +
         border-top-right-radius: 0.2em;

     

       137
       +
         padding-left: 0.75rem;

     

       138
       +
         padding-right: 0.75rem;

     

       139
       +
         padding-top: 0.25rem;

     

       140
       +
         padding-bottom: 0.25rem;

     

       141
       +
         position: relative;

     

       142
       +
         background-color: var(--accent);

     

       143
        
       }

     

       144
        
       

     

       145
        
       blockquote:has(+ pre) p {

     

       146
       +
         margin: 0;

     

       147
       +
         color: var(--accent-text);

     

       148
        
       }

     

       149
        
       

     

       150
        
       blockquote:has(+ pre) p::selection {

     

       151
       +
         background: var(--pink-puree);

     

       152
        
       }

     

       153
        
       

     

       154
        
       .yt-embed {

     

       155
       +
         width: 100%;

     

       156
       +
         display: flex;

     

       157
       +
         flex-direction: column;

     

       158
       +
         justify-content: center;

     

       159
       +
         align-content: center;

     

       160
       +
         text-align: center;

     

       161
        
       }

     

       162
        
       

     

       163
        
       .yt-embed iframe {

     

       164
       +
         width: 100%;

     

       165
       +
         aspect-ratio: 16 / 9;

     

       166
       +
         align-self: center;

     

       167
        
       }

     

       168
        
       

     

       169
        
       .yt-embed figcaption {

     

       170
       +
         margin-top: 1rem;

     

       171
       +
         text-align: center;

     

       172
        
       }

     

       173
        
       

     

       174
        
       #elr table {

     

       175
       +
         border-style: none;

     

       176
        
       }

     

       177
        
       

     

       178
        
       #elr td {

     

       179
       +
         border-style: dashed;

     

       180
        
       }

     

       181
        
       

     

       182
        
       img.avatar {

     

       183
       +
         width: 24px;

     

       184
       +
         height: 24px;

     

       185
       +
         aspect-ratio: 1 / 1;

     

       186
       +
         border-radius: 50%;

     

       187
       +
         vertical-align: middle;

     

       188
       +
         display: inline-block;

     

       189
       +
         border: none;

     

       190
       +
         padding: 0;

     

       191
       +
         margin: 0;

     

       192
        
       }

     

       193
        
       

     

       194
        
       cite {

     

       195
       +
         display: inline-flex;

     

       196
       +
         align-items: center;

     

       197
       +
         vertical-align: middle;

     

       198
        
       }

     

       199
        
       

     

       200
        
       cite a {

     

       201
       +
         display: inline-flex;

     

       202
       +
         align-items: center;

     

       203
        
       }

     

       204
        
       

     

       205
        
       cite a img.avatar {

     

       206
       +
         margin-right: 5px;

     

       207
        
       }

     

       208
        
       

     

       209
        
       .image-gallery {

     

       210
       +
         display: flex;

     

       211
       +
         flex-direction: column;

     

       212
       +
         gap: 0.5rem;

     

       213
       +
         padding-top: 0.5rem;

     

       214
        
       }

     

       215
        
       

     

       216
        
       .image-gallery img {

     

       217
       +
         max-width: 100%;

     

       218
       +
         border-radius: 0.25rem;

     

       219
       +
         padding: 0;

     

       220
       +
         margin: 0;

     

       221
        
       }

     

       222
        
       

     

       223
        
       .side-by-side {

     

       224
       +
         display: flex;

     

       225
       +
         flex-direction: row;

     

       226
        
       }

     

       227
        
       

     

       228
        
       .side-by-side img {

     

       229
       +
         max-width: calc(50% - 0.25rem);

     

       230
        
       }

     

       231
        
       

     

       232
        
       .gallery-grid {

     

       233
       +
         display: grid;

     

       234
       +
         grid-template-columns: repeat(2, 1fr);

     

       235
       +
         gap: 0.1rem;

     

       236
        
       }

     

       237
        
       

     

       238
        
       .gallery-grid img {

     

       239
       +
         width: 100%;

     

       240
       +
         height: auto;

     

       241
       +
         object-fit: cover;

     

       242
        
       }

     

       243
        
       

     

       244
        
       .inlined-bubbles {

     

       245
       +
         width: auto;

     

       246
       +
         pointer-events: none;

     

       247
       +
         display: block;

     

       248
       +
         margin-top: 10px;

     

       249
       +
         text-align: center;

     

       250
        
       }

     

       251
        
       

     

       252
        
       .bubble {

     

       253
       +
         padding: 0.7em 1.2em 0.7em 1.2em;

     

       254
       +
         background: var(--accent);

     

       255
       +
         border-bottom: 5px solid var(--bg-light);

     

       256
       +
         border-radius: 7px 7px 10px 10px;

     

       257
       +
         font-size: 1rem;

     

       258
       +
         font-weight: bold;

     

       259
       +
         color: var(--accent-text);

     

       260
       +
         display: inline-block;

     

       261
       +
         text-align: center;

     

       262
       +
         transition:

     

       263
       +
           transform 0.3s ease,

     

       264
       +
           opacity 0.3s ease;

     

       265
        
       }

     

       266
        
       

     

       267
        
       @keyframes bubbleIn {

     

       268
       +
         0% {

     

       269
       +
           opacity: 0;

     

       270
       +
           transform: translateY(10px) scale(0.95);

     

       271
       +
         }

     

       272
       +
         100% {

     

       273
       +
           opacity: 1;

     

       274
       +
           transform: translateY(0) scale(1);

     

       275
       +
         }

     

       276
        
       }

     

       277
        
       

     

       278
        
       @media (prefers-reduced-motion: no-preference) {

     

       279
       +
         .bubble.animate-in {

     

       280
       +
           animation: bubbleIn 0.3s ease-out forwards;

     

       281
       +
         }

     

       282
        
       }

     

       283
        
       

     

       284
        
       .bubble a {

     

       285
       +
         color: var(--accent-text);

     

       286
       +
         text-decoration: none;

     

       287
        
       }

     

       288
        
       

     

       289
        
       #time-ago {

     

       290
       +
         font-weight: normal;

     

       291
       +
         font-size: 0.8rem;

     

       292
       +
       }

     

       293
       +
       

     

       294
       +
       .badge-row {

     

       295
       +
         display: flex;

     

       296
       +
         flex-wrap: wrap;

     

       297
       +
         justify-content: center;

     

       298
       +
         gap: 8px;

     

       299
       +
         padding-bottom: 0.5rem;

     

       300
       +
       }

     

       301
       +
       

     

       302
       +
       .badge-row img {

     

       303
       +
         display: inline-block;

     

       304
       +
         border: none;

     

       305
       +
         border-radius: 0;

     

       306
       +
         box-shadow: none;

     

       307
       +
         max-width: 100%;

     

       308
       +
         height: auto;

     

       309
       +
         margin: 0;

     

       310
       +
       }

     

       311
       +
       

     

       312
       +
       .badge-row a {

     

       313
       +
         display: inline-flex;

     

       314
       +
         align-items: center;

     

       315
        
       }

     

       316
        
       

     

       317
        
       :root {

     

       318
       +
         --nightshade-violet: oklch(0.27 0.0242 287.67);

     

       319
       +
         --purple-night: oklch(27.58% 0.0203 289.13);

     

       320
       +
         --red-crushed-grape: oklch(0.656 0.1189 296.74);

     

       321
       +
         --dark-crushed-grape: oklch(0.6261 0.1289 284.99);

     

       322
       +
         --light-crushed-grape: oklch(73.48% 0.1008 284.99);

     

       323
       +
         --reseda-green: oklch(62.33% 0.0475 126.94);

     

       324
       +
         --earth-yellow: oklch(86.49% 0.018 73.05);

     

       325
       +
         --sunset: oklch(0.86 0.0213 73.05);

     

       326
       +
         --ultra-violet: oklch(42.21% 0.0676 297.45);

     

       327
       +
         --rose-quartz: oklch(65.32% 0.0585 311.96);

     

       328
       +
         --pink-puree: oklch(75.65% 0.0555 290.76);

     

       329
       +
         --lavendar-breeze: oklch(91.06% 0.0223 290.76);

     

       330
       +
         --purple-gray: oklch(25.63% 0.0002 290.76);

     

       331
       +
         --alice-blue: oklch(95.38% 0.0118 239.91);

     

       332
        
       }

static/badges/get-netscape.gif

This is a binary file and will not be displayed.

static/badges/green-team.gif

This is a binary file and will not be displayed.

static/badges/hackclub.png

This is a binary file and will not be displayed.

static/badges/made-with-neovim.png

This is a binary file and will not be displayed.

static/badges/no-web3.gif

This is a binary file and will not be displayed.

static/badges/powered-by-nix.gif

This is a binary file and will not be displayed.

static/badges/tangled.png

This is a binary file and will not be displayed.

+51 -54

templates/footer.html

···

       1
        
       <hr />

     

       2
        
       <div id="footer-container">

     

       3
       -
           <p style="margin-bottom: 0.5rem">

     

       4
       -
               &copy; {{ now() | date(format="%Y") }} Kieran Klukas ||

     

       5
       -
               <code id="visits">0</code> page visits || {% set hash =

     

       6
       -
               get_env(name="CF_PAGES_COMMIT_SHA", default=load_data(path=".git/refs/heads/main", required=false))%}{% if hash is not string %}{% set hash = "unknown" %}{% endif %}<a href=https://tangled.sh/@dunkirk.sh/zera/commit/{{ hash }}>zera@{{ hash |

     

       7
       -
               truncate(length=7, end="")}}</a>

     

       8
       -
           </p>

     

       9
       -
           <p style="margin-bottom: 0.5rem">

     

       10
       -
               Webrings:

     

       11
       -
               <a href="https://w.elr.sh">elr</a>

     

       12
       -
               [<a href='javascript:void(0)' onclick='randomSite()'>random</a> |

     

       13
       -
               <a href='#' id='prev-link'>prev</a> |

     

       14
       -
               <a href='#' id='next-link'>next</a>] •

     

       15
       -
               <a href="https://ctp-webr.ing">ctp</a>

     

       16
       -
               [<a href="https://ctp-webr.ing/dunkirk/previous">prev</a> |

     

       17
       -
               <a href="https://ctp-webr.ing/dunkirk/next">next</a>]

     

       18
       -
           </p>

     

       19
       -
           <p>

     

       20
       -
               Content licensed under

     

       21
       -
               <a

     

       22
       -
                   target="_blank"

     

       23
       -
                   rel="noopener noreferrer"

     

       24
       -
                   href="https://creativecommons.org/licenses/by-nc-sa/4.0/"

     

       25
       -
                   >CC BY-NC-SA 4.0</a

     

       26
       -
               >

     

       27
       -
           </p>

     

       28
       -
           <p>

     

       29
       -
               Code licensed under

     

       30
       -
               <a

     

       31
       -
                   target="_blank"

     

       32
       -
                   rel="noopener noreferrer"

     

       33
       -
                   href="https://tangled.sh/@dunkirk.sh/zera/blob/main/LICENSE.md"

     

       34
       -
                   >AGPL 3.0</a

     

       35
       -
               >

     

       36
       -
           </p>

     

       37
       -
           <script type="text/javascript" src="https://w.elr.sh/onionring-variables.js"></script>

     

       38
       -
           <script>

     

       39
       -
             thisSite = "https://dunkirk.sh"

     

       40
       -
             thisIndex = null;

     

       41
        
       

     

       42
       -
             for (i = 0; i < sites.length; i++) {

     

       43
       -
               if (thisSite.startsWith(sites[i])) {

     

       44
       -
                 thisIndex = i;

     

       45
       -
                 break;

     

       46
       -
               }

     

       47
        
             }

     

       0
        
       
     

       48
        
       

     

       49
       -
             function randomSite() {

     

       50
       -
               otherSites = sites.slice();

     

       51
       -
               otherSites.splice(thisIndex, 1);

     

       52
       -
               randomIndex = Math.floor(Math.random() * otherSites.length);

     

       53
       -
               location.href = otherSites[randomIndex];

     

       54
       -
             }

     

       55
        
       

     

       56
        
       

     

       57
       -
             previousIndex = (thisIndex-1 < 0) ? sites.length-1 : thisIndex-1;

     

       58
       -
             nextIndex = (thisIndex+1 >= sites.length) ? 0 : thisIndex+1;

     

       59
        
       

     

       60
       -
             document.getElementById('prev-link').href = sites[previousIndex];

     

       61
       -
             document.getElementById('next-link').href = sites[nextIndex];

     

       62
       -
           </script>

     

       63
        
       </div>

···

       1
        
       <hr />

     

       2
        
       <div id="footer-container">

     

       3
       +
         <p class="badge-row">

     

       4
       +
           <a href="https://512kb.club"><img src="badges/green-team.gif"

     

       5
       +
               alt="a proud member of the green team of 512KB club" /></a>

     

       6
       +
           <a href="https://yesterweb.org/no-to-web3/index.html?s=09"><img src="badges/no-web3.gif"

     

       7
       +
               alt="say no to web3, keep the web free" /></a>

     

       8
       +
           <a href="https://hackclub.com"><img src="badges/hackclub.png" alt="linux powered" /></a>

     

       9
       +
           <a href="https://tangled.org"><img src=" badges/tangled.png" alt="tangled beta" /></a>

     

       10
       +
           <a href="https://www.netscape-communications.com/download/"><img src="badges/get-netscape.gif"

     

       11
       +
               alt="get netscape" /></a>

     

       12
       +
           <a href="https://tangled.org/@dunkirk.sh/dots"><img src="badges/powered-by-nix.gif" alt="powered by nix" /></a>

     

       13
       +
           <a href="https://tangled.org/@dunkirk.sh/nixvim"><img src="badges/made-with-neovim.png" /></a>

     

       14
       +
         </p>

     

       15
       +
         <p style="margin-bottom: 0.5rem">

     

       16
       +
           &copy; {{ now() | date(format="%Y") }} Kieran Klukas ||

     

       17
       +
           <code id="visits">0</code> page visits || {% set hash =

     

       18
       +
           get_env(name="CF_PAGES_COMMIT_SHA", default=load_data(path=".git/refs/heads/main", required=false))%}{% if hash is

     

       19
       +
           not string %}{% set hash = "unknown" %}{% endif %}<a href=https://tangled.sh/@dunkirk.sh/zera/commit/{{ hash

     

       20
       +
             }}>zera@{{ hash |

     

       21
       +
             truncate(length=7, end="")}}</a>

     

       22
       +
         </p>

     

       23
       +
         <p style="margin-bottom: 0.5rem">

     

       24
       +
           Webrings:

     

       25
       +
           <a href="https://w.elr.sh">elr</a>

     

       26
       +
           [<a href='javascript:void(0)' onclick='randomSite()'>random</a> |

     

       27
       +
           <a href='#' id='prev-link'>prev</a> |

     

       28
       +
           <a href='#' id='next-link'>next</a>] •

     

       29
       +
           <a href="https://ctp-webr.ing">ctp</a>

     

       30
       +
           [<a href="https://ctp-webr.ing/dunkirk/previous">prev</a> |

     

       31
       +
           <a href="https://ctp-webr.ing/dunkirk/next">next</a>]

     

       32
       +
         </p>

     

       33
       +
       

     

       34
       +
         <script type="text/javascript" src="https://w.elr.sh/onionring-variables.js"></script>

     

       35
       +
         <script>

     

       36
       +
           thisSite = "https://dunkirk.sh"

     

       37
       +
           thisIndex = null;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       38
        
       

     

       39
       +
           for (i = 0; i < sites.length; i++) {

     

       40
       +
             if (thisSite.startsWith(sites[i])) {

     

       41
       +
               thisIndex = i;

     

       42
       +
               break;

     

       0
        
       
     

       43
        
             }

     

       44
       +
           }

     

       45
        
       

     

       46
       +
           function randomSite() {

     

       47
       +
             otherSites = sites.slice();

     

       48
       +
             otherSites.splice(thisIndex, 1);

     

       49
       +
             randomIndex = Math.floor(Math.random() * otherSites.length);

     

       50
       +
             location.href = otherSites[randomIndex];

     

       51
       +
           }

     

       52
        
       

     

       53
        
       

     

       54
       +
           previousIndex = (thisIndex - 1 < 0) ? sites.length - 1 : thisIndex - 1;

     

       55
       +
           nextIndex = (thisIndex + 1 >= sites.length) ? 0 : thisIndex + 1;

     

       56
        
       

     

       57
       +
           document.getElementById('prev-link').href = sites[previousIndex];

     

       58
       +
           document.getElementById('next-link').href = sites[nextIndex];

     

       59
       +
         </script>

     

       60
        
       </div>