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: consolidate all css into a single imported sass file

+1501 -19
+1 -3
config.toml
··· 3 3 4 4 title = "Zera" 5 5 description = "The home site of Kieran Klukas" 6 - compile_sass = false 6 + compile_sass = true 7 7 minify_html = true 8 8 generate_feeds = true 9 9 default_language = "en" ··· 19 19 20 20 highlight_code = true 21 21 highlight_theme = "css" 22 - 23 - extra_syntaxes_and_themes = ["highlighting", "highlighting/catppuccin"] 24 22 25 23 [slugify] 26 24 paths = "on"
+4
sass/css/main.sass
··· 1 + @import "reset" 2 + @import "suCSS" 3 + @import "syntax-theme" 4 + @import "mods"
+140
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-wrap: wrap; 15 + justify-content: space-between; 16 + align-items: center; 17 + } 18 + 19 + .accent-data { 20 + color: var(--accent); 21 + } 22 + 23 + .theme-transition { 24 + transition: color 0.3s ease, background-color 0.3s ease; 25 + } 26 + 27 + .tags-data { 28 + display: flex; 29 + flex-direction: column; 30 + flex-wrap: wrap; 31 + justify-content: flex-end; 32 + align-items: flex-start; 33 + align-content: flex-end; 34 + } 35 + 36 + .title-list li { 37 + margin-bottom: 0.375rem; 38 + } 39 + 40 + /* icons settings */ 41 + .icons { 42 + width: 1.3rem; 43 + height: 1.3rem; 44 + aspect-ratio: 1/1; 45 + display: inline-block; 46 + vertical-align: middle; 47 + color: var(--text); 48 + fill: var(--text); 49 + background-color: transparent; 50 + cursor: pointer; 51 + } 52 + 53 + .icons:hover { 54 + background-color: transparent; 55 + color: var(--accent); 56 + } 57 + 58 + /* footnotes */ 59 + .footnote-definition { 60 + margin: 0 0 0 0.125rem; 61 + } 62 + 63 + .footnote-definition-label { 64 + color: var(--accent); 65 + } 66 + 67 + .footnote-definition p { 68 + display: inline; 69 + margin: 0.625rem 0 0 0.625rem; 70 + } 71 + 72 + /* general classes */ 73 + .no-style { 74 + padding: 0; 75 + margin: 0; 76 + border: none; 77 + border-radius: 0; 78 + } 79 + 80 + .no-style:hover { 81 + background-color: transparent; 82 + color: var(--accent); 83 + } 84 + 85 + .center { 86 + text-align: center; 87 + } 88 + 89 + .center img { 90 + display: block; 91 + margin: 1rem auto; 92 + } 93 + 94 + .float-right { 95 + float: right; 96 + } 97 + 98 + .float-left { 99 + float: left; 100 + } 101 + 102 + div code, 103 + li code, 104 + p code { 105 + color: var(--text); 106 + background-color: var(--bg-light); 107 + } 108 + 109 + pre { 110 + border-top-left-radius: 0; 111 + } 112 + 113 + blockquote { 114 + padding-top: 0.2rem; 115 + padding-bottom: 0.2rem; 116 + } 117 + 118 + blockquote:has(+ pre) { 119 + display: inline-block; 120 + border: none; 121 + font-family: "code" !important; 122 + font-size: 0.8rem; 123 + font-weight: 600; 124 + margin: 0; 125 + margin-bottom: 0.2rem; 126 + margin-block: 0 0; 127 + border-top-left-radius: 5px; 128 + border-top-right-radius: 5px; 129 + padding-left: 0.75rem; 130 + padding-right: 0.75rem; 131 + padding-top: 0.25rem; 132 + padding-bottom: 0.25rem; 133 + position: relative; 134 + background-color: var(--accent); 135 + } 136 + 137 + blockquote:has(+ pre) p { 138 + margin: 0; 139 + color: var(--accent-text); 140 + }
+118
sass/css/reset.css
··· 1 + /* Box sizing rules */ 2 + *, 3 + *::before, 4 + *::after { 5 + box-sizing: border-box; 6 + -webkit-box-sizing: border-box; 7 + } 8 + 9 + * { 10 + margin: 0; 11 + } 12 + 13 + /* Prevent font size inflation */ 14 + html { 15 + -moz-text-size-adjust: none; 16 + -webkit-text-size-adjust: none; 17 + text-size-adjust: none; 18 + } 19 + 20 + /* Remove default margin in favour of better control in authored CSS */ 21 + body, 22 + h1, 23 + h2, 24 + h3, 25 + h4, 26 + p, 27 + figure, 28 + blockquote, 29 + dl, 30 + dd { 31 + margin-block-end: 0; 32 + } 33 + 34 + /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 35 + ul, 36 + ol, 37 + ul[role="list"], 38 + ol[role="list"] { 39 + list-style: none; 40 + } 41 + 42 + /* Set core body defaults */ 43 + body { 44 + min-height: 100vh; 45 + line-height: 1.5; 46 + -webkit-font-smoothing: antialiased; 47 + } 48 + 49 + /* Set shorter line heights on headings and interactive elements */ 50 + h1, 51 + h2, 52 + h3, 53 + h4, 54 + button, 55 + input, 56 + label { 57 + line-height: 1.1; 58 + } 59 + 60 + /* Balance text wrapping on headings */ 61 + h1, 62 + h2, 63 + h3, 64 + h4 { 65 + text-wrap: balance; 66 + } 67 + 68 + p, 69 + h1, 70 + h2, 71 + h3, 72 + h4, 73 + h5, 74 + h6 { 75 + overflow-wrap: break-word; 76 + } 77 + 78 + /* A elements that don't have a class get default styles */ 79 + a:not([class]) { 80 + text-decoration-skip-ink: auto; 81 + } 82 + 83 + /* Make images easier to work with */ 84 + img, 85 + picture, 86 + video, 87 + canvas, 88 + svg { 89 + max-width: 100%; 90 + display: block; 91 + } 92 + 93 + /* Inherit fonts for inputs and buttons */ 94 + input, 95 + button, 96 + textarea, 97 + select, 98 + progress { 99 + appearance: none; 100 + -webkit-appearance: none; 101 + -moz-appearance: none; 102 + font: inherit; 103 + } 104 + 105 + /* Make sure textareas without a rows attribute are not tiny */ 106 + textarea:not([rows]) { 107 + min-height: 10em; 108 + } 109 + 110 + /* Anything that has been anchored to should have extra scroll margin */ 111 + :target { 112 + scroll-margin-block: 5ex; 113 + } 114 + 115 + #root, 116 + #__next { 117 + isolation: isolate; 118 + }
+674
sass/css/suCSS.css
··· 1 + :root, 2 + ::backdrop { 3 + /* set sans-serif & mono fonts */ 4 + --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, 5 + "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, 6 + "Helvetica Neue", sans-serif; 7 + --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; 8 + --standard-border-radius: 5px; 9 + 10 + /* default colors */ 11 + --bg: #eeeeee; 12 + --bg-light: #cbcdcd; 13 + --text: #41474e; 14 + --text-light: #646868; 15 + --accent: #d26878; 16 + --accent-light: #e08f67; 17 + --accent-text: var(--bg); 18 + --border: #646868; 19 + --link: #5690af; 20 + } 21 + 22 + /* theme media queries */ 23 + @media (prefers-color-scheme: dark) { 24 + :root, 25 + ::backdrop { 26 + color-scheme: dark; 27 + --bg: #222529; 28 + --bg-light: #464949; 29 + --text: #d6d6d6; 30 + --text-light: #dbd5bc; 31 + --accent: #78b6ad; 32 + --accent-light: #87c9e5; 33 + --accent-text: var(--bg); 34 + --border: #dbd5bc; 35 + --link: #e2aea2; 36 + } 37 + img, 38 + video { 39 + opacity: 0.8; 40 + } 41 + } 42 + 43 + @media (prefers-color-scheme: light) { 44 + :root, 45 + ::backdrop { 46 + color-scheme: light; 47 + --bg: #eeeeee; 48 + --bg-light: #cbcdcd; 49 + --text: #41474e; 50 + --text-light: #646868; 51 + --accent: #d26878; 52 + --accent-light: #e08f67; 53 + --accent-text: var(--bg); 54 + --border: #646868; 55 + --link: #5690af; 56 + } 57 + } 58 + 59 + [data-theme="light"] { 60 + /* default (light) theme */ 61 + color-scheme: light; 62 + --bg: #eeeeee; 63 + --bg-light: #cbcdcd; 64 + --text: #41474e; 65 + --text-light: #646868; 66 + --accent: #d26878; 67 + --accent-light: #e08f67; 68 + --accent-text: var(--bg); 69 + --border: #646868; 70 + --link: #5690af; 71 + } 72 + 73 + [data-theme="dark"] { 74 + color-scheme: dark; 75 + --bg: #222529; 76 + --bg-light: #464949; 77 + --text: #d6d6d6; 78 + --text-light: #dbd5bc; 79 + --accent: #78b6ad; 80 + --accent-light: #87c9e5; 81 + --accent-text: var(--bg); 82 + --border: #dbd5bc; 83 + --link: #e2aea2; 84 + } 85 + 86 + ::selection, 87 + ::-moz-selection { 88 + color: var(--bg); 89 + background: var(--accent); 90 + } 91 + 92 + /* chromium scrollbars */ 93 + ::-webkit-scrollbar { 94 + width: 8px; 95 + height: 8px; 96 + overflow: visible; 97 + } 98 + ::-webkit-scrollbar-thumb { 99 + background: var(--accent); 100 + width: 12px; 101 + } 102 + ::-webkit-scrollbar-track { 103 + background: var(--bg-light); 104 + } 105 + 106 + /* firefox scrollbars */ 107 + * { 108 + scrollbar-color: var(--accent) var(--bg-light); 109 + scrollbar-width: thin; 110 + scrollbar-height: thin; 111 + } 112 + 113 + html { 114 + color-scheme: light dark; 115 + font-family: var(--mono-font); 116 + scroll-behavior: smooth; 117 + } 118 + 119 + body { 120 + min-height: 100svh; 121 + color: var(--text); 122 + background-color: var(--bg); 123 + font-size: 1rem; 124 + display: grid; 125 + grid-template-columns: 1fr min(45rem, 90%) 1fr; 126 + grid-template-rows: auto 1fr auto; 127 + grid-row-gap: 0.625rem; 128 + } 129 + body > * { 130 + grid-column: 2; 131 + } 132 + 133 + body > footer { 134 + color: var(--text-light); 135 + font-size: 0.875; 136 + } 137 + 138 + /* Format headers */ 139 + h1 { 140 + font-size: 2rem; 141 + } 142 + h2 { 143 + font-size: 1.75rem; 144 + } 145 + h3 { 146 + font-size: 1.5rem; 147 + } 148 + h4 { 149 + font-size: 1.25rem; 150 + } 151 + h5 { 152 + font-size: 1rem; 153 + } 154 + h6 { 155 + font-size: 0.75rem; 156 + } 157 + 158 + h1, 159 + h2, 160 + h3, 161 + h4, 162 + h5, 163 + h6 { 164 + margin: 0.5em 0 0.5em 0; 165 + } 166 + 167 + /* Fix line height when title wraps */ 168 + h1, 169 + h2, 170 + h3 { 171 + line-height: 1.1; 172 + } 173 + 174 + h1::before, 175 + h2::before, 176 + h3::before, 177 + h4::before, 178 + h5::before, 179 + h6::before { 180 + color: var(--accent); 181 + content: "# "; 182 + } 183 + 184 + @media only screen and (max-width: 720px) { 185 + h1 { 186 + font-size: 1.5rem; 187 + } 188 + h2 { 189 + font-size: 1.25rem; 190 + } 191 + h3 { 192 + font-size: 1rem; 193 + } 194 + h4 { 195 + font-size: 0.75rem; 196 + } 197 + h5 { 198 + font-size: 0.5rem; 199 + } 200 + h6 { 201 + font-size: 0.25rem; 202 + } 203 + } 204 + 205 + p { 206 + margin: 1rem 0; 207 + } 208 + 209 + /* format links */ 210 + a, 211 + a:visited { 212 + text-decoration: none; 213 + border-radius: 0.125rem; 214 + color: var(--link); 215 + } 216 + 217 + a:hover { 218 + background-color: var(--link); 219 + color: var(--bg); 220 + } 221 + 222 + /* format lists */ 223 + ul { 224 + list-style: none; 225 + margin-top: 0.25rem; 226 + margin-bottom: 0.25rem; 227 + } 228 + 229 + ol { 230 + list-style-type: decimal; 231 + margin-top: 0.25rem; 232 + margin-bottom: 0.25rem; 233 + } 234 + 235 + li { 236 + margin-bottom: 0.125rem; 237 + } 238 + 239 + ul li::marker { 240 + content: "» "; 241 + color: var(--accent); 242 + } 243 + 244 + ul li:hover::marker { 245 + content: "# "; 246 + font-weight: 700; 247 + color: var(--link); 248 + } 249 + 250 + ol li::marker { 251 + color: var(--accent); 252 + } 253 + 254 + ol li:hover::marker { 255 + font-weight: 700; 256 + color: var(--link); 257 + } 258 + 259 + /* Use flexbox to allow items to wrap, as needed */ 260 + header > nav ul, 261 + header > nav ol { 262 + display: flex; 263 + flex-direction: row; 264 + flex-wrap: wrap; 265 + align-content: space-around; 266 + justify-content: right; 267 + list-style-type: none; 268 + margin: 0.5rem 0 0 0; 269 + padding: 0; 270 + gap: 1rem; 271 + } 272 + 273 + /* List items are inline elements, make them behave more like blocks */ 274 + header > nav ul li, 275 + header > nav ol li { 276 + display: inline-block; 277 + } 278 + 279 + /* Consolidate box styling */ 280 + aside, 281 + details, 282 + pre, 283 + progress { 284 + background-color: var(--bg-light); 285 + border-radius: var(--standard-border-radius); 286 + } 287 + 288 + aside { 289 + font-size: 1rem; 290 + width: 35%; 291 + padding: 0 10px; 292 + margin-inline-start: 10px; 293 + float: right; 294 + } 295 + *[dir="rtl"] aside { 296 + float: left; 297 + } 298 + 299 + /* make aside full-width on mobile */ 300 + @media only screen and (max-width: 720px) { 301 + aside { 302 + width: 100%; 303 + float: none; 304 + margin-inline-start: 0; 305 + } 306 + } 307 + 308 + details { 309 + padding: 0.5rem; 310 + } 311 + 312 + summary { 313 + cursor: pointer; 314 + font-weight: bold; 315 + word-break: break-all; 316 + } 317 + 318 + details[open] > summary + * { 319 + margin-top: 0; 320 + } 321 + 322 + details[open] > summary { 323 + margin-bottom: 0.5rem; 324 + } 325 + 326 + details[open] > :last-child { 327 + margin-bottom: 0; 328 + } 329 + 330 + /* Format tables */ 331 + table { 332 + border-collapse: collapse; 333 + margin: 1.5rem 0; 334 + display: block; 335 + overflow-x: auto; 336 + white-space: nowrap; 337 + } 338 + 339 + td, 340 + th { 341 + border: 1px solid var(--border); 342 + text-align: start; 343 + padding: 0.5rem; 344 + } 345 + 346 + th { 347 + background-color: var(--bg-light); 348 + font-weight: bold; 349 + } 350 + 351 + tr:nth-child(even) { 352 + background-color: var(--bg-light); 353 + } 354 + 355 + table caption { 356 + text-align: left; 357 + font-weight: bold; 358 + margin: 0 0 0.4rem 1rem; 359 + } 360 + 361 + /* format forms */ 362 + fieldset { 363 + border: 1px dashed var(--accent); 364 + border-radius: var(--standard-border-radius); 365 + } 366 + 367 + fieldset > legend { 368 + color: var(--accent); 369 + } 370 + 371 + textarea, 372 + select, 373 + input, 374 + button, 375 + .button { 376 + font-size: inherit; 377 + font-family: inherit; 378 + padding: 0.25rem; 379 + border-radius: var(--standard-border-radius); 380 + box-shadow: none; 381 + max-width: 100%; 382 + display: inline-block; 383 + } 384 + 385 + textarea, 386 + select, 387 + input { 388 + color: var(--text); 389 + background-color: var(--bg); 390 + border: 1px dashed var(--border); 391 + } 392 + 393 + label { 394 + display: block; 395 + } 396 + 397 + fieldset label { 398 + margin: 0 0 0.3rem 0; 399 + } 400 + 401 + textarea { 402 + max-width: 43.5rem; 403 + resize: both; 404 + } 405 + 406 + textarea:not([cols]) { 407 + width: 100%; 408 + } 409 + 410 + @media only screen and (max-width: 720px) { 411 + textarea, 412 + select, 413 + input { 414 + width: 100%; 415 + } 416 + } 417 + 418 + /* format buttons */ 419 + button, 420 + .button, 421 + a.button, 422 + input[type="submit"], 423 + input[type="reset"], 424 + input[type="button"], 425 + label[type="button"] { 426 + border: 1px solid var(--accent); 427 + background-color: var(--accent); 428 + color: var(--accent-text); 429 + padding: 0.5rem 0.9rem; 430 + text-decoration: none; 431 + line-height: normal; 432 + } 433 + 434 + .button[aria-disabled="true"], 435 + input:disabled, 436 + textarea:disabled, 437 + select:disabled, 438 + button[disabled] { 439 + cursor: not-allowed; 440 + background-color: var(--bg-light); 441 + border-color: var(--bg-light); 442 + color: var(--text-light); 443 + } 444 + 445 + input[type="range"] { 446 + padding: 0; 447 + color: var(--accent); 448 + } 449 + 450 + abbr[title] { 451 + cursor: help; 452 + text-decoration-line: underline; 453 + text-decoration-style: dotted; 454 + } 455 + 456 + button:enabled:hover, 457 + .button:not([aria-disabled="true"]):hover, 458 + input[type="submit"]:enabled:hover, 459 + input[type="reset"]:enabled:hover, 460 + input[type="button"]:enabled:hover, 461 + label[type="button"]:hover { 462 + background-color: var(--accent-light); 463 + border-color: var(--accent-light); 464 + cursor: pointer; 465 + } 466 + 467 + .button:focus-visible, 468 + button:focus-visible:where(:enabled), 469 + input:enabled:focus-visible:where( 470 + [type="submit"], 471 + [type="reset"], 472 + [type="button"] 473 + ) { 474 + outline: 2px solid var(--accent); 475 + outline-offset: 1px; 476 + } 477 + 478 + /* checkbox and radio button style */ 479 + input[type="checkbox"], 480 + input[type="radio"] { 481 + vertical-align: middle; 482 + position: relative; 483 + width: min-content; 484 + width: 14px; 485 + height: 14px; 486 + } 487 + 488 + input[type="checkbox"] + label, 489 + input[type="radio"] + label { 490 + display: inline-block; 491 + } 492 + 493 + input[type="radio"] { 494 + border-radius: 100%; 495 + } 496 + 497 + input[type="checkbox"]:checked, 498 + input[type="radio"]:checked { 499 + background-color: var(--accent); 500 + } 501 + 502 + @media only screen and (max-width: 720px) { 503 + textarea, 504 + select, 505 + input { 506 + width: 100%; 507 + } 508 + } 509 + 510 + input[type="color"] { 511 + height: 2.5rem; 512 + padding: 0.2rem; 513 + } 514 + 515 + input[type="file"] { 516 + border: 0; 517 + } 518 + 519 + /* misc body elements */ 520 + hr { 521 + border: 1px dashed var(--accent); 522 + margin: 0.5rem 0 0.5rem 0; 523 + } 524 + 525 + mark { 526 + padding: 0 0.25em 0 0.25em; 527 + border-radius: var(--standard-border-radius); 528 + background-color: var(--accent); 529 + color: var(--bg); 530 + } 531 + 532 + mark a { 533 + color: var(--link); 534 + } 535 + 536 + img, 537 + video { 538 + max-width: 90%; 539 + height: auto; 540 + padding: 0.125rem; 541 + border: dashed 2px var(--accent); 542 + border-radius: 15px; 543 + } 544 + 545 + figure { 546 + margin: 0; 547 + display: block; 548 + overflow-x: auto; 549 + } 550 + 551 + figcaption { 552 + text-align: left; 553 + font-size: 0.875rem; 554 + color: var(--text-light); 555 + margin: 0 0 1rem 1rem; 556 + } 557 + 558 + blockquote { 559 + margin: 0 0 0 1.25rem; 560 + padding: 0.5rem 0 0 0.5rem; 561 + border-inline-start: 0.375rem solid var(--accent); 562 + color: var(--text-light); 563 + font-style: italic; 564 + } 565 + 566 + cite { 567 + font-size: 0.875rem; 568 + color: var(--text-light); 569 + font-style: normal; 570 + } 571 + 572 + dt { 573 + color: var(--text-light); 574 + } 575 + 576 + code, 577 + pre, 578 + pre span, 579 + kbd, 580 + samp { 581 + font-family: var(--mono-font); 582 + } 583 + 584 + pre { 585 + border: 1px solid var(--accent); 586 + max-height: 30rem; 587 + padding: 0.625rem; 588 + overflow: auto; 589 + font-style: monospace; 590 + white-space: pre-wrap; 591 + } 592 + 593 + p code, 594 + li code, 595 + div code { 596 + padding: 0 0.125rem 0 0.125rem; 597 + border-radius: 3px; 598 + color: var(--bg); 599 + background-color: var(--text); 600 + } 601 + 602 + pre code { 603 + padding: 0; 604 + border-radius: 0; 605 + color: inherit; 606 + background-color: inherit; 607 + } 608 + 609 + iframe { 610 + max-width: 90%; 611 + } 612 + 613 + /* progress bars */ 614 + progress { 615 + width: 100%; 616 + } 617 + 618 + progress:indeterminate { 619 + background-color: var(--bg-light); 620 + } 621 + 622 + progress::-webkit-progress-bar { 623 + border-radius: var(--standard-border-radius); 624 + background-color: var(--bg-light); 625 + } 626 + 627 + progress::-webkit-progress-value { 628 + border-radius: var(--standard-border-radius); 629 + background-color: var(--accent); 630 + } 631 + 632 + progress::-moz-progress-bar { 633 + border-radius: var(--standard-border-radius); 634 + background-color: var(--accent); 635 + transition-property: width; 636 + transition-duration: 0.3s; 637 + } 638 + 639 + progress:indeterminate::-moz-progress-bar { 640 + background-color: var(--bg-light); 641 + } 642 + 643 + dialog { 644 + max-width: 40rem; 645 + margin: auto; 646 + } 647 + 648 + dialog::backdrop { 649 + background-color: var(--bg); 650 + opacity: 0.8; 651 + } 652 + 653 + @media only screen and (max-width: 720px) { 654 + dialog { 655 + max-width: 100%; 656 + margin: auto 1em; 657 + } 658 + } 659 + 660 + /* superscript & subscript */ 661 + /* prevent scripts from affecting line-height. */ 662 + sup, 663 + sub { 664 + vertical-align: baseline; 665 + position: relative; 666 + } 667 + 668 + sup { 669 + top: -0.4em; 670 + } 671 + 672 + sub { 673 + top: 0.3em; 674 + }
+563
sass/css/syntax-theme.css
··· 1 + /* 2 + * theme "Catppuccin" generated by syntect 3 + */ 4 + 5 + html[data-theme="light"] .z-code { 6 + color: #4c4f69; 7 + background-color: #f3f2f2; 8 + } 9 + 10 + html[data-theme="light"] .z-comment { 11 + color: #9ca0b0; 12 + font-style: italic; 13 + } 14 + html[data-theme="light"] .z-string { 15 + color: #40a02b; 16 + } 17 + html[data-theme="light"] .z-string.z-regexp { 18 + color: #fe640b; 19 + } 20 + html[data-theme="light"] .z-constant.z-numeric { 21 + color: #fe640b; 22 + } 23 + html[data-theme="light"] .z-constant.z-language.z-boolean { 24 + color: #fe640b; 25 + font-weight: bold; 26 + font-style: italic; 27 + } 28 + html[data-theme="light"] .z-constant.z-language { 29 + color: #7287fd; 30 + font-style: italic; 31 + } 32 + html[data-theme="light"] .z-support.z-function.z-builtin { 33 + color: #fe640b; 34 + font-style: italic; 35 + } 36 + html[data-theme="light"] .z-variable.z-other.z-constant { 37 + color: #fe640b; 38 + } 39 + html[data-theme="light"] .z-keyword { 40 + color: #d20f39; 41 + font-style: italic; 42 + } 43 + html[data-theme="light"] .z-keyword.z-control.z-loop, 44 + .z-keyword.z-control.z-conditional, 45 + .z-keyword.z-control.z-c\+\+ { 46 + color: #8839ef; 47 + font-weight: bold; 48 + } 49 + html[data-theme="light"] .z-keyword.z-control.z-return, 50 + .z-keyword.z-control.z-flow.z-return { 51 + color: #ea76cb; 52 + font-weight: bold; 53 + } 54 + html[data-theme="light"] .z-support.z-type.z-exception { 55 + color: #fe640b; 56 + font-style: italic; 57 + } 58 + html[data-theme="light"] .z-keyword.z-operator, 59 + .z-punctuation.z-accessor { 60 + color: #04a5e5; 61 + font-weight: bold; 62 + } 63 + html[data-theme="light"] .z-punctuation.z-separator { 64 + color: #179299; 65 + } 66 + html[data-theme="light"] .z-punctuation.z-terminator { 67 + color: #179299; 68 + } 69 + html[data-theme="light"] .z-punctuation.z-section { 70 + color: #7c7f93; 71 + } 72 + html[data-theme="light"] .z-keyword.z-control.z-import.z-include { 73 + color: #179299; 74 + font-style: italic; 75 + } 76 + html[data-theme="light"] .z-storage { 77 + color: #d20f39; 78 + } 79 + html[data-theme="light"] .z-storage.z-type { 80 + color: #df8e1d; 81 + font-style: italic; 82 + } 83 + html[data-theme="light"] .z-storage.z-modifier { 84 + color: #d20f39; 85 + } 86 + html[data-theme="light"] .z-entity.z-name.z-namespace, 87 + .z-meta.z-path { 88 + color: #dc8a78; 89 + font-style: italic; 90 + } 91 + html[data-theme="light"] .z-storage.z-type.z-class { 92 + color: #dc8a78; 93 + font-style: italic; 94 + } 95 + html[data-theme="light"] .z-entity.z-name.z-label { 96 + color: #1e66f5; 97 + } 98 + html[data-theme="light"] .z-keyword.z-declaration.z-class { 99 + color: #d20f39; 100 + font-style: italic; 101 + } 102 + html[data-theme="light"] .z-entity.z-name.z-class, 103 + .z-meta.z-toc-list.z-full-identifier { 104 + color: #04a5e5; 105 + } 106 + html[data-theme="light"] .z-entity.z-other.z-inherited-class { 107 + color: #04a5e5; 108 + font-style: italic; 109 + } 110 + html[data-theme="light"] .z-entity.z-name.z-function, 111 + .z-variable.z-function { 112 + color: #1e66f5; 113 + font-style: italic; 114 + } 115 + html[data-theme="light"] .z-entity.z-name.z-function.z-preprocessor { 116 + color: #d20f39; 117 + } 118 + html[data-theme="light"] .z-keyword.z-control.z-import { 119 + color: #d20f39; 120 + } 121 + html[data-theme="light"] .z-entity.z-name.z-function.z-constructor, 122 + .z-entity.z-name.z-function.z-destructor { 123 + color: #7287fd; 124 + } 125 + html[data-theme="light"] .z-variable.z-parameter.z-function { 126 + color: #dc8a78; 127 + font-style: italic; 128 + } 129 + html[data-theme="light"] .z-keyword.z-declaration.z-function { 130 + color: #e64553; 131 + font-style: italic; 132 + } 133 + html[data-theme="light"] .z-support.z-function { 134 + color: #04a5e5; 135 + } 136 + html[data-theme="light"] .z-support.z-constant { 137 + color: #1e66f5; 138 + } 139 + html[data-theme="light"] .z-support.z-type, 140 + .z-support.z-class { 141 + color: #1e66f5; 142 + font-style: italic; 143 + } 144 + html[data-theme="light"] .z-variable.z-function { 145 + color: #1e66f5; 146 + font-style: italic; 147 + } 148 + html[data-theme="light"] .z-variable.z-parameter { 149 + color: #dc8a78; 150 + font-style: italic; 151 + } 152 + html[data-theme="light"] .z-variable.z-other { 153 + color: #4c4f69; 154 + font-style: italic; 155 + } 156 + html[data-theme="light"] .z-variable.z-other.z-member { 157 + color: #dc8a78; 158 + } 159 + html[data-theme="light"] .z-variable.z-language { 160 + color: #179299; 161 + } 162 + html[data-theme="light"] .z-entity.z-name.z-tag { 163 + color: #fe640b; 164 + } 165 + html[data-theme="light"] .z-entity.z-other.z-attribute-name { 166 + color: #8839ef; 167 + font-style: italic; 168 + } 169 + html[data-theme="light"] .z-punctuation.z-definition.z-tag { 170 + color: #e64553; 171 + } 172 + html[data-theme="light"] .z-markup.z-underline.z-link.z-markdown { 173 + color: #dc8a78; 174 + text-decoration: underline; 175 + font-style: italic; 176 + } 177 + html[data-theme="light"] .z-meta.z-link.z-inline.z-description { 178 + color: #7287fd; 179 + font-weight: bold; 180 + } 181 + html[data-theme="light"] .z-comment.z-block.z-markdown, 182 + .z-meta.z-code-fence, 183 + .z-markup.z-raw.z-code-fence, 184 + .z-markup.z-raw.z-inline { 185 + color: #179299; 186 + font-style: italic; 187 + } 188 + html[data-theme="light"] .z-punctuation.z-definition.z-heading, 189 + .z-entity.z-name.z-section { 190 + color: #1e66f5; 191 + font-weight: bold; 192 + } 193 + html[data-theme="light"] .z-markup.z-italic { 194 + color: #e64553; 195 + font-style: italic; 196 + } 197 + html[data-theme="light"] .z-markup.z-bold { 198 + color: #e64553; 199 + font-weight: bold; 200 + } 201 + html[data-theme="light"] .z-constant.z-character.z-escape { 202 + color: #ea76cb; 203 + } 204 + html[data-theme="light"] 205 + .z-source.z-shell.z-bash 206 + .z-meta.z-function.z-shell 207 + .z-meta.z-compound.z-shell 208 + .z-meta.z-function-call.z-identifier.z-shell { 209 + color: #ea76cb; 210 + } 211 + html[data-theme="light"] .z-variable.z-language.z-shell { 212 + color: #d20f39; 213 + font-style: italic; 214 + } 215 + html[data-theme="light"] 216 + .z-source.z-lua 217 + .z-meta.z-function.z-lua 218 + .z-meta.z-block.z-lua 219 + .z-meta.z-mapping.z-value.z-lua 220 + .z-meta.z-mapping.z-key.z-lua 221 + .z-string.z-unquoted.z-key.z-lua { 222 + color: #7287fd; 223 + font-style: italic; 224 + } 225 + html[data-theme="light"] 226 + .z-source.z-lua 227 + .z-meta.z-function.z-lua 228 + .z-meta.z-block.z-lua 229 + .z-meta.z-mapping.z-key.z-lua 230 + .z-string.z-unquoted.z-key.z-lua { 231 + color: #dd7878; 232 + } 233 + html[data-theme="light"] .z-entity.z-name.z-constant.z-java { 234 + color: #179299; 235 + } 236 + html[data-theme="light"] .z-support.z-type.z-property-name.z-css { 237 + color: #dd7878; 238 + font-style: italic; 239 + } 240 + html[data-theme="light"] .z-support.z-constant.z-property-value.z-css { 241 + color: #4c4f69; 242 + } 243 + html[data-theme="light"] .z-constant.z-numeric.z-suffix.z-css, 244 + .z-keyword.z-other.z-unit.z-css { 245 + color: #179299; 246 + font-style: italic; 247 + } 248 + html[data-theme="light"] .z-variable.z-other.z-custom-property.z-name.z-css, 249 + .z-support.z-type.z-custom-property.z-name.z-css, 250 + .z-punctuation.z-definition.z-custom-property.z-css { 251 + color: #179299; 252 + } 253 + html[data-theme="light"] .z-entity.z-name.z-tag.z-css { 254 + color: #7287fd; 255 + } 256 + html[data-theme="light"] .z-variable.z-other.z-sass { 257 + color: #179299; 258 + } 259 + html[data-theme="light"] .z-invalid { 260 + color: #4c4f69; 261 + background-color: #d20f39; 262 + } 263 + html[data-theme="light"] .z-invalid.z-deprecated { 264 + color: #4c4f69; 265 + background-color: #8839ef; 266 + } 267 + html[data-theme="light"] .z-meta.z-diff, 268 + .z-meta.z-diff.z-header { 269 + color: #9ca0b0; 270 + } 271 + html[data-theme="light"] .z-markup.z-deleted { 272 + color: #d20f39; 273 + } 274 + html[data-theme="light"] .z-markup.z-inserted { 275 + color: #40a02b; 276 + } 277 + html[data-theme="light"] .z-markup.z-changed { 278 + color: #df8e1d; 279 + } 280 + html[data-theme="light"] .z-message.z-error { 281 + color: #d20f39; 282 + } 283 + 284 + /* dark */ 285 + 286 + html[data-theme="dark"] .z-code { 287 + color: #cad3f5; 288 + background-color: #2a2e35; 289 + } 290 + 291 + html[data-theme="dark"] .z-comment { 292 + color: #6e738d; 293 + font-style: italic; 294 + } 295 + html[data-theme="dark"] .z-string { 296 + color: #a6da95; 297 + } 298 + html[data-theme="dark"] .z-string.z-regexp { 299 + color: #f5a97f; 300 + } 301 + html[data-theme="dark"] .z-constant.z-numeric { 302 + color: #f5a97f; 303 + } 304 + html[data-theme="dark"] .z-constant.z-language.z-boolean { 305 + color: #f5a97f; 306 + font-weight: bold; 307 + font-style: italic; 308 + } 309 + html[data-theme="dark"] .z-constant.z-language { 310 + color: #b7bdf8; 311 + font-style: italic; 312 + } 313 + html[data-theme="dark"] .z-support.z-function.z-builtin { 314 + color: #f5a97f; 315 + font-style: italic; 316 + } 317 + html[data-theme="dark"] .z-variable.z-other.z-constant { 318 + color: #f5a97f; 319 + } 320 + html[data-theme="dark"] .z-keyword { 321 + color: #ed8796; 322 + font-style: italic; 323 + } 324 + html[data-theme="dark"] .z-keyword.z-control.z-loop, 325 + .z-keyword.z-control.z-conditional, 326 + .z-keyword.z-control.z-c\+\+ { 327 + color: #c6a0f6; 328 + font-weight: bold; 329 + } 330 + html[data-theme="dark"] .z-keyword.z-control.z-return, 331 + .z-keyword.z-control.z-flow.z-return { 332 + color: #f5bde6; 333 + font-weight: bold; 334 + } 335 + html[data-theme="dark"] .z-support.z-type.z-exception { 336 + color: #f5a97f; 337 + font-style: italic; 338 + } 339 + html[data-theme="dark"] .z-keyword.z-operator, 340 + .z-punctuation.z-accessor { 341 + color: #91d7e3; 342 + font-weight: bold; 343 + } 344 + html[data-theme="dark"] .z-punctuation.z-separator { 345 + color: #8bd5ca; 346 + } 347 + html[data-theme="dark"] .z-punctuation.z-terminator { 348 + color: #8bd5ca; 349 + } 350 + html[data-theme="dark"] .z-punctuation.z-section { 351 + color: #939ab7; 352 + } 353 + html[data-theme="dark"] .z-keyword.z-control.z-import.z-include { 354 + color: #8bd5ca; 355 + font-style: italic; 356 + } 357 + html[data-theme="dark"] .z-storage { 358 + color: #ed8796; 359 + } 360 + html[data-theme="dark"] .z-storage.z-type { 361 + color: #eed49f; 362 + font-style: italic; 363 + } 364 + html[data-theme="dark"] .z-storage.z-modifier { 365 + color: #ed8796; 366 + } 367 + html[data-theme="dark"] .z-entity.z-name.z-namespace, 368 + .z-meta.z-path { 369 + color: #f4dbd6; 370 + font-style: italic; 371 + } 372 + html[data-theme="dark"] .z-storage.z-type.z-class { 373 + color: #f4dbd6; 374 + font-style: italic; 375 + } 376 + html[data-theme="dark"] .z-entity.z-name.z-label { 377 + color: #8aadf4; 378 + } 379 + html[data-theme="dark"] .z-keyword.z-declaration.z-class { 380 + color: #ed8796; 381 + font-style: italic; 382 + } 383 + html[data-theme="dark"] .z-entity.z-name.z-class, 384 + .z-meta.z-toc-list.z-full-identifier { 385 + color: #91d7e3; 386 + } 387 + html[data-theme="dark"] .z-entity.z-other.z-inherited-class { 388 + color: #91d7e3; 389 + font-style: italic; 390 + } 391 + html[data-theme="dark"] .z-entity.z-name.z-function, 392 + .z-variable.z-function { 393 + color: #8aadf4; 394 + font-style: italic; 395 + } 396 + html[data-theme="dark"] .z-entity.z-name.z-function.z-preprocessor { 397 + color: #ed8796; 398 + } 399 + html[data-theme="dark"] .z-keyword.z-control.z-import { 400 + color: #ed8796; 401 + } 402 + html[data-theme="dark"] .z-entity.z-name.z-function.z-constructor, 403 + .z-entity.z-name.z-function.z-destructor { 404 + color: #b7bdf8; 405 + } 406 + html[data-theme="dark"] .z-variable.z-parameter.z-function { 407 + color: #f4dbd6; 408 + font-style: italic; 409 + } 410 + html[data-theme="dark"] .z-keyword.z-declaration.z-function { 411 + color: #ee99a0; 412 + font-style: italic; 413 + } 414 + html[data-theme="dark"] .z-support.z-function { 415 + color: #91d7e3; 416 + } 417 + html[data-theme="dark"] .z-support.z-constant { 418 + color: #8aadf4; 419 + } 420 + html[data-theme="dark"] .z-support.z-type, 421 + .z-support.z-class { 422 + color: #8aadf4; 423 + font-style: italic; 424 + } 425 + html[data-theme="dark"] .z-variable.z-function { 426 + color: #8aadf4; 427 + font-style: italic; 428 + } 429 + html[data-theme="dark"] .z-variable.z-parameter { 430 + color: #f4dbd6; 431 + font-style: italic; 432 + } 433 + html[data-theme="dark"] .z-variable.z-other { 434 + color: #cad3f5; 435 + font-style: italic; 436 + } 437 + html[data-theme="dark"] .z-variable.z-other.z-member { 438 + color: #f4dbd6; 439 + } 440 + html[data-theme="dark"] .z-variable.z-language { 441 + color: #8bd5ca; 442 + } 443 + html[data-theme="dark"] .z-entity.z-name.z-tag { 444 + color: #f5a97f; 445 + } 446 + html[data-theme="dark"] .z-entity.z-other.z-attribute-name { 447 + color: #c6a0f6; 448 + font-style: italic; 449 + } 450 + html[data-theme="dark"] .z-punctuation.z-definition.z-tag { 451 + color: #ee99a0; 452 + } 453 + html[data-theme="dark"] .z-markup.z-underline.z-link.z-markdown { 454 + color: #f4dbd6; 455 + text-decoration: underline; 456 + font-style: italic; 457 + } 458 + html[data-theme="dark"] .z-meta.z-link.z-inline.z-description { 459 + color: #b7bdf8; 460 + font-weight: bold; 461 + } 462 + html[data-theme="dark"] .z-comment.z-block.z-markdown, 463 + .z-meta.z-code-fence, 464 + .z-markup.z-raw.z-code-fence, 465 + .z-markup.z-raw.z-inline { 466 + color: #8bd5ca; 467 + font-style: italic; 468 + } 469 + html[data-theme="dark"] .z-punctuation.z-definition.z-heading, 470 + .z-entity.z-name.z-section { 471 + color: #8aadf4; 472 + font-weight: bold; 473 + } 474 + html[data-theme="dark"] .z-markup.z-italic { 475 + color: #ee99a0; 476 + font-style: italic; 477 + } 478 + html[data-theme="dark"] .z-markup.z-bold { 479 + color: #ee99a0; 480 + font-weight: bold; 481 + } 482 + html[data-theme="dark"] .z-constant.z-character.z-escape { 483 + color: #f5bde6; 484 + } 485 + html[data-theme="dark"] 486 + .z-source.z-shell.z-bash 487 + .z-meta.z-function.z-shell 488 + .z-meta.z-compound.z-shell 489 + .z-meta.z-function-call.z-identifier.z-shell { 490 + color: #f5bde6; 491 + } 492 + html[data-theme="dark"] .z-variable.z-language.z-shell { 493 + color: #ed8796; 494 + font-style: italic; 495 + } 496 + html[data-theme="dark"] 497 + .z-source.z-lua 498 + .z-meta.z-function.z-lua 499 + .z-meta.z-block.z-lua 500 + .z-meta.z-mapping.z-value.z-lua 501 + .z-meta.z-mapping.z-key.z-lua 502 + .z-string.z-unquoted.z-key.z-lua { 503 + color: #b7bdf8; 504 + font-style: italic; 505 + } 506 + html[data-theme="dark"] 507 + .z-source.z-lua 508 + .z-meta.z-function.z-lua 509 + .z-meta.z-block.z-lua 510 + .z-meta.z-mapping.z-key.z-lua 511 + .z-string.z-unquoted.z-key.z-lua { 512 + color: #f0c6c6; 513 + } 514 + html[data-theme="dark"] .z-entity.z-name.z-constant.z-java { 515 + color: #8bd5ca; 516 + } 517 + html[data-theme="dark"] .z-support.z-type.z-property-name.z-css { 518 + color: #f0c6c6; 519 + font-style: italic; 520 + } 521 + html[data-theme="dark"] .z-support.z-constant.z-property-value.z-css { 522 + color: #cad3f5; 523 + } 524 + html[data-theme="dark"] .z-constant.z-numeric.z-suffix.z-css, 525 + .z-keyword.z-other.z-unit.z-css { 526 + color: #8bd5ca; 527 + font-style: italic; 528 + } 529 + html[data-theme="dark"] .z-variable.z-other.z-custom-property.z-name.z-css, 530 + .z-support.z-type.z-custom-property.z-name.z-css, 531 + .z-punctuation.z-definition.z-custom-property.z-css { 532 + color: #8bd5ca; 533 + } 534 + html[data-theme="dark"] .z-entity.z-name.z-tag.z-css { 535 + color: #b7bdf8; 536 + } 537 + html[data-theme="dark"] .z-variable.z-other.z-sass { 538 + color: #8bd5ca; 539 + } 540 + html[data-theme="dark"] .z-invalid { 541 + color: #cad3f5; 542 + background-color: #ed8796; 543 + } 544 + html[data-theme="dark"] .z-invalid.z-deprecated { 545 + color: #cad3f5; 546 + background-color: #c6a0f6; 547 + } 548 + html[data-theme="dark"] .z-meta.z-diff, 549 + .z-meta.z-diff.z-header { 550 + color: #6e738d; 551 + } 552 + html[data-theme="dark"] .z-markup.z-deleted { 553 + color: #ed8796; 554 + } 555 + html[data-theme="dark"] .z-markup.z-inserted { 556 + color: #a6da95; 557 + } 558 + html[data-theme="dark"] .z-markup.z-changed { 559 + color: #eed49f; 560 + } 561 + html[data-theme="dark"] .z-message.z-error { 562 + color: #ed8796; 563 + }
+1 -16
templates/head.html
··· 65 65 <link 66 66 rel="stylesheet" 67 67 type="text/css" 68 - href="https://speyll.github.io/suCSS/reset-min.css" 69 - /> 70 - <link 71 - rel="stylesheet" 72 - type="text/css" 73 - href="https://speyll.github.io/suCSS/suCSS-min.css" 74 - /> 75 - <link 76 - rel="stylesheet" 77 - type="text/css" 78 - href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}" 79 - /> 80 - <link 81 - rel="stylesheet" 82 - type="text/css" 83 - href="{{ get_url(path='css/syntax-theme.css', trailing_slash=false) | safe }}" 68 + href="{{ get_url(path='css/main.css', trailing_slash=false) | safe }}" 84 69 /> 85 70 {% endblock css %} 86 71 <script