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 better link styling and fix header links

+355 -334
+26 -5
sass/css/mods.css
··· 2 2 padding: 0.625rem 0 0 0; 3 3 display: flex; 4 4 flex-direction: row; 5 - gap: 0.25rem; 6 5 flex-wrap: wrap; 7 6 justify-content: flex-end; 8 7 align-items: center; 9 8 align-content: flex-end; 10 9 } 11 10 11 + #nav-bar a { 12 + text-decoration: none; 13 + color: var(--link); 14 + padding: 0 0.25rem; 15 + border-radius: 0.25rem; 16 + transition: all 120ms ease; 17 + position: relative; 18 + font-weight: 600; 19 + } 20 + 21 + #nav-bar a:hover { 22 + color: var(--accent); 23 + background-color: color-mix(in oklab, var(--accent) 15%, transparent); 24 + } 25 + 26 + #nav-bar a.active { 27 + color: var(--link-visited); 28 + background-color: color-mix(in oklab, var(--accent) 20%, transparent); 29 + margin: 0 0.15rem; 30 + } 31 + 12 32 #footer-container { 13 33 display: flex; 14 34 flex-direction: column; ··· 106 126 float: left; 107 127 } 108 128 109 - div > code, 129 + div>code, 110 130 li code, 111 131 p code { 112 132 padding: 0.1em 0.3em 0.1em 0.3em; ··· 269 289 opacity: 0; 270 290 transform: translateY(10px) scale(0.95); 271 291 } 292 + 272 293 100% { 273 294 opacity: 1; 274 295 transform: translateY(0) scale(1); ··· 317 338 :root { 318 339 --nightshade-violet: oklch(0.27 0.0242 287.67); 319 340 --purple-night: oklch(27.58% 0.0203 289.13); 320 - --red-crushed-grape: oklch(0.656 0.1189 296.74); 341 + --red-crushed-grape: oklch(0.6829 0.1189 296.74); 321 342 --dark-crushed-grape: oklch(0.6261 0.1289 284.99); 322 - --light-crushed-grape: oklch(73.48% 0.1008 284.99); 343 + --light-crushed-grape: oklch(0.7727 0.094 296.74); 323 344 --reseda-green: oklch(62.33% 0.0475 126.94); 324 345 --earth-yellow: oklch(86.49% 0.018 73.05); 325 346 --sunset: oklch(0.86 0.0213 73.05); ··· 329 350 --lavendar-breeze: oklch(91.06% 0.0223 290.76); 330 351 --purple-gray: oklch(25.63% 0.0002 290.76); 331 352 --alice-blue: oklch(95.38% 0.0118 239.91); 332 - } 353 + }
+310 -316
sass/css/suCSS.css
··· 1 1 :root, 2 2 ::backdrop { 3 - /* set sans-serif & mono fonts */ 4 - --sans-font: 5 - -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, 6 - "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, 7 - "Helvetica Neue", sans-serif; 8 - --serif-font: 9 - Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", 10 - "Georgia Pro", Georgia, serif; 11 - --mono-font: 12 - ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, 13 - "DejaVu Sans Mono", monospace; 14 - --standard-border-radius: 5px; 3 + /* set sans-serif & mono fonts */ 4 + --sans-font: 5 + -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, 6 + "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, 7 + "Helvetica Neue", sans-serif; 8 + --serif-font: 9 + Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", 10 + "Georgia Pro", Georgia, serif; 11 + --mono-font: 12 + ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, 13 + "DejaVu Sans Mono", monospace; 14 + --standard-border-radius: 5px; 15 15 16 - /* default colors */ 17 - color-scheme: dark; 18 - --bg: var(--purple-night); 19 - --noise-strength: 0.15; 20 - --bg-light: var(--ultra-violet); 21 - --text: var(--lavendar-breeze); 22 - --text-light: var(--pink-puree); 23 - --text-dark: oklch(80.28% 0.0111 204.11); 24 - --accent: var(--rose-quartz); 25 - --accent-dark: var(--dark-crushed-grape); 26 - --accent-text: var(--purple-gray); 27 - --link: var(--light-crushed-grape); 28 - --link-visited: var(--red-crushed-grape); 29 - --border: var(--pink-puree); 30 - --selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%); 16 + /* default colors */ 17 + color-scheme: dark; 18 + --bg: var(--purple-night); 19 + --noise-strength: 0.15; 20 + --bg-light: var(--ultra-violet); 21 + --text: var(--lavendar-breeze); 22 + --text-light: var(--pink-puree); 23 + --text-dark: oklch(80.28% 0.0111 204.11); 24 + --accent: var(--rose-quartz); 25 + --accent-dark: var(--dark-crushed-grape); 26 + --accent-text: var(--purple-gray); 27 + --link: var(--light-crushed-grape); 28 + --link-visited: var(--red-crushed-grape); 29 + --border: var(--pink-puree); 30 + --selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%); 31 31 } 32 32 33 33 ::selection, 34 34 ::-moz-selection { 35 - color: var(--bg); 36 - background: var(--selection); 35 + color: var(--bg); 36 + background: var(--selection); 37 37 } 38 38 39 39 /* chromium scrollbars */ 40 40 ::-webkit-scrollbar { 41 - width: 8px; 42 - height: 8px; 43 - overflow: visible; 41 + width: 8px; 42 + height: 8px; 43 + overflow: visible; 44 44 } 45 + 45 46 ::-webkit-scrollbar-thumb { 46 - background: var(--accent); 47 - width: 12px; 47 + background: var(--accent); 48 + width: 12px; 48 49 } 50 + 49 51 ::-webkit-scrollbar-track { 50 - background: var(--bg-light); 52 + background: var(--bg-light); 51 53 } 52 54 53 55 /* firefox scrollbars */ 54 56 * { 55 - scrollbar-color: var(--accent) var(--bg-light); 56 - scrollbar-width: auto; 57 + scrollbar-color: var(--accent) var(--bg-light); 58 + scrollbar-width: auto; 57 59 } 58 60 59 61 html { 60 - color-scheme: light dark; 61 - font-family: var(--mono-font); 62 - scroll-behavior: smooth; 62 + color-scheme: light dark; 63 + font-family: var(--mono-font); 64 + scroll-behavior: smooth; 63 65 } 64 66 65 67 body { 66 - min-height: 100svh; 67 - color: var(--text); 68 - background: var(--bg); 69 - position: relative; 70 - font-size: 1rem; 71 - display: grid; 72 - grid-template-columns: 1fr min(45rem, 90%) 1fr; 73 - grid-template-rows: auto 1fr auto; 74 - grid-row-gap: 0.625rem; 68 + min-height: 100svh; 69 + color: var(--text); 70 + background: var(--bg); 71 + position: relative; 72 + font-size: 1rem; 73 + display: grid; 74 + grid-template-columns: 1fr min(45rem, 90%) 1fr; 75 + grid-template-rows: auto 1fr auto; 76 + grid-row-gap: 0.625rem; 75 77 } 76 - body > * { 77 - grid-column: 2; 78 + 79 + body>* { 80 + grid-column: 2; 78 81 } 79 82 80 - body > footer { 81 - color: var(--text-light); 82 - font-size: 0.875; 83 + body>footer { 84 + color: var(--text-light); 85 + font-size: 0.875; 83 86 } 84 87 85 88 /* Format headers */ 86 89 h1 { 87 - font-size: 2rem; 90 + font-size: 2rem; 88 91 } 92 + 89 93 h2 { 90 - font-size: 1.75rem; 94 + font-size: 1.75rem; 91 95 } 96 + 92 97 h3 { 93 - font-size: 1.5rem; 98 + font-size: 1.5rem; 94 99 } 100 + 95 101 h4 { 96 - font-size: 1.25rem; 102 + font-size: 1.25rem; 97 103 } 104 + 98 105 h5 { 99 - font-size: 1rem; 106 + font-size: 1rem; 100 107 } 108 + 101 109 h6 { 102 - font-size: 0.75rem; 110 + font-size: 0.75rem; 103 111 } 104 112 105 113 h1, ··· 108 116 h4, 109 117 h5, 110 118 h6 { 111 - margin: 0.5em 0 0.5em 0; 112 - padding: 0.22em 0.4em 0.22em 0.4em; 113 - background-color: var(--accent); 114 - border-bottom: 5px solid var(--bg-light); 115 - border-radius: 0.2em 0.2em 0.27em 0.27em; 116 - color: var(--accent-text); 117 - width: fit-content; 119 + margin: 0.5em 0 0.5em 0; 120 + padding: 0.22em 0.4em 0.22em 0.4em; 121 + background-color: var(--accent); 122 + border-bottom: 5px solid var(--bg-light); 123 + border-radius: 0.2em 0.2em 0.27em 0.27em; 124 + color: var(--accent-text); 125 + width: fit-content; 118 126 } 119 127 120 128 /* Fix line height when title wraps */ 121 129 h1, 122 130 h2, 123 131 h3 { 124 - line-height: 1.1; 132 + line-height: 1.1; 125 133 } 126 134 127 135 @media only screen and (max-width: 720px) { 128 - h1 { 129 - font-size: 1.5rem; 130 - } 131 - h2 { 132 - font-size: 1.25rem; 133 - } 134 - h3 { 135 - font-size: 1rem; 136 - } 137 - h4 { 138 - font-size: 0.75rem; 139 - } 140 - h5 { 141 - font-size: 0.5rem; 142 - } 143 - h6 { 144 - font-size: 0.25rem; 145 - } 136 + h1 { 137 + font-size: 1.5rem; 138 + } 139 + 140 + h2 { 141 + font-size: 1.25rem; 142 + } 143 + 144 + h3 { 145 + font-size: 1rem; 146 + } 147 + 148 + h4 { 149 + font-size: 0.75rem; 150 + } 151 + 152 + h5 { 153 + font-size: 0.5rem; 154 + } 155 + 156 + h6 { 157 + font-size: 0.25rem; 158 + } 146 159 } 147 160 148 161 p { 149 - margin: 1rem 0; 162 + margin: 1rem 0; 150 163 } 151 164 152 165 /* format links */ 153 166 a { 154 - color: var(--link); 155 - text-decoration: underline; 156 - text-decoration-color: color-mix( 157 - in oklab, 158 - var(--link) 100%, 159 - transparent 65% 160 - ); 161 - text-decoration-thickness: 0.06em; 162 - text-underline-offset: 0.14em; 163 - transition: 164 - color 120ms ease, 165 - text-decoration-color 120ms ease, 166 - text-underline-offset 120ms ease, 167 - text-decoration-thickness 120ms ease; 167 + color: var(--link); 168 + text-decoration: none; 169 + font-weight: 600; 170 + transition: color 120ms ease; 168 171 } 169 172 170 173 a:visited { 171 - color: var(--link-visited); /* deeper purple */ 172 - text-decoration-color: color-mix( 173 - in oklab, 174 - var(--link-visited) 100%, 175 - transparent 55% 176 - ); 174 + color: var(--link-visited); 177 175 } 178 176 179 177 a:hover, 180 178 a:focus-visible { 181 - color: var(--accent-dark); /* bright purple */ 182 - text-decoration-thickness: 0.1em; 183 - text-underline-offset: 0.18em; 184 - text-decoration-color: var(--accent-dark); 185 - outline: none; 179 + color: var(--accent); 180 + outline: none; 186 181 } 187 182 188 183 a:visited:hover, 189 184 a:visited:focus-visible { 190 - color: var(--accent-dark); 191 - text-decoration-color: var(--accent-dark); 185 + color: var(--accent); 192 186 } 193 187 194 188 /* format lists */ 195 189 ul { 196 - list-style: none; 197 - margin-top: 0.25rem; 198 - margin-bottom: 0.25rem; 190 + list-style: none; 191 + margin-top: 0.25rem; 192 + margin-bottom: 0.25rem; 199 193 } 200 194 201 195 ol { 202 - list-style-type: decimal; 203 - margin-top: 0.25rem; 204 - margin-bottom: 0.25rem; 196 + list-style-type: decimal; 197 + margin-top: 0.25rem; 198 + margin-bottom: 0.25rem; 205 199 } 206 200 207 201 li { 208 - margin-bottom: 0.125rem; 202 + margin-bottom: 0.125rem; 209 203 } 210 204 211 205 ul li::marker { 212 - content: "* "; 213 - color: var(--accent); 214 - font-size: 1.1rem; 206 + content: "* "; 207 + color: var(--accent); 208 + font-size: 1.1rem; 215 209 } 216 210 217 211 ol li::marker { 218 - color: var(--accent); 212 + color: var(--accent); 219 213 } 220 214 221 215 ol li:hover::marker { 222 - font-weight: 700; 223 - color: var(--link); 216 + font-weight: 700; 217 + color: var(--link); 224 218 } 225 219 226 220 /* Use flexbox to allow items to wrap, as needed */ 227 - header > nav ul, 228 - header > nav ol { 229 - display: flex; 230 - flex-direction: row; 231 - flex-wrap: wrap; 232 - align-content: space-around; 233 - justify-content: right; 234 - list-style-type: none; 235 - margin: 0.5rem 0 0 0; 236 - padding: 0; 237 - gap: 1rem; 221 + header>nav ul, 222 + header>nav ol { 223 + display: flex; 224 + flex-direction: row; 225 + flex-wrap: wrap; 226 + align-content: space-around; 227 + justify-content: right; 228 + list-style-type: none; 229 + margin: 0.5rem 0 0 0; 230 + padding: 0; 231 + gap: 1rem; 238 232 } 239 233 240 234 /* List items are inline elements, make them behave more like blocks */ 241 - header > nav ul li, 242 - header > nav ol li { 243 - display: inline-block; 235 + header>nav ul li, 236 + header>nav ol li { 237 + display: inline-block; 244 238 } 245 239 246 240 /* Consolidate box styling */ 247 241 aside, 248 242 details, 249 243 progress { 250 - background-color: var(--bg-light); 251 - border-radius: var(--standard-border-radius); 244 + background-color: var(--bg-light); 245 + border-radius: var(--standard-border-radius); 252 246 } 253 247 254 248 aside { 255 - font-size: 1rem; 256 - width: 35%; 257 - padding: 0 10px; 258 - margin-inline-start: 10px; 259 - float: right; 249 + font-size: 1rem; 250 + width: 35%; 251 + padding: 0 10px; 252 + margin-inline-start: 10px; 253 + float: right; 260 254 } 255 + 261 256 *[dir="rtl"] aside { 262 - float: left; 257 + float: left; 263 258 } 264 259 265 260 /* make aside full-width on mobile */ 266 261 @media only screen and (max-width: 720px) { 267 - aside { 268 - width: 100%; 269 - float: none; 270 - margin-inline-start: 0; 271 - } 262 + aside { 263 + width: 100%; 264 + float: none; 265 + margin-inline-start: 0; 266 + } 272 267 } 273 268 274 269 details { 275 - padding: 0.5rem; 270 + padding: 0.5rem; 276 271 } 277 272 278 273 summary { 279 - cursor: pointer; 280 - font-weight: bold; 281 - word-break: break-all; 274 + cursor: pointer; 275 + font-weight: bold; 276 + word-break: break-all; 282 277 } 283 278 284 - details[open] > summary + * { 285 - margin-top: 0; 279 + details[open]>summary+* { 280 + margin-top: 0; 286 281 } 287 282 288 - details[open] > summary { 289 - margin-bottom: 0.5rem; 283 + details[open]>summary { 284 + margin-bottom: 0.5rem; 290 285 } 291 286 292 - details[open] > :last-child { 293 - margin-bottom: 0; 287 + details[open]> :last-child { 288 + margin-bottom: 0; 294 289 } 295 290 296 291 /* Format tables */ 297 292 table { 298 - border-collapse: collapse; 299 - margin: 1.5rem 0; 300 - display: block; 301 - overflow-x: auto; 302 - white-space: nowrap; 293 + border-collapse: collapse; 294 + margin: 1.5rem 0; 295 + display: block; 296 + overflow-x: auto; 297 + white-space: nowrap; 303 298 } 304 299 305 300 td, 306 301 th { 307 - border: 1px solid var(--border); 308 - text-align: start; 309 - padding: 0.5rem; 302 + border: 1px solid var(--border); 303 + text-align: start; 304 + padding: 0.5rem; 310 305 } 311 306 312 307 th { 313 - background-color: var(--bg-light); 314 - font-weight: bold; 308 + background-color: var(--bg-light); 309 + font-weight: bold; 315 310 } 316 311 317 312 tr:nth-child(even) { 318 - background-color: var(--bg-light); 313 + background-color: var(--bg-light); 319 314 } 320 315 321 316 table caption { 322 - text-align: left; 323 - font-weight: bold; 324 - margin: 0 0 0.4rem 1rem; 317 + text-align: left; 318 + font-weight: bold; 319 + margin: 0 0 0.4rem 1rem; 325 320 } 326 321 327 322 /* format forms */ 328 323 fieldset { 329 - border: 1px dashed var(--accent); 330 - border-radius: var(--standard-border-radius); 324 + border: 1px dashed var(--accent); 325 + border-radius: var(--standard-border-radius); 331 326 } 332 327 333 - fieldset > legend { 334 - color: var(--accent); 328 + fieldset>legend { 329 + color: var(--accent); 335 330 } 336 331 337 332 textarea, ··· 339 334 input, 340 335 button, 341 336 .button { 342 - font-size: inherit; 343 - font-family: inherit; 344 - padding: 0.25rem; 345 - border-radius: var(--standard-border-radius); 346 - box-shadow: none; 347 - max-width: 100%; 348 - display: inline-block; 337 + font-size: inherit; 338 + font-family: inherit; 339 + padding: 0.25rem; 340 + border-radius: var(--standard-border-radius); 341 + box-shadow: none; 342 + max-width: 100%; 343 + display: inline-block; 349 344 } 350 345 351 346 textarea, 352 347 select, 353 348 input { 354 - color: var(--text); 355 - background-color: var(--bg); 356 - border: 1px dashed var(--border); 349 + color: var(--text); 350 + background-color: var(--bg); 351 + border: 1px dashed var(--border); 357 352 } 358 353 359 354 label { 360 - display: block; 355 + display: block; 361 356 } 362 357 363 358 fieldset label { 364 - margin: 0 0 0.3rem 0; 359 + margin: 0 0 0.3rem 0; 365 360 } 366 361 367 362 textarea { 368 - max-width: 43.5rem; 369 - resize: both; 363 + max-width: 43.5rem; 364 + resize: both; 370 365 } 371 366 372 367 textarea:not([cols]) { 373 - width: 100%; 368 + width: 100%; 374 369 } 375 370 376 371 @media only screen and (max-width: 720px) { 377 - textarea, 378 - select, 379 - input { 380 - width: 100%; 381 - } 372 + 373 + textarea, 374 + select, 375 + input { 376 + width: 100%; 377 + } 382 378 } 383 379 384 380 /* format buttons */ ··· 389 385 input[type="reset"], 390 386 input[type="button"], 391 387 label[type="button"] { 392 - border: 1px solid var(--accent); 393 - background-color: var(--accent); 394 - color: var(--accent-text); 395 - padding: 0.5rem 0.9rem; 396 - text-decoration: none; 397 - line-height: normal; 388 + border: 1px solid var(--accent); 389 + background-color: var(--accent); 390 + color: var(--accent-text); 391 + padding: 0.5rem 0.9rem; 392 + text-decoration: none; 393 + line-height: normal; 398 394 } 399 395 400 396 .button[aria-disabled="true"], ··· 402 398 textarea:disabled, 403 399 select:disabled, 404 400 button[disabled] { 405 - cursor: not-allowed; 406 - background-color: var(--bg-light); 407 - border-color: var(--bg-light); 408 - color: var(--text-light); 401 + cursor: not-allowed; 402 + background-color: var(--bg-light); 403 + border-color: var(--bg-light); 404 + color: var(--text-light); 409 405 } 410 406 411 407 input[type="range"] { 412 - padding: 0; 413 - color: var(--accent); 408 + padding: 0; 409 + color: var(--accent); 414 410 } 415 411 416 412 abbr[title] { 417 - cursor: help; 418 - text-decoration-line: underline; 419 - text-decoration-style: dotted; 413 + cursor: help; 414 + text-decoration-line: underline; 415 + text-decoration-style: dotted; 420 416 } 421 417 422 418 button:enabled:hover, ··· 425 421 input[type="reset"]:enabled:hover, 426 422 input[type="button"]:enabled:hover, 427 423 label[type="button"]:hover { 428 - background-color: var(--accent-dark); 429 - border-color: var(--accent-dark); 430 - cursor: pointer; 424 + background-color: var(--accent-dark); 425 + border-color: var(--accent-dark); 426 + cursor: pointer; 431 427 } 432 428 433 429 .button:focus-visible, 434 430 button:focus-visible:where(:enabled), 435 - input:enabled:focus-visible:where( 436 - [type="submit"], 437 - [type="reset"], 438 - [type="button"] 439 - ) { 440 - outline: 2px solid var(--accent); 441 - outline-offset: 1px; 431 + input:enabled:focus-visible:where([type="submit"], 432 + [type="reset"], 433 + [type="button"]) { 434 + outline: 2px solid var(--accent); 435 + outline-offset: 1px; 442 436 } 443 437 444 438 /* checkbox and radio button style */ 445 439 input[type="checkbox"], 446 440 input[type="radio"] { 447 - vertical-align: middle; 448 - position: relative; 449 - width: 14px; 450 - height: 14px; 441 + vertical-align: middle; 442 + position: relative; 443 + width: 14px; 444 + height: 14px; 451 445 } 452 446 453 - input[type="checkbox"] + label, 454 - input[type="radio"] + label { 455 - display: inline-block; 447 + input[type="checkbox"]+label, 448 + input[type="radio"]+label { 449 + display: inline-block; 456 450 } 457 451 458 452 input[type="radio"] { 459 - border-radius: 100%; 453 + border-radius: 100%; 460 454 } 461 455 462 456 input[type="checkbox"]:checked, 463 457 input[type="radio"]:checked { 464 - background-color: var(--accent); 458 + background-color: var(--accent); 465 459 } 466 460 467 461 @media only screen and (max-width: 720px) { 468 - textarea, 469 - select, 470 - input { 471 - width: 100%; 472 - } 462 + 463 + textarea, 464 + select, 465 + input { 466 + width: 100%; 467 + } 473 468 } 474 469 475 470 input[type="color"] { 476 - height: 2.5rem; 477 - padding: 0.2rem; 471 + height: 2.5rem; 472 + padding: 0.2rem; 478 473 } 479 474 480 475 input[type="file"] { 481 - border: 0; 476 + border: 0; 482 477 } 483 478 484 479 /* misc body elements */ 485 480 hr { 486 - border: 1px dashed var(--accent); 487 - margin: 0.5rem 0 0.5rem 0; 481 + border: 1px dashed var(--accent); 482 + margin: 0.5rem 0 0.5rem 0; 488 483 } 489 484 490 485 mark { 491 - padding: 0 0.25em 0 0.25em; 492 - border-radius: var(--standard-border-radius); 493 - background-color: var(--accent); 494 - color: var(--bg); 486 + padding: 0 0.25em 0 0.25em; 487 + border-radius: var(--standard-border-radius); 488 + background-color: var(--accent); 489 + color: var(--bg); 495 490 } 496 491 497 492 mark a { 498 - color: var(--link); 493 + color: var(--link); 499 494 } 500 495 501 496 img, 502 497 video, 503 498 iframe[src^="https://www.youtube-nocookie.com"], 504 - iframe[src^="https://www.youtube.com"] 505 - { 506 - max-width: 90%; 507 - margin: 1rem; 508 - height: auto; 509 - border: dashed 2px var(--accent); 510 - border-radius: 15px; 511 - opacity: 0.95; 499 + iframe[src^="https://www.youtube.com"] { 500 + max-width: 90%; 501 + margin: 1rem; 502 + height: auto; 503 + border: dashed 2px var(--accent); 504 + border-radius: 15px; 505 + opacity: 0.95; 512 506 } 513 507 514 508 figure { 515 - margin: 0; 516 - display: block; 517 - overflow-x: auto; 509 + margin: 0; 510 + display: block; 511 + overflow-x: auto; 518 512 } 519 513 520 514 figcaption { 521 - text-align: left; 522 - font-size: 0.875rem; 523 - color: var(--text-light); 524 - margin: 0 0 1rem 1rem; 515 + text-align: left; 516 + font-size: 0.875rem; 517 + color: var(--text-light); 518 + margin: 0 0 1rem 1rem; 525 519 } 526 520 527 521 blockquote { 528 - margin: 0 0 0 1.25rem; 529 - padding: 0.5rem 0 0 0.5rem; 530 - border-inline-start: 0.375rem solid var(--accent); 531 - color: var(--text-light); 532 - font-style: italic; 522 + margin: 0 0 0 1.25rem; 523 + padding: 0.5rem 0 0 0.5rem; 524 + border-inline-start: 0.375rem solid var(--accent); 525 + color: var(--text-light); 526 + font-style: italic; 533 527 } 534 528 535 529 p:has(cite) { 536 - text-align: right; 537 - font-size: 0.875rem; 538 - color: var(--text-light); 539 - font-weight: 600; 530 + text-align: right; 531 + font-size: 0.875rem; 532 + color: var(--text-light); 533 + font-weight: 600; 540 534 } 541 535 542 536 cite::before { 543 - content: "— "; 537 + content: "— "; 544 538 } 545 539 546 540 dt { 547 - color: var(--text-light); 541 + color: var(--text-light); 548 542 } 549 543 550 544 code, ··· 552 546 pre span, 553 547 kbd, 554 548 samp { 555 - font-family: var(--mono-font); 549 + font-family: var(--mono-font); 556 550 } 557 551 558 552 pre { 559 - border: 1px solid var(--accent); 560 - max-height: 30rem; 561 - padding: 0.625rem; 562 - overflow-x: auto; 563 - font-style: monospace; 553 + border: 1px solid var(--accent); 554 + max-height: 30rem; 555 + padding: 0.625rem; 556 + overflow-x: auto; 557 + font-style: monospace; 564 558 } 565 559 566 560 p code, 567 561 li code, 568 562 div code { 569 - padding: 0 0.125rem 0 0.125rem; 570 - border-radius: 3px; 571 - color: var(--bg); 572 - background-color: var(--text); 563 + padding: 0 0.125rem 0 0.125rem; 564 + border-radius: 3px; 565 + color: var(--bg); 566 + background-color: var(--text); 573 567 } 574 568 575 569 pre code { 576 - padding: 0; 577 - border-radius: 0; 578 - color: inherit; 579 - background-color: inherit; 570 + padding: 0; 571 + border-radius: 0; 572 + color: inherit; 573 + background-color: inherit; 580 574 } 581 575 582 576 iframe { 583 - max-width: 90%; 577 + max-width: 90%; 584 578 } 585 579 586 580 /* progress bars */ 587 581 progress { 588 - width: 100%; 582 + width: 100%; 589 583 } 590 584 591 585 progress:indeterminate { 592 - background-color: var(--bg-light); 586 + background-color: var(--bg-light); 593 587 } 594 588 595 589 progress::-webkit-progress-bar { 596 - border-radius: var(--standard-border-radius); 597 - background-color: var(--bg-light); 590 + border-radius: var(--standard-border-radius); 591 + background-color: var(--bg-light); 598 592 } 599 593 600 594 progress::-webkit-progress-value { 601 - border-radius: var(--standard-border-radius); 602 - background-color: var(--accent); 595 + border-radius: var(--standard-border-radius); 596 + background-color: var(--accent); 603 597 } 604 598 605 599 progress::-moz-progress-bar { 606 - border-radius: var(--standard-border-radius); 607 - background-color: var(--accent); 608 - transition-property: width; 609 - transition-duration: 0.3s; 600 + border-radius: var(--standard-border-radius); 601 + background-color: var(--accent); 602 + transition-property: width; 603 + transition-duration: 0.3s; 610 604 } 611 605 612 606 progress:indeterminate::-moz-progress-bar { 613 - background-color: var(--bg-light); 607 + background-color: var(--bg-light); 614 608 } 615 609 616 610 dialog { 617 - max-width: 40rem; 618 - margin: auto; 611 + max-width: 40rem; 612 + margin: auto; 619 613 } 620 614 621 615 dialog::backdrop { 622 - background-color: var(--bg); 623 - opacity: 0.8; 616 + background-color: var(--bg); 617 + opacity: 0.8; 624 618 } 625 619 626 620 @media only screen and (max-width: 720px) { 627 - dialog { 628 - max-width: 100%; 629 - margin: auto 1em; 630 - } 621 + dialog { 622 + max-width: 100%; 623 + margin: auto 1em; 624 + } 631 625 } 632 626 633 627 /* superscript & subscript */ 634 628 /* prevent scripts from affecting line-height. */ 635 629 sup, 636 630 sub { 637 - vertical-align: baseline; 638 - position: relative; 631 + vertical-align: baseline; 632 + position: relative; 639 633 } 640 634 641 635 sup { 642 - top: -0.4em; 636 + top: -0.4em; 643 637 } 644 638 645 639 sub { 646 - top: 0.3em; 647 - } 640 + top: 0.3em; 641 + }
+1
static/badges/MadeByAHuman_04.svg
··· 1 + <?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="88" height="31" viewBox="0 0 88 31"><g id="Background"><rect width="88" height="31" fill="#b39ddb"/></g><g id="_3D"><polygon points="88 0 88 31 0 31 2 29 86 29 86 2 88 0" fill="#263238" opacity=".5"/><polygon points="88 0 86 2 2 2 2 29 0 31 0 0 88 0" fill="#fff" opacity=".5"/></g><g id="Text"><path d="m40.86,9.65c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.21v-3.31c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.22v-5.92h1.22v.68c.4-.48,1.04-.77,1.75-.77.93,0,1.72.4,2.13,1.17.37-.72,1.2-1.17,2.06-1.17,1.39,0,2.44.87,2.44,2.52v3.49h-1.21v-3.31Z" fill="#263238"/><path d="m46.01,6.94c1,0,1.69.47,2.05.96v-.86h1.24v5.92h-1.24v-.88c-.38.5-1.08.98-2.07.98-1.54,0-2.77-1.26-2.77-3.08s1.24-3.03,2.79-3.03Zm.26,1.06c-.91,0-1.79.69-1.79,1.97s.88,2.02,1.79,2.02,1.79-.72,1.79-2-.87-1.99-1.79-1.99Z" fill="#263238"/><path d="m53.31,6.94c.77,0,1.59.37,2.04.92v-2.86h1.24v7.95h-1.24v-.89c-.38.54-1.08.99-2.05.99-1.56,0-2.79-1.26-2.79-3.08s1.24-3.03,2.8-3.03Zm.25,1.06c-.91,0-1.79.69-1.79,1.97s.88,2.02,1.79,2.02,1.79-.72,1.79-2-.87-1.99-1.79-1.99Z" fill="#263238"/><path d="m60.73,13.05c-1.7,0-2.95-1.2-2.95-3.06s1.2-3.05,2.95-3.05,2.88,1.17,2.88,2.91c0,.2-.01.4-.04.6h-4.52c.09.98.78,1.57,1.69,1.57.75,0,1.17-.37,1.4-.83h1.32c-.33,1.03-1.27,1.86-2.72,1.86Zm-1.68-3.59h3.28c-.02-.91-.74-1.49-1.65-1.49-.83,0-1.49.56-1.62,1.49Z" fill="#263238"/><path d="m70.89,6.94c1.57,0,2.78,1.2,2.78,3.03s-1.22,3.08-2.78,3.08c-.98,0-1.68-.44-2.06-.96v.86h-1.22v-7.95h1.22v2.91c.39-.54,1.13-.98,2.06-.98Zm-.27,1.06c-.91,0-1.79.72-1.79,1.99s.88,2,1.79,2,1.8-.74,1.8-2.02-.88-1.97-1.8-1.97Z" fill="#263238"/><path d="m78.95,7.04h1.27l-3.63,8.7h-1.27l1.2-2.88-2.33-5.82h1.36l1.67,4.51,1.73-4.51Z" fill="#263238"/><path d="m34.48,17.94c1,0,1.69.47,2.05.96v-.86h1.24v5.92h-1.24v-.88c-.38.5-1.08.98-2.07.98-1.54,0-2.77-1.26-2.77-3.08s1.24-3.03,2.79-3.03Zm.26,1.06c-.91,0-1.79.69-1.79,1.97s.88,2.02,1.79,2.02,1.79-.72,1.79-2-.87-1.99-1.79-1.99Z" fill="#263238"/><path d="m42.17,16.01h1.22v2.72c.41-.49,1.07-.78,1.84-.78,1.32,0,2.35.87,2.35,2.52v3.49h-1.21v-3.31c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.22v-7.95Z" fill="#263238"/><path d="m54.5,23.96h-1.22v-.71c-.39.5-1.05.79-1.75.79-1.39,0-2.44-.87-2.44-2.52v-3.48h1.21v3.3c0,1.08.59,1.64,1.48,1.64s1.49-.56,1.49-1.64v-3.3h1.22v5.92Z" fill="#263238"/><path d="m64.5,20.65c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.21v-3.31c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.22v-5.92h1.22v.68c.4-.48,1.04-.77,1.75-.77.93,0,1.72.4,2.13,1.17.37-.72,1.2-1.17,2.06-1.17,1.39,0,2.44.87,2.44,2.52v3.49h-1.21v-3.31Z" fill="#263238"/><path d="m69.65,17.94c1,0,1.69.47,2.05.96v-.86h1.24v5.92h-1.24v-.88c-.38.5-1.08.98-2.07.98-1.54,0-2.77-1.26-2.77-3.08s1.24-3.03,2.79-3.03Zm.26,1.06c-.91,0-1.79.69-1.79,1.97s.88,2.02,1.79,2.02,1.79-.72,1.79-2-.87-1.99-1.79-1.99Z" fill="#263238"/><path d="m78.74,20.65c0-1.08-.59-1.64-1.48-1.64s-1.49.56-1.49,1.64v3.31h-1.22v-5.92h1.22v.68c.4-.48,1.05-.77,1.76-.77,1.39,0,2.43.87,2.43,2.52v3.49h-1.21v-3.31Z" fill="#263238"/></g><g id="Image"><circle cx="15.37" cy="15.5" r="10.3" fill="#ffcc80" stroke="#263238" stroke-miterlimit="10" stroke-width="1.5"/><rect x="7.55" y="13.8" width="2.54" height="3.4" rx="1.27" ry="1.27" fill="#263238"/><rect x="20.65" y="13.8" width="2.54" height="3.4" rx="1.27" ry="1.27" fill="#263238"/><path d="m18.44,15.5c0,1.7-1.37,3.07-3.07,3.07s-3.07-1.37-3.07-3.07" fill="none" stroke="#263238" stroke-miterlimit="10" stroke-width="1.5"/></g></svg>
+1 -2
templates/footer.html
··· 3 3 <p class="badge-row"> 4 4 <a href="https://512kb.club"><img src="/badges/green-team.gif" 5 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 6 <a href="https://hackclub.com"><img src="/badges/hackclub.png" alt="linux powered" /></a> 7 + <a href="https://dunkirk.sh/ai"><img src="/badges/MadeByAHuman_04.svg" alt="made by a human" /></a> 9 8 <a href="https://tangled.org"><img src="/badges/tangled.png" alt="tangled beta" /></a> 10 9 <a href="https://www.netscape-communications.com/download/"><img src="/badges/get-netscape.gif" 11 10 alt="get netscape" /></a>
+17 -11
templates/header.html
··· 1 - {% if config.extra.header_nav %} {% if not current_url %} {% set current_url = 2 - "" %} {% endif %} 1 + {% if config.extra.header_nav %} 2 + {% if page %} 3 + {% set active_path = page.path | trim_end_matches(pat="/") %} 4 + {% elif section %} 5 + {% set active_path = section.path | trim_end_matches(pat="/") %} 6 + {% elif current_path %} 7 + {% set active_path = current_path | trim_end_matches(pat="/") %} 8 + {% else %} 9 + {% set active_path = "" %} 10 + {% endif %} 3 11 <nav id="nav-bar"> 4 - {% for nav_item in config.extra.header_nav %} 5 - <a 6 - href="{{ nav_item.url }}" 7 - class="{% if nav_item.url == current_url %}active{% endif %} text-glow" 8 - > 9 - {{ nav_item.name }} 10 - </a> 11 - {% endfor %} 12 + {% for nav_item in config.extra.header_nav %} 13 + <a href="{{ nav_item.url }}" 14 + class="{% if nav_item.url == active_path or (nav_item.url == '/' and active_path == '') %}active{% endif %}"> 15 + {{ nav_item.name }} 16 + </a> 17 + {% endfor %} 12 18 </nav> 13 - {% endif %} 19 + {% endif %}