Devin Haska
788ef1dc8d
The goal of this change was to speed up my CSS pipeline. Previously builds would take up to 30s because it had to rebuild the CSS for every page (I inlined the CSS). This updates the pipeline to remain somewhat the same, but offloads the busywork of computing my theme CSS (my design system in other words), and is replaced by a mostly static file (`css/global/lilypad.css`), which I can update as my design system changes. I also offloaded several of my utility classes as I know I will want to use them in other sites I design, so it made sense to move them as well. The new pipeline makes use of 11ty's bundle feature (newly included in 11ty v3), which allows me to bundle all my CSS together into one file. Since I know my core styles like `lilypad.css` will always remain the same, I decided to keep that inline. I use the `transforms` feature for bundling to run a PostCSS transform on the bundled output, which resolves any imports and minifies the final output. In order to cut down my build times even further, I removed my XML minifier - it was taking upwards of 3 seconds to minify XML to probably a small benefit to end users.
1 line
11 KiB
CSS
1 line
11 KiB
CSS
@font-face{font-display:swap;font-family:Atikinson Hyperlegible Next;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Next"),local("AtikinsonHyperlegibleNext-Regular"),url(assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2) format("woff2")}@font-face{font-display:swap;font-family:Atikinson Hyperlegible Mono;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Mono"),local("AtikinsonHyperlegibleMono-Regular"),url(assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2) format("woff2")}:root{--font-family-display:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-body:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-monospace:Atikinson Hyperlegible Mono,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--color-primary:oklch(0.6 0.1025 212.16);--color-secondary:oklch(0.61 0.2232 31.48);--color-background:oklch(0.98 0 0);--color-surface:oklch(0.96 0.0078 207.9);--color-border:oklch(0.87 0.045077 207.8465);--color-text:oklch(0.15 0 0);--color-fadeText:oklch(0.45 0.0214 207.84);--color-shadow:oklch(0.39 0.0688 212.35)}.text-primary{color:var(--color-primary)}.bg-primary{background-color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.bg-secondary{background-color:var(--color-secondary)}.text-background{color:var(--color-background)}.bg-background{background-color:var(--color-background)}.text-surface{color:var(--color-surface)}.bg-surface{background-color:var(--color-surface)}.text-border{color:var(--color-border)}.bg-border{background-color:var(--color-border)}.text-text{color:var(--color-text)}.bg-text{background-color:var(--color-text)}.text-fadeText{color:var(--color-fadeText)}.bg-fadeText{background-color:var(--color-fadeText)}.text-shadow{color:var(--color-shadow)}.bg-shadow{background-color:var(--color-shadow)}@media (prefers-color-scheme:dark){:root{--color-primary:oklch(0.57 0.0991 213.4);--color-secondary:oklch(0.55 0.1982 31.52);--color-background:oklch(0.2 0 0);--color-surface:oklch(0.26 0.0106 233.21);--color-border:oklch(0.27 0.0238 245.26);--color-text:oklch(0.98 0 0);--color-fadeText:oklch(0.78 0.018 207.85);--color-shadow:oklch(0.39 0.0688 212.35)}}:root{--spacing-0:0px;--spacing-1:4px;--spacing-2:8px;--spacing-3:16px;--spacing-4:24px;--spacing-5:32px;--spacing-6:48px;--spacing-7:64px;--spacing-8:80px}.m-0{margin:var(--spacing-0)}.my-0{margin-block-end:var(--spacing-0);margin-block-start:var(--spacing-0)}.mx-0{margin-inline-end:var(--spacing-0)}.ml-0,.mr-0,.mx-0{margin-inline-start:var(--spacing-0)}.mt-0{margin-block-start:var(--spacing-0)}.mb-0{margin-block-end:var(--spacing-0)}.p-0{padding:var(--spacing-0)}.py-0{padding-block-end:var(--spacing-0);padding-block-start:var(--spacing-0)}.px-0{padding-inline-end:var(--spacing-0)}.pl-0,.pr-0,.px-0{padding-inline-start:var(--spacing-0)}.pt-0{padding-block-start:var(--spacing-0)}.pb-0{padding-block-end:var(--spacing-0)}.w-0{width:var(--spacing-0)}.h-0,.size-0{height:var(--spacing-0)}.size-0{width:var(--spacing-0)}.radius-0{border-radius:var(--spacing-0)}.gap-0{gap:var(--spacing-0)}.row-gap-0{row-gap:var(--spacing-0)}.column-gap-0{column-gap:var(--spacing-0)}.flow-space-0{--flow-space:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.my-1{margin-block-end:var(--spacing-1);margin-block-start:var(--spacing-1)}.mx-1{margin-inline-end:var(--spacing-1)}.ml-1,.mr-1,.mx-1{margin-inline-start:var(--spacing-1)}.mt-1{margin-block-start:var(--spacing-1)}.mb-1{margin-block-end:var(--spacing-1)}.p-1{padding:var(--spacing-1)}.py-1{padding-block-end:var(--spacing-1);padding-block-start:var(--spacing-1)}.px-1{padding-inline-end:var(--spacing-1)}.pl-1,.pr-1,.px-1{padding-inline-start:var(--spacing-1)}.pt-1{padding-block-start:var(--spacing-1)}.pb-1{padding-block-end:var(--spacing-1)}.w-1{width:var(--spacing-1)}.h-1,.size-1{height:var(--spacing-1)}.size-1{width:var(--spacing-1)}.radius-1{border-radius:var(--spacing-1)}.gap-1{gap:var(--spacing-1)}.row-gap-1{row-gap:var(--spacing-1)}.column-gap-1{column-gap:var(--spacing-1)}.flow-space-1{--flow-space:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.my-2{margin-block-end:var(--spacing-2);margin-block-start:var(--spacing-2)}.mx-2{margin-inline-end:var(--spacing-2)}.ml-2,.mr-2,.mx-2{margin-inline-start:var(--spacing-2)}.mt-2{margin-block-start:var(--spacing-2)}.mb-2{margin-block-end:var(--spacing-2)}.p-2{padding:var(--spacing-2)}.py-2{padding-block-end:var(--spacing-2);padding-block-start:var(--spacing-2)}.px-2{padding-inline-end:var(--spacing-2)}.pl-2,.pr-2,.px-2{padding-inline-start:var(--spacing-2)}.pt-2{padding-block-start:var(--spacing-2)}.pb-2{padding-block-end:var(--spacing-2)}.w-2{width:var(--spacing-2)}.h-2,.size-2{height:var(--spacing-2)}.size-2{width:var(--spacing-2)}.radius-2{border-radius:var(--spacing-2)}.gap-2{gap:var(--spacing-2)}.row-gap-2{row-gap:var(--spacing-2)}.column-gap-2{column-gap:var(--spacing-2)}.flow-space-2{--flow-space:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.my-3{margin-block-end:var(--spacing-3);margin-block-start:var(--spacing-3)}.mx-3{margin-inline-end:var(--spacing-3)}.ml-3,.mr-3,.mx-3{margin-inline-start:var(--spacing-3)}.mt-3{margin-block-start:var(--spacing-3)}.mb-3{margin-block-end:var(--spacing-3)}.p-3{padding:var(--spacing-3)}.py-3{padding-block-end:var(--spacing-3);padding-block-start:var(--spacing-3)}.px-3{padding-inline-end:var(--spacing-3)}.pl-3,.pr-3,.px-3{padding-inline-start:var(--spacing-3)}.pt-3{padding-block-start:var(--spacing-3)}.pb-3{padding-block-end:var(--spacing-3)}.w-3{width:var(--spacing-3)}.h-3,.size-3{height:var(--spacing-3)}.size-3{width:var(--spacing-3)}.radius-3{border-radius:var(--spacing-3)}.gap-3{gap:var(--spacing-3)}.row-gap-3{row-gap:var(--spacing-3)}.column-gap-3{column-gap:var(--spacing-3)}.flow-space-3{--flow-space:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.my-4{margin-block-end:var(--spacing-4);margin-block-start:var(--spacing-4)}.mx-4{margin-inline-end:var(--spacing-4)}.ml-4,.mr-4,.mx-4{margin-inline-start:var(--spacing-4)}.mt-4{margin-block-start:var(--spacing-4)}.mb-4{margin-block-end:var(--spacing-4)}.p-4{padding:var(--spacing-4)}.py-4{padding-block-end:var(--spacing-4);padding-block-start:var(--spacing-4)}.px-4{padding-inline-end:var(--spacing-4)}.pl-4,.pr-4,.px-4{padding-inline-start:var(--spacing-4)}.pt-4{padding-block-start:var(--spacing-4)}.pb-4{padding-block-end:var(--spacing-4)}.w-4{width:var(--spacing-4)}.h-4,.size-4{height:var(--spacing-4)}.size-4{width:var(--spacing-4)}.radius-4{border-radius:var(--spacing-4)}.gap-4{gap:var(--spacing-4)}.row-gap-4{row-gap:var(--spacing-4)}.column-gap-4{column-gap:var(--spacing-4)}.flow-space-4{--flow-space:var(--spacing-4)}.m-5{margin:var(--spacing-5)}.my-5{margin-block-end:var(--spacing-5);margin-block-start:var(--spacing-5)}.mx-5{margin-inline-end:var(--spacing-5)}.ml-5,.mr-5,.mx-5{margin-inline-start:var(--spacing-5)}.mt-5{margin-block-start:var(--spacing-5)}.mb-5{margin-block-end:var(--spacing-5)}.p-5{padding:var(--spacing-5)}.py-5{padding-block-end:var(--spacing-5);padding-block-start:var(--spacing-5)}.px-5{padding-inline-end:var(--spacing-5)}.pl-5,.pr-5,.px-5{padding-inline-start:var(--spacing-5)}.pt-5{padding-block-start:var(--spacing-5)}.pb-5{padding-block-end:var(--spacing-5)}.w-5{width:var(--spacing-5)}.h-5,.size-5{height:var(--spacing-5)}.size-5{width:var(--spacing-5)}.radius-5{border-radius:var(--spacing-5)}.gap-5{gap:var(--spacing-5)}.row-gap-5{row-gap:var(--spacing-5)}.column-gap-5{column-gap:var(--spacing-5)}.flow-space-5{--flow-space:var(--spacing-5)}.m-6{margin:var(--spacing-6)}.my-6{margin-block-end:var(--spacing-6);margin-block-start:var(--spacing-6)}.mx-6{margin-inline-end:var(--spacing-6)}.ml-6,.mr-6,.mx-6{margin-inline-start:var(--spacing-6)}.mt-6{margin-block-start:var(--spacing-6)}.mb-6{margin-block-end:var(--spacing-6)}.p-6{padding:var(--spacing-6)}.py-6{padding-block-end:var(--spacing-6);padding-block-start:var(--spacing-6)}.px-6{padding-inline-end:var(--spacing-6)}.pl-6,.pr-6,.px-6{padding-inline-start:var(--spacing-6)}.pt-6{padding-block-start:var(--spacing-6)}.pb-6{padding-block-end:var(--spacing-6)}.w-6{width:var(--spacing-6)}.h-6,.size-6{height:var(--spacing-6)}.size-6{width:var(--spacing-6)}.radius-6{border-radius:var(--spacing-6)}.gap-6{gap:var(--spacing-6)}.row-gap-6{row-gap:var(--spacing-6)}.column-gap-6{column-gap:var(--spacing-6)}.flow-space-6{--flow-space:var(--spacing-6)}.m-7{margin:var(--spacing-7)}.my-7{margin-block-end:var(--spacing-7);margin-block-start:var(--spacing-7)}.mx-7{margin-inline-end:var(--spacing-7)}.ml-7,.mr-7,.mx-7{margin-inline-start:var(--spacing-7)}.mt-7{margin-block-start:var(--spacing-7)}.mb-7{margin-block-end:var(--spacing-7)}.p-7{padding:var(--spacing-7)}.py-7{padding-block-end:var(--spacing-7);padding-block-start:var(--spacing-7)}.px-7{padding-inline-end:var(--spacing-7)}.pl-7,.pr-7,.px-7{padding-inline-start:var(--spacing-7)}.pt-7{padding-block-start:var(--spacing-7)}.pb-7{padding-block-end:var(--spacing-7)}.w-7{width:var(--spacing-7)}.h-7,.size-7{height:var(--spacing-7)}.size-7{width:var(--spacing-7)}.radius-7{border-radius:var(--spacing-7)}.gap-7{gap:var(--spacing-7)}.row-gap-7{row-gap:var(--spacing-7)}.column-gap-7{column-gap:var(--spacing-7)}.flow-space-7{--flow-space:var(--spacing-7)}.m-8{margin:var(--spacing-8)}.my-8{margin-block-end:var(--spacing-8);margin-block-start:var(--spacing-8)}.mx-8{margin-inline-end:var(--spacing-8)}.ml-8,.mr-8,.mx-8{margin-inline-start:var(--spacing-8)}.mt-8{margin-block-start:var(--spacing-8)}.mb-8{margin-block-end:var(--spacing-8)}.p-8{padding:var(--spacing-8)}.py-8{padding-block-end:var(--spacing-8);padding-block-start:var(--spacing-8)}.px-8{padding-inline-end:var(--spacing-8)}.pl-8,.pr-8,.px-8{padding-inline-start:var(--spacing-8)}.pt-8{padding-block-start:var(--spacing-8)}.pb-8{padding-block-end:var(--spacing-8)}.w-8{width:var(--spacing-8)}.h-8,.size-8{height:var(--spacing-8)}.size-8{width:var(--spacing-8)}.radius-8{border-radius:var(--spacing-8)}.gap-8{gap:var(--spacing-8)}.row-gap-8{row-gap:var(--spacing-8)}.column-gap-8{column-gap:var(--spacing-8)}.flow-space-8{--flow-space:var(--spacing-8)}.w-full{width:100%}.h-full{height:100%}.w-fit{width:fit-content}.w-max{width:max-content}.w-min{width:min-content}.flex{display:flex}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flow>*+*{margin-block-start:var(--flow-space,1em)}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.visually-hidden{border:0;clip:rect(0 0 0 0);height:0;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
|