├── .babelrc ├── .gitignore ├── README.md ├── _site ├── README.md ├── dist │ ├── elementalcss.classless.css │ ├── elementalcss.classless.min.css │ ├── elementalcss.css │ ├── elementalcss.min.css │ ├── elementalcss.utility.css │ └── elementalcss.utility.min.css ├── feed.xml ├── gulpfile.babel.js ├── package-lock.json ├── package.json ├── redirects.json ├── robots.txt ├── scss │ ├── elementalcss.classless.scss │ ├── elementalcss.scss │ └── elementalcss.utility.scss └── sitemap.xml ├── dist ├── elementalcss.classless.css ├── elementalcss.classless.min.css ├── elementalcss.css ├── elementalcss.min.css ├── elementalcss.utility.css └── elementalcss.utility.min.css ├── gulpfile.babel.js ├── package-lock.json ├── package.json └── scss ├── effects ├── _animations.scss ├── _index.scss ├── _loader.scss └── _shadows.scss ├── elementalcss.classless.scss ├── elementalcss.scss ├── elementalcss.utility.scss ├── html ├── _anchor.scss ├── _button.scss ├── _dialog.scss ├── _heading.scss ├── _hr.scss ├── _index.scss ├── _input.scss ├── _list.scss ├── _navigation.scss ├── _other.scss ├── _reset.scss ├── _table.scss └── _typography.scss ├── lib ├── _functions.scss └── _responsive.scss ├── utils ├── _accessibility.scss ├── _app.scss ├── _aspect-ratio.scss ├── _background.scss ├── _border.scss ├── _colours.scss ├── _columns.scss ├── _display.scss ├── _fit.scss ├── _flex.scss ├── _float.scss ├── _font.scss ├── _gap.scss ├── _grid.scss ├── _index.scss ├── _list.scss ├── _margins.scss ├── _opacity.scss ├── _order.scss ├── _outline.scss ├── _overflow.scss ├── _padding.scss ├── _position-content.scss ├── _positions.scss ├── _print.scss ├── _table.scss ├── _typography.scss ├── _visibility.scss └── _width-height.scss └── vars ├── _borders.scss ├── _colours-output.scss ├── _colours.scss ├── _fonts.scss ├── _index.scss ├── _numbers.scss ├── _positions.scss ├── _sizes.scss └── _typography.scss /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "@babel/preset-env" ] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ElementalCSS 2 | 3 | A classless CSS library with added utility classes. 4 | 5 | You can use the following urls to link ElementalCSS to your site: 6 | 7 | * `https://cdn.jsdelivr.net/gh/BinaryMoon/ElementalCSS/dist/elementalcss.min.css` 8 | * `https://cdn.jsdelivr.net/gh/BinaryMoon/ElementalCSS/dist/elementalcss.classless.min.css` 9 | * `https://cdn.jsdelivr.net/gh/BinaryMoon/ElementalCSS/dist/elementalcss.utility.min.css` 10 | 11 | More information is available on the website: [](https://elementalcss.com) -------------------------------------------------------------------------------- /_site/README.md: -------------------------------------------------------------------------------- 1 | # ElementalCSS 2 | 3 | A classless CSS library with added utility classes. 4 | 5 | You can use the following urls to link ElementalCSS to your site: 6 | 7 | * `https://cdn.jsdelivr.net/gh/BinaryMoon/ElementalCSS/dist/elementalcss.min.css` 8 | * `https://cdn.jsdelivr.net/gh/BinaryMoon/ElementalCSS/dist/elementalcss.classless.min.css` 9 | * `https://cdn.jsdelivr.net/gh/BinaryMoon/ElementalCSS/dist/elementalcss.utility.min.css` 10 | 11 | More information is available on the website: [](https://elementalcss.com) -------------------------------------------------------------------------------- /_site/dist/elementalcss.classless.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --border-width: 1px; 3 | --border-radius: var( --size-1 ); 4 | } 5 | 6 | :root { 7 | --color-black: #000000; 8 | --color-gray4: #111827; 9 | --color-gray3: #374151; 10 | --color-gray2: #6B7280; 11 | --color-gray1: #D7DAE0; 12 | --color-white: #FFFFFF; 13 | --color-blue-light: #72aee6; 14 | --color-blue: #2271b1; 15 | --color-blue-dark: #043959; 16 | --color-red-light: #ff8085; 17 | --color-red: #d63638; 18 | --color-red-dark: #631919; 19 | --color-green-light: #2fdc5b; 20 | --color-green: #06ae2d; 21 | --color-green-dark: #00450c; 22 | --color-yellow-light: #ecd8a2; 23 | --color-yellow: #f0c33c; 24 | --color-yellow-dark: #9d7e20; 25 | --color-bg: var( --color-white ); 26 | --color-fg: var( --color-gray4 ); 27 | --color-bg-accent: var( --color-blue ); 28 | --color-fg-accent: var( --color-white ); 29 | --color-bg-highlight: var( --color-yellow ); 30 | --color-fg-highlight: var( --color-black ); 31 | --color-pop: var( --color-gray1 ); 32 | --color-link: var( --color-blue-dark ); 33 | --color-border: var( --color-gray1 ); 34 | --color-code: var( --color-green ); 35 | } 36 | 37 | /* Dark theme */ 38 | @media (prefers-color-scheme: dark) { 39 | :root body:not(.disable-dark-mode) { 40 | --color-bg: var( --color-gray4 ); 41 | --color-fg: var( --color-gray1 ); 42 | --color-bg-accent: var( --color-yellow ); 43 | --color-fg-accent: var( --color-black ); 44 | --color-pop: var( --color-black ); 45 | --color-link: var( --color-yellow ); 46 | --color-border: var( --color-gray3 ); 47 | --color-code: var( --color-green ); 48 | } 49 | } 50 | :root { 51 | --font-arial: Arial, Helvetica Neue, Helvetica, Liberation Sans, sans-serif; 52 | --font-arial-black: Arial Black, Arial Bold, Gadget, sans-serif; 53 | --font-arial-narrow: Arial Narrow, Arial, sans-serif; 54 | --font-arial-rounded: Arial Rounded MT Bold, Arial Rounded Bold, Helvetica Rounded, Arial, sans-serif; 55 | --font-avenir: Avenir Next, Avenir, sans-serif; 56 | --font-baskerville: Baskerville, Baskerville Old Face, Hoefler Text, Garamond, Times New Roman, serif; 57 | --font-book-antiqua: Book Antiqua, Baskerville, Palatino, Georgia, serif; 58 | --font-bookman: Bookman, Bookman Old Style, Book Antiqua, Charter, Palatino, URW Bookman, serif; 59 | --font-century-gothic: Century Gothic, CenturyGothic, Franklin Gothic, URW Gothic, AppleGothic, sans-serif; 60 | --font-comic-sans: Chalkboard, Comic Sans, Comic Sans MS, cursive, sans-serif; 61 | --font-consolas: Consolas, Menlo, Monaco, Liberation Mono, monospace; 62 | --font-courier-new: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; 63 | --font-franklin-gothic: Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif; 64 | --font-futura: Futura, Trebuchet MS, Arial, sans-serif; 65 | --font-futura-condensed: Futura Condensed, Futura PT Condensed, Futura, Trebuchet MS, Arial, sans-serif; 66 | --font-garamond: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif; 67 | --font-geneva: Geneva, Tahoma, Verdana, DejaVu Sans, Bitstream Vera Sans, sans-serif; 68 | --font-georgia: Georgia, Times, Times New Roman, serif; 69 | --font-gill-sans: Gill Sans, Gill Sans MT, Century Gothic, Calibri, sans-serif; 70 | --font-haettenschweiler: Haettenschweiler, Din Condensed, Arial Narrow Bold, sans-serif; 71 | --font-helvetica: Helvetica Neue, Helvetica, Arial, sans-serif; 72 | --font-hoefler: Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif; 73 | --font-impact: Impact, Haettenschweiler, Arial Narrow Bold, sans-serif; 74 | --font-lucida-bright: Lucida Bright, Baskerville, Georgia, serif; 75 | --font-lucida-console: Lucida Console, Lucida Sans Typewriter, PT Mono, monaco, monospace; 76 | --font-lucida-grande: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif; 77 | --font-oswald: Oswald, Din Condensed, Impact, Haettenschweiler, Arial Narrow Bold, sans-serif; 78 | --font-palatino: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, URW Palladio, Georgia, serif; 79 | --font-system: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 80 | --font-system-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; 81 | --font-tahoma: Tahoma, Verdana, Segoe, sans-serif; 82 | --font-times-new-roman: TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, Liberation Serif, FreeSerif, serif; 83 | --font-trebuchet: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; 84 | --font-verdana: Verdana, Geneva, DejaVu Sans, sans-serif; 85 | --font-main: var( --font-system ); 86 | --font-monospace: var( --font-system-monospace ); 87 | --line-length: 60ch; 88 | } 89 | 90 | .font-arial { 91 | font-family: var(--font-arial); 92 | } 93 | 94 | .font-arial-black { 95 | font-family: var(--font-arial-black); 96 | } 97 | 98 | .font-arial-narrow { 99 | font-family: var(--font-arial-narrow); 100 | } 101 | 102 | .font-arial-rounded { 103 | font-family: var(--font-arial-rounded); 104 | } 105 | 106 | .font-avenir { 107 | font-family: var(--font-avenir); 108 | } 109 | 110 | .font-baskerville { 111 | font-family: var(--font-baskerville); 112 | } 113 | 114 | .font-book-antiqua { 115 | font-family: var(--font-book-antiqua); 116 | } 117 | 118 | .font-bookman { 119 | font-family: var(--font-bookman); 120 | } 121 | 122 | .font-century-gothic { 123 | font-family: var(--font-century-gothic); 124 | } 125 | 126 | .font-comic-sans { 127 | font-family: var(--font-comic-sans); 128 | } 129 | 130 | .font-consolas { 131 | font-family: var(--font-consolas); 132 | } 133 | 134 | .font-courier-new { 135 | font-family: var(--font-courier-new); 136 | } 137 | 138 | .font-franklin-gothic { 139 | font-family: var(--font-franklin-gothic); 140 | } 141 | 142 | .font-futura { 143 | font-family: var(--font-futura); 144 | } 145 | 146 | .font-futura-condensed { 147 | font-family: var(--font-futura-condensed); 148 | } 149 | 150 | .font-garamond { 151 | font-family: var(--font-garamond); 152 | } 153 | 154 | .font-geneva { 155 | font-family: var(--font-geneva); 156 | } 157 | 158 | .font-georgia { 159 | font-family: var(--font-georgia); 160 | } 161 | 162 | .font-gill-sans { 163 | font-family: var(--font-gill-sans); 164 | } 165 | 166 | .font-haettenschweiler { 167 | font-family: var(--font-haettenschweiler); 168 | } 169 | 170 | .font-helvetica { 171 | font-family: var(--font-helvetica); 172 | } 173 | 174 | .font-hoefler { 175 | font-family: var(--font-hoefler); 176 | } 177 | 178 | .font-impact { 179 | font-family: var(--font-impact); 180 | } 181 | 182 | .font-lucida-bright { 183 | font-family: var(--font-lucida-bright); 184 | } 185 | 186 | .font-lucida-console { 187 | font-family: var(--font-lucida-console); 188 | } 189 | 190 | .font-lucida-grande { 191 | font-family: var(--font-lucida-grande); 192 | } 193 | 194 | .font-oswald { 195 | font-family: var(--font-oswald); 196 | } 197 | 198 | .font-palatino { 199 | font-family: var(--font-palatino); 200 | } 201 | 202 | .font-system { 203 | font-family: var(--font-system); 204 | } 205 | 206 | .font-system-monospace { 207 | font-family: var(--font-system-monospace); 208 | } 209 | 210 | .font-tahoma { 211 | font-family: var(--font-tahoma); 212 | } 213 | 214 | .font-times-new-roman { 215 | font-family: var(--font-times-new-roman); 216 | } 217 | 218 | .font-trebuchet { 219 | font-family: var(--font-trebuchet); 220 | } 221 | 222 | .font-verdana { 223 | font-family: var(--font-verdana); 224 | } 225 | 226 | :root { 227 | --size-base: 0.15rem; 228 | --size-0: 0; 229 | --size-1: var(--size-base); 230 | --size-2: calc(var(--size-base) * 2); 231 | --size-3: calc(var(--size-base) * 4); 232 | --size-4: calc(var(--size-base) * 8); 233 | --size-5: calc(var(--size-base) * 16); 234 | --size-6: calc(var(--size-base) * 32); 235 | --size-7: calc(var(--size-base) * 64); 236 | --size-8: calc(var(--size-base) * 128); 237 | --size-9: calc(var(--size-base) * 256); 238 | --size-10: calc(var(--size-base) * 512); 239 | } 240 | @media only screen and (min-width: 32em) { 241 | :root { 242 | --size-base: 0.2rem; 243 | } 244 | } 245 | @media only screen and (min-width: 64em) { 246 | :root { 247 | --size-base: 0.25rem; 248 | } 249 | } 250 | 251 | :root { 252 | --type-scale: 1.125; 253 | --type-base: 1rem; 254 | --type-size-6: calc(var(--type-base) / var(--type-scale)); 255 | --type-size-5: var(--type-base); 256 | --type-size-4: calc(var(--type-base) * var(--type-scale)); 257 | --type-size-3: calc(var(--type-base) * var(--type-scale) * var(--type-scale)); 258 | --type-size-2: calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale)); 259 | --type-size-1: calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale)); 260 | --type-lh-1: 1.1; 261 | --type-lh-2: 1.618; 262 | --type-ls-1: 0.1em; 263 | } 264 | @media only screen and (min-width: 32em) { 265 | :root { 266 | --type-scale: 1.25; 267 | } 268 | } 269 | @media only screen and (min-width: 64em) { 270 | :root { 271 | --type-scale: 1.414; 272 | } 273 | } 274 | 275 | *, 276 | *::before, 277 | *::after { 278 | box-sizing: border-box; 279 | } 280 | 281 | * { 282 | margin: 0; 283 | } 284 | 285 | :focus:not(:focus-visible), 286 | [tabindex="-1"]:focus { 287 | outline: none; 288 | } 289 | 290 | div > :first-child, 291 | main > :first-child, 292 | section > :first-child, 293 | article > :first-child, 294 | blockquote > :first-child, 295 | header > :first-child, 296 | footer > :first-child, 297 | aside > :first-child, 298 | figure > :first-child, 299 | figcaption > :first-child { 300 | margin-top: 0; 301 | } 302 | div > :last-child, 303 | main > :last-child, 304 | section > :last-child, 305 | article > :last-child, 306 | blockquote > :last-child, 307 | header > :last-child, 308 | footer > :last-child, 309 | aside > :last-child, 310 | figure > :last-child, 311 | figcaption > :last-child { 312 | margin-bottom: 0; 313 | } 314 | 315 | html { 316 | height: 100%; 317 | font-size: 16px; 318 | accent-color: var(--color-bg-accent); 319 | scroll-behavior: smooth; 320 | -webkit-text-size-adjust: none; 321 | -moz-text-size-adjust: none; 322 | text-size-adjust: none; 323 | } 324 | html:focus-within { 325 | scroll-behavior: smooth; 326 | } 327 | 328 | body { 329 | min-height: 100vh; 330 | text-rendering: optimizeSpeed; 331 | -webkit-font-smoothing: antialiased; 332 | background: var(--color-bg); 333 | color: var(--color-fg); 334 | font-size: var(--type-base); 335 | line-height: var(--type-lh-2); 336 | font-family: var(--font-main); 337 | } 338 | 339 | body, 340 | p, 341 | h1, h2, h3, h4, 342 | figure, 343 | blockquote, 344 | dl, 345 | dd { 346 | margin: 0; 347 | } 348 | 349 | img, 350 | video, 351 | canvas, 352 | svg, 353 | picture { 354 | max-width: 100%; 355 | display: block; 356 | height: auto; 357 | } 358 | 359 | @media (prefers-reduced-motion: reduce) { 360 | html:focus-within { 361 | scroll-behavior: auto; 362 | } 363 | *, 364 | *::before, 365 | *::after { 366 | animation-duration: 0.01ms !important; 367 | animation-iteration-count: 1 !important; 368 | transition-duration: 0.01ms !important; 369 | scroll-behavior: auto !important; 370 | } 371 | } 372 | ::target-text { 373 | background: var(--color-bg-highlight); 374 | color: var(--color-fg-highlight); 375 | } 376 | 377 | [id] { 378 | scroll-margin-top: 2ex; 379 | } 380 | 381 | @media (prefers-reduced-motion: reduce) { 382 | * { 383 | animation-duration: 0.001 !important; 384 | transition-duration: 0.001 !important; 385 | scroll-behavior: auto; 386 | } 387 | } 388 | /* Screen Reader Text: meant only for screen readers. */ 389 | .screen-reader-text { 390 | border: 0; 391 | clip: rect(1px, 1px, 1px, 1px); 392 | -webkit-clip-path: inset(50%); 393 | clip-path: inset(50%); 394 | position: absolute !important; 395 | padding: 0; 396 | margin: -1px; 397 | height: 1px; 398 | width: 1px; 399 | overflow: hidden; 400 | word-wrap: normal !important; 401 | } 402 | .screen-reader-text:focus { 403 | font-weight: bold; 404 | clip: auto !important; 405 | display: block; 406 | height: auto; 407 | width: auto; 408 | z-index: 99999; 409 | padding: var(--size-2); 410 | background: var(--color-bg-accent); 411 | color: var(--color-fg-accent); 412 | left: var(--size-2); 413 | top: var(--size-2); 414 | max-width: var(--size-7); 415 | } 416 | 417 | .f-fw100 { 418 | font-weight: 100; 419 | } 420 | .f-fw200 { 421 | font-weight: 200; 422 | } 423 | .f-fw300 { 424 | font-weight: 300; 425 | } 426 | .f-fw400 { 427 | font-weight: 400; 428 | } 429 | .f-fw500 { 430 | font-weight: 500; 431 | } 432 | .f-fw600 { 433 | font-weight: 600; 434 | } 435 | .f-fw700 { 436 | font-weight: 700; 437 | } 438 | .f-fw800 { 439 | font-weight: 800; 440 | } 441 | .f-fw900 { 442 | font-weight: 900; 443 | } 444 | .f-fs-i { 445 | font-style: italic; 446 | } 447 | .f-fs-n { 448 | font-style: normal; 449 | } 450 | .f1 { 451 | font-size: var(--type-size-1); 452 | line-height: var(--type-lh-1); 453 | } 454 | .f2, h1 { 455 | font-size: var(--type-size-2); 456 | line-height: var(--type-lh-1); 457 | } 458 | .f3, h2 { 459 | font-size: var(--type-size-3); 460 | line-height: var(--type-lh-1); 461 | } 462 | .f4, h3, .screen-reader-text:focus { 463 | font-size: var(--type-size-4); 464 | line-height: var(--type-lh-2); 465 | } 466 | .f5, h4 { 467 | font-size: var(--type-size-5); 468 | line-height: var(--type-lh-2); 469 | } 470 | .f6, sub, 471 | sup, small, h6, h5 { 472 | font-size: var(--type-size-6); 473 | line-height: var(--type-lh-2); 474 | letter-spacing: var(--type-ls-1); 475 | } 476 | 477 | @media only screen and (min-width: 32em) { 478 | .t\:f-fw100 { 479 | font-weight: 100; 480 | } 481 | .t\:f-fw200 { 482 | font-weight: 200; 483 | } 484 | .t\:f-fw300 { 485 | font-weight: 300; 486 | } 487 | .t\:f-fw400 { 488 | font-weight: 400; 489 | } 490 | .t\:f-fw500 { 491 | font-weight: 500; 492 | } 493 | .t\:f-fw600 { 494 | font-weight: 600; 495 | } 496 | .t\:f-fw700 { 497 | font-weight: 700; 498 | } 499 | .t\:f-fw800 { 500 | font-weight: 800; 501 | } 502 | .t\:f-fw900 { 503 | font-weight: 900; 504 | } 505 | .t\:f-fs-i { 506 | font-style: italic; 507 | } 508 | .t\:f-fs-n { 509 | font-style: normal; 510 | } 511 | .t\:f1 { 512 | font-size: var(--type-size-1); 513 | line-height: var(--type-lh-1); 514 | } 515 | .t\:f2 { 516 | font-size: var(--type-size-2); 517 | line-height: var(--type-lh-1); 518 | } 519 | .t\:f3 { 520 | font-size: var(--type-size-3); 521 | line-height: var(--type-lh-1); 522 | } 523 | .t\:f4 { 524 | font-size: var(--type-size-4); 525 | line-height: var(--type-lh-2); 526 | } 527 | .t\:f5 { 528 | font-size: var(--type-size-5); 529 | line-height: var(--type-lh-2); 530 | } 531 | .t\:f6 { 532 | font-size: var(--type-size-6); 533 | line-height: var(--type-lh-2); 534 | letter-spacing: var(--type-ls-1); 535 | } 536 | } 537 | @media only screen and (min-width: 64em) { 538 | .d\:f-fw100 { 539 | font-weight: 100; 540 | } 541 | .d\:f-fw200 { 542 | font-weight: 200; 543 | } 544 | .d\:f-fw300 { 545 | font-weight: 300; 546 | } 547 | .d\:f-fw400 { 548 | font-weight: 400; 549 | } 550 | .d\:f-fw500 { 551 | font-weight: 500; 552 | } 553 | .d\:f-fw600 { 554 | font-weight: 600; 555 | } 556 | .d\:f-fw700 { 557 | font-weight: 700; 558 | } 559 | .d\:f-fw800 { 560 | font-weight: 800; 561 | } 562 | .d\:f-fw900 { 563 | font-weight: 900; 564 | } 565 | .d\:f-fs-i { 566 | font-style: italic; 567 | } 568 | .d\:f-fs-n { 569 | font-style: normal; 570 | } 571 | .d\:f1 { 572 | font-size: var(--type-size-1); 573 | line-height: var(--type-lh-1); 574 | } 575 | .d\:f2 { 576 | font-size: var(--type-size-2); 577 | line-height: var(--type-lh-1); 578 | } 579 | .d\:f3 { 580 | font-size: var(--type-size-3); 581 | line-height: var(--type-lh-1); 582 | } 583 | .d\:f4 { 584 | font-size: var(--type-size-4); 585 | line-height: var(--type-lh-2); 586 | } 587 | .d\:f5 { 588 | font-size: var(--type-size-5); 589 | line-height: var(--type-lh-2); 590 | } 591 | .d\:f6 { 592 | font-size: var(--type-size-6); 593 | line-height: var(--type-lh-2); 594 | letter-spacing: var(--type-ls-1); 595 | } 596 | } 597 | .outline, summary:active, summary:focus, input:active, input:focus, 598 | button:active, 599 | select:active, 600 | select:focus, 601 | textarea:active, 602 | textarea:focus, .btn:focus, 603 | button:focus, 604 | [role=button]:focus, 605 | [type=submit]:focus, 606 | [type=reset]:focus, 607 | [type=button]:focus, a:focus, .screen-reader-text:focus { 608 | outline: var(--size-1) solid var(--color-bg-highlight); 609 | outline-offset: var(--size-1); 610 | } 611 | 612 | .overflow { 613 | overflow: auto; 614 | } 615 | .overflow-truncate { 616 | overflow: hidden; 617 | text-overflow: ellipsis; 618 | } 619 | .overflow-hidden { 620 | overflow: hidden; 621 | } 622 | .overflow-visible { 623 | overflow: visible; 624 | } 625 | .overflow-scroll, pre { 626 | overflow: scroll; 627 | } 628 | .overflow-auto { 629 | overflow: auto; 630 | } 631 | .overflow-auto::-webkit-scrollbar, .overflow-scroll::-webkit-scrollbar, pre::-webkit-scrollbar { 632 | width: var(--size-3); 633 | height: var(--size-3); 634 | } 635 | .overflow-auto::-webkit-scrollbar-track, .overflow-scroll::-webkit-scrollbar-track, pre::-webkit-scrollbar-track { 636 | background: var(--color-fg); 637 | } 638 | .overflow-auto::-webkit-scrollbar-thumb, .overflow-scroll::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb { 639 | background: var(--color-fg-accent); 640 | border: 1px solid var(--color-fg); 641 | } 642 | 643 | a { 644 | -webkit-text-decoration-skip: ink; 645 | text-decoration-skip-ink: auto; 646 | text-underline-offset: 0.1em; 647 | text-decoration-thickness: 0.15em; 648 | cursor: pointer; 649 | color: var(--color-link); 650 | } 651 | a:hover { 652 | text-decoration: none; 653 | } 654 | 655 | button, 656 | [type=submit], 657 | [type=reset], 658 | [type=button] { 659 | -webkit-appearance: button; 660 | } 661 | 662 | .btn, 663 | button, 664 | [role=button], 665 | [type=submit], 666 | [type=reset], 667 | [type=button] { 668 | font: inherit; 669 | border: none; 670 | text-decoration: none; 671 | display: inline-block; 672 | border-radius: var(--border-radius); 673 | padding: var(--size-1) var(--size-3); 674 | } 675 | .btn:not([class*=bg-]), 676 | button:not([class*=bg-]), 677 | [role=button]:not([class*=bg-]), 678 | [type=submit]:not([class*=bg-]), 679 | [type=reset]:not([class*=bg-]), 680 | [type=button]:not([class*=bg-]) { 681 | background: var(--color-bg-accent); 682 | color: var(--color-fg-accent); 683 | } 684 | .btn:hover, 685 | button:hover, 686 | [role=button]:hover, 687 | [type=submit]:hover, 688 | [type=reset]:hover, 689 | [type=button]:hover { 690 | cursor: pointer; 691 | } 692 | .btn:disabled, 693 | button:disabled, 694 | [role=button]:disabled, 695 | [type=submit]:disabled, 696 | [type=reset]:disabled, 697 | [type=button]:disabled { 698 | opacity: 0.5; 699 | cursor: not-allowed; 700 | } 701 | 702 | h1, 703 | h2, 704 | h3, 705 | h4, 706 | h5, 707 | h6 { 708 | overflow-wrap: break-word; 709 | margin-top: var(--size-5); 710 | margin-bottom: var(--size-4); 711 | text-wrap: balance; 712 | } 713 | h1 a, 714 | h2 a, 715 | h3 a, 716 | h4 a, 717 | h5 a, 718 | h6 a { 719 | text-decoration-color: var(--color-link); 720 | -webkit-text-decoration-skip-ink: all; 721 | text-decoration-skip-ink: all; 722 | color: inherit; 723 | } 724 | 725 | h3, 726 | h4, 727 | h5, 728 | h6 { 729 | margin-top: var(--size-4); 730 | } 731 | 732 | hr { 733 | background: currentColor; 734 | border: none; 735 | height: var(--size-1); 736 | margin: var(--size-5) auto; 737 | color: inherit; 738 | opacity: 0.25; 739 | } 740 | 741 | input, 742 | select, 743 | textarea { 744 | border-style: solid; 745 | border-width: var(--border-width); 746 | } 747 | 748 | input, 749 | button, 750 | select, 751 | textarea { 752 | font: inherit; 753 | box-shadow: none; 754 | border-radius: var(--border-radius); 755 | line-height: var(--type-lh-2); 756 | padding: var(--size-1) var(--size-3); 757 | max-width: 100%; 758 | } 759 | input:active:invalid, input:focus:invalid, 760 | button:active:invalid, 761 | button:focus:invalid, 762 | select:active:invalid, 763 | select:focus:invalid, 764 | textarea:active:invalid, 765 | textarea:focus:invalid { 766 | outline: 0.2rem red solid; 767 | } 768 | input:disabled, 769 | button:disabled, 770 | select:disabled, 771 | textarea:disabled { 772 | opacity: 0.5; 773 | cursor: not-allowed; 774 | } 775 | 776 | /* Make the textarea wider than other inputs */ 777 | textarea { 778 | width: 100%; 779 | resize: vertical; 780 | } 781 | @media only screen and (min-width: 32em) { 782 | textarea { 783 | width: 60%; 784 | } 785 | } 786 | 787 | /* Ensures the checkbox and radio inputs do not have a set width like other input fields */ 788 | [type=checkbox], 789 | [type=radio] { 790 | width: 1.5em; 791 | height: 1.5em; 792 | } 793 | [type=checkbox]:hover, 794 | [type=radio]:hover { 795 | cursor: pointer; 796 | } 797 | 798 | [type=search]:before { 799 | display: block; 800 | content: " "; 801 | background: green; 802 | width: 10px; 803 | height: 10px; 804 | } 805 | 806 | [type=color] { 807 | padding: 0; 808 | border: none; 809 | } 810 | 811 | [type=file] { 812 | border: none; 813 | padding: 0; 814 | } 815 | 816 | .dropzone[type=file] { 817 | width: 100%; 818 | border: var(--size-1) dashed currentColor; 819 | padding: var(--size-4); 820 | border-radius: var(--size-2); 821 | } 822 | 823 | ::file-selector-button { 824 | font: inherit; 825 | padding: var(--size-1) var(--size-3); 826 | margin-inline-end: var(--size-3); 827 | } 828 | ::file-selector-button:hover { 829 | cursor: pointer; 830 | } 831 | 832 | ::-webkit-file-upload-button { 833 | font: inherit; 834 | -webkit-appearance: button; 835 | padding: var(--size-1) var(--size-3); 836 | margin-inline-end: var(--size-3); 837 | } 838 | ::-webkit-file-upload-button:hover { 839 | cursor: pointer; 840 | } 841 | 842 | label { 843 | font-weight: bold; 844 | display: block; 845 | margin-top: var(--size-1); 846 | margin-bottom: var(--size-1); 847 | } 848 | 849 | fieldset { 850 | margin-top: var(--size-4); 851 | margin-bottom: var(--size-4); 852 | padding: var(--size-3); 853 | border: var(--border-width) solid var(--color-border); 854 | } 855 | 856 | legend { 857 | padding-left: var(--size-2); 858 | padding-right: var(--size-2); 859 | font-weight: bold; 860 | } 861 | legend > * { 862 | margin: 0; 863 | } 864 | 865 | dd, 866 | dt, 867 | li { 868 | margin-top: var(--size-1); 869 | margin-bottom: var(--size-1); 870 | } 871 | 872 | dt { 873 | font-weight: bold; 874 | } 875 | 876 | dd:not(:last-of-type) { 877 | margin-bottom: var(--size-3); 878 | } 879 | 880 | nav ul { 881 | list-style-type: none; 882 | padding: 0; 883 | } 884 | nav ul ul { 885 | padding-inline-start: var(--size-3); 886 | } 887 | 888 | mark { 889 | padding: var(--size-1) var(--size-2); 890 | background: var(--color-bg-highlight); 891 | color: var(--color-fg-highlight); 892 | } 893 | 894 | figure { 895 | margin: 0; 896 | } 897 | 898 | figcaption { 899 | text-align: center; 900 | font-size: var(--type-size-6); 901 | } 902 | 903 | blockquote { 904 | font-style: italic; 905 | padding-left: var(--size-4); 906 | font-size: var(--type-size-4); 907 | margin-top: var(--size-4); 908 | margin-bottom: var(--size-4); 909 | border-left: var(--size-2) solid currentColor; 910 | } 911 | 912 | cite { 913 | font-style: normal; 914 | font-size: var(--type-size-6); 915 | } 916 | 917 | /* Use mono font for code like elements */ 918 | code, 919 | pre, 920 | kbd, 921 | samp { 922 | font-family: var(--font-monospace); 923 | color: var(--color-code); 924 | background: white; 925 | padding: var(--size-1) var(--size-2); 926 | border-radius: var(--size-1); 927 | } 928 | 929 | kbd { 930 | line-height: 1; 931 | border-radius: var(--border-radius); 932 | border: 1px solid var(--color-code); 933 | border-bottom: 2px solid var(--color-code); 934 | padding: var(--size-1) var(--size-2); 935 | font-family: var(--font-monospace); 936 | } 937 | 938 | pre { 939 | max-width: 100%; 940 | overflow: auto; 941 | padding: var(--size-3) var(--size-4); 942 | background: var(--color-gray4); 943 | border-radius: var(--border-radius); 944 | } 945 | pre code { 946 | background: none; 947 | margin: 0; 948 | padding: 0; 949 | } 950 | 951 | details *:last-child { 952 | margin-bottom: 0; 953 | } 954 | 955 | summary { 956 | font-weight: bold; 957 | } 958 | summary:hover { 959 | cursor: pointer; 960 | } 961 | summary > * { 962 | display: inline; 963 | } 964 | 965 | iframe { 966 | border: 0; 967 | border: 1px solid var(--color-gray3); 968 | } 969 | 970 | table caption, 971 | table th { 972 | text-align: left; 973 | font-weight: bold; 974 | } 975 | table caption, 976 | table th, table td { 977 | padding: var(--size-1); 978 | display: block; 979 | vertical-align: top; 980 | word-break: break-word; 981 | min-width: var(--size-5); 982 | overflow-x: auto; 983 | } 984 | @media only screen and (min-width: 32em) { 985 | table caption, 986 | table th, table td { 987 | display: table-cell; 988 | } 989 | } 990 | 991 | p { 992 | margin-top: var(--size-4); 993 | margin-bottom: var(--size-4); 994 | overflow-wrap: break-word; 995 | } 996 | 997 | sub, 998 | sup { 999 | line-height: 0; 1000 | position: relative; 1001 | vertical-align: baseline; 1002 | padding: 0 0.1em; 1003 | } 1004 | 1005 | sub { 1006 | bottom: -0.25em; 1007 | } 1008 | 1009 | sup { 1010 | top: -0.5em; 1011 | } 1012 | 1013 | strong { 1014 | font-weight: 700; 1015 | } -------------------------------------------------------------------------------- /_site/dist/elementalcss.classless.min.css: -------------------------------------------------------------------------------- 1 | :root{--border-width:1px;--border-radius:var( --size-1 );--color-black:#000000;--color-gray4:#111827;--color-gray3:#374151;--color-gray2:#6B7280;--color-gray1:#D7DAE0;--color-white:#FFFFFF;--color-blue-light:#72aee6;--color-blue:#2271b1;--color-blue-dark:#043959;--color-red-light:#ff8085;--color-red:#d63638;--color-red-dark:#631919;--color-green-light:#2fdc5b;--color-green:#06ae2d;--color-green-dark:#00450c;--color-yellow-light:#ecd8a2;--color-yellow:#f0c33c;--color-yellow-dark:#9d7e20;--color-bg:var( --color-white );--color-fg:var( --color-gray4 );--color-bg-accent:var( --color-blue );--color-fg-accent:var( --color-white );--color-bg-highlight:var( --color-yellow );--color-fg-highlight:var( --color-black );--color-pop:var( --color-gray1 );--color-link:var( --color-blue-dark );--color-border:var( --color-gray1 );--color-code:var( --color-green );--font-arial:Arial,Helvetica Neue,Helvetica,Liberation Sans,sans-serif;--font-arial-black:Arial Black,Arial Bold,Gadget,sans-serif;--font-arial-narrow:Arial Narrow,Arial,sans-serif;--font-arial-rounded:Arial Rounded MT Bold,Arial Rounded Bold,Helvetica Rounded,Arial,sans-serif;--font-avenir:Avenir Next,Avenir,sans-serif;--font-baskerville:Baskerville,Baskerville Old Face,Hoefler Text,Garamond,Times New Roman,serif;--font-book-antiqua:Book Antiqua,Baskerville,Palatino,Georgia,serif;--font-bookman:Bookman,Bookman Old Style,Book Antiqua,Charter,Palatino,URW Bookman,serif;--font-century-gothic:Century Gothic,CenturyGothic,Franklin Gothic,URW Gothic,AppleGothic,sans-serif;--font-comic-sans:Chalkboard,Comic Sans,Comic Sans MS,cursive,sans-serif;--font-consolas:Consolas,Menlo,Monaco,Liberation Mono,monospace;--font-courier-new:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;--font-franklin-gothic:Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;--font-futura:Futura,Trebuchet MS,Arial,sans-serif;--font-futura-condensed:Futura Condensed,Futura PT Condensed,Futura,Trebuchet MS,Arial,sans-serif;--font-garamond:Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;--font-geneva:Geneva,Tahoma,Verdana,DejaVu Sans,Bitstream Vera Sans,sans-serif;--font-georgia:Georgia,Times,Times New Roman,serif;--font-gill-sans:Gill Sans,Gill Sans MT,Century Gothic,Calibri,sans-serif;--font-haettenschweiler:Haettenschweiler,Din Condensed,Arial Narrow Bold,sans-serif;--font-helvetica:Helvetica Neue,Helvetica,Arial,sans-serif;--font-hoefler:Hoefler Text,Baskerville Old Face,Garamond,Times New Roman,serif;--font-impact:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;--font-lucida-bright:Lucida Bright,Baskerville,Georgia,serif;--font-lucida-console:Lucida Console,Lucida Sans Typewriter,PT Mono,monaco,monospace;--font-lucida-grande:Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;--font-oswald:Oswald,Din Condensed,Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;--font-palatino:Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,URW Palladio,Georgia,serif;--font-system:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;--font-system-monospace:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;--font-tahoma:Tahoma,Verdana,Segoe,sans-serif;--font-times-new-roman:TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,Liberation Serif,FreeSerif,serif;--font-trebuchet:Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;--font-verdana:Verdana,Geneva,DejaVu Sans,sans-serif;--font-main:var( --font-system );--font-monospace:var( --font-system-monospace );--line-length:60ch;--size-base:0.15rem;--size-0:0;--size-1:var(--size-base);--size-2:calc(var(--size-base) * 2);--size-3:calc(var(--size-base) * 4);--size-4:calc(var(--size-base) * 8);--size-5:calc(var(--size-base) * 16);--size-6:calc(var(--size-base) * 32);--size-7:calc(var(--size-base) * 64);--size-8:calc(var(--size-base) * 128);--size-9:calc(var(--size-base) * 256);--size-10:calc(var(--size-base) * 512);--type-scale:1.125;--type-base:1rem;--type-size-6:calc(var(--type-base) / var(--type-scale));--type-size-5:var(--type-base);--type-size-4:calc(var(--type-base) * var(--type-scale));--type-size-3:calc(var(--type-base) * var(--type-scale) * var(--type-scale));--type-size-2:calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale));--type-size-1:calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale));--type-lh-1:1.1;--type-lh-2:1.618;--type-ls-1:0.1em}@media (prefers-color-scheme:dark){:root body:not(.disable-dark-mode){--color-bg:var( --color-gray4 );--color-fg:var( --color-gray1 );--color-bg-accent:var( --color-yellow );--color-fg-accent:var( --color-black );--color-pop:var( --color-black );--color-link:var( --color-yellow );--color-border:var( --color-gray3 );--color-code:var( --color-green )}}.font-arial{font-family:var(--font-arial)}.font-arial-black{font-family:var(--font-arial-black)}.font-arial-narrow{font-family:var(--font-arial-narrow)}.font-arial-rounded{font-family:var(--font-arial-rounded)}.font-avenir{font-family:var(--font-avenir)}.font-baskerville{font-family:var(--font-baskerville)}.font-book-antiqua{font-family:var(--font-book-antiqua)}.font-bookman{font-family:var(--font-bookman)}.font-century-gothic{font-family:var(--font-century-gothic)}.font-comic-sans{font-family:var(--font-comic-sans)}.font-consolas{font-family:var(--font-consolas)}.font-courier-new{font-family:var(--font-courier-new)}.font-franklin-gothic{font-family:var(--font-franklin-gothic)}.font-futura{font-family:var(--font-futura)}.font-futura-condensed{font-family:var(--font-futura-condensed)}.font-garamond{font-family:var(--font-garamond)}.font-geneva{font-family:var(--font-geneva)}.font-georgia{font-family:var(--font-georgia)}.font-gill-sans{font-family:var(--font-gill-sans)}.font-haettenschweiler{font-family:var(--font-haettenschweiler)}.font-helvetica{font-family:var(--font-helvetica)}.font-hoefler{font-family:var(--font-hoefler)}.font-impact{font-family:var(--font-impact)}.font-lucida-bright{font-family:var(--font-lucida-bright)}.font-lucida-console{font-family:var(--font-lucida-console)}.font-lucida-grande{font-family:var(--font-lucida-grande)}.font-oswald{font-family:var(--font-oswald)}.font-palatino{font-family:var(--font-palatino)}.font-system{font-family:var(--font-system)}.font-system-monospace{font-family:var(--font-system-monospace)}.font-tahoma{font-family:var(--font-tahoma)}.font-times-new-roman{font-family:var(--font-times-new-roman)}.font-trebuchet{font-family:var(--font-trebuchet)}.font-verdana{font-family:var(--font-verdana)}*,::after,::before{box-sizing:border-box}*{margin:0}:focus:not(:focus-visible),[tabindex="-1"]:focus{outline:0}article>:first-child,aside>:first-child,blockquote>:first-child,div>:first-child,figcaption>:first-child,figure>:first-child,footer>:first-child,header>:first-child,main>:first-child,section>:first-child{margin-top:0}article>:last-child,aside>:last-child,blockquote>:last-child,div>:last-child,figcaption>:last-child,figure>:last-child,footer>:last-child,header>:last-child,main>:last-child,section>:last-child{margin-bottom:0}html{height:100%;font-size:16px;accent-color:var(--color-bg-accent);scroll-behavior:smooth;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;background:var(--color-bg);color:var(--color-fg);font-size:var(--type-base);line-height:var(--type-lh-2);font-family:var(--font-main)}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}canvas,img,picture,svg,video{max-width:100%;display:block;height:auto}::target-text{background:var(--color-bg-highlight);color:var(--color-fg-highlight)}[id]{scroll-margin-top:2ex}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}*{animation-duration:.001!important;transition-duration:.001!important;scroll-behavior:auto}}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);position:absolute!important;padding:0;margin:-1px;height:1px;width:1px;overflow:hidden;word-wrap:normal!important}.screen-reader-text:focus{font-weight:700;clip:auto!important;display:block;height:auto;width:auto;z-index:99999;padding:var(--size-2);background:var(--color-bg-accent);color:var(--color-fg-accent);left:var(--size-2);top:var(--size-2);max-width:var(--size-7)}.f-fw100{font-weight:100}.f-fw200{font-weight:200}.f-fw300{font-weight:300}.f-fw400{font-weight:400}.f-fw500{font-weight:500}.f-fw600{font-weight:600}.f-fw700{font-weight:700}.f-fw800{font-weight:800}.f-fw900{font-weight:900}.f-fs-i{font-style:italic}.f-fs-n{font-style:normal}.f1{font-size:var(--type-size-1);line-height:var(--type-lh-1)}.f2,h1{font-size:var(--type-size-2);line-height:var(--type-lh-1)}.f3,h2{font-size:var(--type-size-3);line-height:var(--type-lh-1)}.f4,.screen-reader-text:focus,h3{font-size:var(--type-size-4);line-height:var(--type-lh-2)}.f5,h4{font-size:var(--type-size-5);line-height:var(--type-lh-2)}.f6,h5,h6,small,sub,sup{font-size:var(--type-size-6);line-height:var(--type-lh-2);letter-spacing:var(--type-ls-1)}@media only screen and (min-width:32em){:root{--size-base:0.2rem;--type-scale:1.25}.t\:f-fw100{font-weight:100}.t\:f-fw200{font-weight:200}.t\:f-fw300{font-weight:300}.t\:f-fw400{font-weight:400}.t\:f-fw500{font-weight:500}.t\:f-fw600{font-weight:600}.t\:f-fw700{font-weight:700}.t\:f-fw800{font-weight:800}.t\:f-fw900{font-weight:900}.t\:f-fs-i{font-style:italic}.t\:f-fs-n{font-style:normal}.t\:f1{font-size:var(--type-size-1);line-height:var(--type-lh-1)}.t\:f2{font-size:var(--type-size-2);line-height:var(--type-lh-1)}.t\:f3{font-size:var(--type-size-3);line-height:var(--type-lh-1)}.t\:f4{font-size:var(--type-size-4);line-height:var(--type-lh-2)}.t\:f5{font-size:var(--type-size-5);line-height:var(--type-lh-2)}.t\:f6{font-size:var(--type-size-6);line-height:var(--type-lh-2);letter-spacing:var(--type-ls-1)}}@media only screen and (min-width:64em){:root{--size-base:0.25rem;--type-scale:1.414}.d\:f-fw100{font-weight:100}.d\:f-fw200{font-weight:200}.d\:f-fw300{font-weight:300}.d\:f-fw400{font-weight:400}.d\:f-fw500{font-weight:500}.d\:f-fw600{font-weight:600}.d\:f-fw700{font-weight:700}.d\:f-fw800{font-weight:800}.d\:f-fw900{font-weight:900}.d\:f-fs-i{font-style:italic}.d\:f-fs-n{font-style:normal}.d\:f1{font-size:var(--type-size-1);line-height:var(--type-lh-1)}.d\:f2{font-size:var(--type-size-2);line-height:var(--type-lh-1)}.d\:f3{font-size:var(--type-size-3);line-height:var(--type-lh-1)}.d\:f4{font-size:var(--type-size-4);line-height:var(--type-lh-2)}.d\:f5{font-size:var(--type-size-5);line-height:var(--type-lh-2)}.d\:f6{font-size:var(--type-size-6);line-height:var(--type-lh-2);letter-spacing:var(--type-ls-1)}}.btn:focus,.outline,.screen-reader-text:focus,[role=button]:focus,[type=button]:focus,[type=reset]:focus,[type=submit]:focus,a:focus,button:active,button:focus,input:active,input:focus,select:active,select:focus,summary:active,summary:focus,textarea:active,textarea:focus{outline:var(--size-1) solid var(--color-bg-highlight);outline-offset:var(--size-1)}.overflow{overflow:auto}.overflow-truncate{overflow:hidden;text-overflow:ellipsis}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll,pre{overflow:scroll}.overflow-auto{overflow:auto}.overflow-auto::-webkit-scrollbar,.overflow-scroll::-webkit-scrollbar,pre::-webkit-scrollbar{width:var(--size-3);height:var(--size-3)}.overflow-auto::-webkit-scrollbar-track,.overflow-scroll::-webkit-scrollbar-track,pre::-webkit-scrollbar-track{background:var(--color-fg)}.overflow-auto::-webkit-scrollbar-thumb,.overflow-scroll::-webkit-scrollbar-thumb,pre::-webkit-scrollbar-thumb{background:var(--color-fg-accent);border:1px solid var(--color-fg)}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-underline-offset:.1em;text-decoration-thickness:.15em;cursor:pointer;color:var(--color-link)}a:hover{text-decoration:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}.btn,[role=button],[type=button],[type=reset],[type=submit],button{font:inherit;border:none;text-decoration:none;display:inline-block;border-radius:var(--border-radius);padding:var(--size-1) var(--size-3)}.btn:not([class*=bg-]),[role=button]:not([class*=bg-]),[type=button]:not([class*=bg-]),[type=reset]:not([class*=bg-]),[type=submit]:not([class*=bg-]),button:not([class*=bg-]){background:var(--color-bg-accent);color:var(--color-fg-accent)}.btn:hover,[role=button]:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{cursor:pointer}.btn:disabled,[role=button]:disabled,[type=button]:disabled,[type=reset]:disabled,[type=submit]:disabled,button:disabled{opacity:.5;cursor:not-allowed}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin-top:var(--size-5);margin-bottom:var(--size-4);text-wrap:balance}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration-color:var(--color-link);-webkit-text-decoration-skip-ink:all;text-decoration-skip-ink:all;color:inherit}h3,h4,h5,h6{margin-top:var(--size-4)}hr{background:currentColor;border:none;height:var(--size-1);margin:var(--size-5) auto;color:inherit;opacity:.25}input,select,textarea{border-style:solid;border-width:var(--border-width)}button,input,select,textarea{font:inherit;box-shadow:none;border-radius:var(--border-radius);line-height:var(--type-lh-2);padding:var(--size-1) var(--size-3);max-width:100%}button:active:invalid,button:focus:invalid,input:active:invalid,input:focus:invalid,select:active:invalid,select:focus:invalid,textarea:active:invalid,textarea:focus:invalid{outline:red solid .2rem}button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}textarea{width:100%;resize:vertical}[type=checkbox],[type=radio]{width:1.5em;height:1.5em}[type=checkbox]:hover,[type=radio]:hover{cursor:pointer}[type=search]:before{display:block;content:" ";background:green;width:10px;height:10px}[type=color]{padding:0;border:none}[type=file]{border:none;padding:0}.dropzone[type=file]{width:100%;border:var(--size-1) dashed currentColor;padding:var(--size-4);border-radius:var(--size-2)}::file-selector-button{font:inherit;padding:var(--size-1) var(--size-3);margin-inline-end:var(--size-3)}::file-selector-button:hover{cursor:pointer}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;padding:var(--size-1) var(--size-3);margin-inline-end:var(--size-3)}::-webkit-file-upload-button:hover{cursor:pointer}label{font-weight:700;display:block;margin-top:var(--size-1);margin-bottom:var(--size-1)}fieldset{margin-top:var(--size-4);margin-bottom:var(--size-4);padding:var(--size-3);border:var(--border-width) solid var(--color-border)}legend{padding-left:var(--size-2);padding-right:var(--size-2);font-weight:700}legend>*{margin:0}dd,dt,li{margin-top:var(--size-1);margin-bottom:var(--size-1)}dt{font-weight:700}dd:not(:last-of-type){margin-bottom:var(--size-3)}nav ul{list-style-type:none;padding:0}nav ul ul{padding-inline-start:var(--size-3)}mark{padding:var(--size-1) var(--size-2);background:var(--color-bg-highlight);color:var(--color-fg-highlight)}figure{margin:0}figcaption{text-align:center;font-size:var(--type-size-6)}blockquote{font-style:italic;padding-left:var(--size-4);font-size:var(--type-size-4);margin-top:var(--size-4);margin-bottom:var(--size-4);border-left:var(--size-2) solid currentColor}cite{font-style:normal;font-size:var(--type-size-6)}code,kbd,pre,samp{font-family:var(--font-monospace);color:var(--color-code);background:#fff;padding:var(--size-1) var(--size-2);border-radius:var(--size-1)}kbd{line-height:1;border-radius:var(--border-radius);border:1px solid var(--color-code);border-bottom:2px solid var(--color-code);padding:var(--size-1) var(--size-2);font-family:var(--font-monospace)}pre{max-width:100%;overflow:auto;padding:var(--size-3) var(--size-4);background:var(--color-gray4);border-radius:var(--border-radius)}pre code{background:0 0;margin:0;padding:0}details :last-child{margin-bottom:0}summary{font-weight:700}summary:hover{cursor:pointer}summary>*{display:inline}iframe{border:0;border:1px solid var(--color-gray3)}table caption,table th{text-align:left;font-weight:700}table caption,table td,table th{padding:var(--size-1);display:block;vertical-align:top;word-break:break-word;min-width:var(--size-5);overflow-x:auto}@media only screen and (min-width:32em){textarea{width:60%}table caption,table td,table th{display:table-cell}}p{margin-top:var(--size-4);margin-bottom:var(--size-4);overflow-wrap:break-word}sub,sup{line-height:0;position:relative;vertical-align:baseline;padding:0 .1em}sub{bottom:-.25em}sup{top:-.5em}strong{font-weight:700} -------------------------------------------------------------------------------- /_site/dist/elementalcss.utility.min.css: -------------------------------------------------------------------------------- 1 | :root{--border-width:1px;--border-radius:var( --size-1 );--color-black:#000000;--color-gray4:#111827;--color-gray3:#374151;--color-gray2:#6B7280;--color-gray1:#D7DAE0;--color-white:#FFFFFF;--color-blue-light:#72aee6;--color-blue:#2271b1;--color-blue-dark:#043959;--color-red-light:#ff8085;--color-red:#d63638;--color-red-dark:#631919;--color-green-light:#2fdc5b;--color-green:#06ae2d;--color-green-dark:#00450c;--color-yellow-light:#ecd8a2;--color-yellow:#f0c33c;--color-yellow-dark:#9d7e20;--color-bg:var( --color-white );--color-fg:var( --color-gray4 );--color-bg-accent:var( --color-blue );--color-fg-accent:var( --color-white );--color-bg-highlight:var( --color-yellow );--color-fg-highlight:var( --color-black );--color-pop:var( --color-gray1 );--color-link:var( --color-blue-dark );--color-border:var( --color-gray1 );--color-code:var( --color-green );--font-arial:Arial,Helvetica Neue,Helvetica,Liberation Sans,sans-serif;--font-arial-black:Arial Black,Arial Bold,Gadget,sans-serif;--font-arial-narrow:Arial Narrow,Arial,sans-serif;--font-arial-rounded:Arial Rounded MT Bold,Arial Rounded Bold,Helvetica Rounded,Arial,sans-serif;--font-avenir:Avenir Next,Avenir,sans-serif;--font-baskerville:Baskerville,Baskerville Old Face,Hoefler Text,Garamond,Times New Roman,serif;--font-book-antiqua:Book Antiqua,Baskerville,Palatino,Georgia,serif;--font-bookman:Bookman,Bookman Old Style,Book Antiqua,Charter,Palatino,URW Bookman,serif;--font-century-gothic:Century Gothic,CenturyGothic,Franklin Gothic,URW Gothic,AppleGothic,sans-serif;--font-comic-sans:Chalkboard,Comic Sans,Comic Sans MS,cursive,sans-serif;--font-consolas:Consolas,Menlo,Monaco,Liberation Mono,monospace;--font-courier-new:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;--font-franklin-gothic:Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;--font-futura:Futura,Trebuchet MS,Arial,sans-serif;--font-futura-condensed:Futura Condensed,Futura PT Condensed,Futura,Trebuchet MS,Arial,sans-serif;--font-garamond:Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;--font-geneva:Geneva,Tahoma,Verdana,DejaVu Sans,Bitstream Vera Sans,sans-serif;--font-georgia:Georgia,Times,Times New Roman,serif;--font-gill-sans:Gill Sans,Gill Sans MT,Century Gothic,Calibri,sans-serif;--font-haettenschweiler:Haettenschweiler,Din Condensed,Arial Narrow Bold,sans-serif;--font-helvetica:Helvetica Neue,Helvetica,Arial,sans-serif;--font-hoefler:Hoefler Text,Baskerville Old Face,Garamond,Times New Roman,serif;--font-impact:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;--font-lucida-bright:Lucida Bright,Baskerville,Georgia,serif;--font-lucida-console:Lucida Console,Lucida Sans Typewriter,PT Mono,monaco,monospace;--font-lucida-grande:Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;--font-oswald:Oswald,Din Condensed,Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;--font-palatino:Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,URW Palladio,Georgia,serif;--font-system:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;--font-system-monospace:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;--font-tahoma:Tahoma,Verdana,Segoe,sans-serif;--font-times-new-roman:TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,Liberation Serif,FreeSerif,serif;--font-trebuchet:Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;--font-verdana:Verdana,Geneva,DejaVu Sans,sans-serif;--font-main:var( --font-system );--font-monospace:var( --font-system-monospace );--line-length:60ch;--size-base:0.15rem;--size-0:0;--size-1:var(--size-base);--size-2:calc(var(--size-base) * 2);--size-3:calc(var(--size-base) * 4);--size-4:calc(var(--size-base) * 8);--size-5:calc(var(--size-base) * 16);--size-6:calc(var(--size-base) * 32);--size-7:calc(var(--size-base) * 64);--size-8:calc(var(--size-base) * 128);--size-9:calc(var(--size-base) * 256);--size-10:calc(var(--size-base) * 512);--type-scale:1.125;--type-base:1rem;--type-size-6:calc(var(--type-base) / var(--type-scale));--type-size-5:var(--type-base);--type-size-4:calc(var(--type-base) * var(--type-scale));--type-size-3:calc(var(--type-base) * var(--type-scale) * var(--type-scale));--type-size-2:calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale));--type-size-1:calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale));--type-lh-1:1.1;--type-lh-2:1.618;--type-ls-1:0.1em}@media (prefers-color-scheme:dark){:root body:not(.disable-dark-mode){--color-bg:var( --color-gray4 );--color-fg:var( --color-gray1 );--color-bg-accent:var( --color-yellow );--color-fg-accent:var( --color-black );--color-pop:var( --color-black );--color-link:var( --color-yellow );--color-border:var( --color-gray3 );--color-code:var( --color-green )}}.font-arial{font-family:var(--font-arial)}.font-arial-black{font-family:var(--font-arial-black)}.font-arial-narrow{font-family:var(--font-arial-narrow)}.font-arial-rounded{font-family:var(--font-arial-rounded)}.font-avenir{font-family:var(--font-avenir)}.font-baskerville{font-family:var(--font-baskerville)}.font-book-antiqua{font-family:var(--font-book-antiqua)}.font-bookman{font-family:var(--font-bookman)}.font-century-gothic{font-family:var(--font-century-gothic)}.font-comic-sans{font-family:var(--font-comic-sans)}.font-consolas{font-family:var(--font-consolas)}.font-courier-new{font-family:var(--font-courier-new)}.font-franklin-gothic{font-family:var(--font-franklin-gothic)}.font-futura{font-family:var(--font-futura)}.font-futura-condensed{font-family:var(--font-futura-condensed)}.font-garamond{font-family:var(--font-garamond)}.font-geneva{font-family:var(--font-geneva)}.font-georgia{font-family:var(--font-georgia)}.font-gill-sans{font-family:var(--font-gill-sans)}.font-haettenschweiler{font-family:var(--font-haettenschweiler)}.font-helvetica{font-family:var(--font-helvetica)}.font-hoefler{font-family:var(--font-hoefler)}.font-impact{font-family:var(--font-impact)}.font-lucida-bright{font-family:var(--font-lucida-bright)}.font-lucida-console{font-family:var(--font-lucida-console)}.font-lucida-grande{font-family:var(--font-lucida-grande)}.font-oswald{font-family:var(--font-oswald)}.font-palatino{font-family:var(--font-palatino)}.font-system{font-family:var(--font-system)}.font-system-monospace{font-family:var(--font-system-monospace)}.font-tahoma{font-family:var(--font-tahoma)}.font-times-new-roman{font-family:var(--font-times-new-roman)}.font-trebuchet{font-family:var(--font-trebuchet)}.font-verdana{font-family:var(--font-verdana)}*,::after,::before{box-sizing:border-box}*{margin:0}:focus:not(:focus-visible),[tabindex="-1"]:focus{outline:0}article>:first-child,aside>:first-child,blockquote>:first-child,div>:first-child,figcaption>:first-child,figure>:first-child,footer>:first-child,header>:first-child,main>:first-child,section>:first-child{margin-top:0}article>:last-child,aside>:last-child,blockquote>:last-child,div>:last-child,figcaption>:last-child,figure>:last-child,footer>:last-child,header>:last-child,main>:last-child,section>:last-child{margin-bottom:0}html{height:100%;font-size:16px;accent-color:var(--color-bg-accent);scroll-behavior:smooth;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;background:var(--color-bg);color:var(--color-fg);font-size:var(--type-base);line-height:var(--type-lh-2);font-family:var(--font-main)}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}canvas,img,picture,svg,video{max-width:100%;display:block;height:auto}::target-text{background:var(--color-bg-highlight);color:var(--color-fg-highlight)}[id]{scroll-margin-top:2ex}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}*{animation-duration:.001!important;transition-duration:.001!important;scroll-behavior:auto}}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);position:absolute!important;padding:0;margin:-1px;height:1px;width:1px;overflow:hidden;word-wrap:normal!important}.screen-reader-text:focus{font-weight:700;clip:auto!important;display:block;height:auto;width:auto;z-index:99999;padding:var(--size-2);background:var(--color-bg-accent);color:var(--color-fg-accent);left:var(--size-2);top:var(--size-2);max-width:var(--size-7)}.pe-none{pointer-events:none}.pe-auto{pointer-events:auto}.ar-1{aspect-ratio:1}.ar-3-4{aspect-ratio:3/4}.ar-16-9{aspect-ratio:16/9}.bg-image{background-image:var(--bg-image);background-size:cover;background-position:center}.bg-transparent{background:0 0}.bg-auto{background-size:auto}.bg-cover{background-size:cover}.bg-contain{background-size:contain}.bg-repeat-none{background-repeat:no-repeat}.bg-repeat-x{background-repeat:repeat-x}.bg-repeat-y{background-repeat:repeat-y}.b{border:var(--border-width) solid var(--color-border)}.b-none{border:none}.b-black{border-color:var(--color-black)}.b-gray4{border-color:var(--color-gray4)}.b-gray3{border-color:var(--color-gray3)}.b-gray2{border-color:var(--color-gray2)}.b-gray1{border-color:var(--color-gray1)}.b-white{border-color:var(--color-white)}.b-blue-light{border-color:var(--color-blue-light)}.b-blue{border-color:var(--color-blue)}.b-blue-dark{border-color:var(--color-blue-dark)}.b-red-light{border-color:var(--color-red-light)}.b-red{border-color:var(--color-red)}.b-red-dark{border-color:var(--color-red-dark)}.b-green-light{border-color:var(--color-green-light)}.b-green{border-color:var(--color-green)}.b-green-dark{border-color:var(--color-green-dark)}.b-yellow-light{border-color:var(--color-yellow-light)}.b-yellow{border-color:var(--color-yellow)}.b-yellow-dark{border-color:var(--color-yellow-dark)}.b-t{border-top:var(--border-width) solid var(--color-border)}.b-r{border-right:var(--border-width) solid var(--color-border)}.b-b{border-bottom:var(--border-width) solid var(--color-border)}.b-l{border-left:var(--border-width) solid var(--color-border)}.b-br-round{border-radius:999rem}.b0{border-width:var(--size-0)}.b-br0{border-radius:var(--size-0)}.b-br-tl0{border-top-left-radius:var(--size-0)}.b-br-tr0{border-top-right-radius:var(--size-0)}.b-br-bl0{border-bottom-left-radius:var(--size-0)}.b-br-br0{border-bottom-right-radius:var(--size-0)}.b-t0{border-top-width:var(--size-0)}.b-r0{border-right-width:var(--size-0)}.b-b0{border-bottom-width:var(--size-0)}.b-l0{border-left-width:var(--size-0)}.b1{border-width:var(--size-1)}.b-br1{border-radius:var(--size-1)}.b-br-tl1{border-top-left-radius:var(--size-1)}.b-br-tr1{border-top-right-radius:var(--size-1)}.b-br-bl1{border-bottom-left-radius:var(--size-1)}.b-br-br1{border-bottom-right-radius:var(--size-1)}.b-t1{border-top-width:var(--size-1)}.b-r1{border-right-width:var(--size-1)}.b-b1{border-bottom-width:var(--size-1)}.b-l1{border-left-width:var(--size-1)}.b2{border-width:var(--size-2)}.b-br2{border-radius:var(--size-2)}.b-br-tl2{border-top-left-radius:var(--size-2)}.b-br-tr2{border-top-right-radius:var(--size-2)}.b-br-bl2{border-bottom-left-radius:var(--size-2)}.b-br-br2{border-bottom-right-radius:var(--size-2)}.b-t2{border-top-width:var(--size-2)}.b-r2{border-right-width:var(--size-2)}.b-b2{border-bottom-width:var(--size-2)}.b-l2{border-left-width:var(--size-2)}.b3{border-width:var(--size-3)}.b-br3{border-radius:var(--size-3)}.b-br-tl3{border-top-left-radius:var(--size-3)}.b-br-tr3{border-top-right-radius:var(--size-3)}.b-br-bl3{border-bottom-left-radius:var(--size-3)}.b-br-br3{border-bottom-right-radius:var(--size-3)}.b-t3{border-top-width:var(--size-3)}.b-r3{border-right-width:var(--size-3)}.b-b3{border-bottom-width:var(--size-3)}.b-l3{border-left-width:var(--size-3)}@media only screen and (min-width:32em){:root{--size-base:0.2rem;--type-scale:1.25}.t\:ar-1{aspect-ratio:1}.t\:ar-3-4{aspect-ratio:3/4}.t\:ar-16-9{aspect-ratio:16/9}.t\:bg-image{background-image:var(--bg-image);background-size:cover;background-position:center}.t\:bg-transparent{background:0 0}.t\:bg-auto{background-size:auto}.t\:bg-cover{background-size:cover}.t\:bg-contain{background-size:contain}.t\:bg-repeat-none{background-repeat:no-repeat}.t\:bg-repeat-x{background-repeat:repeat-x}.t\:bg-repeat-y{background-repeat:repeat-y}.t\:b{border:var(--border-width) solid var(--color-border)}.t\:b-none{border:none}.t\:b-black{border-color:var(--color-black)}.t\:b-gray4{border-color:var(--color-gray4)}.t\:b-gray3{border-color:var(--color-gray3)}.t\:b-gray2{border-color:var(--color-gray2)}.t\:b-gray1{border-color:var(--color-gray1)}.t\:b-white{border-color:var(--color-white)}.t\:b-blue-light{border-color:var(--color-blue-light)}.t\:b-blue{border-color:var(--color-blue)}.t\:b-blue-dark{border-color:var(--color-blue-dark)}.t\:b-red-light{border-color:var(--color-red-light)}.t\:b-red{border-color:var(--color-red)}.t\:b-red-dark{border-color:var(--color-red-dark)}.t\:b-green-light{border-color:var(--color-green-light)}.t\:b-green{border-color:var(--color-green)}.t\:b-green-dark{border-color:var(--color-green-dark)}.t\:b-yellow-light{border-color:var(--color-yellow-light)}.t\:b-yellow{border-color:var(--color-yellow)}.t\:b-yellow-dark{border-color:var(--color-yellow-dark)}.t\:b-t{border-top:var(--border-width) solid var(--color-border)}.t\:b-r{border-right:var(--border-width) solid var(--color-border)}.t\:b-b{border-bottom:var(--border-width) solid var(--color-border)}.t\:b-l{border-left:var(--border-width) solid var(--color-border)}.t\:b-br-round{border-radius:999rem}.t\:b0{border-width:var(--size-0)}.t\:b-br0{border-radius:var(--size-0)}.t\:b-br-tl0{border-top-left-radius:var(--size-0)}.t\:b-br-tr0{border-top-right-radius:var(--size-0)}.t\:b-br-bl0{border-bottom-left-radius:var(--size-0)}.t\:b-br-br0{border-bottom-right-radius:var(--size-0)}.t\:b-t0{border-top-width:var(--size-0)}.t\:b-r0{border-right-width:var(--size-0)}.t\:b-b0{border-bottom-width:var(--size-0)}.t\:b-l0{border-left-width:var(--size-0)}.t\:b1{border-width:var(--size-1)}.t\:b-br1{border-radius:var(--size-1)}.t\:b-br-tl1{border-top-left-radius:var(--size-1)}.t\:b-br-tr1{border-top-right-radius:var(--size-1)}.t\:b-br-bl1{border-bottom-left-radius:var(--size-1)}.t\:b-br-br1{border-bottom-right-radius:var(--size-1)}.t\:b-t1{border-top-width:var(--size-1)}.t\:b-r1{border-right-width:var(--size-1)}.t\:b-b1{border-bottom-width:var(--size-1)}.t\:b-l1{border-left-width:var(--size-1)}.t\:b2{border-width:var(--size-2)}.t\:b-br2{border-radius:var(--size-2)}.t\:b-br-tl2{border-top-left-radius:var(--size-2)}.t\:b-br-tr2{border-top-right-radius:var(--size-2)}.t\:b-br-bl2{border-bottom-left-radius:var(--size-2)}.t\:b-br-br2{border-bottom-right-radius:var(--size-2)}.t\:b-t2{border-top-width:var(--size-2)}.t\:b-r2{border-right-width:var(--size-2)}.t\:b-b2{border-bottom-width:var(--size-2)}.t\:b-l2{border-left-width:var(--size-2)}.t\:b3{border-width:var(--size-3)}.t\:b-br3{border-radius:var(--size-3)}.t\:b-br-tl3{border-top-left-radius:var(--size-3)}.t\:b-br-tr3{border-top-right-radius:var(--size-3)}.t\:b-br-bl3{border-bottom-left-radius:var(--size-3)}.t\:b-br-br3{border-bottom-right-radius:var(--size-3)}.t\:b-t3{border-top-width:var(--size-3)}.t\:b-r3{border-right-width:var(--size-3)}.t\:b-b3{border-bottom-width:var(--size-3)}.t\:b-l3{border-left-width:var(--size-3)}}@media only screen and (min-width:64em){:root{--size-base:0.25rem;--type-scale:1.414}.d\:ar-1{aspect-ratio:1}.d\:ar-3-4{aspect-ratio:3/4}.d\:ar-16-9{aspect-ratio:16/9}.d\:bg-image{background-image:var(--bg-image);background-size:cover;background-position:center}.d\:bg-transparent{background:0 0}.d\:bg-auto{background-size:auto}.d\:bg-cover{background-size:cover}.d\:bg-contain{background-size:contain}.d\:bg-repeat-none{background-repeat:no-repeat}.d\:bg-repeat-x{background-repeat:repeat-x}.d\:bg-repeat-y{background-repeat:repeat-y}.d\:b{border:var(--border-width) solid var(--color-border)}.d\:b-none{border:none}.d\:b-black{border-color:var(--color-black)}.d\:b-gray4{border-color:var(--color-gray4)}.d\:b-gray3{border-color:var(--color-gray3)}.d\:b-gray2{border-color:var(--color-gray2)}.d\:b-gray1{border-color:var(--color-gray1)}.d\:b-white{border-color:var(--color-white)}.d\:b-blue-light{border-color:var(--color-blue-light)}.d\:b-blue{border-color:var(--color-blue)}.d\:b-blue-dark{border-color:var(--color-blue-dark)}.d\:b-red-light{border-color:var(--color-red-light)}.d\:b-red{border-color:var(--color-red)}.d\:b-red-dark{border-color:var(--color-red-dark)}.d\:b-green-light{border-color:var(--color-green-light)}.d\:b-green{border-color:var(--color-green)}.d\:b-green-dark{border-color:var(--color-green-dark)}.d\:b-yellow-light{border-color:var(--color-yellow-light)}.d\:b-yellow{border-color:var(--color-yellow)}.d\:b-yellow-dark{border-color:var(--color-yellow-dark)}.d\:b-t{border-top:var(--border-width) solid var(--color-border)}.d\:b-r{border-right:var(--border-width) solid var(--color-border)}.d\:b-b{border-bottom:var(--border-width) solid var(--color-border)}.d\:b-l{border-left:var(--border-width) solid var(--color-border)}.d\:b-br-round{border-radius:999rem}.d\:b0{border-width:var(--size-0)}.d\:b-br0{border-radius:var(--size-0)}.d\:b-br-tl0{border-top-left-radius:var(--size-0)}.d\:b-br-tr0{border-top-right-radius:var(--size-0)}.d\:b-br-bl0{border-bottom-left-radius:var(--size-0)}.d\:b-br-br0{border-bottom-right-radius:var(--size-0)}.d\:b-t0{border-top-width:var(--size-0)}.d\:b-r0{border-right-width:var(--size-0)}.d\:b-b0{border-bottom-width:var(--size-0)}.d\:b-l0{border-left-width:var(--size-0)}.d\:b1{border-width:var(--size-1)}.d\:b-br1{border-radius:var(--size-1)}.d\:b-br-tl1{border-top-left-radius:var(--size-1)}.d\:b-br-tr1{border-top-right-radius:var(--size-1)}.d\:b-br-bl1{border-bottom-left-radius:var(--size-1)}.d\:b-br-br1{border-bottom-right-radius:var(--size-1)}.d\:b-t1{border-top-width:var(--size-1)}.d\:b-r1{border-right-width:var(--size-1)}.d\:b-b1{border-bottom-width:var(--size-1)}.d\:b-l1{border-left-width:var(--size-1)}.d\:b2{border-width:var(--size-2)}.d\:b-br2{border-radius:var(--size-2)}.d\:b-br-tl2{border-top-left-radius:var(--size-2)}.d\:b-br-tr2{border-top-right-radius:var(--size-2)}.d\:b-br-bl2{border-bottom-left-radius:var(--size-2)}.d\:b-br-br2{border-bottom-right-radius:var(--size-2)}.d\:b-t2{border-top-width:var(--size-2)}.d\:b-r2{border-right-width:var(--size-2)}.d\:b-b2{border-bottom-width:var(--size-2)}.d\:b-l2{border-left-width:var(--size-2)}.d\:b3{border-width:var(--size-3)}.d\:b-br3{border-radius:var(--size-3)}.d\:b-br-tl3{border-top-left-radius:var(--size-3)}.d\:b-br-tr3{border-top-right-radius:var(--size-3)}.d\:b-br-bl3{border-bottom-left-radius:var(--size-3)}.d\:b-br-br3{border-bottom-right-radius:var(--size-3)}.d\:b-t3{border-top-width:var(--size-3)}.d\:b-r3{border-right-width:var(--size-3)}.d\:b-b3{border-bottom-width:var(--size-3)}.d\:b-l3{border-left-width:var(--size-3)}}.bg-custom{background-color:var(--bg-custom)!important}.bg-custom__hover:hover{background-color:var(--bg-custom--hover)!important}.bg-transparent{background-color:transparent}.bg-black,.bg-black__hover:hover{background-color:var(--color-black);color:#fff}.bg-black a{color:var(--color-yellow)}.bg-gray4,.bg-gray4__hover:hover{background-color:var(--color-gray4);color:#fff}.bg-gray4 a{color:var(--color-yellow)}.bg-gray3,.bg-gray3__hover:hover{background-color:var(--color-gray3);color:#fff}.bg-gray3 a{color:var(--color-yellow)}.bg-gray2,.bg-gray2__hover:hover{background-color:var(--color-gray2);color:#fff}.bg-gray2 a{color:var(--color-yellow)}.bg-gray1,.bg-gray1__hover:hover{background-color:var(--color-gray1);color:#000}.bg-gray1 a{color:var(--color-blue-dark)}.bg-white,.bg-white__hover:hover{background-color:var(--color-white);color:#000}.bg-white a{color:var(--color-blue-dark)}.bg-blue-light,.bg-blue-light__hover:hover{background-color:var(--color-blue-light);color:#000}.bg-blue-light a{color:var(--color-blue-dark)}.bg-blue,.bg-blue__hover:hover{background-color:var(--color-blue);color:#fff}.bg-blue a{color:var(--color-yellow)}.bg-blue-dark,.bg-blue-dark__hover:hover{background-color:var(--color-blue-dark);color:#fff}.bg-blue-dark a{color:var(--color-yellow)}.bg-red-light,.bg-red-light__hover:hover{background-color:var(--color-red-light);color:#000}.bg-red-light a{color:var(--color-blue-dark)}.bg-red,.bg-red__hover:hover{background-color:var(--color-red);color:#fff}.bg-red a{color:var(--color-yellow)}.bg-red-dark,.bg-red-dark__hover:hover{background-color:var(--color-red-dark);color:#fff}.bg-red-dark a{color:var(--color-yellow)}.bg-green-light,.bg-green-light__hover:hover{background-color:var(--color-green-light);color:#000}.bg-green-light a{color:var(--color-blue-dark)}.bg-green,.bg-green__hover:hover{background-color:var(--color-green);color:#fff}.bg-green a{color:var(--color-yellow)}.bg-green-dark,.bg-green-dark__hover:hover{background-color:var(--color-green-dark);color:#fff}.bg-green-dark a{color:var(--color-yellow)}.bg-yellow-light,.bg-yellow-light__hover:hover{background-color:var(--color-yellow-light);color:#000}.bg-yellow-light a{color:var(--color-blue-dark)}.bg-yellow,.bg-yellow__hover:hover{background-color:var(--color-yellow);color:#000}.bg-yellow a{color:var(--color-blue-dark)}.bg-yellow-dark,.bg-yellow-dark__hover:hover{background-color:var(--color-yellow-dark);color:#fff}.bg-yellow-dark a{color:var(--color-yellow)}.fg-current{color:currentColor}.fg-custom{color:var(--fg-custom)!important}.fg-black,.fg-black__hover:hover{color:var(--color-black)}.fg-gray4,.fg-gray4__hover:hover{color:var(--color-gray4)}.fg-gray3,.fg-gray3__hover:hover{color:var(--color-gray3)}.fg-gray2,.fg-gray2__hover:hover{color:var(--color-gray2)}.fg-gray1,.fg-gray1__hover:hover{color:var(--color-gray1)}.fg-white,.fg-white__hover:hover{color:var(--color-white)}.fg-blue-light,.fg-blue-light__hover:hover{color:var(--color-blue-light)}.fg-blue,.fg-blue__hover:hover{color:var(--color-blue)}.fg-blue-dark,.fg-blue-dark__hover:hover{color:var(--color-blue-dark)}.fg-red-light,.fg-red-light__hover:hover{color:var(--color-red-light)}.fg-red,.fg-red__hover:hover{color:var(--color-red)}.fg-red-dark,.fg-red-dark__hover:hover{color:var(--color-red-dark)}.fg-green-light,.fg-green-light__hover:hover{color:var(--color-green-light)}.fg-green,.fg-green__hover:hover{color:var(--color-green)}.fg-green-dark,.fg-green-dark__hover:hover{color:var(--color-green-dark)}.fg-yellow-light,.fg-yellow-light__hover:hover{color:var(--color-yellow-light)}.fg-yellow,.fg-yellow__hover:hover{color:var(--color-yellow)}.fg-yellow-dark,.fg-yellow-dark__hover:hover{color:var(--color-yellow-dark)}.cols0{-moz-column-count:0;column-count:0}.cols1{-moz-column-count:1;column-count:1}.cols2{-moz-column-count:2;column-count:2}.cols3{-moz-column-count:3;column-count:3}.cols4{-moz-column-count:4;column-count:4}.cols5{-moz-column-count:5;column-count:5}.cols6{-moz-column-count:6;column-count:6}.cols7{-moz-column-count:7;column-count:7}.cols8{-moz-column-count:8;column-count:8}.cols9{-moz-column-count:9;column-count:9}.cols10{-moz-column-count:10;column-count:10}.col-w0{-moz-column-width:var(--size-2);column-width:var(--size-2)}.col-gap0{-moz-column-gap:var(--size-0);column-gap:var(--size-0)}.col-w1{-moz-column-width:var(--size-3);column-width:var(--size-3)}.col-gap1{-moz-column-gap:var(--size-1);column-gap:var(--size-1)}.col-w2{-moz-column-width:var(--size-4);column-width:var(--size-4)}.col-gap2{-moz-column-gap:var(--size-2);column-gap:var(--size-2)}.col-w3{-moz-column-width:var(--size-5);column-width:var(--size-5)}.col-gap3{-moz-column-gap:var(--size-3);column-gap:var(--size-3)}.col-w4{-moz-column-width:var(--size-6);column-width:var(--size-6)}.col-gap4{-moz-column-gap:var(--size-4);column-gap:var(--size-4)}.col-w5{-moz-column-width:var(--size-7);column-width:var(--size-7)}.col-gap5{-moz-column-gap:var(--size-5);column-gap:var(--size-5)}.display-block{display:block}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-hide-empty:empty,.display-none{display:none}.fit-contain{-o-object-fit:contain;object-fit:contain}.fit-cover{-o-object-fit:cover;object-fit:cover}.fit-none{-o-object-fit:none;object-fit:none}@media only screen and (min-width:32em){.t\:cols0{-moz-column-count:0;column-count:0}.t\:cols1{-moz-column-count:1;column-count:1}.t\:cols2{-moz-column-count:2;column-count:2}.t\:cols3{-moz-column-count:3;column-count:3}.t\:cols4{-moz-column-count:4;column-count:4}.t\:cols5{-moz-column-count:5;column-count:5}.t\:cols6{-moz-column-count:6;column-count:6}.t\:cols7{-moz-column-count:7;column-count:7}.t\:cols8{-moz-column-count:8;column-count:8}.t\:cols9{-moz-column-count:9;column-count:9}.t\:cols10{-moz-column-count:10;column-count:10}.t\:col-w0{-moz-column-width:var(--size-2);column-width:var(--size-2)}.t\:col-gap0{-moz-column-gap:var(--size-0);column-gap:var(--size-0)}.t\:col-w1{-moz-column-width:var(--size-3);column-width:var(--size-3)}.t\:col-gap1{-moz-column-gap:var(--size-1);column-gap:var(--size-1)}.t\:col-w2{-moz-column-width:var(--size-4);column-width:var(--size-4)}.t\:col-gap2{-moz-column-gap:var(--size-2);column-gap:var(--size-2)}.t\:col-w3{-moz-column-width:var(--size-5);column-width:var(--size-5)}.t\:col-gap3{-moz-column-gap:var(--size-3);column-gap:var(--size-3)}.t\:col-w4{-moz-column-width:var(--size-6);column-width:var(--size-6)}.t\:col-gap4{-moz-column-gap:var(--size-4);column-gap:var(--size-4)}.t\:col-w5{-moz-column-width:var(--size-7);column-width:var(--size-7)}.t\:col-gap5{-moz-column-gap:var(--size-5);column-gap:var(--size-5)}.t\:display-block{display:block}.t\:display-inline-block{display:inline-block}.t\:display-inline{display:inline}.t\:display-hide-empty:empty,.t\:display-none{display:none}.t\:fit-contain{-o-object-fit:contain;object-fit:contain}.t\:fit-cover{-o-object-fit:cover;object-fit:cover}.t\:fit-none{-o-object-fit:none;object-fit:none}}@media only screen and (min-width:64em){.d\:cols0{-moz-column-count:0;column-count:0}.d\:cols1{-moz-column-count:1;column-count:1}.d\:cols2{-moz-column-count:2;column-count:2}.d\:cols3{-moz-column-count:3;column-count:3}.d\:cols4{-moz-column-count:4;column-count:4}.d\:cols5{-moz-column-count:5;column-count:5}.d\:cols6{-moz-column-count:6;column-count:6}.d\:cols7{-moz-column-count:7;column-count:7}.d\:cols8{-moz-column-count:8;column-count:8}.d\:cols9{-moz-column-count:9;column-count:9}.d\:cols10{-moz-column-count:10;column-count:10}.d\:col-w0{-moz-column-width:var(--size-2);column-width:var(--size-2)}.d\:col-gap0{-moz-column-gap:var(--size-0);column-gap:var(--size-0)}.d\:col-w1{-moz-column-width:var(--size-3);column-width:var(--size-3)}.d\:col-gap1{-moz-column-gap:var(--size-1);column-gap:var(--size-1)}.d\:col-w2{-moz-column-width:var(--size-4);column-width:var(--size-4)}.d\:col-gap2{-moz-column-gap:var(--size-2);column-gap:var(--size-2)}.d\:col-w3{-moz-column-width:var(--size-5);column-width:var(--size-5)}.d\:col-gap3{-moz-column-gap:var(--size-3);column-gap:var(--size-3)}.d\:col-w4{-moz-column-width:var(--size-6);column-width:var(--size-6)}.d\:col-gap4{-moz-column-gap:var(--size-4);column-gap:var(--size-4)}.d\:col-w5{-moz-column-width:var(--size-7);column-width:var(--size-7)}.d\:col-gap5{-moz-column-gap:var(--size-5);column-gap:var(--size-5)}.d\:display-block{display:block}.d\:display-inline-block{display:inline-block}.d\:display-inline{display:inline}.d\:display-hide-empty:empty,.d\:display-none{display:none}.d\:fit-contain{-o-object-fit:contain;object-fit:contain}.d\:fit-cover{-o-object-fit:cover;object-fit:cover}.d\:fit-none{-o-object-fit:none;object-fit:none}}.flex{display:flex}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.flex-center{justify-content:center;align-items:center}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-g0{flex-grow:0}.flex-s0{flex-shrink:0}.flex-g1{flex-grow:1}.flex-s1{flex-shrink:1}.flex-jc-s{justify-content:start}.flex-jc-e{justify-content:end}.flex-jc-sb{justify-content:space-between}.flex-jc-c{justify-content:center}.flex-ai-c{align-items:center}.flex-ai-s{align-items:start}.flex-ai-e{align-items:end}.flex-as-c{align-self:center}.flex-as-s{align-self:start}.flex-as-e{align-self:end}.float-none{float:none}.float-r{float:right}.float-l{float:left}.clear{clear:both}.clear-none{clear:none}.clear-r{clear:right}.clear-l{clear:left}.f-fw100{font-weight:100}.f-fw200{font-weight:200}.f-fw300{font-weight:300}.f-fw400{font-weight:400}.f-fw500{font-weight:500}.f-fw600{font-weight:600}.f-fw700{font-weight:700}.f-fw800{font-weight:800}.f-fw900{font-weight:900}.f-fs-i{font-style:italic}.f-fs-n{font-style:normal}.f1{font-size:var(--type-size-1);line-height:var(--type-lh-1)}.f2{font-size:var(--type-size-2);line-height:var(--type-lh-1)}.f3{font-size:var(--type-size-3);line-height:var(--type-lh-1)}.f4,.screen-reader-text:focus{font-size:var(--type-size-4);line-height:var(--type-lh-2)}.f5{font-size:var(--type-size-5);line-height:var(--type-lh-2)}.f6{font-size:var(--type-size-6);line-height:var(--type-lh-2);letter-spacing:var(--type-ls-1)}@media only screen and (min-width:32em){.t\:flex{display:flex}.t\:flex-1{flex:1 1 0%}.t\:flex-auto{flex:1 1 auto}.t\:flex-initial{flex:0 1 auto}.t\:flex-none{flex:none}.t\:flex-center{justify-content:center;align-items:center}.t\:flex-wrap{flex-wrap:wrap}.t\:flex-nowrap{flex-wrap:nowrap}.t\:flex-row{flex-direction:row}.t\:flex-col{flex-direction:column}.t\:flex-g0{flex-grow:0}.t\:flex-s0{flex-shrink:0}.t\:flex-g1{flex-grow:1}.t\:flex-s1{flex-shrink:1}.t\:flex-jc-s{justify-content:start}.t\:flex-jc-e{justify-content:end}.t\:flex-jc-sb{justify-content:space-between}.t\:flex-jc-c{justify-content:center}.t\:flex-ai-c{align-items:center}.t\:flex-ai-s{align-items:start}.t\:flex-ai-e{align-items:end}.t\:flex-as-c{align-self:center}.t\:flex-as-s{align-self:start}.t\:flex-as-e{align-self:end}.t\:float-none{float:none}.t\:float-r{float:right}.t\:float-l{float:left}.t\:clear{clear:both}.t\:clear-none{clear:none}.t\:clear-r{clear:right}.t\:clear-l{clear:left}.t\:f-fw100{font-weight:100}.t\:f-fw200{font-weight:200}.t\:f-fw300{font-weight:300}.t\:f-fw400{font-weight:400}.t\:f-fw500{font-weight:500}.t\:f-fw600{font-weight:600}.t\:f-fw700{font-weight:700}.t\:f-fw800{font-weight:800}.t\:f-fw900{font-weight:900}.t\:f-fs-i{font-style:italic}.t\:f-fs-n{font-style:normal}.t\:f1{font-size:var(--type-size-1);line-height:var(--type-lh-1)}.t\:f2{font-size:var(--type-size-2);line-height:var(--type-lh-1)}.t\:f3{font-size:var(--type-size-3);line-height:var(--type-lh-1)}.t\:f4{font-size:var(--type-size-4);line-height:var(--type-lh-2)}.t\:f5{font-size:var(--type-size-5);line-height:var(--type-lh-2)}.t\:f6{font-size:var(--type-size-6);line-height:var(--type-lh-2);letter-spacing:var(--type-ls-1)}}@media only screen and (min-width:64em){.d\:flex{display:flex}.d\:flex-1{flex:1 1 0%}.d\:flex-auto{flex:1 1 auto}.d\:flex-initial{flex:0 1 auto}.d\:flex-none{flex:none}.d\:flex-center{justify-content:center;align-items:center}.d\:flex-wrap{flex-wrap:wrap}.d\:flex-nowrap{flex-wrap:nowrap}.d\:flex-row{flex-direction:row}.d\:flex-col{flex-direction:column}.d\:flex-g0{flex-grow:0}.d\:flex-s0{flex-shrink:0}.d\:flex-g1{flex-grow:1}.d\:flex-s1{flex-shrink:1}.d\:flex-jc-s{justify-content:start}.d\:flex-jc-e{justify-content:end}.d\:flex-jc-sb{justify-content:space-between}.d\:flex-jc-c{justify-content:center}.d\:flex-ai-c{align-items:center}.d\:flex-ai-s{align-items:start}.d\:flex-ai-e{align-items:end}.d\:flex-as-c{align-self:center}.d\:flex-as-s{align-self:start}.d\:flex-as-e{align-self:end}.d\:float-none{float:none}.d\:float-r{float:right}.d\:float-l{float:left}.d\:clear{clear:both}.d\:clear-none{clear:none}.d\:clear-r{clear:right}.d\:clear-l{clear:left}.d\:f-fw100{font-weight:100}.d\:f-fw200{font-weight:200}.d\:f-fw300{font-weight:300}.d\:f-fw400{font-weight:400}.d\:f-fw500{font-weight:500}.d\:f-fw600{font-weight:600}.d\:f-fw700{font-weight:700}.d\:f-fw800{font-weight:800}.d\:f-fw900{font-weight:900}.d\:f-fs-i{font-style:italic}.d\:f-fs-n{font-style:normal}.d\:f1{font-size:var(--type-size-1);line-height:var(--type-lh-1)}.d\:f2{font-size:var(--type-size-2);line-height:var(--type-lh-1)}.d\:f3{font-size:var(--type-size-3);line-height:var(--type-lh-1)}.d\:f4{font-size:var(--type-size-4);line-height:var(--type-lh-2)}.d\:f5{font-size:var(--type-size-5);line-height:var(--type-lh-2)}.d\:f6{font-size:var(--type-size-6);line-height:var(--type-lh-2);letter-spacing:var(--type-ls-1)}}.grid{display:grid;gap:var(--size-4)}.grid-auto{grid-auto-flow:row}.grid-col-all,.grid-fullwidth{grid-column:1/-1}.grid-col-auto{grid-column:auto}.grid-col-e{grid-column-end:-1}.grid-cols1{grid-template-columns:repeat(1,minmax(10px,1fr))}.grid-col-s1{grid-column-start:1}.grid-col-e1{grid-column-end:1}.grid-cols2{grid-template-columns:repeat(2,minmax(10px,1fr))}.grid-col-s2{grid-column-start:2}.grid-col-e2{grid-column-end:2}.grid-cols3{grid-template-columns:repeat(3,minmax(10px,1fr))}.grid-col-s3{grid-column-start:3}.grid-col-e3{grid-column-end:3}.grid-cols4{grid-template-columns:repeat(4,minmax(10px,1fr))}.grid-col-s4{grid-column-start:4}.grid-col-e4{grid-column-end:4}.grid-cols5{grid-template-columns:repeat(5,minmax(10px,1fr))}.grid-col-s5{grid-column-start:5}.grid-col-e5{grid-column-end:5}.grid-cols6{grid-template-columns:repeat(6,minmax(10px,1fr))}.grid-col-s6{grid-column-start:6}.grid-col-e6{grid-column-end:6}.grid-cols7{grid-template-columns:repeat(7,minmax(10px,1fr))}.grid-col-s7{grid-column-start:7}.grid-col-e7{grid-column-end:7}.grid-cols8{grid-template-columns:repeat(8,minmax(10px,1fr))}.grid-col-s8{grid-column-start:8}.grid-col-e8{grid-column-end:8}.grid-cols9{grid-template-columns:repeat(9,minmax(10px,1fr))}.grid-col-s9{grid-column-start:9}.grid-col-e9{grid-column-end:9}.grid-col-span1{grid-column:span 1}.grid-col-span2{grid-column:span 2}.grid-col-span3{grid-column:span 3}.grid-col-span4{grid-column:span 4}.grid-col-span5{grid-column:span 5}.grid-col-span6{grid-column:span 6}.grid-row-all{grid-row:1/999}.grid-row-auto{grid-row:auto}.grid-row-e{grid-row-end:-1}.grid-row-span1{grid-row:span 1}.grid-row-span2{grid-row:span 2}.grid-row-span3{grid-row:span 3}.grid-row-span4{grid-row:span 4}.grid-row-span5{grid-row:span 5}.grid-row-span6{grid-row:span 6}.grid-hydrogen{grid-template-columns:2fr 2fr 1fr 1fr 2fr 2fr}.grid-helium{grid-template-columns:3fr 1fr 2fr 2fr 1fr 3fr}.grid-lithium{grid-template-columns:4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr}.grid-berilium{grid-template-columns:3fr 2fr 1fr 3fr 1fr 2fr 3fr}@media only screen and (min-width:32em){.t\:grid{display:grid;gap:var(--size-4)}.t\:grid-auto{grid-auto-flow:row}.t\:grid-col-all,.t\:grid-fullwidth{grid-column:1/-1}.t\:grid-col-auto{grid-column:auto}.t\:grid-col-e{grid-column-end:-1}.t\:grid-cols1{grid-template-columns:repeat(1,minmax(10px,1fr))}.t\:grid-col-s1{grid-column-start:1}.t\:grid-col-e1{grid-column-end:1}.t\:grid-cols2{grid-template-columns:repeat(2,minmax(10px,1fr))}.t\:grid-col-s2{grid-column-start:2}.t\:grid-col-e2{grid-column-end:2}.t\:grid-cols3{grid-template-columns:repeat(3,minmax(10px,1fr))}.t\:grid-col-s3{grid-column-start:3}.t\:grid-col-e3{grid-column-end:3}.t\:grid-cols4{grid-template-columns:repeat(4,minmax(10px,1fr))}.t\:grid-col-s4{grid-column-start:4}.t\:grid-col-e4{grid-column-end:4}.t\:grid-cols5{grid-template-columns:repeat(5,minmax(10px,1fr))}.t\:grid-col-s5{grid-column-start:5}.t\:grid-col-e5{grid-column-end:5}.t\:grid-cols6{grid-template-columns:repeat(6,minmax(10px,1fr))}.t\:grid-col-s6{grid-column-start:6}.t\:grid-col-e6{grid-column-end:6}.t\:grid-cols7{grid-template-columns:repeat(7,minmax(10px,1fr))}.t\:grid-col-s7{grid-column-start:7}.t\:grid-col-e7{grid-column-end:7}.t\:grid-cols8{grid-template-columns:repeat(8,minmax(10px,1fr))}.t\:grid-col-s8{grid-column-start:8}.t\:grid-col-e8{grid-column-end:8}.t\:grid-cols9{grid-template-columns:repeat(9,minmax(10px,1fr))}.t\:grid-col-s9{grid-column-start:9}.t\:grid-col-e9{grid-column-end:9}.t\:grid-col-span1{grid-column:span 1}.t\:grid-col-span2{grid-column:span 2}.t\:grid-col-span3{grid-column:span 3}.t\:grid-col-span4{grid-column:span 4}.t\:grid-col-span5{grid-column:span 5}.t\:grid-col-span6{grid-column:span 6}.t\:grid-row-all{grid-row:1/999}.t\:grid-row-auto{grid-row:auto}.t\:grid-row-e{grid-row-end:-1}.t\:grid-row-span1{grid-row:span 1}.t\:grid-row-span2{grid-row:span 2}.t\:grid-row-span3{grid-row:span 3}.t\:grid-row-span4{grid-row:span 4}.t\:grid-row-span5{grid-row:span 5}.t\:grid-row-span6{grid-row:span 6}.t\:grid-hydrogen{grid-template-columns:2fr 2fr 1fr 1fr 2fr 2fr}.t\:grid-helium{grid-template-columns:3fr 1fr 2fr 2fr 1fr 3fr}.t\:grid-lithium{grid-template-columns:4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr}.t\:grid-berilium{grid-template-columns:3fr 2fr 1fr 3fr 1fr 2fr 3fr}}@media only screen and (min-width:64em){.d\:grid{display:grid;gap:var(--size-4)}.d\:grid-auto{grid-auto-flow:row}.d\:grid-col-all,.d\:grid-fullwidth{grid-column:1/-1}.d\:grid-col-auto{grid-column:auto}.d\:grid-col-e{grid-column-end:-1}.d\:grid-cols1{grid-template-columns:repeat(1,minmax(10px,1fr))}.d\:grid-col-s1{grid-column-start:1}.d\:grid-col-e1{grid-column-end:1}.d\:grid-cols2{grid-template-columns:repeat(2,minmax(10px,1fr))}.d\:grid-col-s2{grid-column-start:2}.d\:grid-col-e2{grid-column-end:2}.d\:grid-cols3{grid-template-columns:repeat(3,minmax(10px,1fr))}.d\:grid-col-s3{grid-column-start:3}.d\:grid-col-e3{grid-column-end:3}.d\:grid-cols4{grid-template-columns:repeat(4,minmax(10px,1fr))}.d\:grid-col-s4{grid-column-start:4}.d\:grid-col-e4{grid-column-end:4}.d\:grid-cols5{grid-template-columns:repeat(5,minmax(10px,1fr))}.d\:grid-col-s5{grid-column-start:5}.d\:grid-col-e5{grid-column-end:5}.d\:grid-cols6{grid-template-columns:repeat(6,minmax(10px,1fr))}.d\:grid-col-s6{grid-column-start:6}.d\:grid-col-e6{grid-column-end:6}.d\:grid-cols7{grid-template-columns:repeat(7,minmax(10px,1fr))}.d\:grid-col-s7{grid-column-start:7}.d\:grid-col-e7{grid-column-end:7}.d\:grid-cols8{grid-template-columns:repeat(8,minmax(10px,1fr))}.d\:grid-col-s8{grid-column-start:8}.d\:grid-col-e8{grid-column-end:8}.d\:grid-cols9{grid-template-columns:repeat(9,minmax(10px,1fr))}.d\:grid-col-s9{grid-column-start:9}.d\:grid-col-e9{grid-column-end:9}.d\:grid-col-span1{grid-column:span 1}.d\:grid-col-span2{grid-column:span 2}.d\:grid-col-span3{grid-column:span 3}.d\:grid-col-span4{grid-column:span 4}.d\:grid-col-span5{grid-column:span 5}.d\:grid-col-span6{grid-column:span 6}.d\:grid-row-all{grid-row:1/999}.d\:grid-row-auto{grid-row:auto}.d\:grid-row-e{grid-row-end:-1}.d\:grid-row-span1{grid-row:span 1}.d\:grid-row-span2{grid-row:span 2}.d\:grid-row-span3{grid-row:span 3}.d\:grid-row-span4{grid-row:span 4}.d\:grid-row-span5{grid-row:span 5}.d\:grid-row-span6{grid-row:span 6}.d\:grid-hydrogen{grid-template-columns:2fr 2fr 1fr 1fr 2fr 2fr}.d\:grid-helium{grid-template-columns:3fr 1fr 2fr 2fr 1fr 3fr}.d\:grid-lithium{grid-template-columns:4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr}.d\:grid-berilium{grid-template-columns:3fr 2fr 1fr 3fr 1fr 2fr 3fr}}.gap0{gap:var(--size-0)}.gap-x0{-moz-column-gap:var(--size-0);column-gap:var(--size-0)}.gap-y0{row-gap:var(--size-0)}.gap1{gap:var(--size-1)}.gap-x1{-moz-column-gap:var(--size-1);column-gap:var(--size-1)}.gap-y1{row-gap:var(--size-1)}.gap2{gap:var(--size-2)}.gap-x2{-moz-column-gap:var(--size-2);column-gap:var(--size-2)}.gap-y2{row-gap:var(--size-2)}.gap3{gap:var(--size-3)}.gap-x3{-moz-column-gap:var(--size-3);column-gap:var(--size-3)}.gap-y3{row-gap:var(--size-3)}.gap4{gap:var(--size-4)}.gap-x4{-moz-column-gap:var(--size-4);column-gap:var(--size-4)}.gap-y4{row-gap:var(--size-4)}.gap5{gap:var(--size-5)}.gap-x5{-moz-column-gap:var(--size-5);column-gap:var(--size-5)}.gap-y5{row-gap:var(--size-5)}.gap6{gap:var(--size-6)}.gap-x6{-moz-column-gap:var(--size-6);column-gap:var(--size-6)}.gap-y6{row-gap:var(--size-6)}.gap7{gap:var(--size-7)}.gap-x7{-moz-column-gap:var(--size-7);column-gap:var(--size-7)}.gap-y7{row-gap:var(--size-7)}.l-inline,.l-ls-n{list-style-type:none;padding:0}.l-inline li{display:inline}.m-auto{margin-inline:auto}.m0{margin:var(--size-0)}.m-x0{margin-inline:var(--size-0)}.m-y0{margin-block:var(--size-0)}.m-t0{margin-top:var(--size-0)}.m-r0{margin-right:var(--size-0)}.m-b0{margin-bottom:var(--size-0)}.m-l0{margin-left:var(--size-0)}.m1{margin:var(--size-1)}.m-x1{margin-inline:var(--size-1)}.m-y1{margin-block:var(--size-1)}.m-t1{margin-top:var(--size-1)}.m-r1{margin-right:var(--size-1)}.m-b1{margin-bottom:var(--size-1)}.m-l1{margin-left:var(--size-1)}.m2{margin:var(--size-2)}.m-x2{margin-inline:var(--size-2)}.m-y2{margin-block:var(--size-2)}.m-t2{margin-top:var(--size-2)}.m-r2{margin-right:var(--size-2)}.m-b2{margin-bottom:var(--size-2)}.m-l2{margin-left:var(--size-2)}.m3{margin:var(--size-3)}.m-x3{margin-inline:var(--size-3)}.m-y3{margin-block:var(--size-3)}.m-t3{margin-top:var(--size-3)}.m-r3{margin-right:var(--size-3)}.m-b3{margin-bottom:var(--size-3)}.m-l3{margin-left:var(--size-3)}.m4{margin:var(--size-4)}.m-x4{margin-inline:var(--size-4)}.m-y4{margin-block:var(--size-4)}.m-t4{margin-top:var(--size-4)}.m-r4{margin-right:var(--size-4)}.m-b4{margin-bottom:var(--size-4)}.m-l4{margin-left:var(--size-4)}.m5{margin:var(--size-5)}.m-x5{margin-inline:var(--size-5)}.m-y5{margin-block:var(--size-5)}.m-t5{margin-top:var(--size-5)}.m-r5{margin-right:var(--size-5)}.m-b5{margin-bottom:var(--size-5)}.m-l5{margin-left:var(--size-5)}.m6{margin:var(--size-6)}.m-x6{margin-inline:var(--size-6)}.m-y6{margin-block:var(--size-6)}.m-t6{margin-top:var(--size-6)}.m-r6{margin-right:var(--size-6)}.m-b6{margin-bottom:var(--size-6)}.m-l6{margin-left:var(--size-6)}.o0,.o0__hover:hover{opacity:0}.o10,.o10__hover:hover{opacity:.1}.o20,.o20__hover:hover{opacity:.2}.o30,.o30__hover:hover{opacity:.3}.o40,.o40__hover:hover{opacity:.4}.o50,.o50__hover:hover{opacity:.5}.o60,.o60__hover:hover{opacity:.6}.o70,.o70__hover:hover{opacity:.7}.o80,.o80__hover:hover{opacity:.8}.o90,.o90__hover:hover{opacity:.9}.o100,.o100__hover:hover{opacity:1}.order-none{order:0}.order-first{order:-1}.order-last{order:9999}.order1{order:1}.order2{order:2}.order3{order:3}.order4{order:4}.order5{order:5}.order6{order:6}@media only screen and (min-width:32em){.t\:gap0{gap:var(--size-0)}.t\:gap-x0{-moz-column-gap:var(--size-0);column-gap:var(--size-0)}.t\:gap-y0{row-gap:var(--size-0)}.t\:gap1{gap:var(--size-1)}.t\:gap-x1{-moz-column-gap:var(--size-1);column-gap:var(--size-1)}.t\:gap-y1{row-gap:var(--size-1)}.t\:gap2{gap:var(--size-2)}.t\:gap-x2{-moz-column-gap:var(--size-2);column-gap:var(--size-2)}.t\:gap-y2{row-gap:var(--size-2)}.t\:gap3{gap:var(--size-3)}.t\:gap-x3{-moz-column-gap:var(--size-3);column-gap:var(--size-3)}.t\:gap-y3{row-gap:var(--size-3)}.t\:gap4{gap:var(--size-4)}.t\:gap-x4{-moz-column-gap:var(--size-4);column-gap:var(--size-4)}.t\:gap-y4{row-gap:var(--size-4)}.t\:gap5{gap:var(--size-5)}.t\:gap-x5{-moz-column-gap:var(--size-5);column-gap:var(--size-5)}.t\:gap-y5{row-gap:var(--size-5)}.t\:gap6{gap:var(--size-6)}.t\:gap-x6{-moz-column-gap:var(--size-6);column-gap:var(--size-6)}.t\:gap-y6{row-gap:var(--size-6)}.t\:gap7{gap:var(--size-7)}.t\:gap-x7{-moz-column-gap:var(--size-7);column-gap:var(--size-7)}.t\:gap-y7{row-gap:var(--size-7)}.t\:l-inline,.t\:l-ls-n{list-style-type:none;padding:0}.t\:l-inline li{display:inline}.t\:m-auto{margin-inline:auto}.t\:m0{margin:var(--size-0)}.t\:m-x0{margin-inline:var(--size-0)}.t\:m-y0{margin-block:var(--size-0)}.t\:m-t0{margin-top:var(--size-0)}.t\:m-r0{margin-right:var(--size-0)}.t\:m-b0{margin-bottom:var(--size-0)}.t\:m-l0{margin-left:var(--size-0)}.t\:m1{margin:var(--size-1)}.t\:m-x1{margin-inline:var(--size-1)}.t\:m-y1{margin-block:var(--size-1)}.t\:m-t1{margin-top:var(--size-1)}.t\:m-r1{margin-right:var(--size-1)}.t\:m-b1{margin-bottom:var(--size-1)}.t\:m-l1{margin-left:var(--size-1)}.t\:m2{margin:var(--size-2)}.t\:m-x2{margin-inline:var(--size-2)}.t\:m-y2{margin-block:var(--size-2)}.t\:m-t2{margin-top:var(--size-2)}.t\:m-r2{margin-right:var(--size-2)}.t\:m-b2{margin-bottom:var(--size-2)}.t\:m-l2{margin-left:var(--size-2)}.t\:m3{margin:var(--size-3)}.t\:m-x3{margin-inline:var(--size-3)}.t\:m-y3{margin-block:var(--size-3)}.t\:m-t3{margin-top:var(--size-3)}.t\:m-r3{margin-right:var(--size-3)}.t\:m-b3{margin-bottom:var(--size-3)}.t\:m-l3{margin-left:var(--size-3)}.t\:m4{margin:var(--size-4)}.t\:m-x4{margin-inline:var(--size-4)}.t\:m-y4{margin-block:var(--size-4)}.t\:m-t4{margin-top:var(--size-4)}.t\:m-r4{margin-right:var(--size-4)}.t\:m-b4{margin-bottom:var(--size-4)}.t\:m-l4{margin-left:var(--size-4)}.t\:m5{margin:var(--size-5)}.t\:m-x5{margin-inline:var(--size-5)}.t\:m-y5{margin-block:var(--size-5)}.t\:m-t5{margin-top:var(--size-5)}.t\:m-r5{margin-right:var(--size-5)}.t\:m-b5{margin-bottom:var(--size-5)}.t\:m-l5{margin-left:var(--size-5)}.t\:m6{margin:var(--size-6)}.t\:m-x6{margin-inline:var(--size-6)}.t\:m-y6{margin-block:var(--size-6)}.t\:m-t6{margin-top:var(--size-6)}.t\:m-r6{margin-right:var(--size-6)}.t\:m-b6{margin-bottom:var(--size-6)}.t\:m-l6{margin-left:var(--size-6)}.t\:o0,.t\:o0__hover:hover{opacity:0}.t\:o10,.t\:o10__hover:hover{opacity:.1}.t\:o20,.t\:o20__hover:hover{opacity:.2}.t\:o30,.t\:o30__hover:hover{opacity:.3}.t\:o40,.t\:o40__hover:hover{opacity:.4}.t\:o50,.t\:o50__hover:hover{opacity:.5}.t\:o60,.t\:o60__hover:hover{opacity:.6}.t\:o70,.t\:o70__hover:hover{opacity:.7}.t\:o80,.t\:o80__hover:hover{opacity:.8}.t\:o90,.t\:o90__hover:hover{opacity:.9}.t\:o100,.t\:o100__hover:hover{opacity:1}.t\:order-none{order:0}.t\:order-first{order:-1}.t\:order-last{order:9999}.t\:order1{order:1}.t\:order2{order:2}.t\:order3{order:3}.t\:order4{order:4}.t\:order5{order:5}.t\:order6{order:6}}@media only screen and (min-width:64em){.d\:gap0{gap:var(--size-0)}.d\:gap-x0{-moz-column-gap:var(--size-0);column-gap:var(--size-0)}.d\:gap-y0{row-gap:var(--size-0)}.d\:gap1{gap:var(--size-1)}.d\:gap-x1{-moz-column-gap:var(--size-1);column-gap:var(--size-1)}.d\:gap-y1{row-gap:var(--size-1)}.d\:gap2{gap:var(--size-2)}.d\:gap-x2{-moz-column-gap:var(--size-2);column-gap:var(--size-2)}.d\:gap-y2{row-gap:var(--size-2)}.d\:gap3{gap:var(--size-3)}.d\:gap-x3{-moz-column-gap:var(--size-3);column-gap:var(--size-3)}.d\:gap-y3{row-gap:var(--size-3)}.d\:gap4{gap:var(--size-4)}.d\:gap-x4{-moz-column-gap:var(--size-4);column-gap:var(--size-4)}.d\:gap-y4{row-gap:var(--size-4)}.d\:gap5{gap:var(--size-5)}.d\:gap-x5{-moz-column-gap:var(--size-5);column-gap:var(--size-5)}.d\:gap-y5{row-gap:var(--size-5)}.d\:gap6{gap:var(--size-6)}.d\:gap-x6{-moz-column-gap:var(--size-6);column-gap:var(--size-6)}.d\:gap-y6{row-gap:var(--size-6)}.d\:gap7{gap:var(--size-7)}.d\:gap-x7{-moz-column-gap:var(--size-7);column-gap:var(--size-7)}.d\:gap-y7{row-gap:var(--size-7)}.d\:l-inline,.d\:l-ls-n{list-style-type:none;padding:0}.d\:l-inline li{display:inline}.d\:m-auto{margin-inline:auto}.d\:m0{margin:var(--size-0)}.d\:m-x0{margin-inline:var(--size-0)}.d\:m-y0{margin-block:var(--size-0)}.d\:m-t0{margin-top:var(--size-0)}.d\:m-r0{margin-right:var(--size-0)}.d\:m-b0{margin-bottom:var(--size-0)}.d\:m-l0{margin-left:var(--size-0)}.d\:m1{margin:var(--size-1)}.d\:m-x1{margin-inline:var(--size-1)}.d\:m-y1{margin-block:var(--size-1)}.d\:m-t1{margin-top:var(--size-1)}.d\:m-r1{margin-right:var(--size-1)}.d\:m-b1{margin-bottom:var(--size-1)}.d\:m-l1{margin-left:var(--size-1)}.d\:m2{margin:var(--size-2)}.d\:m-x2{margin-inline:var(--size-2)}.d\:m-y2{margin-block:var(--size-2)}.d\:m-t2{margin-top:var(--size-2)}.d\:m-r2{margin-right:var(--size-2)}.d\:m-b2{margin-bottom:var(--size-2)}.d\:m-l2{margin-left:var(--size-2)}.d\:m3{margin:var(--size-3)}.d\:m-x3{margin-inline:var(--size-3)}.d\:m-y3{margin-block:var(--size-3)}.d\:m-t3{margin-top:var(--size-3)}.d\:m-r3{margin-right:var(--size-3)}.d\:m-b3{margin-bottom:var(--size-3)}.d\:m-l3{margin-left:var(--size-3)}.d\:m4{margin:var(--size-4)}.d\:m-x4{margin-inline:var(--size-4)}.d\:m-y4{margin-block:var(--size-4)}.d\:m-t4{margin-top:var(--size-4)}.d\:m-r4{margin-right:var(--size-4)}.d\:m-b4{margin-bottom:var(--size-4)}.d\:m-l4{margin-left:var(--size-4)}.d\:m5{margin:var(--size-5)}.d\:m-x5{margin-inline:var(--size-5)}.d\:m-y5{margin-block:var(--size-5)}.d\:m-t5{margin-top:var(--size-5)}.d\:m-r5{margin-right:var(--size-5)}.d\:m-b5{margin-bottom:var(--size-5)}.d\:m-l5{margin-left:var(--size-5)}.d\:m6{margin:var(--size-6)}.d\:m-x6{margin-inline:var(--size-6)}.d\:m-y6{margin-block:var(--size-6)}.d\:m-t6{margin-top:var(--size-6)}.d\:m-r6{margin-right:var(--size-6)}.d\:m-b6{margin-bottom:var(--size-6)}.d\:m-l6{margin-left:var(--size-6)}.d\:o0,.d\:o0__hover:hover{opacity:0}.d\:o10,.d\:o10__hover:hover{opacity:.1}.d\:o20,.d\:o20__hover:hover{opacity:.2}.d\:o30,.d\:o30__hover:hover{opacity:.3}.d\:o40,.d\:o40__hover:hover{opacity:.4}.d\:o50,.d\:o50__hover:hover{opacity:.5}.d\:o60,.d\:o60__hover:hover{opacity:.6}.d\:o70,.d\:o70__hover:hover{opacity:.7}.d\:o80,.d\:o80__hover:hover{opacity:.8}.d\:o90,.d\:o90__hover:hover{opacity:.9}.d\:o100,.d\:o100__hover:hover{opacity:1}.d\:order-none{order:0}.d\:order-first{order:-1}.d\:order-last{order:9999}.d\:order1{order:1}.d\:order2{order:2}.d\:order3{order:3}.d\:order4{order:4}.d\:order5{order:5}.d\:order6{order:6}}.overflow{overflow:auto}.overflow-truncate{overflow:hidden;text-overflow:ellipsis}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-auto::-webkit-scrollbar,.overflow-scroll::-webkit-scrollbar{width:var(--size-3);height:var(--size-3)}.overflow-auto::-webkit-scrollbar-track,.overflow-scroll::-webkit-scrollbar-track{background:var(--color-fg)}.overflow-auto::-webkit-scrollbar-thumb,.overflow-scroll::-webkit-scrollbar-thumb{background:var(--color-fg-accent);border:1px solid var(--color-fg)}.outline,.screen-reader-text:focus{outline:var(--size-1) solid var(--color-bg-highlight);outline-offset:var(--size-1)}.p0{padding:var(--size-0)}.p-x0{padding-inline:var(--size-0)}.p-y0{padding-block:var(--size-0)}.p-t0{padding-top:var(--size-0)}.p-r0{padding-right:var(--size-0)}.p-b0{padding-bottom:var(--size-0)}.p-l0{padding-left:var(--size-0)}.p1{padding:var(--size-1)}.p-x1{padding-inline:var(--size-1)}.p-y1{padding-block:var(--size-1)}.p-t1{padding-top:var(--size-1)}.p-r1{padding-right:var(--size-1)}.p-b1{padding-bottom:var(--size-1)}.p-l1{padding-left:var(--size-1)}.p2{padding:var(--size-2)}.p-x2{padding-inline:var(--size-2)}.p-y2{padding-block:var(--size-2)}.p-t2{padding-top:var(--size-2)}.p-r2{padding-right:var(--size-2)}.p-b2{padding-bottom:var(--size-2)}.p-l2{padding-left:var(--size-2)}.p3{padding:var(--size-3)}.p-x3{padding-inline:var(--size-3)}.p-y3{padding-block:var(--size-3)}.p-t3{padding-top:var(--size-3)}.p-r3{padding-right:var(--size-3)}.p-b3{padding-bottom:var(--size-3)}.p-l3{padding-left:var(--size-3)}.p4{padding:var(--size-4)}.p-x4{padding-inline:var(--size-4)}.p-y4{padding-block:var(--size-4)}.p-t4{padding-top:var(--size-4)}.p-r4{padding-right:var(--size-4)}.p-b4{padding-bottom:var(--size-4)}.p-l4{padding-left:var(--size-4)}.p5{padding:var(--size-5)}.p-x5{padding-inline:var(--size-5)}.p-y5{padding-block:var(--size-5)}.p-t5{padding-top:var(--size-5)}.p-r5{padding-right:var(--size-5)}.p-b5{padding-bottom:var(--size-5)}.p-l5{padding-left:var(--size-5)}.p6{padding:var(--size-6)}.p-x6{padding-inline:var(--size-6)}.p-y6{padding-block:var(--size-6)}.p-t6{padding-top:var(--size-6)}.p-r6{padding-right:var(--size-6)}.p-b6{padding-bottom:var(--size-6)}.p-l6{padding-left:var(--size-6)}.position-a{position:absolute}.position-r{position:relative}.position-f{position:fixed}.position-s{position:sticky;top:0}.position-cover{position:absolute;top:0;right:0;bottom:0;left:0}.pc-jc-s{justify-content:start}.pc-ac-s{align-content:start}.pc-ji-s{justify-items:start}.pc-ai-s{align-items:start}.pc-jc-e{justify-content:end}.pc-ac-e{align-content:end}.pc-ji-e{justify-items:end}.pc-ai-e{align-items:end}.pc-jc-fs{justify-content:flex-start}.pc-ac-fs{align-content:flex-start}.pc-ji-fs{justify-items:flex-start}.pc-ai-fs{align-items:flex-start}.pc-jc-fe{justify-content:flex-end}.pc-ac-fe{align-content:flex-end}.pc-ji-fe{justify-items:flex-end}.pc-ai-fe{align-items:flex-end}.pc-jc-c{justify-content:center}.pc-ac-c{align-content:center}.pc-ji-c{justify-items:center}.pc-ai-c{align-items:center}.pc-jc-sb{justify-content:space-between}.pc-ac-sb{align-content:space-between}.pc-ji-sb{justify-items:space-between}.pc-ai-sb{align-items:space-between}.pc-jc-sa{justify-content:space-around}.pc-ac-sa{align-content:space-around}.pc-ji-sa{justify-items:space-around}.pc-ai-sa{align-items:space-around}.pc-jc-se{justify-content:space-evenly}.pc-ac-se{align-content:space-evenly}.pc-ji-se{justify-items:space-evenly}.pc-ai-se{align-items:space-evenly}@media print{.print-hide{display:none}.print-block{display:block}.print-inline{display:inline}}.table-zebra tr:nth-child(odd){background-color:var(--color-pop)}.t-ideal-length dl,.t-ideal-length h1,.t-ideal-length h2,.t-ideal-length h3,.t-ideal-length h4,.t-ideal-length h5,.t-ideal-length h6,.t-ideal-length ol,.t-ideal-length ul,.t-ideal-length>p{max-width:var(--line-length)}.t-ta-c{text-align:center}.t-ta-l{text-align:left}.t-ta-r{text-align:right}.t-td-n,.t-td-n__hover:hover{text-decoration:none}.t-td-u,.t-td-u__hover:hover{text-decoration:underline}.t-td-st{text-decoration:line-through}.t-tt-n{text-transform:none}.t-tt-u{text-transform:uppercase;letter-spacing:var(--type-ls-1)}.t-nowrap{white-space:nowrap}.t-balance{text-wrap:balance}.visible{visibility:visible}.invisible{visibility:hidden}.w-auto{width:auto}.w-screen{width:100vw}.w100{width:100%}.w1{width:var(--size-3)}.w2{width:var(--size-4)}.w3{width:var(--size-5)}.w4{width:var(--size-6)}.w5{width:var(--size-7)}.w6{width:var(--size-8)}.w7{width:var(--size-9)}.w8{width:var(--size-10)}.w10p{width:10%}.w20p{width:20%}.w30p{width:30%}.w40p{width:40%}.w50p{width:50%}.w60p{width:60%}.w70p{width:70%}.w80p{width:80%}.w90p{width:90%}.w100p{width:100%}.mw-auto{max-width:auto}.mw-screen{max-width:100vw}.mw100{max-width:100%}.mw1{max-width:var(--size-3)}.mw2{max-width:var(--size-4)}.mw3{max-width:var(--size-5)}.mw4{max-width:var(--size-6)}.mw5{max-width:var(--size-7)}.mw6{max-width:var(--size-8)}.mw7{max-width:var(--size-9)}.mw8{max-width:var(--size-10)}.mw10p{max-width:10%}.mw20p{max-width:20%}.mw30p{max-width:30%}.mw40p{max-width:40%}.mw50p{max-width:50%}.mw60p{max-width:60%}.mw70p{max-width:70%}.mw80p{max-width:80%}.mw90p{max-width:90%}.mw100p{max-width:100%}.h-auto{height:auto}.h-screen{height:100vw}.h100{height:100%}.h1{height:var(--size-3)}.h2{height:var(--size-4)}.h3{height:var(--size-5)}.h4{height:var(--size-6)}.h5{height:var(--size-7)}.h6{height:var(--size-8)}.h7{height:var(--size-9)}.h8{height:var(--size-10)}.h10p{height:10%}.h20p{height:20%}.h30p{height:30%}.h40p{height:40%}.h50p{height:50%}.h60p{height:60%}.h70p{height:70%}.h80p{height:80%}.h90p{height:90%}.h100p{height:100%}.mh-auto{max-height:auto}.mh-screen{max-height:100vw}.mh100{max-height:100%}.mh1{max-height:var(--size-3)}.mh2{max-height:var(--size-4)}.mh3{max-height:var(--size-5)}.mh4{max-height:var(--size-6)}.mh5{max-height:var(--size-7)}.mh6{max-height:var(--size-8)}.mh7{max-height:var(--size-9)}.mh8{max-height:var(--size-10)}.mh10p{max-height:10%}.mh20p{max-height:20%}.mh30p{max-height:30%}.mh40p{max-height:40%}.mh50p{max-height:50%}.mh60p{max-height:60%}.mh70p{max-height:70%}.mh80p{max-height:80%}.mh90p{max-height:90%}.mh100p{max-height:100%}@media only screen and (min-width:32em){.t\:p0{padding:var(--size-0)}.t\:p-x0{padding-inline:var(--size-0)}.t\:p-y0{padding-block:var(--size-0)}.t\:p-t0{padding-top:var(--size-0)}.t\:p-r0{padding-right:var(--size-0)}.t\:p-b0{padding-bottom:var(--size-0)}.t\:p-l0{padding-left:var(--size-0)}.t\:p1{padding:var(--size-1)}.t\:p-x1{padding-inline:var(--size-1)}.t\:p-y1{padding-block:var(--size-1)}.t\:p-t1{padding-top:var(--size-1)}.t\:p-r1{padding-right:var(--size-1)}.t\:p-b1{padding-bottom:var(--size-1)}.t\:p-l1{padding-left:var(--size-1)}.t\:p2{padding:var(--size-2)}.t\:p-x2{padding-inline:var(--size-2)}.t\:p-y2{padding-block:var(--size-2)}.t\:p-t2{padding-top:var(--size-2)}.t\:p-r2{padding-right:var(--size-2)}.t\:p-b2{padding-bottom:var(--size-2)}.t\:p-l2{padding-left:var(--size-2)}.t\:p3{padding:var(--size-3)}.t\:p-x3{padding-inline:var(--size-3)}.t\:p-y3{padding-block:var(--size-3)}.t\:p-t3{padding-top:var(--size-3)}.t\:p-r3{padding-right:var(--size-3)}.t\:p-b3{padding-bottom:var(--size-3)}.t\:p-l3{padding-left:var(--size-3)}.t\:p4{padding:var(--size-4)}.t\:p-x4{padding-inline:var(--size-4)}.t\:p-y4{padding-block:var(--size-4)}.t\:p-t4{padding-top:var(--size-4)}.t\:p-r4{padding-right:var(--size-4)}.t\:p-b4{padding-bottom:var(--size-4)}.t\:p-l4{padding-left:var(--size-4)}.t\:p5{padding:var(--size-5)}.t\:p-x5{padding-inline:var(--size-5)}.t\:p-y5{padding-block:var(--size-5)}.t\:p-t5{padding-top:var(--size-5)}.t\:p-r5{padding-right:var(--size-5)}.t\:p-b5{padding-bottom:var(--size-5)}.t\:p-l5{padding-left:var(--size-5)}.t\:p6{padding:var(--size-6)}.t\:p-x6{padding-inline:var(--size-6)}.t\:p-y6{padding-block:var(--size-6)}.t\:p-t6{padding-top:var(--size-6)}.t\:p-r6{padding-right:var(--size-6)}.t\:p-b6{padding-bottom:var(--size-6)}.t\:p-l6{padding-left:var(--size-6)}.t\:position-a{position:absolute}.t\:position-r{position:relative}.t\:position-f{position:fixed}.t\:position-s{position:sticky;top:0}.t\:position-cover{position:absolute;top:0;right:0;bottom:0;left:0}.t\:pc-jc-s{justify-content:start}.t\:pc-ac-s{align-content:start}.t\:pc-ji-s{justify-items:start}.t\:pc-ai-s{align-items:start}.t\:pc-jc-e{justify-content:end}.t\:pc-ac-e{align-content:end}.t\:pc-ji-e{justify-items:end}.t\:pc-ai-e{align-items:end}.t\:pc-jc-fs{justify-content:flex-start}.t\:pc-ac-fs{align-content:flex-start}.t\:pc-ji-fs{justify-items:flex-start}.t\:pc-ai-fs{align-items:flex-start}.t\:pc-jc-fe{justify-content:flex-end}.t\:pc-ac-fe{align-content:flex-end}.t\:pc-ji-fe{justify-items:flex-end}.t\:pc-ai-fe{align-items:flex-end}.t\:pc-jc-c{justify-content:center}.t\:pc-ac-c{align-content:center}.t\:pc-ji-c{justify-items:center}.t\:pc-ai-c{align-items:center}.t\:pc-jc-sb{justify-content:space-between}.t\:pc-ac-sb{align-content:space-between}.t\:pc-ji-sb{justify-items:space-between}.t\:pc-ai-sb{align-items:space-between}.t\:pc-jc-sa{justify-content:space-around}.t\:pc-ac-sa{align-content:space-around}.t\:pc-ji-sa{justify-items:space-around}.t\:pc-ai-sa{align-items:space-around}.t\:pc-jc-se{justify-content:space-evenly}.t\:pc-ac-se{align-content:space-evenly}.t\:pc-ji-se{justify-items:space-evenly}.t\:pc-ai-se{align-items:space-evenly}.t\:t-ideal-length dl,.t\:t-ideal-length h1,.t\:t-ideal-length h2,.t\:t-ideal-length h3,.t\:t-ideal-length h4,.t\:t-ideal-length h5,.t\:t-ideal-length h6,.t\:t-ideal-length ol,.t\:t-ideal-length ul,.t\:t-ideal-length>p{max-width:var(--line-length)}.t\:t-ta-c{text-align:center}.t\:t-ta-l{text-align:left}.t\:t-ta-r{text-align:right}.t\:t-td-n,.t\:t-td-n__hover:hover{text-decoration:none}.t\:t-td-u,.t\:t-td-u__hover:hover{text-decoration:underline}.t\:t-td-st{text-decoration:line-through}.t\:t-tt-n{text-transform:none}.t\:t-tt-u{text-transform:uppercase;letter-spacing:var(--type-ls-1)}.t\:t-nowrap{white-space:nowrap}.t\:t-balance{text-wrap:balance}.t\:w-auto{width:auto}.t\:w-screen{width:100vw}.t\:w100{width:100%}.t\:w1{width:var(--size-3)}.t\:w2{width:var(--size-4)}.t\:w3{width:var(--size-5)}.t\:w4{width:var(--size-6)}.t\:w5{width:var(--size-7)}.t\:w6{width:var(--size-8)}.t\:w7{width:var(--size-9)}.t\:w8{width:var(--size-10)}.t\:w10p{width:10%}.t\:w20p{width:20%}.t\:w30p{width:30%}.t\:w40p{width:40%}.t\:w50p{width:50%}.t\:w60p{width:60%}.t\:w70p{width:70%}.t\:w80p{width:80%}.t\:w90p{width:90%}.t\:w100p{width:100%}.t\:mw-auto{max-width:auto}.t\:mw-screen{max-width:100vw}.t\:mw100{max-width:100%}.t\:mw1{max-width:var(--size-3)}.t\:mw2{max-width:var(--size-4)}.t\:mw3{max-width:var(--size-5)}.t\:mw4{max-width:var(--size-6)}.t\:mw5{max-width:var(--size-7)}.t\:mw6{max-width:var(--size-8)}.t\:mw7{max-width:var(--size-9)}.t\:mw8{max-width:var(--size-10)}.t\:mw10p{max-width:10%}.t\:mw20p{max-width:20%}.t\:mw30p{max-width:30%}.t\:mw40p{max-width:40%}.t\:mw50p{max-width:50%}.t\:mw60p{max-width:60%}.t\:mw70p{max-width:70%}.t\:mw80p{max-width:80%}.t\:mw90p{max-width:90%}.t\:mw100p{max-width:100%}.t\:h-auto{height:auto}.t\:h-screen{height:100vw}.t\:h100{height:100%}.t\:h1{height:var(--size-3)}.t\:h2{height:var(--size-4)}.t\:h3{height:var(--size-5)}.t\:h4{height:var(--size-6)}.t\:h5{height:var(--size-7)}.t\:h6{height:var(--size-8)}.t\:h7{height:var(--size-9)}.t\:h8{height:var(--size-10)}.t\:h10p{height:10%}.t\:h20p{height:20%}.t\:h30p{height:30%}.t\:h40p{height:40%}.t\:h50p{height:50%}.t\:h60p{height:60%}.t\:h70p{height:70%}.t\:h80p{height:80%}.t\:h90p{height:90%}.t\:h100p{height:100%}.t\:mh-auto{max-height:auto}.t\:mh-screen{max-height:100vw}.t\:mh100{max-height:100%}.t\:mh1{max-height:var(--size-3)}.t\:mh2{max-height:var(--size-4)}.t\:mh3{max-height:var(--size-5)}.t\:mh4{max-height:var(--size-6)}.t\:mh5{max-height:var(--size-7)}.t\:mh6{max-height:var(--size-8)}.t\:mh7{max-height:var(--size-9)}.t\:mh8{max-height:var(--size-10)}.t\:mh10p{max-height:10%}.t\:mh20p{max-height:20%}.t\:mh30p{max-height:30%}.t\:mh40p{max-height:40%}.t\:mh50p{max-height:50%}.t\:mh60p{max-height:60%}.t\:mh70p{max-height:70%}.t\:mh80p{max-height:80%}.t\:mh90p{max-height:90%}.t\:mh100p{max-height:100%}}@media only screen and (min-width:64em){.d\:p0{padding:var(--size-0)}.d\:p-x0{padding-inline:var(--size-0)}.d\:p-y0{padding-block:var(--size-0)}.d\:p-t0{padding-top:var(--size-0)}.d\:p-r0{padding-right:var(--size-0)}.d\:p-b0{padding-bottom:var(--size-0)}.d\:p-l0{padding-left:var(--size-0)}.d\:p1{padding:var(--size-1)}.d\:p-x1{padding-inline:var(--size-1)}.d\:p-y1{padding-block:var(--size-1)}.d\:p-t1{padding-top:var(--size-1)}.d\:p-r1{padding-right:var(--size-1)}.d\:p-b1{padding-bottom:var(--size-1)}.d\:p-l1{padding-left:var(--size-1)}.d\:p2{padding:var(--size-2)}.d\:p-x2{padding-inline:var(--size-2)}.d\:p-y2{padding-block:var(--size-2)}.d\:p-t2{padding-top:var(--size-2)}.d\:p-r2{padding-right:var(--size-2)}.d\:p-b2{padding-bottom:var(--size-2)}.d\:p-l2{padding-left:var(--size-2)}.d\:p3{padding:var(--size-3)}.d\:p-x3{padding-inline:var(--size-3)}.d\:p-y3{padding-block:var(--size-3)}.d\:p-t3{padding-top:var(--size-3)}.d\:p-r3{padding-right:var(--size-3)}.d\:p-b3{padding-bottom:var(--size-3)}.d\:p-l3{padding-left:var(--size-3)}.d\:p4{padding:var(--size-4)}.d\:p-x4{padding-inline:var(--size-4)}.d\:p-y4{padding-block:var(--size-4)}.d\:p-t4{padding-top:var(--size-4)}.d\:p-r4{padding-right:var(--size-4)}.d\:p-b4{padding-bottom:var(--size-4)}.d\:p-l4{padding-left:var(--size-4)}.d\:p5{padding:var(--size-5)}.d\:p-x5{padding-inline:var(--size-5)}.d\:p-y5{padding-block:var(--size-5)}.d\:p-t5{padding-top:var(--size-5)}.d\:p-r5{padding-right:var(--size-5)}.d\:p-b5{padding-bottom:var(--size-5)}.d\:p-l5{padding-left:var(--size-5)}.d\:p6{padding:var(--size-6)}.d\:p-x6{padding-inline:var(--size-6)}.d\:p-y6{padding-block:var(--size-6)}.d\:p-t6{padding-top:var(--size-6)}.d\:p-r6{padding-right:var(--size-6)}.d\:p-b6{padding-bottom:var(--size-6)}.d\:p-l6{padding-left:var(--size-6)}.d\:position-a{position:absolute}.d\:position-r{position:relative}.d\:position-f{position:fixed}.d\:position-s{position:sticky;top:0}.d\:position-cover{position:absolute;top:0;right:0;bottom:0;left:0}.d\:pc-jc-s{justify-content:start}.d\:pc-ac-s{align-content:start}.d\:pc-ji-s{justify-items:start}.d\:pc-ai-s{align-items:start}.d\:pc-jc-e{justify-content:end}.d\:pc-ac-e{align-content:end}.d\:pc-ji-e{justify-items:end}.d\:pc-ai-e{align-items:end}.d\:pc-jc-fs{justify-content:flex-start}.d\:pc-ac-fs{align-content:flex-start}.d\:pc-ji-fs{justify-items:flex-start}.d\:pc-ai-fs{align-items:flex-start}.d\:pc-jc-fe{justify-content:flex-end}.d\:pc-ac-fe{align-content:flex-end}.d\:pc-ji-fe{justify-items:flex-end}.d\:pc-ai-fe{align-items:flex-end}.d\:pc-jc-c{justify-content:center}.d\:pc-ac-c{align-content:center}.d\:pc-ji-c{justify-items:center}.d\:pc-ai-c{align-items:center}.d\:pc-jc-sb{justify-content:space-between}.d\:pc-ac-sb{align-content:space-between}.d\:pc-ji-sb{justify-items:space-between}.d\:pc-ai-sb{align-items:space-between}.d\:pc-jc-sa{justify-content:space-around}.d\:pc-ac-sa{align-content:space-around}.d\:pc-ji-sa{justify-items:space-around}.d\:pc-ai-sa{align-items:space-around}.d\:pc-jc-se{justify-content:space-evenly}.d\:pc-ac-se{align-content:space-evenly}.d\:pc-ji-se{justify-items:space-evenly}.d\:pc-ai-se{align-items:space-evenly}.d\:t-ideal-length dl,.d\:t-ideal-length h1,.d\:t-ideal-length h2,.d\:t-ideal-length h3,.d\:t-ideal-length h4,.d\:t-ideal-length h5,.d\:t-ideal-length h6,.d\:t-ideal-length ol,.d\:t-ideal-length ul,.d\:t-ideal-length>p{max-width:var(--line-length)}.d\:t-ta-c{text-align:center}.d\:t-ta-l{text-align:left}.d\:t-ta-r{text-align:right}.d\:t-td-n,.d\:t-td-n__hover:hover{text-decoration:none}.d\:t-td-u,.d\:t-td-u__hover:hover{text-decoration:underline}.d\:t-td-st{text-decoration:line-through}.d\:t-tt-n{text-transform:none}.d\:t-tt-u{text-transform:uppercase;letter-spacing:var(--type-ls-1)}.d\:t-nowrap{white-space:nowrap}.d\:t-balance{text-wrap:balance}.d\:w-auto{width:auto}.d\:w-screen{width:100vw}.d\:w100{width:100%}.d\:w1{width:var(--size-3)}.d\:w2{width:var(--size-4)}.d\:w3{width:var(--size-5)}.d\:w4{width:var(--size-6)}.d\:w5{width:var(--size-7)}.d\:w6{width:var(--size-8)}.d\:w7{width:var(--size-9)}.d\:w8{width:var(--size-10)}.d\:w10p{width:10%}.d\:w20p{width:20%}.d\:w30p{width:30%}.d\:w40p{width:40%}.d\:w50p{width:50%}.d\:w60p{width:60%}.d\:w70p{width:70%}.d\:w80p{width:80%}.d\:w90p{width:90%}.d\:w100p{width:100%}.d\:mw-auto{max-width:auto}.d\:mw-screen{max-width:100vw}.d\:mw100{max-width:100%}.d\:mw1{max-width:var(--size-3)}.d\:mw2{max-width:var(--size-4)}.d\:mw3{max-width:var(--size-5)}.d\:mw4{max-width:var(--size-6)}.d\:mw5{max-width:var(--size-7)}.d\:mw6{max-width:var(--size-8)}.d\:mw7{max-width:var(--size-9)}.d\:mw8{max-width:var(--size-10)}.d\:mw10p{max-width:10%}.d\:mw20p{max-width:20%}.d\:mw30p{max-width:30%}.d\:mw40p{max-width:40%}.d\:mw50p{max-width:50%}.d\:mw60p{max-width:60%}.d\:mw70p{max-width:70%}.d\:mw80p{max-width:80%}.d\:mw90p{max-width:90%}.d\:mw100p{max-width:100%}.d\:h-auto{height:auto}.d\:h-screen{height:100vw}.d\:h100{height:100%}.d\:h1{height:var(--size-3)}.d\:h2{height:var(--size-4)}.d\:h3{height:var(--size-5)}.d\:h4{height:var(--size-6)}.d\:h5{height:var(--size-7)}.d\:h6{height:var(--size-8)}.d\:h7{height:var(--size-9)}.d\:h8{height:var(--size-10)}.d\:h10p{height:10%}.d\:h20p{height:20%}.d\:h30p{height:30%}.d\:h40p{height:40%}.d\:h50p{height:50%}.d\:h60p{height:60%}.d\:h70p{height:70%}.d\:h80p{height:80%}.d\:h90p{height:90%}.d\:h100p{height:100%}.d\:mh-auto{max-height:auto}.d\:mh-screen{max-height:100vw}.d\:mh100{max-height:100%}.d\:mh1{max-height:var(--size-3)}.d\:mh2{max-height:var(--size-4)}.d\:mh3{max-height:var(--size-5)}.d\:mh4{max-height:var(--size-6)}.d\:mh5{max-height:var(--size-7)}.d\:mh6{max-height:var(--size-8)}.d\:mh7{max-height:var(--size-9)}.d\:mh8{max-height:var(--size-10)}.d\:mh10p{max-height:10%}.d\:mh20p{max-height:20%}.d\:mh30p{max-height:30%}.d\:mh40p{max-height:40%}.d\:mh50p{max-height:50%}.d\:mh60p{max-height:60%}.d\:mh70p{max-height:70%}.d\:mh80p{max-height:80%}.d\:mh90p{max-height:90%}.d\:mh100p{max-height:100%}} -------------------------------------------------------------------------------- /_site/feed.xml: -------------------------------------------------------------------------------- 1 | Jekyll2024-02-03T20:57:35+00:00http://localhost:4000/feed.xml -------------------------------------------------------------------------------- /_site/gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | /* jshint esnext: true */ 2 | 'use strict'; 3 | 4 | /** 5 | * External dependencies. 6 | */ 7 | const { 8 | series, 9 | parallel, 10 | watch 11 | } = require( 'gulp' ); 12 | 13 | const { src, dest } = require( 'gulp' ); 14 | const sass = require( 'gulp-sass' )( require( 'sass' ) ); 15 | const autoprefixer = require( 'gulp-autoprefixer' ); 16 | const cleancss = require( 'gulp-clean-css' ); 17 | const change = require( 'gulp-change' ); 18 | const rename = require( 'gulp-rename' ); 19 | const plumber = require( 'gulp-plumber' ); 20 | const size = require( 'gulp-size' ); 21 | 22 | const sass_properties = { 23 | indentType: 'tab', 24 | indentWidth: 1, 25 | outputStyle: 'expanded', 26 | precision: 3, 27 | }; 28 | 29 | /** 30 | * Build SASS files. 31 | */ 32 | export function process_styles() { 33 | 34 | const export_path = './dist/' 35 | 36 | return src( './scss/*.scss' ) 37 | .pipe( plumber() ) 38 | .pipe( 39 | sass( sass_properties ).on( 'error', sass.logError ) 40 | ) 41 | .pipe( 42 | autoprefixer( 43 | { cascade: false } 44 | ) 45 | ) 46 | .pipe( 47 | rename( 48 | ( path ) => { path.extname = '.css'; } 49 | ) 50 | ) 51 | .pipe( 52 | dest( export_path ) 53 | ) 54 | .pipe( 55 | change( removeComments ) 56 | ) 57 | .pipe( 58 | cleancss( { level: 2 } ) 59 | ) 60 | .pipe( 61 | rename( 62 | ( path ) => { path.extname = '.min.css'; } 63 | ) 64 | ) 65 | .pipe( 66 | size( 67 | { 68 | showFiles: true, 69 | } 70 | ) 71 | ) 72 | .pipe( 73 | size( 74 | { 75 | showFiles: true, 76 | gzip: true 77 | } 78 | ) 79 | ) 80 | .pipe( 81 | dest( export_path ) 82 | ); 83 | 84 | } 85 | 86 | 87 | /** 88 | * Remove comments from the source so that they can be minified away. 89 | */ 90 | const removeComments = function( content ) { 91 | 92 | content = content.replace( /\/\*\*!/g, '/**' ); 93 | content = content.replace( /\/\*!/g, '/*' ); 94 | 95 | return content; 96 | 97 | }; 98 | 99 | 100 | export const build = process_styles; 101 | 102 | export const watchFiles = function( done ) { 103 | 104 | watch( 105 | './scss/**/*.scss', 106 | process_styles 107 | ); 108 | 109 | done(); 110 | 111 | }; 112 | 113 | export default series( 114 | build, 115 | watchFiles 116 | ); 117 | -------------------------------------------------------------------------------- /_site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "elementalcss", 3 | "version": "1.0.0", 4 | "description": "A minimal utility CSS library", 5 | "scripts": { 6 | "dev": "gulp", 7 | "build": "gulp build" 8 | }, 9 | "author": "binarymoon", 10 | "license": "GPL-2.0-or-later", 11 | "jshintConfig": { 12 | "esversion": 6 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.12.10", 16 | "@babel/preset-env": "^7.12.11", 17 | "@babel/register": "^7.12.10", 18 | "gulp": "^4.0.0", 19 | "gulp-autoprefixer": "^8.0.0", 20 | "gulp-babel": "^8.0.0", 21 | "gulp-change": "^1.0.2", 22 | "gulp-clean-css": "^4.3.0", 23 | "gulp-concat": "^2.6.1", 24 | "gulp-include": "^2.4.1", 25 | "gulp-plumber": "^1.2.1", 26 | "gulp-rename": "^2.0.0", 27 | "gulp-sass": "^5.0.0", 28 | "gulp-size": "^4.0.0", 29 | "sass": "^1.43.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_site/redirects.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /_site/robots.txt: -------------------------------------------------------------------------------- 1 | Sitemap: http://localhost:4000/sitemap.xml 2 | -------------------------------------------------------------------------------- /_site/scss/elementalcss.classless.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @import "lib/functions"; 4 | @import "lib/responsive"; 5 | 6 | @import "vars/index"; 7 | 8 | @import "html/reset"; 9 | 10 | // Only include the utils that are extended by HTML. 11 | @import "utils/accessibility"; 12 | @import "utils/font"; 13 | @import "utils/outline"; 14 | @import "utils/overflow"; 15 | 16 | @import "html/index"; 17 | -------------------------------------------------------------------------------- /_site/scss/elementalcss.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "sass:map"; 3 | 4 | @import "lib/functions"; 5 | @import "lib/responsive"; 6 | 7 | @import "vars/index"; 8 | 9 | @import "html/reset"; 10 | 11 | @import "utils/index"; 12 | @import "html/index"; 13 | @import "effects/index"; 14 | -------------------------------------------------------------------------------- /_site/scss/elementalcss.utility.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "sass:map"; 3 | 4 | @import "lib/functions"; 5 | @import "lib/responsive"; 6 | 7 | @import "vars/index"; 8 | 9 | @import "html/reset"; 10 | 11 | @import "utils/index"; 12 | -------------------------------------------------------------------------------- /_site/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /dist/elementalcss.classless.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --border-width: 1px; 3 | --border-radius: var( --size-1 ); 4 | } 5 | 6 | :root { 7 | --color-black: #000000; 8 | --color-gray4: #111827; 9 | --color-gray3: #374151; 10 | --color-gray2: #6B7280; 11 | --color-gray1: #D7DAE0; 12 | --color-white: #FFFFFF; 13 | --color-blue-light: #72aee6; 14 | --color-blue: #2271b1; 15 | --color-blue-dark: #043959; 16 | --color-red-light: #ff8085; 17 | --color-red: #d63638; 18 | --color-red-dark: #631919; 19 | --color-green-light: #2fdc5b; 20 | --color-green: #06ae2d; 21 | --color-green-dark: #00450c; 22 | --color-yellow-light: #ecd8a2; 23 | --color-yellow: #f0c33c; 24 | --color-yellow-dark: #9d7e20; 25 | --color-bg: var( --color-white ); 26 | --color-fg: var( --color-gray4 ); 27 | --color-bg-accent: var( --color-blue ); 28 | --color-fg-accent: var( --color-white ); 29 | --color-bg-highlight: var( --color-yellow ); 30 | --color-fg-highlight: var( --color-black ); 31 | --color-pop: var( --color-gray1 ); 32 | --color-link: var( --color-blue-dark ); 33 | --color-border: var( --color-gray1 ); 34 | --color-code: var( --color-green ); 35 | --color-bg-code: var( --color-white ); 36 | } 37 | 38 | /* Dark theme */ 39 | @media (prefers-color-scheme: dark) { 40 | :root body:not(.disable-dark-mode) { 41 | --color-bg: var( --color-gray4 ); 42 | --color-fg: var( --color-gray1 ); 43 | --color-bg-accent: var( --color-yellow ); 44 | --color-fg-accent: var( --color-black ); 45 | --color-pop: var( --color-black ); 46 | --color-link: var( --color-yellow ); 47 | --color-border: var( --color-gray3 ); 48 | --color-code: var( --color-green ); 49 | --color-bg-code: var( --color-gray4 ); 50 | } 51 | } 52 | :root { 53 | --font-system-ui: system-ui, sans-serif; 54 | --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif; 55 | --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif; 56 | --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif; 57 | --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif; 58 | --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif; 59 | --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif; 60 | --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace; 61 | --font-monospace-code: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace; 62 | --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif; 63 | --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif; 64 | --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif; 65 | --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif; 66 | --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif; 67 | --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive; 68 | --font-arial: Arial, Helvetica Neue, Helvetica, Liberation Sans, sans-serif; 69 | --font-arial-black: Arial Black, Arial Bold, Gadget, sans-serif; 70 | --font-arial-narrow: Arial Narrow, Arial, sans-serif; 71 | --font-arial-rounded: Arial Rounded MT Bold, Arial Rounded Bold, Helvetica Rounded, Arial, sans-serif; 72 | --font-avenir: Avenir Next, Avenir, sans-serif; 73 | --font-baskerville: Baskerville, Baskerville Old Face, Hoefler Text, Garamond, Times New Roman, serif; 74 | --font-book-antiqua: Book Antiqua, Baskerville, Palatino, Georgia, serif; 75 | --font-bookman: Bookman, Bookman Old Style, Book Antiqua, Charter, Palatino, URW Bookman, serif; 76 | --font-century-gothic: Century Gothic, CenturyGothic, Franklin Gothic, URW Gothic, AppleGothic, sans-serif; 77 | --font-comic-sans: Chalkboard, Comic Sans, Comic Sans MS, cursive, sans-serif; 78 | --font-consolas: Consolas, Menlo, Monaco, Liberation Mono, monospace; 79 | --font-courier-new: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; 80 | --font-franklin-gothic: Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif; 81 | --font-futura: Futura, Trebuchet MS, Arial, sans-serif; 82 | --font-futura-condensed: Futura Condensed, Futura PT Condensed, Futura, Trebuchet MS, Arial, sans-serif; 83 | --font-garamond: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif; 84 | --font-geneva: Geneva, Tahoma, Verdana, DejaVu Sans, Bitstream Vera Sans, sans-serif; 85 | --font-georgia: Georgia, Times, Times New Roman, serif; 86 | --font-gill-sans: Gill Sans, Gill Sans MT, Century Gothic, Calibri, sans-serif; 87 | --font-haettenschweiler: Haettenschweiler, Din Condensed, Arial Narrow Bold, sans-serif; 88 | --font-helvetica: Helvetica Neue, Helvetica, Arial, sans-serif; 89 | --font-hoefler: Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif; 90 | --font-impact: Impact, Haettenschweiler, Arial Narrow Bold, sans-serif; 91 | --font-lucida-bright: Lucida Bright, Baskerville, Georgia, serif; 92 | --font-lucida-console: Lucida Console, Lucida Sans Typewriter, PT Mono, monaco, monospace; 93 | --font-lucida-grande: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif; 94 | --font-oswald: Oswald, Din Condensed, Impact, Haettenschweiler, Arial Narrow Bold, sans-serif; 95 | --font-palatino: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, URW Palladio, Georgia, serif; 96 | --font-system: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 97 | --font-system-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; 98 | --font-tahoma: Tahoma, Verdana, Segoe, sans-serif; 99 | --font-times-new-roman: TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, Liberation Serif, FreeSerif, serif; 100 | --font-trebuchet: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; 101 | --font-verdana: Verdana, Geneva, DejaVu Sans, sans-serif; 102 | --font-main: var( --font-system ); 103 | --font-monospace: var( --font-system-monospace ); 104 | --line-length: 60ch; 105 | } 106 | 107 | .font-system-ui { 108 | font-family: var(--font-system-ui); 109 | } 110 | 111 | .font-transitional { 112 | font-family: var(--font-transitional); 113 | } 114 | 115 | .font-old-style { 116 | font-family: var(--font-old-style); 117 | } 118 | 119 | .font-humanist { 120 | font-family: var(--font-humanist); 121 | } 122 | 123 | .font-geometric-humanist { 124 | font-family: var(--font-geometric-humanist); 125 | } 126 | 127 | .font-classical-humanist { 128 | font-family: var(--font-classical-humanist); 129 | } 130 | 131 | .font-neo-grotesque { 132 | font-family: var(--font-neo-grotesque); 133 | } 134 | 135 | .font-monospace-slab-serif { 136 | font-family: var(--font-monospace-slab-serif); 137 | } 138 | 139 | .font-monospace-code { 140 | font-family: var(--font-monospace-code); 141 | } 142 | 143 | .font-industrial { 144 | font-family: var(--font-industrial); 145 | } 146 | 147 | .font-rounded-sans { 148 | font-family: var(--font-rounded-sans); 149 | } 150 | 151 | .font-slab-serif { 152 | font-family: var(--font-slab-serif); 153 | } 154 | 155 | .font-antique { 156 | font-family: var(--font-antique); 157 | } 158 | 159 | .font-didone { 160 | font-family: var(--font-didone); 161 | } 162 | 163 | .font-handwritten { 164 | font-family: var(--font-handwritten); 165 | } 166 | 167 | .font-arial { 168 | font-family: var(--font-arial); 169 | } 170 | 171 | .font-arial-black { 172 | font-family: var(--font-arial-black); 173 | } 174 | 175 | .font-arial-narrow { 176 | font-family: var(--font-arial-narrow); 177 | } 178 | 179 | .font-arial-rounded { 180 | font-family: var(--font-arial-rounded); 181 | } 182 | 183 | .font-avenir { 184 | font-family: var(--font-avenir); 185 | } 186 | 187 | .font-baskerville { 188 | font-family: var(--font-baskerville); 189 | } 190 | 191 | .font-book-antiqua { 192 | font-family: var(--font-book-antiqua); 193 | } 194 | 195 | .font-bookman { 196 | font-family: var(--font-bookman); 197 | } 198 | 199 | .font-century-gothic { 200 | font-family: var(--font-century-gothic); 201 | } 202 | 203 | .font-comic-sans { 204 | font-family: var(--font-comic-sans); 205 | } 206 | 207 | .font-consolas { 208 | font-family: var(--font-consolas); 209 | } 210 | 211 | .font-courier-new { 212 | font-family: var(--font-courier-new); 213 | } 214 | 215 | .font-franklin-gothic { 216 | font-family: var(--font-franklin-gothic); 217 | } 218 | 219 | .font-futura { 220 | font-family: var(--font-futura); 221 | } 222 | 223 | .font-futura-condensed { 224 | font-family: var(--font-futura-condensed); 225 | } 226 | 227 | .font-garamond { 228 | font-family: var(--font-garamond); 229 | } 230 | 231 | .font-geneva { 232 | font-family: var(--font-geneva); 233 | } 234 | 235 | .font-georgia { 236 | font-family: var(--font-georgia); 237 | } 238 | 239 | .font-gill-sans { 240 | font-family: var(--font-gill-sans); 241 | } 242 | 243 | .font-haettenschweiler { 244 | font-family: var(--font-haettenschweiler); 245 | } 246 | 247 | .font-helvetica { 248 | font-family: var(--font-helvetica); 249 | } 250 | 251 | .font-hoefler { 252 | font-family: var(--font-hoefler); 253 | } 254 | 255 | .font-impact { 256 | font-family: var(--font-impact); 257 | } 258 | 259 | .font-lucida-bright { 260 | font-family: var(--font-lucida-bright); 261 | } 262 | 263 | .font-lucida-console { 264 | font-family: var(--font-lucida-console); 265 | } 266 | 267 | .font-lucida-grande { 268 | font-family: var(--font-lucida-grande); 269 | } 270 | 271 | .font-oswald { 272 | font-family: var(--font-oswald); 273 | } 274 | 275 | .font-palatino { 276 | font-family: var(--font-palatino); 277 | } 278 | 279 | .font-system { 280 | font-family: var(--font-system); 281 | } 282 | 283 | .font-system-monospace { 284 | font-family: var(--font-system-monospace); 285 | } 286 | 287 | .font-tahoma { 288 | font-family: var(--font-tahoma); 289 | } 290 | 291 | .font-times-new-roman { 292 | font-family: var(--font-times-new-roman); 293 | } 294 | 295 | .font-trebuchet { 296 | font-family: var(--font-trebuchet); 297 | } 298 | 299 | .font-verdana { 300 | font-family: var(--font-verdana); 301 | } 302 | 303 | :root { 304 | --size-0: 0; 305 | --size-1: var(--size-base); 306 | --size-2: calc(var(--size-base) * 2); 307 | --size-3: calc(var(--size-base) * 4); 308 | --size-4: calc(var(--size-base) * 8); 309 | --size-5: calc(var(--size-base) * 16); 310 | --size-6: calc(var(--size-base) * 32); 311 | --size-7: calc(var(--size-base) * 64); 312 | --size-8: calc(var(--size-base) * 128); 313 | --size-9: calc(var(--size-base) * 256); 314 | --size-10: calc(var(--size-base) * 512); 315 | --size-100: 100%; 316 | --size-120: 120px; 317 | --size-160: 160px; 318 | --size-300: 300px; 319 | --size-base: 0.15rem; 320 | } 321 | @media only screen and (min-width: 32em) { 322 | :root { 323 | --size-base: 0.2rem; 324 | } 325 | } 326 | @media only screen and (min-width: 64em) { 327 | :root { 328 | --size-base: 0.25rem; 329 | } 330 | } 331 | 332 | :root { 333 | --type-base: 1rem; 334 | --type-size-6: calc(var(--type-base) / var(--type-scale)); 335 | --type-size-5: var(--type-base); 336 | --type-size-4: calc(var(--type-base) * var(--type-scale)); 337 | --type-size-3: calc(var(--type-base) * var(--type-scale) * var(--type-scale)); 338 | --type-size-2: calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale)); 339 | --type-size-1: calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale)); 340 | --type-lh-1: 1.1; 341 | --type-lh-2: 1.618; 342 | --type-ls-1: 0.1em; 343 | --type-scale: 1.125; 344 | } 345 | @media only screen and (min-width: 32em) { 346 | :root { 347 | --type-scale: 1.25; 348 | } 349 | } 350 | @media only screen and (min-width: 64em) { 351 | :root { 352 | --type-scale: 1.414; 353 | } 354 | } 355 | 356 | *, 357 | *::before, 358 | *::after { 359 | box-sizing: border-box; 360 | } 361 | 362 | * { 363 | margin: 0; 364 | } 365 | 366 | :focus:not(:focus-visible), 367 | [tabindex="-1"]:focus { 368 | outline: none; 369 | } 370 | 371 | div > :first-child, 372 | main > :first-child, 373 | section > :first-child, 374 | article > :first-child, 375 | blockquote > :first-child, 376 | header > :first-child, 377 | footer > :first-child, 378 | aside > :first-child, 379 | figure > :first-child, 380 | figcaption > :first-child { 381 | margin-top: 0; 382 | } 383 | div > :last-child, 384 | main > :last-child, 385 | section > :last-child, 386 | article > :last-child, 387 | blockquote > :last-child, 388 | header > :last-child, 389 | footer > :last-child, 390 | aside > :last-child, 391 | figure > :last-child, 392 | figcaption > :last-child { 393 | margin-bottom: 0; 394 | } 395 | 396 | html { 397 | height: 100%; 398 | font-size: 16px; 399 | accent-color: var(--color-bg-accent); 400 | scroll-behavior: smooth; 401 | -webkit-text-size-adjust: none; 402 | -moz-text-size-adjust: none; 403 | text-size-adjust: none; 404 | } 405 | html:focus-within { 406 | scroll-behavior: smooth; 407 | } 408 | 409 | body { 410 | min-height: 100vh; 411 | text-rendering: optimizeSpeed; 412 | -webkit-font-smoothing: antialiased; 413 | background: var(--color-bg); 414 | color: var(--color-fg); 415 | font-size: var(--type-base); 416 | line-height: var(--type-lh-2); 417 | font-family: var(--font-main); 418 | } 419 | 420 | body, 421 | p, 422 | h1, h2, h3, h4, 423 | figure, 424 | blockquote, 425 | dl, 426 | dd { 427 | margin: 0; 428 | } 429 | 430 | img, 431 | video, 432 | canvas, 433 | svg, 434 | picture { 435 | max-width: 100%; 436 | display: block; 437 | height: auto; 438 | } 439 | 440 | @media (prefers-reduced-motion: reduce) { 441 | html:focus-within { 442 | scroll-behavior: auto; 443 | } 444 | *, 445 | *::before, 446 | *::after { 447 | animation-duration: 0.01ms !important; 448 | animation-iteration-count: 1 !important; 449 | transition-duration: 0.01ms !important; 450 | scroll-behavior: auto !important; 451 | } 452 | } 453 | ::target-text { 454 | background: var(--color-bg-highlight); 455 | color: var(--color-fg-highlight); 456 | } 457 | 458 | ::target { 459 | scroll-margin-block: 2ex; 460 | } 461 | 462 | @media (prefers-reduced-motion: reduce) { 463 | * { 464 | animation-duration: 0.001 !important; 465 | transition-duration: 0.001 !important; 466 | scroll-behavior: auto; 467 | } 468 | } 469 | .f-fw100 { 470 | font-weight: 100; 471 | } 472 | .f-fw200 { 473 | font-weight: 200; 474 | } 475 | .f-fw300 { 476 | font-weight: 300; 477 | } 478 | .f-fw400 { 479 | font-weight: 400; 480 | } 481 | .f-fw500 { 482 | font-weight: 500; 483 | } 484 | .f-fw600 { 485 | font-weight: 600; 486 | } 487 | .f-fw700 { 488 | font-weight: 700; 489 | } 490 | .f-fw800 { 491 | font-weight: 800; 492 | } 493 | .f-fw900 { 494 | font-weight: 900; 495 | } 496 | .f-fs-i { 497 | font-style: italic; 498 | } 499 | .f-fs-n { 500 | font-style: normal; 501 | } 502 | .f1 { 503 | font-size: var(--type-size-1); 504 | line-height: var(--type-lh-1); 505 | } 506 | .f2, h1 { 507 | font-size: var(--type-size-2); 508 | line-height: var(--type-lh-1); 509 | } 510 | .f3, h2 { 511 | font-size: var(--type-size-3); 512 | line-height: var(--type-lh-1); 513 | } 514 | .f4, h3, .screen-reader-text:focus { 515 | font-size: var(--type-size-4); 516 | line-height: var(--type-lh-2); 517 | } 518 | .f5, h4 { 519 | font-size: var(--type-size-5); 520 | line-height: var(--type-lh-2); 521 | } 522 | .f6, small, sub, 523 | sup, h5, h6 { 524 | font-size: var(--type-size-6); 525 | line-height: var(--type-lh-2); 526 | letter-spacing: var(--type-ls-1); 527 | } 528 | 529 | @media only screen and (min-width: 32em) { 530 | .t\:f-fw100 { 531 | font-weight: 100; 532 | } 533 | .t\:f-fw200 { 534 | font-weight: 200; 535 | } 536 | .t\:f-fw300 { 537 | font-weight: 300; 538 | } 539 | .t\:f-fw400 { 540 | font-weight: 400; 541 | } 542 | .t\:f-fw500 { 543 | font-weight: 500; 544 | } 545 | .t\:f-fw600 { 546 | font-weight: 600; 547 | } 548 | .t\:f-fw700 { 549 | font-weight: 700; 550 | } 551 | .t\:f-fw800 { 552 | font-weight: 800; 553 | } 554 | .t\:f-fw900 { 555 | font-weight: 900; 556 | } 557 | .t\:f-fs-i { 558 | font-style: italic; 559 | } 560 | .t\:f-fs-n { 561 | font-style: normal; 562 | } 563 | .t\:f1 { 564 | font-size: var(--type-size-1); 565 | line-height: var(--type-lh-1); 566 | } 567 | .t\:f2 { 568 | font-size: var(--type-size-2); 569 | line-height: var(--type-lh-1); 570 | } 571 | .t\:f3 { 572 | font-size: var(--type-size-3); 573 | line-height: var(--type-lh-1); 574 | } 575 | .t\:f4 { 576 | font-size: var(--type-size-4); 577 | line-height: var(--type-lh-2); 578 | } 579 | .t\:f5 { 580 | font-size: var(--type-size-5); 581 | line-height: var(--type-lh-2); 582 | } 583 | .t\:f6 { 584 | font-size: var(--type-size-6); 585 | line-height: var(--type-lh-2); 586 | letter-spacing: var(--type-ls-1); 587 | } 588 | } 589 | @media only screen and (min-width: 64em) { 590 | .d\:f-fw100 { 591 | font-weight: 100; 592 | } 593 | .d\:f-fw200 { 594 | font-weight: 200; 595 | } 596 | .d\:f-fw300 { 597 | font-weight: 300; 598 | } 599 | .d\:f-fw400 { 600 | font-weight: 400; 601 | } 602 | .d\:f-fw500 { 603 | font-weight: 500; 604 | } 605 | .d\:f-fw600 { 606 | font-weight: 600; 607 | } 608 | .d\:f-fw700 { 609 | font-weight: 700; 610 | } 611 | .d\:f-fw800 { 612 | font-weight: 800; 613 | } 614 | .d\:f-fw900 { 615 | font-weight: 900; 616 | } 617 | .d\:f-fs-i { 618 | font-style: italic; 619 | } 620 | .d\:f-fs-n { 621 | font-style: normal; 622 | } 623 | .d\:f1 { 624 | font-size: var(--type-size-1); 625 | line-height: var(--type-lh-1); 626 | } 627 | .d\:f2 { 628 | font-size: var(--type-size-2); 629 | line-height: var(--type-lh-1); 630 | } 631 | .d\:f3 { 632 | font-size: var(--type-size-3); 633 | line-height: var(--type-lh-1); 634 | } 635 | .d\:f4 { 636 | font-size: var(--type-size-4); 637 | line-height: var(--type-lh-2); 638 | } 639 | .d\:f5 { 640 | font-size: var(--type-size-5); 641 | line-height: var(--type-lh-2); 642 | } 643 | .d\:f6 { 644 | font-size: var(--type-size-6); 645 | line-height: var(--type-lh-2); 646 | letter-spacing: var(--type-ls-1); 647 | } 648 | } 649 | .outline, summary:active, summary:focus, input:active, input:focus, 650 | button:active, 651 | button:focus, 652 | select:active, 653 | select:focus, 654 | textarea:active, 655 | textarea:focus, .btn:focus, 656 | [role=button]:focus, 657 | [type=submit]:focus, 658 | [type=reset]:focus, 659 | [type=button]:focus, a:focus, .screen-reader-text:focus { 660 | outline: var(--size-1) solid var(--color-bg-highlight); 661 | outline-offset: var(--size-1); 662 | } 663 | 664 | /* Screen Reader Text: meant only for screen readers. */ 665 | .screen-reader-text { 666 | border: 0; 667 | clip: rect(1px, 1px, 1px, 1px); 668 | clip-path: inset(50%); 669 | position: absolute !important; 670 | padding: 0; 671 | margin: -1px; 672 | height: 1px; 673 | width: 1px; 674 | overflow: hidden; 675 | word-wrap: normal !important; 676 | } 677 | .screen-reader-text:focus { 678 | font-weight: bold; 679 | clip: auto !important; 680 | display: block; 681 | height: auto; 682 | width: auto; 683 | z-index: 99999; 684 | padding: var(--size-2); 685 | background: var(--color-bg-accent); 686 | color: var(--color-fg-accent); 687 | left: var(--size-2); 688 | top: var(--size-2); 689 | max-width: var(--size-7); 690 | } 691 | 692 | .overflow { 693 | overflow: auto; 694 | } 695 | .overflow-truncate { 696 | overflow: hidden; 697 | text-overflow: ellipsis; 698 | } 699 | .overflow-hidden { 700 | overflow: hidden; 701 | } 702 | .overflow-visible { 703 | overflow: visible; 704 | } 705 | .overflow-scroll, pre { 706 | overflow: scroll; 707 | } 708 | .overflow-auto { 709 | overflow: auto; 710 | } 711 | .overflow-auto::-webkit-scrollbar, .overflow-scroll::-webkit-scrollbar, pre::-webkit-scrollbar { 712 | width: var(--size-3); 713 | height: var(--size-3); 714 | } 715 | .overflow-auto::-webkit-scrollbar-track, .overflow-scroll::-webkit-scrollbar-track, pre::-webkit-scrollbar-track { 716 | background: var(--color-fg); 717 | } 718 | .overflow-auto::-webkit-scrollbar-thumb, .overflow-scroll::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb { 719 | background: var(--color-fg-accent); 720 | border: 1px solid var(--color-fg); 721 | } 722 | 723 | a { 724 | -webkit-text-decoration-skip: ink; 725 | text-decoration-skip-ink: auto; 726 | text-underline-offset: 0.1em; 727 | text-decoration-thickness: 0.15em; 728 | cursor: pointer; 729 | color: var(--color-link); 730 | } 731 | a:hover { 732 | text-decoration: none; 733 | } 734 | 735 | button, 736 | [type=submit], 737 | [type=reset], 738 | [type=button] { 739 | -webkit-appearance: button; 740 | } 741 | 742 | .btn, 743 | button, 744 | [role=button], 745 | [type=submit], 746 | [type=reset], 747 | [type=button] { 748 | font: inherit; 749 | border: none; 750 | text-decoration: none; 751 | display: inline-block; 752 | border-radius: var(--border-radius); 753 | padding: var(--size-1) var(--size-3); 754 | } 755 | .btn:not([class*=bg-]), 756 | button:not([class*=bg-]), 757 | [role=button]:not([class*=bg-]), 758 | [type=submit]:not([class*=bg-]), 759 | [type=reset]:not([class*=bg-]), 760 | [type=button]:not([class*=bg-]) { 761 | background: var(--color-bg-accent); 762 | color: var(--color-fg-accent); 763 | } 764 | .btn:hover, 765 | button:hover, 766 | [role=button]:hover, 767 | [type=submit]:hover, 768 | [type=reset]:hover, 769 | [type=button]:hover { 770 | cursor: pointer; 771 | } 772 | .btn:disabled, 773 | button:disabled, 774 | [role=button]:disabled, 775 | [type=submit]:disabled, 776 | [type=reset]:disabled, 777 | [type=button]:disabled { 778 | opacity: 0.5; 779 | cursor: not-allowed; 780 | } 781 | 782 | dialog { 783 | background: transparent; 784 | padding: var(--size-4); 785 | border: none; 786 | color: white; 787 | max-width: 100%; 788 | width: 30rem; 789 | margin: var(--size-5) auto; 790 | } 791 | 792 | dialog::backdrop { 793 | background-color: rgba(0, 0, 0, 0.6); 794 | -webkit-backdrop-filter: blur(var(--size-1)); 795 | backdrop-filter: blur(var(--size-1)); 796 | } 797 | 798 | h1, 799 | h2, 800 | h3, 801 | h4, 802 | h5, 803 | h6 { 804 | overflow-wrap: break-word; 805 | margin-top: var(--size-5); 806 | margin-bottom: var(--size-4); 807 | text-wrap: balance; 808 | } 809 | h1 a, 810 | h2 a, 811 | h3 a, 812 | h4 a, 813 | h5 a, 814 | h6 a { 815 | text-decoration-color: var(--color-link); 816 | -webkit-text-decoration-skip-ink: all; 817 | text-decoration-skip-ink: all; 818 | color: inherit; 819 | } 820 | 821 | h3, 822 | h4, 823 | h5, 824 | h6 { 825 | margin-top: var(--size-4); 826 | } 827 | 828 | hr { 829 | background: currentColor; 830 | border: none; 831 | height: var(--size-1); 832 | margin: var(--size-5) auto; 833 | color: inherit; 834 | opacity: 0.25; 835 | } 836 | 837 | input, 838 | select, 839 | textarea { 840 | border-style: solid; 841 | border-width: var(--border-width); 842 | } 843 | 844 | input, 845 | button, 846 | select, 847 | textarea { 848 | font: inherit; 849 | box-shadow: none; 850 | border-radius: var(--border-radius); 851 | line-height: var(--type-lh-2); 852 | padding: var(--size-1) var(--size-3); 853 | max-width: 100%; 854 | } 855 | input:active:invalid, input:focus:invalid, 856 | button:active:invalid, 857 | button:focus:invalid, 858 | select:active:invalid, 859 | select:focus:invalid, 860 | textarea:active:invalid, 861 | textarea:focus:invalid { 862 | outline: 0.2rem red solid; 863 | } 864 | input:disabled, 865 | button:disabled, 866 | select:disabled, 867 | textarea:disabled { 868 | opacity: 0.5; 869 | cursor: not-allowed; 870 | } 871 | 872 | /* Make the textarea wider than other inputs */ 873 | textarea { 874 | width: 100%; 875 | resize: vertical; 876 | } 877 | @media only screen and (min-width: 32em) { 878 | textarea { 879 | width: 60%; 880 | } 881 | } 882 | 883 | /* Ensures the checkbox and radio inputs do not have a set width like other input fields */ 884 | [type=checkbox], 885 | [type=radio] { 886 | width: 1.5em; 887 | height: 1.5em; 888 | } 889 | [type=checkbox]:hover, 890 | [type=radio]:hover { 891 | cursor: pointer; 892 | } 893 | 894 | [type=search]:before { 895 | display: block; 896 | content: " "; 897 | background: green; 898 | width: 10px; 899 | height: 10px; 900 | } 901 | 902 | [type=color] { 903 | padding: 0; 904 | border: none; 905 | } 906 | 907 | [type=file] { 908 | border: none; 909 | padding: 0; 910 | } 911 | 912 | .dropzone[type=file] { 913 | width: 100%; 914 | border: var(--size-1) dashed currentColor; 915 | padding: var(--size-4); 916 | border-radius: var(--size-2); 917 | } 918 | 919 | ::file-selector-button { 920 | font: inherit; 921 | padding: var(--size-1) var(--size-3); 922 | margin-inline-end: var(--size-3); 923 | } 924 | ::file-selector-button:hover { 925 | cursor: pointer; 926 | } 927 | 928 | ::-webkit-file-upload-button { 929 | font: inherit; 930 | -webkit-appearance: button; 931 | padding: var(--size-1) var(--size-3); 932 | margin-inline-end: var(--size-3); 933 | } 934 | ::-webkit-file-upload-button:hover { 935 | cursor: pointer; 936 | } 937 | 938 | label { 939 | font-weight: bold; 940 | display: block; 941 | margin-top: var(--size-1); 942 | margin-bottom: var(--size-1); 943 | } 944 | 945 | fieldset { 946 | margin-top: var(--size-4); 947 | margin-bottom: var(--size-4); 948 | padding: var(--size-3); 949 | border: var(--border-width) solid var(--color-border); 950 | } 951 | 952 | legend { 953 | padding-left: var(--size-2); 954 | padding-right: var(--size-2); 955 | font-weight: bold; 956 | } 957 | legend > * { 958 | margin: 0; 959 | } 960 | 961 | dd, 962 | dt, 963 | li { 964 | margin-top: var(--size-1); 965 | margin-bottom: var(--size-1); 966 | } 967 | 968 | dt { 969 | font-weight: bold; 970 | } 971 | 972 | dd:not(:last-of-type) { 973 | margin-bottom: var(--size-3); 974 | } 975 | 976 | nav ul { 977 | list-style-type: none; 978 | padding: 0; 979 | } 980 | nav ul ul { 981 | padding-inline-start: var(--size-3); 982 | } 983 | 984 | mark { 985 | padding: var(--size-1) var(--size-2); 986 | background: var(--color-bg-highlight); 987 | color: var(--color-fg-highlight); 988 | } 989 | 990 | figure { 991 | margin: 0; 992 | } 993 | 994 | figcaption { 995 | text-align: center; 996 | font-size: var(--type-size-6); 997 | } 998 | 999 | blockquote { 1000 | font-style: italic; 1001 | padding-left: var(--size-4); 1002 | font-size: var(--type-size-4); 1003 | margin-top: var(--size-4); 1004 | margin-bottom: var(--size-4); 1005 | border-left: var(--size-2) solid currentColor; 1006 | } 1007 | 1008 | cite { 1009 | font-style: normal; 1010 | font-size: var(--type-size-6); 1011 | } 1012 | 1013 | /* Use mono font for code like elements */ 1014 | code, 1015 | pre, 1016 | kbd, 1017 | samp { 1018 | font-family: var(--font-monospace); 1019 | color: var(--color-code); 1020 | background: var(--color-bg-code); 1021 | padding: var(--size-1) var(--size-2); 1022 | border-radius: var(--size-1); 1023 | } 1024 | 1025 | kbd { 1026 | line-height: 1; 1027 | border-radius: var(--border-radius); 1028 | border: 1px solid var(--color-code); 1029 | border-bottom: 2px solid var(--color-code); 1030 | padding: var(--size-1) var(--size-2); 1031 | font-family: var(--font-monospace); 1032 | } 1033 | 1034 | pre { 1035 | max-width: 100%; 1036 | overflow: auto; 1037 | padding: var(--size-3) var(--size-4); 1038 | background: var(--color-gray4); 1039 | border-radius: var(--border-radius); 1040 | } 1041 | pre code { 1042 | background: none; 1043 | margin: 0; 1044 | padding: 0; 1045 | } 1046 | 1047 | details *:last-child { 1048 | margin-bottom: 0; 1049 | } 1050 | 1051 | summary { 1052 | font-weight: bold; 1053 | } 1054 | summary:hover { 1055 | cursor: pointer; 1056 | } 1057 | summary > * { 1058 | display: inline; 1059 | } 1060 | 1061 | iframe { 1062 | border: 0; 1063 | border: 1px solid var(--color-gray3); 1064 | } 1065 | 1066 | table caption, 1067 | table th { 1068 | text-align: left; 1069 | font-weight: bold; 1070 | } 1071 | table caption, 1072 | table th, table td { 1073 | padding: var(--size-1); 1074 | display: inline-block; 1075 | vertical-align: top; 1076 | word-break: break-word; 1077 | min-width: var(--size-5); 1078 | overflow-x: auto; 1079 | } 1080 | @media only screen and (min-width: 32em) { 1081 | table caption, 1082 | table th, table td { 1083 | display: table-cell; 1084 | } 1085 | } 1086 | 1087 | p { 1088 | margin-top: var(--size-4); 1089 | margin-bottom: var(--size-4); 1090 | overflow-wrap: break-word; 1091 | } 1092 | 1093 | sub, 1094 | sup { 1095 | line-height: 0; 1096 | position: relative; 1097 | vertical-align: baseline; 1098 | padding: 0 0.1em; 1099 | } 1100 | 1101 | sub { 1102 | bottom: -0.25em; 1103 | } 1104 | 1105 | sup { 1106 | top: -0.5em; 1107 | } 1108 | 1109 | strong { 1110 | font-weight: 700; 1111 | } -------------------------------------------------------------------------------- /dist/elementalcss.classless.min.css: -------------------------------------------------------------------------------- 1 | :root{--border-width:1px;--border-radius:var( --size-1 );--color-black:#000000;--color-gray4:#111827;--color-gray3:#374151;--color-gray2:#6B7280;--color-gray1:#D7DAE0;--color-white:#FFFFFF;--color-blue-light:#72aee6;--color-blue:#2271b1;--color-blue-dark:#043959;--color-red-light:#ff8085;--color-red:#d63638;--color-red-dark:#631919;--color-green-light:#2fdc5b;--color-green:#06ae2d;--color-green-dark:#00450c;--color-yellow-light:#ecd8a2;--color-yellow:#f0c33c;--color-yellow-dark:#9d7e20;--color-bg:var( --color-white );--color-fg:var( --color-gray4 );--color-bg-accent:var( --color-blue );--color-fg-accent:var( --color-white );--color-bg-highlight:var( --color-yellow );--color-fg-highlight:var( --color-black );--color-pop:var( --color-gray1 );--color-link:var( --color-blue-dark );--color-border:var( --color-gray1 );--color-code:var( --color-green );--color-bg-code:var( --color-white );--font-system-ui:system-ui,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-arial:Arial,Helvetica Neue,Helvetica,Liberation Sans,sans-serif;--font-arial-black:Arial Black,Arial Bold,Gadget,sans-serif;--font-arial-narrow:Arial Narrow,Arial,sans-serif;--font-arial-rounded:Arial Rounded MT Bold,Arial Rounded Bold,Helvetica Rounded,Arial,sans-serif;--font-avenir:Avenir Next,Avenir,sans-serif;--font-baskerville:Baskerville,Baskerville Old Face,Hoefler Text,Garamond,Times New Roman,serif;--font-book-antiqua:Book Antiqua,Baskerville,Palatino,Georgia,serif;--font-bookman:Bookman,Bookman Old Style,Book Antiqua,Charter,Palatino,URW Bookman,serif;--font-century-gothic:Century Gothic,CenturyGothic,Franklin Gothic,URW Gothic,AppleGothic,sans-serif;--font-comic-sans:Chalkboard,Comic Sans,Comic Sans MS,cursive,sans-serif;--font-consolas:Consolas,Menlo,Monaco,Liberation Mono,monospace;--font-courier-new:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;--font-franklin-gothic:Franklin Gothic Medium,Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;--font-futura:Futura,Trebuchet MS,Arial,sans-serif;--font-futura-condensed:Futura Condensed,Futura PT Condensed,Futura,Trebuchet MS,Arial,sans-serif;--font-garamond:Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;--font-geneva:Geneva,Tahoma,Verdana,DejaVu Sans,Bitstream Vera Sans,sans-serif;--font-georgia:Georgia,Times,Times New Roman,serif;--font-gill-sans:Gill Sans,Gill Sans MT,Century Gothic,Calibri,sans-serif;--font-haettenschweiler:Haettenschweiler,Din Condensed,Arial Narrow Bold,sans-serif;--font-helvetica:Helvetica Neue,Helvetica,Arial,sans-serif;--font-hoefler:Hoefler Text,Baskerville Old Face,Garamond,Times New Roman,serif;--font-impact:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;--font-lucida-bright:Lucida Bright,Baskerville,Georgia,serif;--font-lucida-console:Lucida Console,Lucida Sans Typewriter,PT Mono,monaco,monospace;--font-lucida-grande:Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;--font-oswald:Oswald,Din Condensed,Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;--font-palatino:Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,URW Palladio,Georgia,serif;--font-system:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;--font-system-monospace:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;--font-tahoma:Tahoma,Verdana,Segoe,sans-serif;--font-times-new-roman:TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,Liberation Serif,FreeSerif,serif;--font-trebuchet:Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;--font-verdana:Verdana,Geneva,DejaVu Sans,sans-serif;--font-main:var( --font-system );--font-monospace:var( --font-system-monospace );--line-length:60ch;--size-0:0;--size-1:var(--size-base);--size-2:calc(var(--size-base) * 2);--size-3:calc(var(--size-base) * 4);--size-4:calc(var(--size-base) * 8);--size-5:calc(var(--size-base) * 16);--size-6:calc(var(--size-base) * 32);--size-7:calc(var(--size-base) * 64);--size-8:calc(var(--size-base) * 128);--size-9:calc(var(--size-base) * 256);--size-10:calc(var(--size-base) * 512);--size-100:100%;--size-120:120px;--size-160:160px;--size-300:300px;--size-base:0.15rem;--type-base:1rem;--type-size-6:calc(var(--type-base) / var(--type-scale));--type-size-5:var(--type-base);--type-size-4:calc(var(--type-base) * var(--type-scale));--type-size-3:calc(var(--type-base) * var(--type-scale) * var(--type-scale));--type-size-2:calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale));--type-size-1:calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale));--type-lh-1:1.1;--type-lh-2:1.618;--type-ls-1:0.1em;--type-scale:1.125}@media (prefers-color-scheme:dark){:root body:not(.disable-dark-mode){--color-bg:var( --color-gray4 );--color-fg:var( --color-gray1 );--color-bg-accent:var( --color-yellow );--color-fg-accent:var( --color-black );--color-pop:var( --color-black );--color-link:var( --color-yellow );--color-border:var( --color-gray3 );--color-code:var( --color-green );--color-bg-code:var( --color-gray4 )}}.font-system-ui{font-family:var(--font-system-ui)}.font-transitional{font-family:var(--font-transitional)}.font-old-style{font-family:var(--font-old-style)}.font-humanist{font-family:var(--font-humanist)}.font-geometric-humanist{font-family:var(--font-geometric-humanist)}.font-classical-humanist{font-family:var(--font-classical-humanist)}.font-neo-grotesque{font-family:var(--font-neo-grotesque)}.font-monospace-slab-serif{font-family:var(--font-monospace-slab-serif)}.font-monospace-code{font-family:var(--font-monospace-code)}.font-industrial{font-family:var(--font-industrial)}.font-rounded-sans{font-family:var(--font-rounded-sans)}.font-slab-serif{font-family:var(--font-slab-serif)}.font-antique{font-family:var(--font-antique)}.font-didone{font-family:var(--font-didone)}.font-handwritten{font-family:var(--font-handwritten)}.font-arial{font-family:var(--font-arial)}.font-arial-black{font-family:var(--font-arial-black)}.font-arial-narrow{font-family:var(--font-arial-narrow)}.font-arial-rounded{font-family:var(--font-arial-rounded)}.font-avenir{font-family:var(--font-avenir)}.font-baskerville{font-family:var(--font-baskerville)}.font-book-antiqua{font-family:var(--font-book-antiqua)}.font-bookman{font-family:var(--font-bookman)}.font-century-gothic{font-family:var(--font-century-gothic)}.font-comic-sans{font-family:var(--font-comic-sans)}.font-consolas{font-family:var(--font-consolas)}.font-courier-new{font-family:var(--font-courier-new)}.font-franklin-gothic{font-family:var(--font-franklin-gothic)}.font-futura{font-family:var(--font-futura)}.font-futura-condensed{font-family:var(--font-futura-condensed)}.font-garamond{font-family:var(--font-garamond)}.font-geneva{font-family:var(--font-geneva)}.font-georgia{font-family:var(--font-georgia)}.font-gill-sans{font-family:var(--font-gill-sans)}.font-haettenschweiler{font-family:var(--font-haettenschweiler)}.font-helvetica{font-family:var(--font-helvetica)}.font-hoefler{font-family:var(--font-hoefler)}.font-impact{font-family:var(--font-impact)}.font-lucida-bright{font-family:var(--font-lucida-bright)}.font-lucida-console{font-family:var(--font-lucida-console)}.font-lucida-grande{font-family:var(--font-lucida-grande)}.font-oswald{font-family:var(--font-oswald)}.font-palatino{font-family:var(--font-palatino)}.font-system{font-family:var(--font-system)}.font-system-monospace{font-family:var(--font-system-monospace)}.font-tahoma{font-family:var(--font-tahoma)}.font-times-new-roman{font-family:var(--font-times-new-roman)}.font-trebuchet{font-family:var(--font-trebuchet)}.font-verdana{font-family:var(--font-verdana)}*,::after,::before{box-sizing:border-box}*{margin:0}:focus:not(:focus-visible),[tabindex="-1"]:focus{outline:0}article>:first-child,aside>:first-child,blockquote>:first-child,div>:first-child,figcaption>:first-child,figure>:first-child,footer>:first-child,header>:first-child,main>:first-child,section>:first-child{margin-top:0}article>:last-child,aside>:last-child,blockquote>:last-child,div>:last-child,figcaption>:last-child,figure>:last-child,footer>:last-child,header>:last-child,main>:last-child,section>:last-child{margin-bottom:0}html{height:100%;font-size:16px;accent-color:var(--color-bg-accent);scroll-behavior:smooth;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;background:var(--color-bg);color:var(--color-fg);font-size:var(--type-base);line-height:var(--type-lh-2);font-family:var(--font-main)}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}canvas,img,picture,svg,video{max-width:100%;display:block;height:auto}::target-text{background:var(--color-bg-highlight);color:var(--color-fg-highlight)}::target{scroll-margin-block:2ex}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}*{animation-duration:.001!important;transition-duration:.001!important;scroll-behavior:auto}}.f-fw100{font-weight:100}.f-fw200{font-weight:200}.f-fw300{font-weight:300}.f-fw400{font-weight:400}.f-fw500{font-weight:500}.f-fw600{font-weight:600}.f-fw700{font-weight:700}.f-fw800{font-weight:800}.f-fw900{font-weight:900}.f-fs-i{font-style:italic}.f-fs-n{font-style:normal}.f1{font-size:var(--type-size-1);line-height:var(--type-lh-1)}.f2,h1{font-size:var(--type-size-2);line-height:var(--type-lh-1)}.f3,h2{font-size:var(--type-size-3);line-height:var(--type-lh-1)}.f4,.screen-reader-text:focus,h3{font-size:var(--type-size-4);line-height:var(--type-lh-2)}.f5,h4{font-size:var(--type-size-5);line-height:var(--type-lh-2)}.f6,h5,h6,small,sub,sup{font-size:var(--type-size-6);line-height:var(--type-lh-2);letter-spacing:var(--type-ls-1)}@media only screen and (min-width:32em){:root{--size-base:0.2rem;--type-scale:1.25}.t\:f-fw100{font-weight:100}.t\:f-fw200{font-weight:200}.t\:f-fw300{font-weight:300}.t\:f-fw400{font-weight:400}.t\:f-fw500{font-weight:500}.t\:f-fw600{font-weight:600}.t\:f-fw700{font-weight:700}.t\:f-fw800{font-weight:800}.t\:f-fw900{font-weight:900}.t\:f-fs-i{font-style:italic}.t\:f-fs-n{font-style:normal}.t\:f1{font-size:var(--type-size-1);line-height:var(--type-lh-1)}.t\:f2{font-size:var(--type-size-2);line-height:var(--type-lh-1)}.t\:f3{font-size:var(--type-size-3);line-height:var(--type-lh-1)}.t\:f4{font-size:var(--type-size-4);line-height:var(--type-lh-2)}.t\:f5{font-size:var(--type-size-5);line-height:var(--type-lh-2)}.t\:f6{font-size:var(--type-size-6);line-height:var(--type-lh-2);letter-spacing:var(--type-ls-1)}}@media only screen and (min-width:64em){:root{--size-base:0.25rem;--type-scale:1.414}.d\:f-fw100{font-weight:100}.d\:f-fw200{font-weight:200}.d\:f-fw300{font-weight:300}.d\:f-fw400{font-weight:400}.d\:f-fw500{font-weight:500}.d\:f-fw600{font-weight:600}.d\:f-fw700{font-weight:700}.d\:f-fw800{font-weight:800}.d\:f-fw900{font-weight:900}.d\:f-fs-i{font-style:italic}.d\:f-fs-n{font-style:normal}.d\:f1{font-size:var(--type-size-1);line-height:var(--type-lh-1)}.d\:f2{font-size:var(--type-size-2);line-height:var(--type-lh-1)}.d\:f3{font-size:var(--type-size-3);line-height:var(--type-lh-1)}.d\:f4{font-size:var(--type-size-4);line-height:var(--type-lh-2)}.d\:f5{font-size:var(--type-size-5);line-height:var(--type-lh-2)}.d\:f6{font-size:var(--type-size-6);line-height:var(--type-lh-2);letter-spacing:var(--type-ls-1)}}.btn:focus,.outline,.screen-reader-text:focus,[role=button]:focus,[type=button]:focus,[type=reset]:focus,[type=submit]:focus,a:focus,button:active,button:focus,input:active,input:focus,select:active,select:focus,summary:active,summary:focus,textarea:active,textarea:focus{outline:var(--size-1) solid var(--color-bg-highlight);outline-offset:var(--size-1)}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);position:absolute!important;padding:0;margin:-1px;height:1px;width:1px;overflow:hidden;word-wrap:normal!important}.screen-reader-text:focus{font-weight:700;clip:auto!important;display:block;height:auto;width:auto;z-index:99999;padding:var(--size-2);background:var(--color-bg-accent);color:var(--color-fg-accent);left:var(--size-2);top:var(--size-2);max-width:var(--size-7)}.overflow{overflow:auto}.overflow-truncate{overflow:hidden;text-overflow:ellipsis}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll,pre{overflow:scroll}.overflow-auto{overflow:auto}.overflow-auto::-webkit-scrollbar,.overflow-scroll::-webkit-scrollbar,pre::-webkit-scrollbar{width:var(--size-3);height:var(--size-3)}.overflow-auto::-webkit-scrollbar-track,.overflow-scroll::-webkit-scrollbar-track,pre::-webkit-scrollbar-track{background:var(--color-fg)}.overflow-auto::-webkit-scrollbar-thumb,.overflow-scroll::-webkit-scrollbar-thumb,pre::-webkit-scrollbar-thumb{background:var(--color-fg-accent);border:1px solid var(--color-fg)}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-underline-offset:.1em;text-decoration-thickness:.15em;cursor:pointer;color:var(--color-link)}a:hover{text-decoration:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}.btn,[role=button],[type=button],[type=reset],[type=submit],button{font:inherit;border:none;text-decoration:none;display:inline-block;border-radius:var(--border-radius);padding:var(--size-1) var(--size-3)}.btn:not([class*=bg-]),[role=button]:not([class*=bg-]),[type=button]:not([class*=bg-]),[type=reset]:not([class*=bg-]),[type=submit]:not([class*=bg-]),button:not([class*=bg-]){background:var(--color-bg-accent);color:var(--color-fg-accent)}.btn:hover,[role=button]:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{cursor:pointer}.btn:disabled,[role=button]:disabled,[type=button]:disabled,[type=reset]:disabled,[type=submit]:disabled,button:disabled{opacity:.5;cursor:not-allowed}dialog{background:0 0;padding:var(--size-4);border:none;color:#fff;max-width:100%;width:30rem;margin:var(--size-5) auto}dialog::backdrop{background-color:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(var(--size-1));backdrop-filter:blur(var(--size-1))}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin-top:var(--size-5);margin-bottom:var(--size-4);text-wrap:balance}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration-color:var(--color-link);-webkit-text-decoration-skip-ink:all;text-decoration-skip-ink:all;color:inherit}h3,h4,h5,h6{margin-top:var(--size-4)}hr{background:currentColor;border:none;height:var(--size-1);margin:var(--size-5) auto;color:inherit;opacity:.25}input,select,textarea{border-style:solid;border-width:var(--border-width)}button,input,select,textarea{font:inherit;box-shadow:none;border-radius:var(--border-radius);line-height:var(--type-lh-2);padding:var(--size-1) var(--size-3);max-width:100%}button:active:invalid,button:focus:invalid,input:active:invalid,input:focus:invalid,select:active:invalid,select:focus:invalid,textarea:active:invalid,textarea:focus:invalid{outline:red solid .2rem}button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}textarea{width:100%;resize:vertical}[type=checkbox],[type=radio]{width:1.5em;height:1.5em}[type=checkbox]:hover,[type=radio]:hover{cursor:pointer}[type=search]:before{display:block;content:" ";background:green;width:10px;height:10px}[type=color]{padding:0;border:none}[type=file]{border:none;padding:0}.dropzone[type=file]{width:100%;border:var(--size-1) dashed currentColor;padding:var(--size-4);border-radius:var(--size-2)}::file-selector-button{font:inherit;padding:var(--size-1) var(--size-3);margin-inline-end:var(--size-3)}::file-selector-button:hover{cursor:pointer}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;padding:var(--size-1) var(--size-3);margin-inline-end:var(--size-3)}::-webkit-file-upload-button:hover{cursor:pointer}label{font-weight:700;display:block;margin-top:var(--size-1);margin-bottom:var(--size-1)}fieldset{margin-top:var(--size-4);margin-bottom:var(--size-4);padding:var(--size-3);border:var(--border-width) solid var(--color-border)}legend{padding-left:var(--size-2);padding-right:var(--size-2);font-weight:700}legend>*{margin:0}dd,dt,li{margin-top:var(--size-1);margin-bottom:var(--size-1)}dt{font-weight:700}dd:not(:last-of-type){margin-bottom:var(--size-3)}nav ul{list-style-type:none;padding:0}nav ul ul{padding-inline-start:var(--size-3)}mark{padding:var(--size-1) var(--size-2);background:var(--color-bg-highlight);color:var(--color-fg-highlight)}figure{margin:0}figcaption{text-align:center;font-size:var(--type-size-6)}blockquote{font-style:italic;padding-left:var(--size-4);font-size:var(--type-size-4);margin-top:var(--size-4);margin-bottom:var(--size-4);border-left:var(--size-2) solid currentColor}cite{font-style:normal;font-size:var(--type-size-6)}code,kbd,pre,samp{font-family:var(--font-monospace);color:var(--color-code);background:var(--color-bg-code);padding:var(--size-1) var(--size-2);border-radius:var(--size-1)}kbd{line-height:1;border-radius:var(--border-radius);border:1px solid var(--color-code);border-bottom:2px solid var(--color-code);padding:var(--size-1) var(--size-2);font-family:var(--font-monospace)}pre{max-width:100%;overflow:auto;padding:var(--size-3) var(--size-4);background:var(--color-gray4);border-radius:var(--border-radius)}pre code{background:0 0;margin:0;padding:0}details :last-child{margin-bottom:0}summary{font-weight:700}summary:hover{cursor:pointer}summary>*{display:inline}iframe{border:0;border:1px solid var(--color-gray3)}table caption,table th{text-align:left;font-weight:700}table caption,table td,table th{padding:var(--size-1);display:inline-block;vertical-align:top;word-break:break-word;min-width:var(--size-5);overflow-x:auto}@media only screen and (min-width:32em){textarea{width:60%}table caption,table td,table th{display:table-cell}}p{margin-top:var(--size-4);margin-bottom:var(--size-4);overflow-wrap:break-word}sub,sup{line-height:0;position:relative;vertical-align:baseline;padding:0 .1em}sub{bottom:-.25em}sup{top:-.5em}strong{font-weight:700} -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | /* jshint esnext: true */ 2 | 'use strict'; 3 | 4 | /** 5 | * External dependencies. 6 | */ 7 | const { 8 | series, 9 | watch 10 | } = require( 'gulp' ); 11 | 12 | const { src, dest } = require( 'gulp' ); 13 | const sass = require( 'gulp-sass' )( require( 'sass' ) ); 14 | const autoprefixer = require( 'gulp-autoprefixer' ); 15 | const cleancss = require( 'gulp-clean-css' ); 16 | const change = require( 'gulp-change' ); 17 | const rename = require( 'gulp-rename' ); 18 | const plumber = require( 'gulp-plumber' ); 19 | const size = require( 'gulp-size' ); 20 | 21 | const sass_properties = { 22 | indentType: 'tab', 23 | indentWidth: 1, 24 | outputStyle: 'expanded', 25 | precision: 3, 26 | }; 27 | 28 | /** 29 | * Build SASS files. 30 | */ 31 | export function process_styles() { 32 | 33 | const export_path = './dist/' 34 | 35 | return src( './scss/*.scss' ) 36 | .pipe( plumber() ) 37 | .pipe( 38 | sass.sync( sass_properties ).on( 'error', sass.logError ) 39 | ) 40 | .pipe( 41 | autoprefixer( 42 | { cascade: false } 43 | ) 44 | ) 45 | .pipe( 46 | rename( 47 | ( path ) => { path.extname = '.css'; } 48 | ) 49 | ) 50 | .pipe( 51 | dest( export_path ) 52 | ) 53 | .pipe( 54 | change( removeComments ) 55 | ) 56 | .pipe( 57 | cleancss( { 58 | level: 2, 59 | } ) 60 | ) 61 | .pipe( 62 | rename( 63 | ( path ) => { path.extname = '.min.css'; } 64 | ) 65 | ) 66 | .pipe( 67 | size( 68 | { 69 | showFiles: true, 70 | } 71 | ) 72 | ) 73 | .pipe( 74 | size( 75 | { 76 | showFiles: true, 77 | gzip: true 78 | } 79 | ) 80 | ) 81 | .pipe( 82 | dest( export_path ) 83 | ); 84 | 85 | } 86 | 87 | 88 | /** 89 | * Remove comments from the source so that they can be minified away. 90 | */ 91 | const removeComments = function( content ) { 92 | 93 | content = content.replace( /\/\*\*!/g, '/**' ); 94 | content = content.replace( /\/\*!/g, '/*' ); 95 | 96 | return content; 97 | 98 | }; 99 | 100 | 101 | export const build = process_styles; 102 | 103 | export const watchFiles = function( done ) { 104 | 105 | watch( 106 | './scss/**/*.scss', 107 | process_styles 108 | ); 109 | 110 | done(); 111 | 112 | }; 113 | 114 | export default series( 115 | build, 116 | watchFiles 117 | ); 118 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "elementalcss", 3 | "version": "1.0.0", 4 | "description": "A minimal utility CSS library", 5 | "scripts": { 6 | "dev": "gulp", 7 | "build": "gulp build" 8 | }, 9 | "author": "binarymoon", 10 | "license": "GPL-2.0-or-later", 11 | "jshintConfig": { 12 | "esversion": 6 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.12.10", 16 | "@babel/preset-env": "^7.12.11", 17 | "@babel/register": "^7.12.10", 18 | "gulp": "^5.0.0", 19 | "gulp-autoprefixer": "^8.0.0", 20 | "gulp-babel": "^8.0.0", 21 | "gulp-change": "^1.0.2", 22 | "gulp-clean-css": "^4.3.0", 23 | "gulp-concat": "^2.6.1", 24 | "gulp-include": "^2.4.1", 25 | "gulp-plumber": "^1.2.1", 26 | "gulp-rename": "^2.0.0", 27 | "gulp-sass": "^6.0.0", 28 | "gulp-size": "^4.0.0", 29 | "sass": "^1.43.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/effects/_animations.scss: -------------------------------------------------------------------------------- 1 | .scroll-smooth { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | .pulse { 6 | animation: pulse 1s infinite; 7 | } 8 | 9 | @keyframes pulse { 10 | 11 | 0% { 12 | transform: scale(1); 13 | } 14 | 15 | 50% { 16 | transform: scale(1.05); 17 | } 18 | 19 | 100% { 20 | transform: scale(1); 21 | } 22 | 23 | } 24 | 25 | .fade-in { 26 | animation: fadeIn 1s ease-in-out; 27 | } 28 | 29 | @keyframes fadeIn { 30 | 31 | 0% { 32 | opacity: 0; 33 | } 34 | 35 | 100% { 36 | opacity: 1; 37 | } 38 | 39 | } -------------------------------------------------------------------------------- /scss/effects/_index.scss: -------------------------------------------------------------------------------- 1 | @use "animations" as *; 2 | @use "loader" as *; 3 | @use "shadows" as *; -------------------------------------------------------------------------------- /scss/effects/_loader.scss: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 100%; 3 | max-width: var(--size-6); 4 | height: 1rem; 5 | display: inline-block; 6 | background-color: currentColor; 7 | border: 1px solid currentColor; 8 | border-radius: var(--size-1); 9 | background-image: linear-gradient(45deg, 10 | var(--color-gray3) 25%, 11 | transparent 25%, 12 | transparent 50%, 13 | var(--color-gray3) 50%, 14 | var(--color-gray3) 75%, 15 | transparent 75%, 16 | transparent 17 | ); 18 | background-size: 1rem 1rem; 19 | box-sizing: border-box; 20 | animation: LoaderBarStripe 1s linear infinite; 21 | } 22 | 23 | @keyframes LoaderBarStripe { 24 | 0% { 25 | background-position: 1em 0; 26 | } 27 | 100% { 28 | background-position: 0 0; 29 | } 30 | } -------------------------------------------------------------------------------- /scss/effects/_shadows.scss: -------------------------------------------------------------------------------- 1 | 2 | .shadow- { 3 | 4 | &low { 5 | box-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.2), 6 | 0px 1px 2px -2px rgba( 0, 0, 0, 0.1); 7 | } 8 | 9 | &mid { 10 | box-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.2), 11 | 0px 1px 2px -2px rgba( 0, 0, 0, 0.18), 12 | 0px 3px 3px -3px rgba( 0, 0, 0, 0.11), 13 | 0px 10px 7px -5px rgba( 0, 0, 0, 0.05); 14 | } 15 | 16 | &high { 17 | box-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.2), 18 | 0px 2px 2px -2px rgba( 0, 0, 0, 0.16), 19 | 0px 7px 5px -2px rgba( 0, 0, 0, 0.10), 20 | 0px 15px 11px -3px rgba( 0, 0, 0, 0.05); 21 | } 22 | 23 | } 24 | .shadow- { 25 | 26 | &low { 27 | box-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.2), 28 | 0px 1px 2px -2px rgba( 0, 0, 0, 0.1); 29 | } 30 | 31 | &mid { 32 | box-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.2), 33 | 0px 1px 2px -2px rgba( 0, 0, 0, 0.18), 34 | 0px 3px 3px -3px rgba( 0, 0, 0, 0.11), 35 | 0px 10px 7px -5px rgba( 0, 0, 0, 0.05); 36 | } 37 | 38 | &high { 39 | box-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.2), 40 | 0px 2px 2px -2px rgba( 0, 0, 0, 0.16), 41 | 0px 7px 5px -2px rgba( 0, 0, 0, 0.10), 42 | 0px 15px 11px -3px rgba( 0, 0, 0, 0.05); 43 | } 44 | 45 | } 46 | 47 | .text-shadow- { 48 | 49 | &low { 50 | text-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.25); 51 | } 52 | 53 | &mid { 54 | text-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.25), 55 | 0px 1px 2px rgba( 0, 0, 0, 0.18), 56 | 0px 3px 3px rgba( 0, 0, 0, 0.11); 57 | } 58 | 59 | &high { 60 | text-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.25), 61 | 0px 2px 2px rgba( 0, 0, 0, 0.16), 62 | 0px 7px 5px rgba( 0, 0, 0, 0.10); 63 | } 64 | 65 | } -------------------------------------------------------------------------------- /scss/elementalcss.classless.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "sass:map"; 3 | @use 'sass:list'; 4 | 5 | @use "lib/functions" as *; 6 | @use "lib/responsive" as *; 7 | 8 | @use "vars/index" as *; 9 | 10 | @use "html/reset" as *; 11 | 12 | // Only include the utils that are extended by HTML. 13 | @use "utils/accessibility" as *; 14 | @use "utils/font" as *; 15 | @use "utils/outline" as *; 16 | @use "utils/overflow" as *; 17 | 18 | @use "html/index" as *; 19 | -------------------------------------------------------------------------------- /scss/elementalcss.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "sass:map"; 3 | @use "sass:color"; 4 | @use 'sass:list'; 5 | 6 | @use "lib/functions" as *; 7 | @use "lib/responsive" as *; 8 | 9 | @use "vars/index" as *; 10 | 11 | @use "html/reset" as *; 12 | 13 | @use "html/index" as *; 14 | @use "utils/index" as *; 15 | @use "effects/index" as *; 16 | -------------------------------------------------------------------------------- /scss/elementalcss.utility.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "sass:map"; 3 | @use "sass:color"; 4 | @use 'sass:list'; 5 | 6 | @use "lib/functions" as *; 7 | @use "lib/responsive" as *; 8 | 9 | @use "vars/index" as *; 10 | 11 | @use "html/reset" as *; 12 | 13 | @use "utils/index" as *; 14 | -------------------------------------------------------------------------------- /scss/html/_anchor.scss: -------------------------------------------------------------------------------- 1 | @use "../utils/outline" as *; 2 | 3 | a { 4 | 5 | text-decoration-skip-ink: auto; 6 | text-underline-offset: 0.1em; 7 | text-decoration-thickness: 0.15em; 8 | cursor: pointer; 9 | 10 | color: var( --color-link ); 11 | 12 | &:focus { 13 | 14 | @extend .outline; 15 | 16 | } 17 | 18 | &:hover { 19 | 20 | text-decoration: none; 21 | 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /scss/html/_button.scss: -------------------------------------------------------------------------------- 1 | @use "../utils/outline" as *; 2 | 3 | button, 4 | [type=submit], 5 | [type=reset], 6 | [type=button] { 7 | 8 | -webkit-appearance: button; 9 | 10 | } 11 | 12 | .btn, 13 | button, 14 | [role=button], 15 | [type=submit], 16 | [type=reset], 17 | [type=button] { 18 | 19 | font: inherit; 20 | border: none; 21 | text-decoration: none; 22 | display: inline-block; 23 | border-radius: var( --border-radius ); 24 | padding: var( --size-1 ) var( --size-3 ); 25 | 26 | &:not([class*="bg-"]) { 27 | 28 | background: var( --color-bg-accent ); 29 | color: var( --color-fg-accent ); 30 | 31 | } 32 | 33 | &:hover { 34 | 35 | cursor: pointer; 36 | 37 | } 38 | 39 | &:focus { 40 | 41 | @extend .outline; 42 | 43 | } 44 | 45 | &:disabled { 46 | 47 | opacity: 0.5; 48 | cursor: not-allowed; 49 | 50 | } 51 | 52 | } 53 | -------------------------------------------------------------------------------- /scss/html/_dialog.scss: -------------------------------------------------------------------------------- 1 | dialog { 2 | background: transparent; 3 | padding: var(--size-4); 4 | border: none; 5 | color: white; 6 | 7 | max-width: 100%; 8 | width: 30rem; 9 | margin: var(--size-5) auto; 10 | } 11 | 12 | dialog::backdrop { 13 | background-color: rgba(0, 0, 0, 0.6); 14 | backdrop-filter: blur(var(--size-1)); 15 | } -------------------------------------------------------------------------------- /scss/html/_heading.scss: -------------------------------------------------------------------------------- 1 | @use "../utils/font" as *; 2 | 3 | h1, 4 | h2, 5 | h3, 6 | h4, 7 | h5, 8 | h6 { 9 | 10 | overflow-wrap: break-word; 11 | 12 | margin-top: var(--size-5); 13 | margin-bottom: var(--size-4); 14 | text-wrap: balance; 15 | 16 | a { 17 | 18 | text-decoration-color: var(--color-link); 19 | text-decoration-skip-ink: all; 20 | color: inherit; 21 | 22 | } 23 | 24 | } 25 | 26 | h3, 27 | h4, 28 | h5, 29 | h6 { 30 | 31 | margin-top: var(--size-4); 32 | 33 | } 34 | 35 | 36 | h1 { 37 | @extend .f2; 38 | } 39 | 40 | h2 { 41 | @extend .f3; 42 | } 43 | 44 | h3 { 45 | @extend .f4; 46 | } 47 | 48 | h4 { 49 | @extend .f5; 50 | } 51 | 52 | h5 { 53 | @extend .f6; 54 | } 55 | 56 | h6 { 57 | @extend .f6; 58 | } -------------------------------------------------------------------------------- /scss/html/_hr.scss: -------------------------------------------------------------------------------- 1 | hr { 2 | 3 | background: currentColor; 4 | border: none; 5 | height: var( --size-1 ); 6 | margin: var( --size-5 ) auto; 7 | color: inherit; 8 | opacity: 0.25; 9 | 10 | } -------------------------------------------------------------------------------- /scss/html/_index.scss: -------------------------------------------------------------------------------- 1 | 2 | @use "anchor" as *; 3 | @use "button" as *; 4 | @use "dialog" as *; 5 | @use "heading" as *; 6 | @use "hr" as *; 7 | @use "input" as *; 8 | @use "list" as *; 9 | @use "navigation" as *; 10 | @use "other" as *; 11 | @use "table" as *; 12 | @use "typography" as *; 13 | -------------------------------------------------------------------------------- /scss/html/_input.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | @use "../utils/outline" as *; 3 | 4 | input, 5 | select, 6 | textarea { 7 | 8 | border-style: solid; 9 | border-width: var(--border-width); 10 | 11 | } 12 | 13 | input, 14 | button, 15 | select, 16 | textarea { 17 | 18 | font: inherit; 19 | box-shadow: none; 20 | border-radius: var(--border-radius); 21 | line-height: var(--type-lh-2); 22 | padding: var(--size-1) var(--size-3); 23 | max-width: 100%; 24 | 25 | &:active, 26 | &:focus { 27 | 28 | @extend .outline; 29 | 30 | &:invalid { 31 | 32 | outline: 0.2rem red solid; 33 | 34 | } 35 | 36 | } 37 | 38 | &:disabled { 39 | 40 | opacity: 0.5; 41 | cursor: not-allowed; 42 | 43 | } 44 | 45 | } 46 | 47 | /* Make the textarea wider than other inputs */ 48 | textarea { 49 | 50 | width: 100%; 51 | resize: vertical; 52 | 53 | @include mq-tablet() { 54 | 55 | width: 60%; 56 | 57 | } 58 | 59 | } 60 | 61 | /* Ensures the checkbox and radio inputs do not have a set width like other input fields */ 62 | [type="checkbox"], 63 | [type="radio"] { 64 | 65 | width: 1.5em; 66 | height: 1.5em; 67 | 68 | &:hover { 69 | 70 | cursor: pointer; 71 | 72 | } 73 | 74 | } 75 | 76 | [type="search"] { 77 | 78 | &:before { 79 | 80 | display: block; 81 | content: ' '; 82 | background: green; 83 | width: 10px; 84 | height: 10px; 85 | 86 | } 87 | 88 | } 89 | 90 | [type="color"] { 91 | 92 | padding: 0; 93 | border: none; 94 | 95 | } 96 | 97 | [type="file"] { 98 | 99 | border: none; 100 | padding: 0; 101 | 102 | } 103 | 104 | .dropzone[type="file"] { 105 | 106 | width: 100%; 107 | border: var(--size-1) dashed currentColor; 108 | padding: var(--size-4); 109 | border-radius: var(--size-2); 110 | 111 | } 112 | 113 | ::file-selector-button { 114 | 115 | font: inherit; 116 | padding: var(--size-1) var(--size-3); 117 | margin-inline-end: var(--size-3); 118 | 119 | &:hover { 120 | 121 | cursor: pointer; 122 | 123 | } 124 | 125 | } 126 | 127 | ::-webkit-file-upload-button { 128 | 129 | font: inherit; 130 | -webkit-appearance: button; 131 | padding: var(--size-1) var(--size-3); 132 | margin-inline-end: var(--size-3); 133 | 134 | &:hover { 135 | 136 | cursor: pointer; 137 | 138 | } 139 | 140 | } 141 | 142 | label { 143 | 144 | font-weight: bold; 145 | display: block; 146 | 147 | margin-top: var(--size-1); 148 | margin-bottom: var(--size-1); 149 | 150 | } 151 | 152 | fieldset { 153 | 154 | margin-top: var(--size-4); 155 | margin-bottom: var(--size-4); 156 | padding: var(--size-3); 157 | border: var(--border-width) solid var(--color-border); 158 | 159 | } 160 | 161 | legend { 162 | 163 | padding-left: var(--size-2); 164 | padding-right: var(--size-2); 165 | font-weight: bold; 166 | 167 | >* { 168 | 169 | margin: 0; 170 | 171 | } 172 | 173 | } -------------------------------------------------------------------------------- /scss/html/_list.scss: -------------------------------------------------------------------------------- 1 | dd, 2 | dt, 3 | li { 4 | 5 | margin-top: var( --size-1 ); 6 | margin-bottom: var( --size-1 ); 7 | 8 | } 9 | 10 | dt { 11 | 12 | font-weight: bold; 13 | 14 | } 15 | 16 | dd:not( :last-of-type ) { 17 | 18 | margin-bottom: var( --size-3 ); 19 | 20 | } 21 | -------------------------------------------------------------------------------- /scss/html/_navigation.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | 3 | ul { 4 | 5 | list-style-type: none; 6 | padding: 0; 7 | 8 | ul { 9 | 10 | padding-inline-start: var( --size-3 ); 11 | 12 | } 13 | 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /scss/html/_other.scss: -------------------------------------------------------------------------------- 1 | @use "../utils/outline" as *; 2 | @use "../utils/overflow" as *; 3 | 4 | // Text highlighting. 5 | mark { 6 | 7 | padding: var(--size-1) var(--size-2); 8 | background: var(--color-bg-highlight); 9 | color: var(--color-fg-highlight); 10 | 11 | } 12 | 13 | figure { 14 | 15 | margin: 0; 16 | 17 | } 18 | 19 | figcaption { 20 | 21 | text-align: center; 22 | font-size: var(--type-size-6); 23 | 24 | } 25 | 26 | blockquote { 27 | 28 | font-style: italic; 29 | padding-left: var(--size-4); 30 | font-size: var(--type-size-4); 31 | margin-top: var(--size-4); 32 | margin-bottom: var(--size-4); 33 | border-left: var(--size-2) solid currentColor; 34 | 35 | } 36 | 37 | cite { 38 | 39 | font-style: normal; 40 | 41 | font-size: var(--type-size-6); 42 | 43 | } 44 | 45 | /* Use mono font for code like elements */ 46 | code, 47 | pre, 48 | kbd, 49 | samp { 50 | 51 | font-family: var(--font-monospace); 52 | color: var(--color-code); 53 | background: var(--color-bg-code); 54 | padding: var(--size-1) var(--size-2); 55 | border-radius: var(--size-1); 56 | 57 | } 58 | 59 | kbd { 60 | 61 | line-height: 1; 62 | border-radius: var(--border-radius); 63 | border: 1px solid var(--color-code); 64 | border-bottom: 2px solid var(--color-code); 65 | padding: var(--size-1) var(--size-2); 66 | font-family: var(--font-monospace); 67 | 68 | } 69 | 70 | pre { 71 | 72 | max-width: 100%; 73 | overflow: auto; 74 | 75 | padding: var(--size-3) var(--size-4); 76 | background: var(--color-gray4); 77 | border-radius: var(--border-radius); 78 | 79 | @extend .overflow-scroll; 80 | 81 | code { 82 | 83 | background: none; 84 | margin: 0; 85 | padding: 0; 86 | 87 | } 88 | 89 | } 90 | 91 | details { 92 | 93 | *:last-child { 94 | 95 | margin-bottom: 0; 96 | 97 | } 98 | 99 | } 100 | 101 | summary { 102 | 103 | font-weight: bold; 104 | 105 | &:active, 106 | &:focus { 107 | 108 | @extend .outline; 109 | 110 | } 111 | 112 | &:hover { 113 | 114 | cursor: pointer; 115 | 116 | } 117 | 118 | >* { 119 | 120 | display: inline; 121 | 122 | } 123 | 124 | } 125 | 126 | iframe { 127 | 128 | border: 0; 129 | border: 1px solid var(--color-gray3); 130 | 131 | } -------------------------------------------------------------------------------- /scss/html/_reset.scss: -------------------------------------------------------------------------------- 1 | // Box sizing 2 | *, 3 | *::before, 4 | *::after { 5 | 6 | box-sizing: border-box; 7 | 8 | } 9 | 10 | * { 11 | 12 | margin: 0; 13 | 14 | } 15 | 16 | :focus:not(:focus-visible), 17 | [tabindex="-1"]:focus { 18 | 19 | outline: none; 20 | 21 | } 22 | 23 | div, 24 | main, 25 | section, 26 | article, 27 | blockquote, 28 | header, 29 | footer, 30 | aside, 31 | figure, 32 | figcaption { 33 | 34 | > :first-child { 35 | 36 | margin-top: 0; 37 | 38 | } 39 | 40 | > :last-child { 41 | 42 | margin-bottom: 0; 43 | 44 | } 45 | 46 | } 47 | 48 | html { 49 | 50 | height: 100%; 51 | font-size: 16px; 52 | accent-color: var( --color-bg-accent ); 53 | scroll-behavior: smooth; 54 | text-size-adjust: none; 55 | 56 | &:focus-within { 57 | 58 | scroll-behavior: smooth; 59 | 60 | } 61 | 62 | } 63 | 64 | // Set core body defaults 65 | body { 66 | 67 | min-height: 100vh; 68 | text-rendering: optimizeSpeed; 69 | -webkit-font-smoothing: antialiased; 70 | 71 | background: var( --color-bg ); 72 | color: var( --color-fg ); 73 | font-size: var( --type-base ); 74 | line-height: var( --type-lh-2 ); 75 | font-family: var( --font-main ); 76 | 77 | } 78 | 79 | // Remove default margin 80 | body, 81 | p, 82 | h1, h2, h3, h4, 83 | figure, 84 | blockquote, 85 | dl, 86 | dd { 87 | 88 | margin: 0; 89 | 90 | } 91 | 92 | // Make images easier to work with 93 | img, 94 | video, 95 | canvas, 96 | svg, 97 | picture { 98 | 99 | max-width: 100%; 100 | display: block; 101 | height: auto; 102 | 103 | } 104 | 105 | // Remove all animations, transitions and smooth scroll for people that prefer 106 | // not to see them. 107 | @media (prefers-reduced-motion: reduce) { 108 | 109 | html:focus-within { 110 | 111 | scroll-behavior: auto; 112 | 113 | } 114 | 115 | *, 116 | *::before, 117 | *::after { 118 | 119 | animation-duration: 0.01ms !important; 120 | animation-iteration-count: 1 !important; 121 | transition-duration: 0.01ms !important; 122 | scroll-behavior: auto !important; 123 | 124 | } 125 | 126 | } 127 | 128 | // Text fragment styles. 129 | // @see https://twitter.com/bramus/status/1355987715532054529 130 | ::target-text { 131 | 132 | background: var( --color-bg-highlight ); 133 | color: var( --color-fg-highlight ); 134 | 135 | } 136 | 137 | // @see https://piccalil.li/quick-tip/add-scroll-margin-to-all-elements-which-can-be-targeted 138 | ::target { 139 | 140 | scroll-margin-block: 2ex; 141 | 142 | } 143 | 144 | 145 | @media (prefers-reduced-motion: reduce) { 146 | 147 | * { 148 | animation-duration: 0.001 !important; 149 | transition-duration: 0.001 !important; 150 | scroll-behavior: auto; 151 | } 152 | 153 | } 154 | -------------------------------------------------------------------------------- /scss/html/_table.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | @use "../utils/font" as *; 3 | 4 | table { 5 | 6 | caption, 7 | th { 8 | 9 | text-align: left; 10 | font-weight: bold; 11 | 12 | } 13 | 14 | caption, 15 | th, td { 16 | 17 | padding: var( --size-1 ); 18 | display: inline-block; 19 | vertical-align: top; 20 | word-break: break-word; 21 | min-width: var( --size-5 ); 22 | overflow-x: auto; 23 | 24 | @include mq-tablet() { 25 | 26 | display: table-cell; 27 | 28 | } 29 | 30 | } 31 | 32 | } 33 | -------------------------------------------------------------------------------- /scss/html/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../utils/font" as *; 2 | 3 | p { 4 | 5 | margin-top: var(--size-4); 6 | margin-bottom: var(--size-4); 7 | overflow-wrap: break-word; 8 | 9 | } 10 | 11 | small { 12 | 13 | @extend .f6; 14 | 15 | } 16 | 17 | sub, 18 | sup { 19 | 20 | @extend .f6; 21 | line-height: 0; 22 | position: relative; 23 | vertical-align: baseline; 24 | padding: 0 0.1em; 25 | 26 | } 27 | 28 | sub { 29 | 30 | bottom: -0.25em; 31 | 32 | } 33 | 34 | sup { 35 | 36 | top: -0.5em; 37 | 38 | } 39 | 40 | strong { 41 | 42 | font-weight: 700; 43 | 44 | } -------------------------------------------------------------------------------- /scss/lib/_functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "sass:color"; 3 | 4 | 5 | // calculate a colour to use for contrast based on the brightness of the background 6 | @function get_contrast( $color, $light: white, $dark: black ) { 7 | 8 | @if ( get_brightness( $color ) < 65 ) { 9 | 10 | @return $light; 11 | 12 | } @else { 13 | 14 | @return $dark; 15 | 16 | } 17 | 18 | } 19 | 20 | 21 | // Perceptual colour brightness 22 | // http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx 23 | @function get_brightness( $color ) { 24 | 25 | // Default values for relative brightness. 26 | $red-magic-number: 241; 27 | $green-magic-number: 691; 28 | $blue-magic-number: 68; 29 | $brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number; 30 | 31 | // Get colour values. 32 | // $red-component: red( $color ); 33 | // $green-component: green( $color ); 34 | // $blue-component: blue( $color ); 35 | $red-component: color.channel($color, "red", $space: rgb); 36 | $green-component: color.channel($color, "green", $space: rgb); 37 | $blue-component: color.channel($color, "blue", $space: rgb); 38 | 39 | $sum: ( ( $red-component * $red-component * $red-magic-number ) + ( $green-component * $green-component * $green-magic-number ) + ( $blue-component * $blue-component * $blue-magic-number ) ); 40 | $number: sqrt( math.div( $sum, $brightness-divisor ) ); 41 | 42 | @return 100% * math.div( $number, 255 ); 43 | 44 | } 45 | 46 | 47 | // Square Root 48 | // http://www.antimath.info/css/sass-sqrt-function/ 49 | @function sqrt( $r ) { 50 | 51 | $x0: 1; 52 | $x1: $x0; 53 | 54 | @for $i from 1 through 10 { 55 | $x1: $x0 - math.div( $x0 * $x0 - abs( $r ), 2 * $x0 ); 56 | $x0: $x1; 57 | } 58 | 59 | @return $x1; 60 | 61 | } 62 | -------------------------------------------------------------------------------- /scss/lib/_responsive.scss: -------------------------------------------------------------------------------- 1 | @mixin mq-prefix( $prefix ) { 2 | 3 | .#{$prefix} { 4 | @content; 5 | } 6 | 7 | @include mq-tablet() { 8 | #{'.t\\:' + $prefix} { 9 | @content; 10 | } 11 | } 12 | 13 | @include mq-desktop() { 14 | #{'.d\\:' + $prefix} { 15 | @content; 16 | } 17 | } 18 | 19 | } 20 | 21 | @mixin mq-tablet() { 22 | 23 | @media only screen and ( min-width: 32em ) { 24 | @content; 25 | } 26 | 27 | } 28 | 29 | @mixin mq-desktop() { 30 | 31 | @media only screen and ( min-width: 64em ) { 32 | @content; 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /scss/utils/_accessibility.scss: -------------------------------------------------------------------------------- 1 | @use "../utils/font" as *; 2 | @use "../utils/outline" as *; 3 | 4 | /* Screen Reader Text: meant only for screen readers. */ 5 | .screen-reader-text { 6 | 7 | border: 0; 8 | clip: rect( 1px, 1px, 1px, 1px ); 9 | clip-path: inset(50%); 10 | position: absolute !important; 11 | padding: 0; 12 | margin: -1px; 13 | height: 1px; 14 | width: 1px; 15 | overflow: hidden; 16 | word-wrap: normal !important; 17 | 18 | &:focus { 19 | 20 | @extend .outline; 21 | @extend .f4; 22 | 23 | font-weight: bold; 24 | clip: auto !important; 25 | display: block; 26 | height: auto; 27 | width: auto; 28 | z-index: 99999; 29 | 30 | padding: var( --size-2 ); 31 | background: var( --color-bg-accent ); 32 | color: var( --color-fg-accent ); 33 | left: var( --size-2 ); 34 | top: var( --size-2 ); 35 | max-width: var( --size-7 ); 36 | 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /scss/utils/_app.scss: -------------------------------------------------------------------------------- 1 | .pe-none { 2 | pointer-events: none; 3 | } 4 | 5 | .pe-auto { 6 | pointer-events: auto; 7 | } 8 | -------------------------------------------------------------------------------- /scss/utils/_aspect-ratio.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix('ar') { 4 | 5 | &-1 { 6 | aspect-ratio: 1; 7 | } 8 | 9 | &-3-4 { 10 | aspect-ratio: 3/4; 11 | } 12 | 13 | &-16-9 { 14 | aspect-ratio: 16/9; 15 | } 16 | 17 | } -------------------------------------------------------------------------------- /scss/utils/_background.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | 4 | @include mq-prefix( 'bg' ) { 5 | 6 | /** 7 | * Use style="--bg-image: url(/image/url/);" to set the image. 8 | */ 9 | &-image { 10 | background-image: var( --bg-image ); 11 | background-size: cover; 12 | background-position: center; 13 | } 14 | 15 | &-transparent { background: transparent; } 16 | 17 | &-auto { background-size: auto; } 18 | &-cover { background-size: cover; } 19 | &-contain { background-size: contain; } 20 | 21 | &-repeat-none { background-repeat: no-repeat; } 22 | &-repeat-x { background-repeat: repeat-x; } 23 | &-repeat-y { background-repeat: repeat-y; } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /scss/utils/_border.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | @use "../vars/positions" as *; 3 | @use "../vars/colours" as *; 4 | 5 | @include mq-prefix( 'b' ) { 6 | 7 | border: var( --border-width ) solid var( --color-border ); 8 | 9 | @each $p_name, $p_value in $positions { 10 | &-#{$p_name} { 11 | border-#{$p_value}: var( --border-width ) solid var( --color-border ); 12 | } 13 | } 14 | 15 | &-none { border: none; } 16 | 17 | &-current { border-color: currentColor; } 18 | 19 | @each $c_name, $c_value in $colours { 20 | &-#{$c_name} { 21 | border-color: var( --color-#{$c_name} ); 22 | } 23 | } 24 | 25 | &-br-round { border-radius: 999rem; } 26 | 27 | @each $s_name in ( 0, 1, 2, 3 ) { 28 | 29 | // Border width. 30 | &#{$s_name} { 31 | border-width: var( --size-#{$s_name} ); 32 | } 33 | 34 | // Border Radius on all corners. 35 | &-br#{$s_name} { 36 | border-radius: var( --size-#{$s_name} ); 37 | } 38 | 39 | // Border Radius on specific corners. 40 | @each $p_name, $p_value in $positions-corner { 41 | &-br-#{$p_name}#{$s_name} { 42 | border-#{$p_value}-radius: var( --size-#{$s_name} ); 43 | } 44 | } 45 | 46 | // Border width on different sides. 47 | @each $p_name, $p_value in $positions { 48 | &-#{$p_name}#{$s_name} { 49 | border-#{$p_value}-width: var( --size-#{$s_name} ); 50 | } 51 | } 52 | 53 | } 54 | 55 | }; 56 | -------------------------------------------------------------------------------- /scss/utils/_colours.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Colours 3 | */ 4 | 5 | @use "sass:color"; 6 | @use "sass:map"; 7 | @use "sass:list"; 8 | @use "../lib/functions" as *; 9 | @use "../vars/colours" as *; 10 | 11 | 12 | // Background colours. 13 | // Listed before normal colours so that colours can override the accessible 14 | // colour set by the background property, 15 | .bg { 16 | 17 | $light-link: list.nth(map.get($colour_theme, "link"), 1); 18 | $dark-link: list.nth(map.get($colour_theme, "link"), 2); 19 | 20 | &-custom { 21 | background-color: var(--bg-custom) !important; 22 | } 23 | 24 | &-custom__hover:hover { 25 | background-color: var(--bg-custom--hover) !important; 26 | } 27 | 28 | &-transparent { 29 | background-color: transparent; 30 | } 31 | 32 | &-current { 33 | background-color: currentColor; 34 | } 35 | 36 | @each $c_name, 37 | $c_value in $colours { 38 | &-#{$c_name} { 39 | 40 | background-color: var(--color-#{$c_name}); 41 | color: get_contrast($c_value); 42 | 43 | &__hover:hover { 44 | background-color: var(--color-#{$c_name}); 45 | color: get_contrast($c_value); 46 | } 47 | 48 | // Apply contrasting colour to links that don't already have a 49 | // specified class. 50 | a:not([class]) { 51 | color: get_contrast($c_value, var(--color-#{$dark-link}), var(--color-#{$light-link})); 52 | } 53 | 54 | } 55 | } 56 | 57 | } 58 | 59 | // Foreground colours. 60 | .fg { 61 | 62 | &-current { 63 | color: currentColor; 64 | } 65 | 66 | &-custom { 67 | color: var(--fg-custom) !important; 68 | } 69 | 70 | @each $c_name, 71 | $c_value in $colours { 72 | &-#{$c_name} { 73 | color: var(--color-#{$c_name}); 74 | 75 | &__hover:hover { 76 | color: var(--color-#{$c_name}); 77 | } 78 | } 79 | } 80 | 81 | } -------------------------------------------------------------------------------- /scss/utils/_columns.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix( 'col' ) { 4 | 5 | @each $v in ( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ) { 6 | &s#{$v} { column-count: $v; } 7 | } 8 | 9 | @each $v in ( 0, 1, 2, 3, 4, 5 ) { 10 | &-w#{$v} { column-width: var( --size-#{$v+2} ); } 11 | &-gap#{$v} { column-gap: var( --size-#{$v} ); } 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /scss/utils/_display.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix( 'display' ) { 4 | 5 | &-block { display: block; } 6 | &-inline-block { display: inline-block; } 7 | &-inline { display: inline; } 8 | 9 | // We want this to override display block so put it last. 10 | &-none, 11 | &-hide-empty:empty { display: none; } 12 | 13 | } -------------------------------------------------------------------------------- /scss/utils/_fit.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix('fit') { 4 | 5 | &-contain { 6 | object-fit: contain; 7 | } 8 | 9 | &-cover { 10 | object-fit: cover; 11 | } 12 | 13 | &-none { 14 | object-fit: none; 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /scss/utils/_flex.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix('flex') { 4 | 5 | display: flex; 6 | 7 | &-1 { 8 | flex: 1 1 0%; 9 | } 10 | 11 | &-auto { 12 | flex: 1 1 auto; 13 | } 14 | 15 | &-initial { 16 | flex: 0 1 auto; 17 | } 18 | 19 | &-none { 20 | flex: none; 21 | } 22 | 23 | &-center { 24 | justify-content: center; 25 | align-items: center; 26 | } 27 | 28 | &-wrap { 29 | flex-wrap: wrap; 30 | } 31 | 32 | &-nowrap { 33 | flex-wrap: nowrap; 34 | } 35 | 36 | // Direction. 37 | &-row { 38 | flex-direction: row; 39 | } 40 | 41 | &-col { 42 | flex-direction: column; 43 | } 44 | 45 | @each $s_value in (0, 1) { 46 | &-g#{$s_value} { 47 | flex-grow: $s_value; 48 | } 49 | 50 | &-s#{$s_value} { 51 | flex-shrink: $s_value; 52 | } 53 | } 54 | 55 | // Justify. 56 | &-jc { 57 | &-s { 58 | justify-content: start; 59 | } 60 | &-e { 61 | justify-content: end; 62 | } 63 | &-sb { 64 | justify-content: space-between; 65 | } 66 | &-c { 67 | justify-content: center; 68 | } 69 | } 70 | 71 | &-ai { 72 | &-c { 73 | align-items: center; 74 | } 75 | 76 | &-s { 77 | align-items: start; 78 | } 79 | 80 | &-e { 81 | align-items: end; 82 | } 83 | 84 | &-stretch { 85 | align-items: stretch; 86 | } 87 | } 88 | 89 | &-as { 90 | &-c { 91 | align-self: center; 92 | } 93 | 94 | &-s { 95 | align-self: start; 96 | } 97 | 98 | &-e { 99 | align-self: end; 100 | } 101 | } 102 | 103 | } -------------------------------------------------------------------------------- /scss/utils/_float.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix( 'float' ) { 4 | 5 | &-none { float: none; } 6 | &-r { float: right; } 7 | &-l { float: left; } 8 | 9 | } 10 | 11 | @include mq-prefix( 'clear' ) { 12 | 13 | clear: both; 14 | 15 | &-none { clear: none; } 16 | &-r { clear: right; } 17 | &-l { clear: left; } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /scss/utils/_font.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "../lib/responsive" as *; 3 | @use "../vars/fonts" as *; 4 | 5 | @include mq-prefix('f') { 6 | 7 | // Font weights. 8 | @each $w in $font-weights { 9 | &-fw#{$w} { 10 | font-weight: $w; 11 | } 12 | } 13 | 14 | // Font styles. 15 | &-fs-i { 16 | font-style: italic; 17 | } 18 | 19 | &-fs-n { 20 | font-style: normal; 21 | } 22 | 23 | // Font size. 24 | @each $s_name, 25 | $s_value in $font-sizes { 26 | &#{$s_name} { 27 | 28 | font-size: var(--type-size-#{$s_name}); 29 | 30 | @if list.nth($s_value, 1) { 31 | line-height: #{list.nth( $s_value, 1 )}; 32 | } 33 | 34 | @if list.nth($s_value, 2) { 35 | letter-spacing: #{list.nth( $s_value, 2 )}; 36 | } 37 | } 38 | } 39 | 40 | } -------------------------------------------------------------------------------- /scss/utils/_gap.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix( 'gap' ) { 4 | 5 | @each $v in ( 0, 1, 2, 3, 4, 5, 6, 7 ) { 6 | &#{$v} { gap: var( --size-#{$v} ); } 7 | &-x#{$v} { column-gap: var( --size-#{$v} ); } 8 | &-y#{$v} { row-gap: var( --size-#{$v} ); } 9 | } 10 | 11 | } 12 | -------------------------------------------------------------------------------- /scss/utils/_grid.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix('grid') { 4 | 5 | display: grid; 6 | gap: var(--size-4); 7 | 8 | &-auto { 9 | grid-auto-flow: row; 10 | } 11 | 12 | &-fullwidth { 13 | grid-column: 1/-1; 14 | } 15 | 16 | &-col { 17 | 18 | &-all { 19 | grid-column: 1 / -1; 20 | } 21 | 22 | &-auto { 23 | grid-column: auto; 24 | } 25 | 26 | &-e { 27 | grid-column-end: -1; 28 | } 29 | 30 | @each $v in (1, 2, 3, 4, 5, 6, 7, 8, 9) { 31 | &s#{$v} { 32 | grid-template-columns: repeat($v, minmax(10px, 1fr)); 33 | } 34 | 35 | &-s#{$v} { 36 | grid-column-start: $v; 37 | } 38 | 39 | &-e#{$v} { 40 | grid-column-end: $v; 41 | } 42 | } 43 | 44 | @each $v in (1, 2, 3, 4, 5, 6) { 45 | &-span#{$v} { 46 | grid-column: span $v; 47 | } 48 | } 49 | 50 | } 51 | 52 | &-row { 53 | 54 | &-all { 55 | grid-row: 1 / 999; 56 | } 57 | 58 | &-auto { 59 | grid-row: auto; 60 | } 61 | 62 | &-e { 63 | grid-row-end: -1; 64 | } 65 | 66 | @each $v in (1, 2, 3, 4, 5, 6) { 67 | &-span#{$v} { 68 | grid-row: span $v; 69 | } 70 | } 71 | 72 | } 73 | 74 | // Compound grids as designed with Layout love grid tool. https://stuffandnonsense.co.uk/layoutlove/tool.html 75 | &-hydrogen { 76 | // 2 + 3 grid. 77 | grid-template-columns: 2fr 2fr 1fr 1fr 2fr 2fr; 78 | } 79 | &-helium { 80 | // 3 + 4 grid. 81 | grid-template-columns: 3fr 1fr 2fr 2fr 1fr 3fr; 82 | } 83 | &-lithium { 84 | // 4 + 5 grid. 85 | grid-template-columns: 4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr; 86 | } 87 | &-berilium { 88 | // 3 + 5 grid. 89 | grid-template-columns: 3fr 2fr 1fr 3fr 1fr 2fr 3fr; 90 | } 91 | 92 | } -------------------------------------------------------------------------------- /scss/utils/_index.scss: -------------------------------------------------------------------------------- 1 | @use "colours" as *; 2 | @use "accessibility" as *; 3 | @use "app" as *; 4 | @use "aspect-ratio" as *; 5 | @use "background" as *; 6 | @use "border" as *; 7 | @use "columns" as *; 8 | @use "display" as *; 9 | @use "fit" as *; 10 | @use "flex" as *; 11 | @use "float" as *; 12 | @use "font" as *; 13 | @use "grid" as *; 14 | @use "gap" as *; // Must come after grid and flex. 15 | @use "list" as *; 16 | @use "margins" as *; 17 | @use "opacity" as *; 18 | @use "order" as *; 19 | @use "overflow" as *; 20 | @use "outline" as *; 21 | @use "padding" as *; 22 | @use "positions" as *; 23 | @use "position-content" as *; 24 | @use "print" as *; 25 | @use "table" as *; 26 | @use "typography" as *; 27 | @use "visibility" as *; 28 | @use "width-height" as *; 29 | -------------------------------------------------------------------------------- /scss/utils/_list.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix( 'l' ) { 4 | 5 | &-ls-n { 6 | 7 | list-style-type: none; 8 | padding: 0; 9 | 10 | } 11 | 12 | &-inline { 13 | 14 | list-style-type: none; 15 | padding: 0; 16 | 17 | li { 18 | 19 | display: inline; 20 | 21 | } 22 | 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /scss/utils/_margins.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "../vars/sizes" as *; 3 | @use "../vars/positions" as *; 4 | @use "../lib/responsive" as *; 5 | 6 | @include mq-prefix('m') { 7 | 8 | // Center content horizontally. 9 | &-auto { 10 | margin-inline: auto; 11 | } 12 | 13 | @each $value in (1, 2, 3, 4, 5, 6, 7) { 14 | 15 | $s: list.nth($sizes, $value ); 16 | $s_name: list.nth($s, 1); 17 | $s_value: list.nth($s, 2); 18 | 19 | // Margin on all sides. 20 | &#{$s_name} { 21 | margin: var(--size-#{$s_name}); 22 | } 23 | 24 | &-x#{$s_name} { 25 | margin-inline: var(--size-#{$s_name}); 26 | } 27 | 28 | &-y#{$s_name} { 29 | margin-block: var(--size-#{$s_name}); 30 | } 31 | 32 | // Margin in specific direction. 33 | @each $p_name, 34 | $p_value in $positions { 35 | &-#{$p_name}#{$s_name} { 36 | margin-#{$p_value}: var(--size-#{$s_name}); 37 | } 38 | } 39 | 40 | } 41 | 42 | } -------------------------------------------------------------------------------- /scss/utils/_opacity.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "../lib/responsive" as *; 3 | 4 | 5 | @include mq-prefix( 'o' ) { 6 | 7 | @each $value in ( 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ) { 8 | &#{$value} { 9 | opacity: math.div( $value, 100 ); 10 | 11 | &__hover:hover { 12 | opacity: math.div( $value, 100 ); 13 | } 14 | } 15 | 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /scss/utils/_order.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix( 'order' ) { 4 | 5 | &-none { order: 0; } 6 | &-first { order: -1; } 7 | &-last { order: 9999; } 8 | 9 | @each $value in ( 1, 2, 3, 4, 5, 6 ) { 10 | &#{$value} { 11 | order: #{$value}; 12 | } 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /scss/utils/_outline.scss: -------------------------------------------------------------------------------- 1 | .outline { 2 | 3 | outline: var( --size-1 ) solid var( --color-bg-highlight ); 4 | outline-offset: var( --size-1 ); 5 | 6 | } 7 | -------------------------------------------------------------------------------- /scss/utils/_overflow.scss: -------------------------------------------------------------------------------- 1 | .overflow { 2 | 3 | overflow: auto; 4 | 5 | &-truncate { 6 | overflow: hidden; 7 | text-overflow: ellipsis; 8 | } 9 | 10 | &-hidden { 11 | overflow: hidden; 12 | } 13 | 14 | &-visible { 15 | overflow: visible; 16 | } 17 | 18 | &-scroll { 19 | overflow: scroll; 20 | } 21 | 22 | &-auto { 23 | overflow: auto; 24 | } 25 | 26 | &-auto, 27 | &-scroll { 28 | 29 | // Size. 30 | &::-webkit-scrollbar { 31 | width: var(--size-3); 32 | height: var(--size-3); 33 | } 34 | 35 | // Track. 36 | &::-webkit-scrollbar-track { 37 | background: var(--color-fg); 38 | } 39 | 40 | // Handle. 41 | &::-webkit-scrollbar-thumb { 42 | background: var(--color-fg-accent); 43 | border: 1px solid var(--color-fg); 44 | } 45 | 46 | } 47 | 48 | } -------------------------------------------------------------------------------- /scss/utils/_padding.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "../vars/sizes" as *; 3 | @use "../vars/positions" as *; 4 | @use "../lib/responsive" as *; 5 | 6 | @include mq-prefix( 'p' ) { 7 | 8 | @each $value in ( 1, 2, 3, 4, 5, 6, 7 ) { 9 | 10 | $s: list.nth( $sizes, $value ); 11 | $s_name: list.nth( $s, 1 ); 12 | $s_value: list.nth( $s, 2 ); 13 | 14 | // Margin on all sides. 15 | &#{$s_name} { 16 | padding: var( --size-#{$s_name} ); 17 | } 18 | &-x#{$s_name} { 19 | padding-inline: var( --size-#{$s_name} ); 20 | } 21 | &-y#{$s_name} { 22 | padding-block: var( --size-#{$s_name} ); 23 | } 24 | 25 | // Margin in specific direction. 26 | @each $p_name, $p_value in $positions { 27 | &-#{$p_name}#{$s_name} { 28 | padding-#{$p_value}: var( --size-#{$s_name} ); 29 | } 30 | } 31 | 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /scss/utils/_position-content.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | @use "../vars/positions" as *; 3 | 4 | @include mq-prefix('pc') { 5 | 6 | @each $pc_name, 7 | $pc_value in $position-content { 8 | &#{'-jc-' + $pc_name} { 9 | justify-content: #{$pc_value}; 10 | } 11 | 12 | &#{'-ac-' + $pc_name} { 13 | align-content: #{$pc_value}; 14 | } 15 | 16 | &#{'-ji-' + $pc_name} { 17 | justify-items: #{$pc_value}; 18 | } 19 | 20 | &#{'-ai-' + $pc_name} { 21 | align-items: #{$pc_value}; 22 | } 23 | } 24 | 25 | } -------------------------------------------------------------------------------- /scss/utils/_positions.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix('position-') { 4 | 5 | &a { 6 | position: absolute; 7 | } 8 | 9 | &r { 10 | position: relative; 11 | } 12 | 13 | &f { 14 | position: fixed; 15 | } 16 | 17 | &s { 18 | position: sticky; 19 | top: 0; 20 | } 21 | 22 | &cover { 23 | position: absolute; 24 | top: 0; 25 | right: 0; 26 | bottom: 0; 27 | left: 0; 28 | } 29 | 30 | } -------------------------------------------------------------------------------- /scss/utils/_print.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @media print { 4 | 5 | @include mq-prefix( 'print' ) { 6 | 7 | &-hide { display: none; } 8 | &-block { display: block; } 9 | &-inline { display: inline; } 10 | 11 | } 12 | 13 | } 14 | 15 | -------------------------------------------------------------------------------- /scss/utils/_table.scss: -------------------------------------------------------------------------------- 1 | .table { 2 | 3 | &-zebra tr:nth-child(odd) { 4 | 5 | background-color: var( --color-pop ); 6 | 7 | } 8 | 9 | } 10 | 11 | -------------------------------------------------------------------------------- /scss/utils/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | @include mq-prefix('t') { 4 | 5 | &-ideal-length { 6 | 7 | > p, h1, h2, h3, h4, h5, h6, ul, ol, dl { 8 | max-width: var( --line-length ); 9 | } 10 | 11 | } 12 | 13 | &-ta- { 14 | &c { 15 | text-align: center; 16 | } 17 | 18 | &l { 19 | text-align: left; 20 | } 21 | 22 | &r { 23 | text-align: right; 24 | } 25 | } 26 | 27 | // @include mq-prefix-hover ( &-td-n ) { text-decoration: none; } 28 | &-td-n { 29 | text-decoration: none; 30 | } 31 | 32 | &-td-n__hover:hover { 33 | text-decoration: none; 34 | } 35 | 36 | &-td-u { 37 | text-decoration: underline; 38 | } 39 | 40 | &-td-u__hover:hover { 41 | text-decoration: underline; 42 | } 43 | 44 | &-td-st { 45 | text-decoration: line-through; 46 | } 47 | 48 | // Text Transform. 49 | &-tt-n { 50 | text-transform: none; 51 | } 52 | 53 | &-tt-u { 54 | text-transform: uppercase; 55 | letter-spacing: var(--type-ls-1); 56 | } 57 | 58 | &-nowrap { 59 | white-space: nowrap; 60 | } 61 | 62 | &-balance { 63 | text-wrap: balance; 64 | } 65 | 66 | } -------------------------------------------------------------------------------- /scss/utils/_visibility.scss: -------------------------------------------------------------------------------- 1 | .visible { visibility: visible; } 2 | .invisible { visibility: hidden; } -------------------------------------------------------------------------------- /scss/utils/_width-height.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "../vars/numbers" as *; 3 | @use "../lib/responsive" as *; 4 | 5 | @each $classname, $property in ( 'w': 'width', 'mw': 'max-width', 'h': 'height', 'mh': 'max-height' ) { 6 | 7 | @include mq-prefix( $classname ) { 8 | 9 | &-auto { #{$property}: auto; } 10 | &-screen { #{$property}: 100vw; } 11 | 12 | @each $value in ( 100, 120, 160, 300 ) { 13 | &#{ $value } { 14 | #{$property}: var( --size-#{$value} ); 15 | } 16 | } 17 | 18 | @each $value in ( 100, 120, 160, 300 ) { 19 | &#{ $value } { 20 | #{$property}: var( --size-#{$value} ); 21 | } 22 | } 23 | 24 | &100 { #{$property}: 100%; } 25 | 26 | @each $value in ( 3, 4, 5, 6, 7, 8, 9, 10 ) { 27 | &#{ $value - 2 } { 28 | #{$property}: var( --size-#{$value} ); 29 | } 30 | } 31 | 32 | @each $p_value in $percentages { 33 | &#{$p_value}p { 34 | #{$property}: math.percentage( math.div( $p_value, 100 ) ); 35 | } 36 | } 37 | 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /scss/vars/_borders.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | 3 | --border-width: 1px; 4 | --border-radius: var( --size-1 ); 5 | 6 | } 7 | -------------------------------------------------------------------------------- /scss/vars/_colours-output.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "colours" as *; 3 | 4 | :root { 5 | 6 | @each $c_name, $c_value in $colours { 7 | --color-#{$c_name}: #{$c_value}; 8 | } 9 | 10 | @each $c_name, $c_value in $colour_theme { 11 | --color-#{$c_name}: var( --color-#{ list.nth( $c_value, 1 ) } ); 12 | } 13 | 14 | } 15 | 16 | /* Dark theme */ 17 | @media ( prefers-color-scheme: dark ) { 18 | 19 | :root body:not(.disable-dark-mode) { 20 | 21 | @each $c_name, $c_value in $colour_theme { 22 | @if ( 2 == list.length($c_value) ) { 23 | --color-#{$c_name}: var( --color-#{list.nth($c_value,2)} ); 24 | } 25 | } 26 | 27 | } 28 | 29 | } 30 | -------------------------------------------------------------------------------- /scss/vars/_colours.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | @use "sass:map"; 3 | @use "sass:list"; 4 | 5 | $colours: () !default; 6 | $colours: map.merge( 7 | ( 8 | // Color Palette. 9 | 'black': #000000, 10 | 'gray4': #111827, 11 | 'gray3': #374151, 12 | 'gray2': #6B7280, 13 | 'gray1': #D7DAE0, 14 | 'white': #FFFFFF, 15 | 16 | 'blue-light': #72aee6, // 20 17 | 'blue': #2271b1, // 50 18 | 'blue-dark': #043959, // 80 19 | 'red-light': #ff8085, 20 | 'red': #d63638, 21 | 'red-dark': #631919, 22 | 'green-light': #2fdc5b, 23 | 'green': #06ae2d, 24 | 'green-dark': #00450c, 25 | 'yellow-light': #ecd8a2, 26 | 'yellow': #f0c33c, 27 | 'yellow-dark': #9d7e20, 28 | ), 29 | $colours 30 | ); 31 | 32 | // Theme colours. 33 | // The first colour is for the light theme, the second is for the dark theme. 34 | $colour_theme: () !default; 35 | $colour_theme: map.merge( 36 | ( 37 | 'bg': ( 38 | white, 39 | gray4, 40 | ), 41 | 'fg': ( 42 | gray4, 43 | gray1, 44 | ), 45 | 'bg-accent': ( 46 | blue, 47 | yellow, 48 | ), 49 | 'fg-accent': ( 50 | white, 51 | black, 52 | ), 53 | 'bg-highlight': ( 54 | yellow, 55 | ), 56 | 'fg-highlight': ( 57 | black, 58 | ), 59 | 'pop': ( 60 | gray1, 61 | black, 62 | ), 63 | 'link': ( 64 | blue-dark, 65 | yellow, 66 | ), 67 | 'border': ( 68 | gray1, 69 | gray3, 70 | ), 71 | 'code': ( 72 | green, 73 | green, 74 | ), 75 | 'bg-code': ( 76 | white, 77 | gray4, 78 | ), 79 | ), 80 | $colour_theme 81 | ); 82 | -------------------------------------------------------------------------------- /scss/vars/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font-weights: ( 100, 200, 300, 400, 500, 600, 700, 800, 900 ); 2 | 3 | $font-sizes: ( 4 | '1': ( var( --type-lh-1 ), & ), 5 | '2': ( var( --type-lh-1 ), & ), 6 | '3': ( var( --type-lh-1 ), & ), 7 | '4': ( var( --type-lh-2 ), & ), 8 | '5': ( var( --type-lh-2 ), & ), 9 | '6': ( var( --type-lh-2 ), var( --type-ls-1 ) ), 10 | ); 11 | 12 | $font-families: ( 13 | 'system-ui': ( system-ui, sans-serif ), 14 | 'transitional': ( Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif ), 15 | 'old-style': ( 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif ), 16 | 'humanist': ( Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif ), 17 | 'geometric-humanist': ( Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif ), 18 | 'classical-humanist': ( Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif ), 19 | 'neo-grotesque': ( Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif ), 20 | 'monospace-slab-serif': ( 'Nimbus Mono PS', 'Courier New', monospace ), 21 | 'monospace-code': ( ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace ), 22 | 'industrial': ( Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif ), 23 | 'rounded-sans': ( ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif ), 24 | 'slab-serif': ( Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif ), 25 | 'antique': ( Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif ), 26 | 'didone': ( Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif ), 27 | 'handwritten': ( 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive ), 28 | 29 | 'arial': ( Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif ), 30 | 'arial-black': ( "Arial Black", "Arial Bold", Gadget, sans-serif ), 31 | 'arial-narrow': ( "Arial Narrow", Arial, sans-serif ), 32 | 'arial-rounded': ( "Arial Rounded MT Bold", "Arial Rounded Bold", "Helvetica Rounded", Arial, sans-serif ), 33 | 'avenir': ( "Avenir Next", Avenir, sans-serif ), 34 | 'baskerville': ( Baskerville, "Baskerville Old Face", Hoefler Text, Garamond, Times New Roman, serif ), 35 | 'book-antiqua': ( "Book Antiqua", Baskerville, Palatino, Georgia, serif ), 36 | 'bookman': ( Bookman, "Bookman Old Style", "Book Antiqua", Charter, Palatino, "URW Bookman", serif ), 37 | 'century-gothic': ( "Century Gothic", CenturyGothic, "Franklin Gothic", "URW Gothic", AppleGothic, sans-serif ), 38 | 'comic-sans': ( Chalkboard, "Comic Sans", "Comic Sans MS", cursive, sans-serif ), 39 | 'consolas': ( Consolas, Menlo, Monaco, "Liberation Mono", monospace ), 40 | 'courier-new': ( "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace ), 41 | 'franklin-gothic': ( "Franklin Gothic Medium", "Franklin Gothic", ITC Franklin Gothic, Arial, sans-serif ), 42 | 'futura': ( Futura, "Trebuchet MS", Arial, sans-serif ), 43 | 'futura-condensed': ( "Futura Condensed", "Futura PT Condensed", Futura, "Trebuchet MS", Arial, sans-serif ), 44 | 'garamond': ( Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif ), 45 | 'geneva': ( Geneva, Tahoma, Verdana, "DejaVu Sans", "Bitstream Vera Sans", sans-serif ), 46 | 'georgia': ( Georgia, Times, "Times New Roman", serif ), 47 | 'gill-sans': ( "Gill Sans", "Gill Sans MT", "Century Gothic", Calibri, sans-serif ), 48 | 'haettenschweiler': ( Haettenschweiler, "Din Condensed", "Arial Narrow Bold", sans-serif ), 49 | 'helvetica': ( "Helvetica Neue", Helvetica, Arial, sans-serif ), 50 | 'hoefler': ( "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif ), 51 | 'impact': ( Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ), 52 | 'lucida-bright': ( "Lucida Bright", Baskerville, Georgia, serif ), 53 | 'lucida-console': ( "Lucida Console", "Lucida Sans Typewriter", "PT Mono", monaco, monospace ), 54 | 'lucida-grande': ( "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif ), 55 | 'oswald': ( Oswald, "Din Condensed", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ), 56 | 'palatino': ( Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", "URW Palladio", Georgia, serif ), 57 | 'system': ( -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ), 58 | 'system-monospace': ( SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace ), 59 | 'tahoma': ( Tahoma, Verdana, Segoe, sans-serif ), 60 | 'times-new-roman': ( TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, "Liberation Serif", FreeSerif, serif ), 61 | 'trebuchet': ( "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif ), 62 | 'verdana': ( Verdana, Geneva, "DejaVu Sans", sans-serif ), 63 | ); 64 | 65 | :root { 66 | 67 | // Font families. 68 | @each $f_name, $f_value in $font-families { 69 | --font-#{$f_name}: #{$f_value}; 70 | } 71 | 72 | --font-main: var( --font-system ); 73 | --font-monospace: var( --font-system-monospace ); 74 | --line-length: 60ch; 75 | 76 | } 77 | 78 | @each $f_name, $f_value in $font-families { 79 | .font-#{$f_name} { 80 | font-family: var( --font-#{$f_name} ); 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /scss/vars/_index.scss: -------------------------------------------------------------------------------- 1 | @use "borders" as *; 2 | @use "colours" as *; 3 | @use "colours-output" as *; 4 | @use "fonts" as *; 5 | @use "numbers" as *; 6 | @use "positions" as *; 7 | @use "sizes" as *; 8 | @use "typography" as *; 9 | -------------------------------------------------------------------------------- /scss/vars/_numbers.scss: -------------------------------------------------------------------------------- 1 | $percentages: ( 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ); -------------------------------------------------------------------------------- /scss/vars/_positions.scss: -------------------------------------------------------------------------------- 1 | $position-content: ( 2 | 's': 'start', 3 | 'e': 'end', 4 | 'fs': 'flex-start', 5 | 'fe': 'flex-end', 6 | 'c': 'center', 7 | 'sb': 'space-between', 8 | 'sa': 'space-around', 9 | 'se': 'space-evenly', 10 | ); 11 | 12 | $position-items: ( 13 | 'a': 'auto', 14 | 's': 'stretch', 15 | 'e': 'end', 16 | 'c': 'center', 17 | ); 18 | 19 | $positions: ( 20 | 't': 'top', 21 | 'r': 'right', 22 | 'b': 'bottom', 23 | 'l': 'left', 24 | ); 25 | 26 | $positions-corner: ( 27 | 'tl': 'top-left', 28 | 'tr': 'top-right', 29 | 'bl': 'bottom-left', 30 | 'br': 'bottom-right', 31 | ); -------------------------------------------------------------------------------- /scss/vars/_sizes.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | $sizes: ( 4 | '0': 0, 5 | '1': var( --size-base ), 6 | '2': calc( var( --size-base ) * 2 ), 7 | '3': calc( var( --size-base ) * 4 ), 8 | '4': calc( var( --size-base ) * 8 ), 9 | '5': calc( var( --size-base ) * 16 ), 10 | '6': calc( var( --size-base ) * 32 ), 11 | '7': calc( var( --size-base ) * 64 ), 12 | '8': calc( var( --size-base ) * 128 ), 13 | '9': calc( var( --size-base ) * 256 ), 14 | '10': calc( var( --size-base ) * 512 ), 15 | '100': '100%', 16 | '120': '120px', 17 | '160': '160px', 18 | '300': '300px', 19 | ); 20 | 21 | :root { 22 | 23 | @each $s_name, $s_value in $sizes { 24 | --size-#{$s_name}: #{$s_value}; 25 | } 26 | 27 | --size-base: 0.15rem; 28 | 29 | @include mq-tablet() { 30 | --size-base: 0.2rem; 31 | } 32 | 33 | @include mq-desktop() { 34 | --size-base: 0.25rem; 35 | } 36 | 37 | } 38 | -------------------------------------------------------------------------------- /scss/vars/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../lib/responsive" as *; 2 | 3 | :root { 4 | 5 | // 18px base font size. 6 | --type-base: 1rem; 7 | 8 | // Font sizes. 9 | --type-size-6: calc(var(--type-base) / var(--type-scale)); 10 | --type-size-5: var(--type-base); 11 | --type-size-4: calc(var(--type-base) * var(--type-scale)); 12 | --type-size-3: calc(var(--type-base) * var(--type-scale) * var(--type-scale)); 13 | --type-size-2: calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale)); 14 | --type-size-1: calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale)); 15 | 16 | // Line height. 17 | --type-lh-1: 1.1; 18 | --type-lh-2: 1.618; // Golden ratio! 19 | 20 | // Letter spacing. 21 | --type-ls-1: 0.1em; 22 | 23 | // see https://type-scale.com/ 24 | 25 | // Major second. 26 | --type-scale: 1.125; 27 | 28 | @include mq-tablet() { 29 | // Major third. 30 | --type-scale: 1.25; 31 | } 32 | 33 | @include mq-desktop() { 34 | // Perfect fifth. 35 | --type-scale: 1.414; 36 | } 37 | 38 | } --------------------------------------------------------------------------------