1<!doctype html> 2<html lang="en"> 3<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Blog</title><base href="/blog/">
3<script><!-- inlined for all pages --> 4(()=>{var p=Object.defineProperty;var u=(c,t,e)=>t in c?p(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e;var s=(c,t,e)=>u(c,typeof t!="symbol"?t+"":t,e);var r=class r extends HTMLElement{constructor(){super(),this.ready=new Promise(t=>{this.readyResolve=t})}static getParents(t,e=!1){let a=[];for(;t;){if(t.matches&&t.matches(r.tagName)){if(e&&t===e)break;d.hasConditions(t)&&a.push(t)}t=t.parentNode}return a}static async ready(t,e){if(e||(e=r.getParents(t)),e.length===0)return;let a=await Promise.all(e.map(i=>i.wait()));if(a.length)return a[0]}forceFallback(){window.Island&&Object.assign(r.fallback,window.Island.fallback);for(let t in r.fallback){let e=Array.from(this.querySelectorAll(t)).reverse();for(let a of e){if(!a.isConnected)continue;let i=r.getParents(a);if(i.length===1){let o=r.ready(a,i);r.fallback[t](o,a,r.prefix)}}}}wait(){return this.ready}async connectedCallback(){d.hasConditions(this)&&this.forceFallback(),await this.hydrate()}getTemplates(){return this.querySelectorAll(`template[${r.attr.template}]`)}replaceTemplates(t){for(let e of t){if(r.getParents(e,this).length>0)continue;let a=e.getAttribute(r.attr.template);if(a==="replace"){let i=Array.from(this.childNodes);for(let o of i)this.removeChild(o);this.appendChild(e.content);break}else{let i=e.innerHTML;if(a==="once"&&i){if(r.onceCache.has(i)){e.remove();return}r.onceCache.set(i,!0)}e.replaceWith(e.content)}}}async hydrate(){let t=[];this.parentNode&&t.push(r.ready(this.parentNode));let e=d.getConditions(this);for(let a in e)d.map[a]&&t.push(d.map[a](e[a],this));await Promise.all(t),this.replaceTemplates(this.getTemplates());for(let a of r.onReady.values())await a.call(this,r);this.readyResolve(),this.setAttribute(r.attr.ready,""),this.querySelectorAll(`[${r.attr.defer}]`).forEach(a=>a.removeAttribute(r.attr.defer))}};s(r,"tagName","is-land"),s(r,"prefix","is-land--"),s(r,"attr",{template:"data-island",ready:"ready",defer:"defer-hydration"}),s(r,"onceCache",new Map),s(r,"onReady",new Map),s(r,"fallback",{":not(is-land,:defined,[defer-hydration])":(t,e,a)=>{let i=document.createElement(a+e.localName);for(let n of e.getAttributeNames())i.setAttribute(n,e.getAttribute(n));let o=e.shadowRoot;if(!o){let n=e.querySelector(":scope > template:is([shadowrootmode], [shadowroot])");if(n){let m=n.getAttribute("shadowrootmode")||n.getAttribute("shadowroot")||"closed";o=e.attachShadow({mode:m}),o.appendChild(n.content.cloneNode(!0))}}return o&&i.attachShadow({mode:o.mode}).append(...o.childNodes),i.append(...e.childNodes),e.replaceWith(i),t.then(()=>{i.shadowRoot&&e.shadowRoot.append(...i.shadowRoot.childNodes),e.append(...i.childNodes),i.replaceWith(e)})}});var f=r,l=class l{static hasConditions(t){return Object.keys(l.getConditions(t)).length>0}static getConditions(t){let e={};for(let a of Object.keys(l.map))t.hasAttribute(`on:${a}`)&&(e[a]=t.getAttribute(`on:${a}`));return e}static visible(t,e){if("IntersectionObserver"in window)return new Promise(a=>{let i=new IntersectionObserver(o=>{let[n]=o;n.isIntersecting&&(i.unobserve(n.target),a())});i.observe(e)})}static idle(){let t=new Promise(e=>{document.readyState!=="complete"?window.addEventListener("load",()=>e(),{once:!0}):e()});return"requestIdleCallback"in window?Promise.all([new Promise(e=>{requestIdleCallback(()=>{e()})}),t]):t}static interaction(t,e){let a=["click","touchstart"];return t&&(a=(t||"").split(",").map(i=>i.trim())),new Promise(i=>{function o(n){i();for(let m of a)e.removeEventListener(m,o)}for(let n of a)e.addEventListener(n,o,{once:!0})})}static media(t){let e={matches:!0};if(t&&"matchMedia"in window&&(e=window.matchMedia(t)),!e.matches)return new Promise(a=>{e.addListener(i=>{i.matches&&a()})})}static saveData(t){if(!(!("connection"in navigator)||navigator.connection.saveData===(t!=="false")))return new Promise(()=>{})}};s(l,"map",{visible:l.visible,idle:l.idle,interaction:l.interaction,media:l.media,"save-data":l.saveData});var d=l;"customElements"in window&&(window.customElements.define(f.tagName,f),window.Island=f);var y=f.ready;var h=class{};s(h,"attr",{autoInitType:"autoinit",import:"import"}),s(h,"types",{"petite-vue":function(t){t.createApp().mount(this)},vue:function(t){t.createApp().mount(this)},svelte:function(t){new t.default({target:this})},"svelte-ssr":function(t){new t.default({target:this,hydrate:!0})},preact:function(t){t.default(this)}});Island.onReady.set("import-autoinit",async function(c){let t,e=this.getAttribute(h.attr.import);
4if(e&&(t=await import(e)),t){let a=h.types[this.getAttribute(h.attr.autoInitType)||e];a&&await a.call(this,t)}});})(); 5 6(()=>{var i="theme-preference",l={dark:"#2e2e2e",light:"#f8f8f8"},t={value:s()};window.addEventListener("load",()=>{let e=document.querySelector("#light-theme-toggle"),r=document.querySelector("#dark-theme-toggle");document.querySelector("[data-theme-switcher]")&&(o(),a(),e.addEventListener("click",()=>n("light")),r.addEventListener("click",()=>n("dark")),e.setAttribute("aria-pressed",t.value==="light"),r.setAttribute("aria-pressed",t.value==="dark"))});window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",({matches:e})=>{if(d())return;t.value=e?"dark":"light",o(),a();let r=document.querySelector("#light-theme-toggle"),c=document.querySelector("#dark-theme-toggle");r?.setAttribute("aria-pressed",t.value==="light"),c?.setAttribute("aria-pressed",t.value==="dark")});function n(e){t.value=e,document.querySelector("#light-theme-toggle").setAttribute("aria-pressed",e==="light"),document.querySelector("#dark-theme-toggle").setAttribute("aria-pressed",e==="dark"),u(),a()}function d(){try{return localStorage.getItem(i)}catch{return null}}function s(){return d()||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")}function u(){try{localStorage.setItem(i,t.value)}catch{}o(),a()}function o(){document.firstElementChild.setAttribute("data-theme",t.value)}function a(){let e=document.querySelector('meta[name="theme-color"]'),r=t.value==="dark"?l.dark:l.light;e.setAttribute("content",r)}o();})();</script>
6<script type="application/ld+json">{ 7 "@context": "https://schema.org", 8 "@graph": [ 9 { 10 "@type": "WebSite", 11 "@id": "https://eleventy-excellent.netlify.app#website", 12 "url": "https://eleventy-excellent.netlify.app", 13 "name": "Eleventy Excellent", 14 "description": "Eleventy starter for building modern, resilient websites", 15 "inLanguage": "en_EN" 16 } 17 ] 18 }</script>
18<style>@layer tailwindBase{.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}.filter{--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:}}@layer reset{*,:after,:before{box-sizing:border-box}*{text-wrap:pretty}h1,h2,h3,h4{text-wrap:balance}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;min-height:100dvh;text-rendering:optimizeSpeed;line-height:1.5}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}[role=list]{padding:0}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;color:currentColor}canvas,img,picture,svg{max-inline-size:100%;block-size:auto;vertical-align:middle;font-style:italic;background-repeat:no-repeat;background-size:cover;shape-margin:.75rem}picture{display:block}button{all:unset}button,input,select,textarea{font:inherit;color:inherit}textarea{resize:vertical;resize:block}textarea:not([rows]){min-height:10em}[role=button],[role=option],button,label,select,summary{cursor:pointer}:target{scroll-margin-block-start:2ex}:focus{scroll-margin-block-end:8vh}dialog{max-width:unset;max-height:unset}[popover],dialog{border:none;background:none;inset:unset}[popover]{color:inherit}[popover]:not(:popover-open),dialog:not([open],[popover]){display:none!important}html:has(dialog[open]:modal){overflow:hidden}@media (prefers-reduced-motion:reduce){:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}@view-transition{navigation:auto}}@layer fonts{@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:400;src:local(""),url(/assets/fonts/atkinson/atkinson-hyperlegible-regular.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible;font-style:italic;font-display:swap;font-weight:400;src:local(""),url(/assets/fonts/atkinson/atkinson-hyperlegible-italic.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:700;src:local(""),url(/assets/fonts/atkinson/atkinson-hyperlegible-bold.woff2) format("woff2")}@font-face{font-family:Redhat;font-style:normal;font-display:swap;font-weight:900;src:local(""),url(/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2) format("woff2")}}@layer tailwindComponents{:root{--color-gray-100:#f8f8f8;--color-gray-200:#e4e4e4;--color-gray-300:#aeaeae;--color-gray-400:gray;--color-gray-500:#636363;--color-gray-600:#484848;--color-gray-700:#3a3a3a;--color-gray-800:#2e2e2e;--color-gray-900:#161616;--color-pink:#dd4462;--color-pink-subdued:#ce5769;--color-blue:#4467dd;--color-blue-subdued:#4d6cc8;--color-gold:#fbbe25;--color-gold-subdued:#f1c15b;--color-theme-light:var(--color-light);--color-theme-dark:var(--color-dark);--color-theme-mid:var(--color-mid);--color-theme-text:var(--color-text);
18--color-theme-text-accent:var(--color-text-accent);--color-theme-bg:var(--color-bg);--color-theme-bg-accent:var(--color-bg-accent);--color-theme-primary:var(--color-primary);--color-theme-secondary:var(--color-secondary);--color-theme-tertiary:var(--color-tertiary);--border-radius-small:0.1875rem;--border-radius-medium:0.3rem;--space-3xs:clamp(.125rem, .11rem + .1vw, .1875rem);--space-2xs:clamp(.1875rem, .15rem + .19vw, .3125rem);--space-xs:clamp(.3125rem, .27rem + .19vw, .4375rem);--space-s:clamp(.625rem, .55rem + .38vw, .875rem);--space-m:clamp(.875rem, .74rem + .67vw, 1.3125rem);--space-l:clamp(1.1875rem, .96rem + 1.15vw, 1.9375rem);--space-xl:clamp(2.375rem, 2.03rem + 1.73vw, 3.5rem);--space-2xl:clamp(3.5625rem, 3.04rem + 2.6vw, 5.25rem);--space-3xl:clamp(5.9375rem, 5.07rem + 4.33vw, 8.75rem);--space-xs-s:clamp(.3125rem, .14rem + .87vw, .875rem);--space-s-m:clamp(.625rem, .41rem + 1.06vw, 1.3125rem);--space-m-l:clamp(.875rem, .55rem + 1.63vw, 1.9375rem);--space-l-xl:clamp(1.1875rem, .48rem + 3.56vw, 3.5rem);--space-l-2xl:clamp(1.1875rem, -.06rem + 6.25vw, 5.25rem);--space-xl-2xl:clamp(2.375rem, 1.49rem + 4.42vw, 5.25rem);--space-2xl-3xl:clamp(3.5625rem, 1.97rem + 7.98vw, 8.75rem);--size-step-min-2:clamp(.8125rem, .75rem + .29vw, 1rem);--size-step-min-1:clamp(1rem, .88rem + .58vw, 1.375rem);--size-step-0:clamp(1.1875rem, 1.01rem + .87vw, 1.75rem);--size-step-1:clamp(1.4375rem, 1.21rem + 1.15vw, 2.1875rem);--size-step-2:clamp(1.6875rem, 1.36rem + 1.63vw, 2.75rem);--size-step-3:clamp(2.0625rem, 1.64rem + 2.12vw, 3.4375rem);--size-step-4:clamp(2.5rem, 1.96rem + 2.69vw, 4.25rem);--size-step-5:clamp(2.9375rem, 2.19rem + 3.75vw, 5.375rem);--size-step-6:clamp(3.5rem, 2.52rem + 4.9vw, 6.6875rem);--leading-flat:1;--leading-fine:1.2;--leading-standard:1.4;--font-display:Redhat,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--font-base:Atkinson Hyperlegible,system-ui,sans-serif;--font-mono:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-regular:400;--font-bold:700;--font-extra-bold:900}}@layer variables{:root{--gutter:var(--space-m-l);--transition-duration:250ms;--transition-timing:ease;--wrapper-width:85rem;--tracking:-0.04ch;--tracking-s:-0.075ch;--tracking-wide:0.04ch;--stroke:1px solid var(--color-bg-accent);--gradient-rainbow:linear-gradient(90deg, #cf4662 10%, #fbbe25 30%, #62c95c 50%, #08bccb 75%, #a977d5 90%);--gradient-conic:conic-gradient( 19 var(--color-primary) 0 28%, 20 var(--color-secondary) 0 67%, 21 var(--color-tertiary) 0 100% 22 );--gradient-stripes:linear-gradient( 23 45deg, 24 var(--color-gray-900) 0 75%, 25 var(--color-primary) 0 85%, 26 var(--color-secondary) 0 92%, 27 var(--color-tertiary) 0 100% 28 );--color-light:var(--color-gray-100);--color-dark:var(--color-gray-900);--color-mid:var(--color-gray-400)}:root,:root[data-theme=light]{--color-text:var(--color-gray-800);--color-bg:var(--color-gray-100);--color-primary:var(--color-pink);--color-secondary:var(--color-blue);--color-tertiary:var(--color-gold);
28--color-text-accent:var(--color-gray-700);--color-bg-accent:var(--color-gray-200);--color-bg-accent-2:var(--color-gray-300)}@media (prefers-color-scheme:dark){:root{--color-text:var(--color-gray-100);--color-bg:var(--color-gray-800);--color-primary:var(--color-pink-subdued);--color-secondary:var(--color-blue-subdued);--color-tertiary:var(--color-gold-subdued);--color-text-accent:var(--color-gray-300);--color-bg-accent:var(--color-gray-700);--color-bg-accent-2:var(--color-gray-600)}}:root[data-theme=dark]{--color-text:var(--color-gray-100);--color-bg:var(--color-gray-800);--color-primary:var(--color-pink-subdued);--color-secondary:var(--color-blue-subdued);--color-tertiary:var(--color-gold-subdued);--color-text-accent:var(--color-gray-300);--color-bg-accent:var(--color-gray-700);--color-bg-accent-2:var(--color-gray-600)}}@layer global{html{color-scheme:light dark}body{display:flex;flex-direction:column;font-family:var(--font-base);font-size:var(--size-step-0);font-weight:var(--font-regular);font-size-adjust:from-font;line-height:var(--leading-standard);color:var(--color-text);background-color:var(--color-bg);accent-color:var(--color-primary);letter-spacing:var(--tracking)}main{flex:auto}h1,h2,h3{font-family:var(--font-display);font-weight:var(--font-extra-bold);line-height:var(--leading-fine);letter-spacing:var(--tracking-s)}h1{font-size:var(--size-step-6)}h2{font-size:var(--size-step-4)}blockquote,h3{font-size:var(--size-step-2)}blockquote{padding:var(--space-m-l);border-inline-start:.5rem solid var(--color-primary)}blockquote>*+*{margin-block-start:var(--space-m-l)}blockquote :last-child{font-family:var(--font-base);font-style:normal;font-size:var(--size-step-1)}input,textarea{caret-color:var(--color-primary)}svg{block-size:.6lh;inline-size:auto;flex:none}b,strong{font-weight:var(--font-bold)}hr{border:none;height:1px;width:10%;margin-block:var(--flow-space,var(--space-m-l));margin-inline-start:0;background-color:var(--color-bg-accent-2)}figcaption{margin-block-start:var(--space-s);font-size:var(--size-step-min-1);text-align:center;padding-block-end:var(--space-xs)}figcaption:after{border-block:var(--stroke);content:"";display:block;margin-block:var(--space-xs);inline-size:50%;margin-inline:auto;opacity:.8}a{text-decoration-thickness:.15ex;text-underline-offset:.2ch}a:not([class]):hover{text-decoration:none}:focus{outline:none}:focus-visible{outline:3px solid var(--focus-color,currentColor);outline-offset:var(--focus-offset,.3ch)}@supports (-moz-appearance:none){:root{--focus-offset:0.08em}}::-moz-selection{background-color:var(--color-text);color:var(--color-bg)}::selection{background-color:var(--color-text);color:var(--color-bg)}.preload-transitions *{transition:none!important}@media (scripting:none){.require-js{display:none}}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}}@layer compositions{.cluster{display:flex;flex-direction:var(--cluster-direction,row);flex-wrap:var(--cluster-wrap,wrap);gap:var(--gutter,var(--space-s-l));justify-content:var(--cluster-horizontal-alignment,flex-start);align-items:var(--cluster-vertical-alignment,center)}.flow>*+*{margin-block-start:var(--flow-space,1em)}.grid{display:grid;grid-template-columns:repeat(var(--grid-placement,auto-fill),minmax(var(--grid-min-item-size,16rem),1fr));gap:var(--gutter,var(--space-s-m))}.grid[data-rows=masonry]{grid-template-rows:masonry;align-items:start}.grid[data-layout="50-50"]{--grid-placement:auto-fit;--grid-min-item-size:clamp(16rem, 50vw, 28rem)}.grid[data-layout=thirds]{--grid-placement:auto-fit;--grid-min-item-size:clamp(16rem, 33%, 20rem)}.repel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:var(--repel-vertical-alignment,center);gap:var(--gutter,var(--space-s-l))}.repel[data-nowrap]{flex-wrap:nowrap}.sidebar{display:flex;flex-wrap:wrap;gap:var(--gutter,var(--space-s-l))}.sidebar:not([data-direction])>:first-child{flex-basis:var(--sidebar-target-width,20rem);flex-grow:1}.sidebar:not([data-direction])>:last-child{flex-basis:0;flex-grow:999;min-inline-size:var(--sidebar-content-min-width,50%)}.sidebar[data-direction=rtl]>:last-child{flex-basis:var(--sidebar-target-width,20rem);flex-grow:1}.sidebar[data-direction=rtl]>:first-child{flex-basis:0;flex-grow:999;min-inline-size:var(--sidebar-content-min-width,50%)}.wrapper{--gap:clamp(1rem, 6vw, 3rem);--full:minmax(var(--gap), 1fr);--content:min(var(--wrapper-width, 85rem), 100% - 2 * var(--gap));--popout:minmax(0, 2rem);--feature:minmax(0, 5rem);display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end]}.wrapper>*{grid-column:content}.prose-wrapper{--wrapper-width:64rem}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}}@layer blocks{.button{--button-bg:var(--color-text);--button-color:color-mix(in oklab, var(--button-bg) 10%, var(--color-bg));--button-hover-bg:color-mix(in oklab, var(--button-bg) 90%, var(--color-bg));--button-hover-color:var(--button-color);--button-border-width:var(--border-thickness);--button-border-style:solid;--button-border-color:color-mix(in oklab, var(--button-bg) 80%, var(--color-text));--button-radius:var(--border-radius-small);--button-gap:var(--space-2xs);--button-padding:var(--space-xs) var(--space-m);--button-font-family:var(--font-body);--button-font-weight:var(--font-regular);--button-font-size:var(--size-step-0);--button-text-transform:none;--button-tracking:normal;display:inline-flex;align-items:center;gap:var(--button-gap);padding:var(--button-padding);background:var(--button-bg);color:var(--button-color);border-width:var(--button-border-width);border-style:var(--button-border-style);border-color:var(--button-border-color);border-radius:var(--button-radius);text-decoration:none;font-family:var(--button-font-family);font-weight:var(--button-font-weight);font-size:var(--button-font-size);line-height:var(--leading-flat);text-transform:var(--button-text-transform);letter-spacing:var(--button-tracking);text-box-trim:trim-both;text-box-edge:cap alphabetic}.button svg{block-size:var(--button-icon-size,1.2cap)}.button:hover,.button[aria-current=page],.button[aria-pressed=true],.button[data-state=active]{background:var(--button-hover-bg);color:var(--button-hover-color)}.button:active{transform:scale(99%)}.button[data-button-variant=primary]{--button-bg:var(--color-primary);--button-color:var(--color-light);--button-color:color-mix(in oklab, var(--color-primary) 5%, var(--color-light))}.button[data-button-variant=secondary]{--button-bg:var(--color-secondary);--button-color:var(--color-light);--button-color:color-mix(in oklab, var(--color-secondary) 5%, var(--color-light))}.button[data-button-variant=tertiary]{--button-bg:var(--color-tertiary);--button-color:var(--color-dark);--button-color:color-mix(in oklab, var(--color-tertiary) 10%, var(--color-dark))}.button[data-ghost-button]{--button-bg:var(--color-bg);--button-border-color:var(--color-text);--button-color:var(--color-text);--button-hover-color:var(--color-bg)}.button[data-ghost-button]:hover{--_ghost-hover-bg:var(--color-bg);--_ghost-hover-bg:color-mix(in oklab, var(--button-bg) 95%, var(--color-dark));background:var(--_ghost-hover-bg);color:var(--button-color)}.button[data-small-button]{--button-border-width:2px;--button-radius:var(--border-radius-small);--button-font-size:var(--size-step-min-2);--button-padding:var(--space-2xs) var(--space-s) var(--space-3xs) var(--space-s);--button-text-transform:uppercase;--button-tracking:var(--tracking-wide)}.button[data-button-radius=hard]{--button-radius:0}.button[data-icon]{--button-padding:var(--space-2xs);--button-bg:var(--color-bg);--button-border-color:var(--color-bg);--button-color:var(--color-text);--button-hover-color:var(--color-primary);--button-radius:50%;aspect-ratio:1;display:inline-grid;place-items:center}:root{--color-code-orange:#e09952;--color-code-blue:var(--color-secondary);--color-code-indigo:#7d59c5;--color-code-violet:#e052bf;--color-code-pink:#e05269;--color-code-gray:#949494;--color-code-bg:color-mix(in oklab, var(--color-bg) 92%, #000)}code,pre{font-family:var(--font-mono);font-size:var(--size-step-min-1);background-color:var(--color-code-bg);border-radius:var(--border-radius-medium)}code[class*=language-],pre[class*=language-]{white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;hyphens:none}pre{grid-column:popout!important;overflow-x:auto;padding:var(--space-s) var(--space-l)}
28:where(:not(pre))>code{position:relative;top:-.05em;padding:.1em .4em}pre[class*=language-]{overflow:auto;position:relative}[class*=language-] .namespace{opacity:.7}.token.atrule{color:var(--color-code-pink)}.token.attr-name{color:var(--color-code-orange)}.token.attr-value{color:var(--color-text-accent)}.token.attribute{color:var(--color-code-blue)}.token.boolean{color:var(--color-code-pink)}.token.builtin,.token.cdata,.token.char,.token.class,.token.class-name,.token.color{color:var(--color-code-orange)}.token.comment{color:var(--color-code-gray)}.token.constant,.token.deleted{color:var(--color-code-pink)}.token.doctype{color:var(--color-code-orange)}.token.entity,.token.function{color:var(--color-code-pink)}.token.hexcode{color:var(--color-code-orange)}.token.id,.token.important{color:var(--color-code-pink);font-weight:var(--font-bold)}.token.inserted{color:var(--color-code-orange)}.token.keyword{color:var(--color-code-pink);font-style:italic}.token.number{color:var(--color-text-accent)}.token.operator{color:var(--color-code-gray)}.token.prolog,.token.property{color:var(--color-code-orange)}.token.pseudo-class,.token.pseudo-element{color:var(--color-code-blue)}.token.punctuation{color:var(--color-code-gray)}.token.regex{color:var(--color-code-orange)}.token.selector{color:var(--color-code-pink)}.token.string{color:var(--color-text-accent)}.token.symbol,.token.tag,.token.unit{color:var(--color-code-pink)}.token.url{color:var(--color-code-violet)}.token.variable{color:var(--color-code-pink)}.codepen a{--icon-size:1.2em;display:flex;align-items:center;gap:var(--space-2xs)}.prose .cp_embed_wrapper,.prose .cp_embed_wrapper+script+:not(h2){--flow-space:var(--space-l)}.cp_embed_wrapper{grid-column:popout;position:relative;overflow:auto;display:grid;place-items:center;grid-template-areas:"container";resize:horizontal}.cp_embed_wrapper iframe{grid-area:container;width:100%}.indicator,a[href^=http]:not([href*="localhost:8080"]):not([href*="eleventy-excellent.netlify.app"]):not(.button):not(.no-indicator){padding-inline-end:.8em}.indicator:after,a[href^=http]:not([href*="localhost:8080"]):not([href*="eleventy-excellent.netlify.app"]):not(.no-indicator):after{position:absolute;display:inline-block;inline-size:1em;block-size:1em;background-image:url(/assets/images/template/external.svg);background-repeat:no-repeat;background-position:50%;background-size:60% auto;content:"(external link)";overflow:hidden;white-space:nowrap;text-indent:1em}.mainnav{--nav-list-timing-function:cubic-bezier(0.68, -0.55, 0.27, 1.55);position:var(--nav-position,absolute);inset-inline-end:0}.mainnav:has([data-drawer-toggle][aria-expanded=true]){--nav-position:fixed;inset-inline-end:var(--gap)}.mainnav ul{--gutter:var(--space-xs);--cluster-vertical-alignment:normal;--cluster-wrap:wrap;--cluster-direction:column;--nav-list-background:var(--color-bg);--nav-list-shadow:-5px 0 11px 0 rgba(0,0,0,.2);--nav-list-height:100dvh;--nav-list-padding-block:var(--space-2xl);--nav-list-padding-inline:var(--space-s);--nav-list-position:fixed;--nav-list-width:min(18rem, 100vw);--nav-list-visibility:hidden;--nav-list-opacity:0;background:var(--nav-list-background);box-shadow:var(--nav-list-shadow);block-size:var(--nav-list-height);list-style:none;margin:0;padding-block:var(--nav-list-padding-block);padding-inline:var(--nav-list-padding-inline);position:var(--nav-list-position);inset-block-start:0;inset-inline-end:0;inline-size:var(--nav-list-width);opacity:var(--nav-list-opacity);transition:opacity .3 var(--nav-list-timing-function),visibility .3s ease-in-out;visibility:var(--nav-list-visibility)}.mainnav ul[data-no-flash]{transition:none}@media (prefers-reduced-motion:no-preference){.mainnav>ul{--nav-list-transform:translateX(100%);--nav-list-opacity:1;transform:var(--nav-list-transform);transition:transform .5s var(--nav-list-timing-function),visibility .3s linear}.mainnav svg{transition:transform .4s var(--nav-list-timing-function)}}.mainnav [data-drawer-toggle]{--gutter:var(--space-2xs);--cluster-vertical-alignment:center;background:var(--color-bg);display:var(--nav-button-display,inline-flex);position:relative;z-index:2;padding:var(--space-2xs) 0;line-height:var(--leading-flat)}.mainnav [data-drawer-toggle][aria-expanded=true]+ul{--cluster-wrap:nowrap;--nav-list-visibility:visible;--nav-list-transform:translateX(0);--nav-list-opacity:1;overflow-y:auto}body:has([data-drawer-toggle][aria-expanded=true]){overflow:hidden}.mainnav span{font-weight:var(--font-bold);text-transform:uppercase;font-family:var(--font-display);font-size:var(--size-step-min-1)}.mainnav svg{block-size:.9em;color:var(--color-text);stroke-width:3}.mainnav [aria-expanded=true] svg{transform:rotate(45deg)}.mainnav :is(a,[data-submenu-toggle]){--nav-item-background:transparent;--nav-item-text-color:var(--color-text);--nav-item-padding:var(--space-xs) var(--space-2xs);--nav-item-decoration-color:transparent;--nav-item-font-size:var(--size-step-0);
28--nav-item-font-weight:var(--font-bold);background:var(--nav-item-background);color:var(--nav-item-text-color);font-size:var(--nav-item-font-size);padding:var(--nav-item-padding);display:block;border-radius:var(--border-radius-medium);text-decoration-line:underline;text-decoration-color:var(--nav-item-decoration-color);text-decoration-thickness:3px;text-underline-offset:.2em}.mainnav:has(.nav-sublist) :is(a,[data-submenu-toggle]){font-weight:var(--nav-item-font-weight)}.mainnav [data-submenu-toggle]{gap:var(--space-2xs);display:flex;inline-size:100%;align-items:center;justify-content:space-between}.mainnav [data-submenu-toggle] svg{margin-inline-end:calc(var(--gap) - var(--nav-list-padding-inline))}.mainnav :is(a,[data-submenu-toggle]):hover{--nav-item-background:transparent;--nav-item-text-color:var(--color-text);--nav-item-decoration-color:var(--color-bg-accent-2)}.mainnav [aria-current=page],.mainnav [data-state=active]{--nav-item-background:var(--color-bg);--nav-item-text-color:var(--color-primary);--nav-item-decoration-color:var(--color-primary)}li:has(ul a[aria-current=page])>[data-submenu-toggle]{--nav-item-background:var(--color-bg);--nav-item-text-color:var(--color-text);--nav-item-decoration-color:var(--color-text)}.mainnav [data-submenu-toggle][aria-expanded=false]+ul{display:none}.mainnav .nav-sublist{--gutter:0;--cluster-direction:column;--nav-sublist-position:relative;--nav-sublist-background:var(--color-bg);--nav-sublist-width:100%;--nav-list-visibility:visible;--nav-list-opacity:1;--nav-list-padding-block:0 var(--space-m);--nav-list-padding-inline:0;box-shadow:none;position:var(--nav-sublist-position);inline-size:var(--nav-sublist-width);block-size:auto;background:var(--nav-sublist-background);z-index:2}.mainnav .nav-sublist a{--nav-item-font-weight:var(--font-regular)}@media (min-width:662px){.mainnav{--nav-position:static;--nav-button-display:none}.mainnav :is(a,[data-submenu-toggle]){--nav-item-font-weight:var(--font-regular)}.mainnav ul{--cluster-direction:row;--nav-list-position:static;--nav-list-padding-block:0;--nav-list-padding-inline:0;--nav-list-height:auto;--nav-list-width:100%;--nav-list-shadow:none;--nav-list-visibility:visible;--nav-list-transform:translateX(0);--nav-list-opacity:1}.mainnav [aria-current=page],.mainnav [data-state=active],li:has(ul a[aria-current=page])>[data-submenu-toggle]{--nav-item-background:transparent;--nav-item-text-color:var(--color-primary);--nav-item-decoration-color:var(--color-primary)}.mainnav [data-submenu-toggle]{inline-size:auto}.mainnav [data-submenu-toggle] svg{margin-inline-end:0}.mainnav .nav-sublist{--nav-sublist-position:absolute;--nav-sublist-background:var(--color-bg);--nav-sublist-border:var(--color-text);--nav-sublist-width:max-content;--nav-list-padding-block:var(--space-xs);--nav-list-padding-inline:var(--space-xs);border:3px solid var(--nav-sublist-border);inset-block-start:var(--space-xl);inset-inline-start:var(--space-2xs)}}.mainnav ul:first-child{--cluster-direction:row;--nav-list-position:static;--nav-list-padding-block:0;--nav-list-padding-inline:0;--nav-list-height:auto;--nav-list-width:100%;--nav-list-shadow:none;--nav-list-visibility:visible;--nav-list-transform:translateX(0);--nav-list-opacity:1}.mainnav ul:first-child [aria-current=page],.mainnav ul:first-child [data-state=active]{--nav-item-background:transparent;--nav-item-text-color:var(--color-primary);--nav-item-decoration-color:var(--color-primary)}.mainnav:has(ul:first-child){--nav-position:relative}@media (scripting:none){.mainnav ul:first-child ul.nav-sublist{--cluster-direction:row;--cluster-wrap:wrap}@media (min-width:662px){.mainnav ul:first-child ul.nav-sublist{--cluster-direction:column}}}.prose{--flow-space:var(--space-m-l);--wrapper-width:64rem}.prose :is(pre,pre+*,figure,picture){--flow-space:var(--space-m-l)}.prose :is(figure+*,picture+*){--flow-space:var(--space-xl)}.prose :is(img,video){border:var(--stroke)}.prose :is(h2,h3,h4){--flow-space:1.5em;overflow-wrap:anywhere;hyphens:auto}@media (min-width:1000px){.prose :is(h1,h2,h3){overflow-wrap:unset;hyphens:unset}}
28.prose :is(h1,h2,h3,h4)+:not([class]):not(figure){--flow-space:var(--space-l)}.prose :is(p,li,dl,blockquote){max-inline-size:60ch;text-wrap:pretty}.prose .heading-anchor:where(:hover,:focus){text-decoration:none}.heading-anchor{text-decoration:none}.prose mark{background-color:var(--color-tertiary);color:var(--color-dark)}.prose :is(ul,ol):not([class]) li+li,.prose :is(ul,ol):not([class]) li>:is(ol,ul){padding-block-start:var(--space-s)}.prose :is(ul:not([class]):not([role=list])) li::marker{color:var(--color-primary);content:"â "}.prose ul:not([class]){padding-inline-start:1.3ch}.prose ol:not([class]){padding-inline-start:1.7ch}.prose ol li::marker{color:var(--color-primary)}.prose img{border-radius:var(--border-radius-medium)}@media (max-width:640px){.prose a,.prose>*{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto}}.section>.divider:first-child{transform:rotate(180deg) translateY(-1px)}.section__inner{background-color:var(--spot-color,var(--color-bg-accent));color:var(--color-text)}.section blockquote{font-weight:var(--font-bold);line-height:1;font-size:var(--size-step-4);letter-spacing:var(--tracking-s)}.section :is(h1,h2,h3,blockquote){opacity:95%}.divider{display:block;block-size:3.5em;inline-size:100%;fill:var(--spot-color,var(--color-bg))}.divider>.divider{transform:translateY(-1px)}.site-footer{--cluster-horizontal-alignment:center}.site-footer a:not(.creator a){padding:var(--space-xs)}.site-footer .creator a:hover{color:transparent;background-image:var(--gradient-rainbow);background-size:100%;background-repeat:repeat;-webkit-background-clip:text;background-clip:text}.site-footer .creator a:hover svg{color:var(--color-primary)}.logo{--gutter:var(--space-xs);padding:var(--space-s) 0;font-size:var(--size-step-0);text-decoration:none}.skip-link{clip:rect(1px,1px,1px,1px);display:block;block-size:1px;overflow:hidden;position:absolute;inline-size:1px;top:1rem;left:1rem;z-index:999}.skip-link:focus{clip:auto;block-size:auto;overflow:visible;inline-size:auto;background-color:var(--color-text);color:var(--color-bg);padding:var(--space-xs) var(--space-s-m);border-radius:var(--border-radius-medium);line-height:1}.skip-link:not(:focus){border:0;clip:rect(0 0 0 0);block-size:auto;margin:0;overflow:hidden;padding:0;position:absolute;inline-size:1px;white-space:nowrap}.gradient-text{background-image:var(--gradient-conic);padding:.6rem 0;background-size:50%}.gradient-text,.gradient-text-linear{color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text-linear{background-image:var(--gradient-rainbow);background-size:100%;background-repeat:repeat}.theme-switch h2{font-size:var(--size-step-min-1);font-family:var(--font-base)}.theme-switch .button[aria-pressed=true]{--_color-contrast:var(--color-tertiary);--button-bg:var(--_color-contrast);--button-color:var(--color-dark);--button-hover-color:var(--color-dark);--button-border-color:var(--_color-contrast);--focus-color:var(--_color-contrast)}is-land:not(:defined) .theme-switch{display:none}}@layer tailwindUtilities{.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.my-m-l{margin-top:clamp(.875rem,.55rem + 1.63vw,1.9375rem);margin-bottom:clamp(.875rem,.55rem + 1.63vw,1.9375rem)}.my-s-m{margin-top:clamp(.625rem,.41rem + 1.06vw,1.3125rem);margin-bottom:clamp(.625rem,.41rem + 1.06vw,1.3125rem)}.mt-l-xl{margin-top:clamp(1.1875rem,.48rem + 3.56vw,3.5rem)}.mt-s-m{margin-top:clamp(.625rem,.41rem + 1.06vw,1.3125rem)}.mt-xl{margin-top:clamp(2.375rem,2.03rem + 1.73vw,3.5rem)}.mt-xs{margin-top:clamp(.3125rem,.27rem + .19vw,.4375rem)}.mt-xs-s{margin-top:clamp(.3125rem,.14rem + .87vw,.875rem)}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.justify-center{justify-content:center}.bg-gray-100{background-color:#f8f8f8}.p-s-m{padding:clamp(.625rem,.41rem + 1.06vw,1.3125rem)}.text-center{text-align:center}.font-display{font-family:Redhat,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.text-step-0{font-size:clamp(1.1875rem,1.01rem + .87vw,1.75rem)}.text-step-1{font-size:clamp(1.4375rem,1.21rem + 1.15vw,2.1875rem)}
28.text-step-2{font-size:clamp(1.6875rem,1.36rem + 1.63vw,2.75rem)}.text-step-4{font-size:clamp(2.5rem,1.96rem + 2.69vw,4.25rem)}.text-step-min-1{font-size:clamp(1rem,.88rem + .58vw,1.375rem)}.capitalize{text-transform:capitalize}.italic{font-style:italic}.text-gray-900{color:#161616}.text-pink{color:#dd4462}.text-theme-light{color:var(--color-light)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.flow-space-m{--flow-space:clamp(.875rem, .74rem + .67vw, 1.3125rem)}.region-space-m{--region-space:clamp(.875rem, .74rem + .67vw, 1.3125rem)}.region-space-l{--region-space:clamp(1.1875rem, .96rem + 1.15vw, 1.9375rem)}.gutter-2xs{--gutter:clamp(.1875rem, .15rem + .19vw, .3125rem)}.gutter-xs{--gutter:clamp(.3125rem, .27rem + .19vw, .4375rem)}.gutter-s{--gutter:clamp(.625rem, .55rem + .38vw, .875rem)}.gutter-xs-s{--gutter:clamp(.3125rem, .14rem + .87vw, .875rem)}.spot-color-theme-bg{--spot-color:var(--color-bg)}.spot-color-theme-bg-accent{--spot-color:var(--color-bg-accent)}.spot-color-theme-primary{--spot-color:var(--color-primary)}.spot-color-theme-secondary{--spot-color:var(--color-secondary)}.grayscale{filter:grayscale(100%)}.heading-line{display:flex;align-items:flex-start;text-align:left}.heading-line:after{content:"";flex-grow:1;block-size:1px;background:var(--color-bg-accent-2);margin-block-start:auto;transform:translateY(-.25em);margin-left:var(--space-s)}.ontop{z-index:1;position:relative}.region{--region-space-fallback:var(--region-space, var(--space-l-xl));padding-block-start:var(--region-space-top,var(--region-space-fallback));padding-block-end:var(--region-space-bottom,var(--region-space-fallback))}.spin{animation:spin 30s linear infinite}@media (prefers-reduced-motion:no-preference){@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}}.visually-hidden{border:0;clip:rect(0 0 0 0);height:0;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}}@media (min-width:1000px){.md\:text-right{text-align:right}}</style><style>custom-card{--gutter:var(--space-xs-s);background-color:var(--spot-color,var(--color-bg-accent));border:4px solid var(--color-bg-accent);color:var(--color-text);padding:var(--space-s-m);border-radius:var(--border-radius-medium);max-inline-size:unset;display:grid;grid-template-rows:[image] max-content [headline] max-content [meta] max-content [desc] auto [footer] max-content}custom-card>:empty{display:none}custom-card ::-moz-selection{color:var(--color-dark);background-color:var(--color-secondary)}custom-card ::selection{color:var(--color-dark);background-color:var(--color-secondary)}custom-card :is(h2,h3){--flow-space:var(--space-m);grid-row:headline}custom-card :is(h2,h3) a{text-decoration:none}custom-card>:is(picture,figure){grid-row:image;--flow-space:0}custom-card img{max-inline-size:var(--max-img-width,100%);block-size:auto;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}custom-card>.meta{grid-row:meta;font-size:var(--size-step-min-1)}custom-card>p{grid-row:desc}custom-card>footer{grid-row:footer;font-size:var(--size-step-min-2)}custom-card :is(a,p,h2,h3){overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}custom-card[no-padding]{background-color:transparent;border:4px solid var(--color-bg-accent);padding:0;border-radius:none}custom-card[img-square] img{aspect-ratio:1}custom-card[clickable]:focus-within,custom-card[clickable]:hover{border:4px solid var(--color-primary)}custom-card[clickable]:focus-within a:focus{outline:none}custom-card[clickable]{position:relative}custom-card[clickable] a:before{bottom:0;content:"";left:0;position:absolute;right:0;top:0} 29.pagination{--gutter:var(--space-xs-s)}.pagination li{color:var(--pagination-text,var(--color-text));background-color:var(--pagination-bg,var(--color-bg));border:3px solid var(--pagination-border,var(--color-bg-accent));border-radius:var(--border-radius-medium)}.pagination a{padding:var(--space-xs) var(--space-s-m);text-decoration:none;display:block}.pagination li:not(:has(a)){padding:var(--space-xs) var(--space-s-m);opacity:.6}.pagination li:has(a:hover){--pagination-bg:var(--color-bg-accent);--pagination-border:var(--color-bg-accent)}.pagination li:has(a[aria-current=page]){--pagination-bg:var(--color-secondary);--pagination-border:var(--color-secondary);--pagination-text:var(--color-light)}</style><link rel="preload" href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/assets/fonts/atkinson/atkinson-hyperlegible-regular.woff2" as="font" type="font/woff2" crossorigin><meta name="description" content="All blog posts can be found here"><meta name="theme-color" content="#2e2e2e" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#f8f8f8" media="(prefers-color-scheme: light)"><meta name="robots" content="index,follow"><meta name="googlebot" content="index,follow"><meta name="generator" content="Eleventy v3.1.6"><meta name="format-detection" content="telephone=no"><meta name="color-scheme" content="light dark"><link rel="canonical" href="https://eleventy-excellent.netlify.app/blog/"><link rel="author" href="humans.txt"><link rel="me" href="https://front-end.social/@lene"><meta name="fediverse:creator" content="@[email protected]"><meta property="og:url" content="https://eleventy-excellent.netlify.app/blog/"><meta property="og:type" content="website"><meta property="og:title" content="Blog"><meta property="og:image" content="https://eleventy-excellent.netlify.app/assets/images/template/opengraph-default.jpg"><meta property="og:image:alt" content="Visible content: An Eleventy starter with CUBE CSS, Every Layout, Design Tokens and Tailwind for utility classes. A workflow for building modern and resilient websites, introduced by Andy Bell's project buildexcellentwebsit.es">
29<meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:description" content="All blog posts can be found here"><meta property="og:site_name" content="Eleventy Excellent"><meta property="og:locale" content="en_EN"><meta property="article:author" content="Lene Saile"><link rel="alternate" type="application/atom+xml" title="Atom Feed: Eleventy Excellent" href="/feed.xml"><link rel="alternate" type="application/json" title="JSON Feed: Eleventy Excellent" href="/feed.json"><link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials">
29<script type="speculationrules">{ 30 "prefetch": [ 31 { 32 "where": {"href_matches": "/*"}, 33 "eagerness": "moderate" 34 } 35 ] 36 }</script>
36</head><body class="base"><header class="wrapper"><a href="#main" class="skip-link">Skip to content</a><div class="repel ontop gutter-s"><a href="/" class="logo | cluster"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="#dd4462" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433z" clip-rule="evenodd"></path></svg> <span class="font-display">Eleventy Excellent</span></a><nav id="mainnav" aria-label="Main" class="mainnav"><ul role="list" data-no-flash class="cluster"><li><a href="/about/">About</a></li><li><a href="/get-started/">Docs</a></li><li><a href="/built-with/">Built with</a></li><li><a href="/blog/" aria-current="page" data-state="active">Blog</a></li></ul></nav></div></header><main id="main" class="flow"><div class="wrapper"><header class="full | section spot-color-theme-secondary"><div style="--region-space-top: var(--space-xl-2xl)" class="section__inner flow region"><h1 class="text-center text-theme-light">Blog</h1></div><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="none" viewBox="0 0 1440 320" aria-hidden="true" focusable="false" tabindex="-1" class="divider"><path d="M0 320 48 32h48l48 192 48 32L240 0l48 192 48 96 48-64 48-96 48 128 48-224 48 64 48-32h48l48 96 48-128 48 160 48-64h48l48-96 48 192 48-64 48-160 48 64 48 192 48-192 48 160 48-64 48-64 48-64V0H0Z"></path></svg></header><div style="--region-space-top: var(--space-xl-2xl)" class="region flow prose"><p>This blog has a pagination of <strong>8</strong> posts per page.<br>The pagination is only shown if there are more posts (13) than items per page (8).</p></div><is-land on:visible> 37 <custom-masonry data-rows="masonry" data-layout="50-50" class="grid"> 38 <custom-card clickable class="flow no-indicator"> 39 40 <h2 class="text-step-2"><a href="/blog/eleventy-excellent-40/">Eleventy Excellent 4.0</a></h2> 41 <div class="meta | cluster"><span><time datetime="2025-01-11T00:00:00.000Z">January 11, 2025</time></span></div> 42 <p>Time for a new version with a lot of breaking changes! Have fun everybody.</p> 43 44 45</custom-card><custom-card clickable class="flow no-indicator"> 46 47 <h2 class="text-step-2"><a href="/blog/post-with-an-image/">Post with an image</a></h2> 48 <div class="meta | cluster"><span><time datetime="2025-01-09T00:00:00.000Z">January 9, 2025</time></span><span data-small-button class="button">image</span> <span data-small-button class="button">feature</span></div> 49 <p>We can use Markdown, Nunjucks shortcodes or pure HTML to add images to posts and pages.</p> 50 51 52</custom-card><custom-card clickable class="flow no-indicator"> 53 54 <h2 class="text-step-2"><a href="/blog/eleventy-excellent-30/">Eleventy Excellent 3.0</a></h2> 55 <div class="meta | cluster"><span><time datetime="2024-06-03T00:00:00.000Z">June 3, 2024</time></span></div> 56 <p>It's been a few months, and I have decided to change things again, which probably makes the starter even more opinionated. 𤷠Eleventy Excellent 3.0 now uses ESM, has a new config structure and uses web components.</p> 57 58 59</custom-card><custom-card clickable class="flow no-indicator"> 60 61 <h2 class="text-step-2"><a href="/blog/eleventy-excellent-20/">Eleventy Excellent 2.0</a></h2> 62 <div class="meta | cluster"><span><time datetime="2024-02-01T00:00:00.000Z">February 1, 2024</time></span></div> 63 <p>I created this starter after I saw Andyâs talk and studied the source code for <strong>buildexcellentwebsit.es.</strong> I quickly came to the conclusion that this is the way I want to build all my websites from now on! It's so great. I know many of you feel the same way.</p> 64 65 66</custom-card><custom-card clickable class="flow no-indicator"> 67 68 <h2 class="text-step-2"><a href="/blog/post-with-a-gallery/">Post with a gallery</a></h2>
69 <div class="meta | cluster"><span><time datetime="2024-01-30T00:00:00.000Z">January 30, 2024</time></span></div> 70 <p>A gallery with good old "popup" functionality inside a dialog element, a new image shortcode that links directly to the image with its original dimensions, and a regular loop over images.</p> 71 72 73</custom-card><custom-card clickable class="flow no-indicator"> 74 75 <h2 class="text-step-2"><a href="/blog/what-is-tailwind-css-doing-here/">What is Tailwind CSS doing here?</a></h2> 76 <div class="meta | cluster"><span><time datetime="2023-11-30T00:00:00.000Z">November 30, 2023</time></span></div> 77 <p>We are using Tailwinds "engine" to generate utility classes on demand, based on our design tokens.</p> 78 79 80</custom-card><custom-card clickable class="flow no-indicator"> 81 82 <h2 class="text-step-2"><a href="/blog/demo-pages/">Demo pages</a></h2> 83 <div class="meta | cluster"><span><time datetime="2023-10-30T00:00:00.000Z">October 30, 2023</time></span></div> 84 <p>As of version 2.0, the demos featured here are all directly built in the starter.</p> 85 86 87</custom-card><custom-card clickable class="flow no-indicator"> 88 89 <h2 class="text-step-2"><a href="/blog/open-graph-images/">Open Graph images</a></h2> 90 <div class="meta | cluster"><span><time datetime="2023-01-25T00:00:00.000Z">January 25, 2023</time></span><span data-small-button class="button">image</span> <span data-small-button class="button">feature</span></div> 91 <p>When you share your blog posts, a thumbnail image might appear. This starter generates these images for your blog posts automatically.</p> 92 93 94</custom-card> 95 96 <template data-island="once"> 97
97<script src="/assets/scripts/components/custom-masonry.js" type="module"></script>
97 98 </template> 99 </custom-masonry> 100</is-land> 101<section class="region"><nav role="navigation" aria-labelledby="pagination_label"><span id="pagination_label" hidden>Blog</span> <span id="prefix" hidden>Page</span><ol role="list" class="pagination | cluster"><li>Previous</li><li><a href="/blog/" id="link_1" aria-labelledby="prefix link_1" aria-current="page">1</a></li><li><a href="/blog/page-2/" id="link_2" aria-labelledby="prefix link_2">2</a></li><li><a href="/blog/page-2/">Next</a></li></ol></nav></section></div></main><footer class="site-footer mt-l-xl p-s-m"><div class="wrapper"><div class="cluster gutter-xs"><nav aria-label="Complementary" class="cluster text-step-0">© 2026 <a href="/"><span class="font-display">Eleventy Excellent</span> <small>4.8.0</small> </a><a href="/styleguide/">Style guide</a> <a href="/imprint/">Imprint</a> <a href="/privacy/">Privacy</a> <a href="/accessibility/">Accessibility</a></nav><nav aria-label="Platforms" class="cluster"><a href="/feed.xml" rel="alternate" type="application/atom+xml" data-icon class="button"><span class="visually-hidden">Atom Feed</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg> </a><a data-icon href="https://github.com/madrilene/eleventy-excellent" rel="me" class="no-indicator button"><span class="visually-hidden">Github</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65S8.93 17.38 9 18v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg> </a><a data-icon href="https://front-end.social/@lene" rel="me" class="no-indicator button"><span class="visually-hidden">Mastodon</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path d="M21.887 5.996c-.308-2.314-2.298-4.14-4.655-4.492-.399-.059-1.906-.278-5.398-.278h-.026c-3.495 0-4.243.219-4.642.278-2.295.345-4.387 1.982-4.897 4.326-.242 1.153-.268 2.433-.222 3.606.065 1.684.078 3.361.228 5.039a24 24 0 0 0 .543 3.304c.484 2.009 2.439 3.68 4.355 4.359 2.049.71 4.256.829 6.368.342q.347-.085.69-.193c.513-.165 1.114-.351 1.559-.676q.009-.006.013-.016.006-.01.007-.024v-1.624s0-.013-.007-.02q-.002-.01-.013-.016l-.02-.01h-.019a17.4 17.4 0 0 1-4.132.49c-2.397 0-3.041-1.153-3.224-1.63a5.3 5.3 0 0 1-.281-1.287q0-.01.003-.019.002-.012.013-.017l.02-.01h.023c1.33.325 2.697.491 4.067.491.33 0 .657 0 .987-.01 1.376-.04 2.828-.11 4.184-.378.033-.007.069-.013.098-.02 2.138-.418 4.172-1.724 4.378-5.032.006-.129.026-1.365.026-1.498 0-.461.147-3.258-.023-4.979z"></path><path fill="currentColor" stroke-width="1" d="M6.061 7.288c0-.676.533-1.219 1.193-1.219.661 0 1.193.547 1.193 1.219 0 .673-.532 1.22-1.193 1.22-.66 0-1.193-.547-1.193-1.22Z"></path></svg> </a><a data-icon href="https://bsky.app/profile/lenesaile.com" rel="me" class="no-indicator button"><span class="visually-hidden">Bluesky</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height=".9em" fill="var(--color-bg)" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364q.204-.03.415-.056-.207.033-.415.056c-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a9 9 0 0 1-.415-.056q.21.026.415.056c2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.9
10102-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"></path></svg> </a><a data-icon href="https://ko-fi.com/lenesaile" rel="me" class="no-indicator button"><span class="visually-hidden">Kofi</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path stroke-linecap="round" stroke-linejoin="round" d="M18 3h1c1.06 0 2.078.527 2.828 1.464C22.578 5.402 23 6.674 23 8s-.421 2.598-1.172 3.536C21.078 12.473 20.061 13 19 13h-1M1 3h17v12.461c0 1.47-.512 2.878-1.423 3.917-.91 1.038-2.146 1.622-3.434 1.622H5.857c-1.288 0-2.523-.584-3.434-1.622S1 16.93 1 15.46z"></path><path fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13.288 8.707a2.43 2.43 0 0 0-2.65-.52c-.3.12-.57.3-.8.53l-.34.34-.35-.34a2.43 2.43 0 0 0-3.44 0c-.95.939-1 2.527.2 3.736L9.497 16l3.6-3.547c1.2-1.208 1.14-2.797.19-3.736v-.01Z"></path></svg></a></nav></div><is-land on:idle><div role="region" aria-labelledby="theme-switcher-label" data-theme-switcher style="--cluster-horizontal-alignment: center" class="theme-switch | cluster gutter-s mt-xs"><h2 id="theme-switcher-label">Theme</h2><button id="light-theme-toggle" data-theme="light" data-ghost-button data-small-button class="button"><span>light</span></button> <button id="dark-theme-toggle" data-theme="dark" data-ghost-button data-small-button class="button"><span>dark</span></button></div></is-land><aside class="creator | cluster gutter-2xs text-step-min-1 mt-xl">Made with <span class="visually-hidden">love</span> <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path d="M7 3C4.239 3 2 5.216 2 7.95c0 2.207.875 7.445 9.488 12.74a.99.99 0 0 0 1.024 0C21.125 15.395 22 10.157 22 7.95 22 5.216 19.761 3 17 3s-5 3-5 3-2.239-3-5-3"></path></svg> and <a href="https://www.11ty.dev/" class="no-indicator"><span class="visually-hidden">Eleventy</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 29 29" aria-hidden="true" focusable="false" tabindex="-1"><path fill="currentColor" d="M9.156 22.425q-.324 0-.324-.878V7.08q0-.419-.168-.394l-1.035.263q-.284.026-.284-.576V5.116q0-.523.31-.588l3.415-.89a.5.5 0 0 1 .116-.012q.284 0 .283.615V21.55q0 .878-.336.877zm8.846.027q-.518 0-.899-.073a2.4 2.4 0 0 1-.795-.328 2 2 0 0 1-.68-.7q-.265-.446-.432-1.245t-.168-1.899v-6.714q0-.263-.142-.263h-.802q-.324 0-.324-.627v-.708q0-.64.324-.641h.803q.14 0 .141-.353l.233-5.093q.039-.693.336-.693h1.295q.324 0 .324.693v5.093q-.001.354.156.353h1.65q.324 0 .324.641v.708q0 .627-.324.627h-1.655q-.09 0-.122.046-.032.045-.031.217v6.756q0 .759.096 1.264.097.504.283.739.188.235.375.313.188.08.459.078h.917q.349.001.348.484v.785q0 .537-.374.537zm4.964 1.57q.296 0 .516-.49.22-.493.221-1.396 0-.211-.26-1.454l-2.536-10.67a2 2 0 0 1-.026-.29q0-.47.195-.47h1.566q.18 0 .297.123.12.124.18.503l1.681 9.008q.051.157.065.158.052-.002.053-.144l1.319-8.983q.052-.392.16-.53a.34.34 0 0 1 .28-.138h1.085q.22 0 .22.51 0 .118-.026.302l-2.303 12.138q-.271 1.506-.595 2.305-.324.798-.726 1.086a1.85 1.85 0 0 1-1.061.302h-.13q-1.048 0-1.422-.564-.104-.118-.103-.603 0-.97.31-.97.026 0 .466.131.445.138.574.136M2.648 22.45q-.324.001-.324-.877V7.105q0-.42-.169-.394l-1.035.262Q.836 7 .837 6.397V5.14q0-.521.31-.588l3.417-.892a.5.5 0 0 1 .116-.012q.284 0 .283.615v17.309q0 .878-.336.877z"></path></svg> </a>by <a href="https://www.lenesaile.com">Lene Saile</a></aside></div></footer>
101<script type="module" src="/assets/scripts/components/custom-easteregg.js"></script>
101<custom-easteregg></custom-easteregg></body> 102</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.