From 8230afc1222d328cedf535db5aab4d971eb10f4c Mon Sep 17 00:00:00 2001 From: David Bushell <david@dbushell.com> Date: Fri, 8 Nov 2024 13:36:59 +0000 Subject: [PATCH] refactor old components --- components/pw-header.html | 44 +++---- components/pw-hero.html | 32 +++-- components/pw-nav.html | 18 +-- static/app.min.css | 2 +- static/css/base/core.css | 2 - static/css/base/typography.css | 8 +- static/css/components/button.css | 2 +- static/css/components/header.css | 2 +- static/css/components/hero.css | 182 +++++++---------------------- static/scripts/patchwork-header.js | 35 ------ static/scripts/patchwork-hero.js | 31 ----- 11 files changed, 89 insertions(+), 269 deletions(-) delete mode 100644 static/scripts/patchwork-header.js delete mode 100644 static/scripts/patchwork-hero.js diff --git a/components/pw-header.html b/components/pw-header.html index 757cb36..3cef99c 100644 --- a/components/pw-header.html +++ b/components/pw-header.html @@ -1,26 +1,20 @@ -<patchwork-header> - <header class="Grid | Header"> - <div class="Header__main"> - <ssr-slot name="primary"> - <a class="Header__logo" href="/"> - <span class="Header__name">{{heading}}</span> - <ssr-if condition="tag"> - <span class="Header__tag">{{tag}}</span> - </ssr-if> - </a> - </ssr-slot> - <ssr-slot name="secondary"> - <ssr-if condition="menu.length"> - <pw-button icon label="Toggle Menu" classes="{{['Hamburger']}}" popovertarget="nav" popovertargetaction="toggle"> - <ssr-fragment slot="icon"><icon-menu /></ssr-fragment> - </pw-button> - <pw-nav menu="{{menu}}" /> +<header class="Grid | Header"> + <div class="Header__main"> + <ssr-slot name="primary"> + <a class="Header__logo" href="/"> + <span class="Header__name">{{heading}}</span> + <ssr-if condition="tag"> + <span class="Header__tag">{{tag}}</span> </ssr-if> - </ssr-slot> - </div> - </header> -</patchwork-header> - -<ssr-fragment portal="head"> - <script type="module" src="/scripts/patchwork-header.js?v={{deployHash}}"></script> -</ssr-fragment> + </a> + </ssr-slot> + <ssr-slot name="secondary"> + <ssr-if condition="menu.length"> + <pw-button icon label="Toggle Menu" classes="{{['Hamburger']}}" popovertarget="nav" popovertargetaction="toggle"> + <ssr-fragment slot="icon"><icon-menu /></ssr-fragment> + </pw-button> + <pw-nav menu="{{menu}}" /> + </ssr-if> + </ssr-slot> + </div> +</header> diff --git a/components/pw-hero.html b/components/pw-hero.html index 288ae8a..d3d5335 100644 --- a/components/pw-hero.html +++ b/components/pw-hero.html @@ -1,21 +1,15 @@ -<patchwork-hero> - <div class="Grid | Hero"> - <div class="Hero__main"> - <ssr-slot name="image" /> - <ssr-slot name="main"> - <ssr-slot name="heading"> - <h1 class="Hero__heading">{{heading}}</h1> - </slot> - <ssr-slot name="intro"> - <div class="Hero__intro"> - <p>{{description}}</p> - </div> - </ssr-slot> +<div class="Grid | Hero"> + <div class="Hero__main"> + <ssr-slot name="image" /> + <ssr-slot name="main"> + <ssr-slot name="heading"> + <h1 class="Hero__heading">{{heading}}</h1> + </slot> + <ssr-slot name="intro"> + <div class="Hero__intro"> + <p>{{description}}</p> + </div> </ssr-slot> - </div> + </ssr-slot> </div> -</patchwork-hero> - -<ssr-fragment portal="head"> - <script type="module" src="/scripts/patchwork-hero.js?v={{deployHash}}"></script> -</ssr-fragment> +</div> diff --git a/components/pw-nav.html b/components/pw-nav.html index 281ee54..db9e2af 100644 --- a/components/pw-nav.html +++ b/components/pw-nav.html @@ -13,15 +13,17 @@ </nav> </patchwork-nav> -<template id="settings-template"> - <div id="settings" popover> - <div class="Button-group jc-end"> - <p class="small space-xs mi-end">Theme</p> - <pw-button disabled id="settings-light" label="Light" /> - <pw-button disabled id="settings-dark" label="Dark" /> +<ssr-fragment portal="foot"> + <template id="settings-template"> + <div id="settings" popover> + <div class="Button-group jc-end"> + <p class="small space-xs mi-end">Theme</p> + <pw-button disabled id="settings-light" label="Light" /> + <pw-button disabled id="settings-dark" label="Dark" /> + </div> </div> - </div> -</template> + </template> +</ssr-fragment> <ssr-fragment portal="head"> <script type="module" src="/scripts/patchwork-nav.js?v={{deployHash}}"></script> diff --git a/static/app.min.css b/static/app.min.css index 5e81974..1648759 100644 --- a/static/app.min.css +++ b/static/app.min.css @@ -1 +1 @@ -@layer base{@font-face{font-family:Sora;src:url(/fonts/Sora-Variable.woff2?v=%DEPLOY_HASH%)format("woff2");font-display:swap;font-weight:100 800;font-style:normal}@property --font-size{syntax:"<length>";inherits:true;initial-value:16px}@property --line-height{syntax:"<number>";inherits:true;initial-value:1.4}:root{--color-bg-1:light-dark(oklch(97% .03 75),oklch(20% .015 275));--color-bg-2:light-dark(oklch(95% .03 75),oklch(15% .015 275));--color-bg-3:light-dark(oklch(93% .04 75),oklch(25% .015 275));--color-bg-4:light-dark(oklch(90% .05 75),oklch(35% .015 275));--color-text:light-dark(oklch(15% .04 45),oklch(95% .04 65));--color-text-subtle:light-dark(oklch(50% .04 45),oklch(65% .04 65));--color-secondary:light-dark(oklch(55% .14 25),oklch(75% .15 25));--color-primary:light-dark(oklch(55% .14 45),oklch(75% .15 45));--color-tertiary:light-dark(oklch(65% .22 0),oklch(90% .12 90));--color-focus:var(--color-tertiary);--color-anchor:var(--color-primary);--font-weight-base:0;--font-weight-1:calc(var(--font-weight-base) + 400);--font-weight-2:calc(var(--font-weight-base) + 600)}:root[data-theme=light]{--font-weight-base:0;color-scheme:light}:root[data-theme=dark]{--font-weight-base:50;color-scheme:dark}@media (prefers-color-scheme:light){:root{--font-weight-base:0;color-scheme:light}}@media (prefers-color-scheme:dark){:root{--font-weight-base:50;color-scheme:dark}}:root{--fluid:calc((100vi - 400px)/(1200 - 400));--rem:.0625rem;--size-0:clamp(2px,calc(2px + (3 - 2)*var(--fluid)),3px);--size-1:clamp(4px,calc(4px + (6 - 4)*var(--fluid)),6px);--size-2:clamp(8px,calc(8px + (10 - 8)*var(--fluid)),10px);--size-3:clamp(12px,calc(12px + (16 - 12)*var(--fluid)),16px);--size-4:clamp(16px,calc(16px + (20 - 16)*var(--fluid)),20px);--size-5:clamp(20px,calc(20px + (25 - 20)*var(--fluid)),25px);--size-6:clamp(26px,calc(26px + (32 - 26)*var(--fluid)),32px);--size-7:clamp(34px,calc(34px + (42 - 34)*var(--fluid)),42px);--size-8:clamp(44px,calc(44px + (55 - 44)*var(--fluid)),55px);--size-9:clamp(56px,calc(56px + (70 - 56)*var(--fluid)),70px);--block-gap-1:var(--size-4);--block-gap-2:var(--size-5);--border-size-1:1px;--border-size-2:2px;--radius-0:var(--size-0);--radius-1:var(--size-1);--radius-2:var(--size-2);--font-size-0:1rem;--font-size-1:clamp(calc(18*var(--rem)),calc((18*var(--rem)) + (20 - 18)*var(--fluid)),calc(20*var(--rem)));--font-size-2:clamp(calc(20*var(--rem)),calc((20*var(--rem)) + (24 - 20)*var(--fluid)),calc(24*var(--rem)));--font-size-3:clamp(calc(22*var(--rem)),calc((22*var(--rem)) + (28 - 22)*var(--fluid)),calc(28*var(--rem)));--font-size-4:clamp(calc(24*var(--rem)),calc((24*var(--rem)) + (34 - 24)*var(--fluid)),calc(34*var(--rem)));--font-size-5:clamp(calc(26*var(--rem)),calc((26*var(--rem)) + (42 - 26)*var(--fluid)),calc(42*var(--rem)));--font-size-6:clamp(calc(32*var(--rem)),calc((32*var(--rem)) + (90 - 32)*var(--fluid)),calc(90*var(--rem)));--font-size:var(--font-size-1);--line-height:1.4;--font-display:"Sora",sans-serif;--font-sans:"Sora",sans-serif;--font-mono:monospace;--focus-outline:var(--border-size-2)solid var(--color-focus)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{color-scheme:light dark;hanging-punctuation:first allow-end last;scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}html:where(.translated-rtl){direction:rtl}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{min-block-size:100svb;min-inline-size:300px}:where(canvas,img,picture,svg,video){border:none;block-size:auto;max-inline-size:100%;display:block}:where(button,input,progress,select,textarea){appearance:none;color:inherit;font:inherit;hanging-punctuation:none;line-height:inherit;text-align:start;touch-action:manipulation;background:0 0;border:none}:where(button){cursor:pointer;user-select:none}:where(textarea){resize:vertical}:where(b,strong){font-weight:var(--font-weight-2)}:where(p,li,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;text-wrap:pretty}:where(abbr)[title]{border:none;text-decoration:none}:where(cite){font-style:normal}:where(small){font-size:inherit}:where(ul,ol,li){list-style:none}:where(dialog,[popover]){color:inherit;background:0 0;border:none;max-block-size:none;max-inline-size:none;margin:auto;position:fixed}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none}@view-transition{navigation: auto;}@property --body-size{syntax:"<length>";inherits:true;initial-value:0}html{accent-color:var(--color-primary);background:var(--color-bg-1);color:var(--color-text);font-family:var(--font-sans);font-weight:var(--font-weight-1);line-height:var(--line-height);scrollbar-color:var(--color-secondary)var(--color-bg-1)}body:where([inert],:has(dialog[open])){overflow:hidden}patchwork-body{flex-direction:column;justify-content:start;min-block-size:100svb;min-inline-size:0;display:flex;container:body/inline-size}patchwork-body>*{--body-size:100cqi;flex:0 auto;min-inline-size:0;max-inline-size:100%}patchwork-body>:where(:last-child:not(:only-child),footer:last-of-type){margin-block-start:auto}patchwork-dialog,patchwork-header,patchwork-hero,patchwork-nav{display:contents}::selection{background:var(--color-tertiary);color:var(--color-bg-1)}a{--color:var(--color-anchor);--underline-opacity:.5;color:var(--color);text-decoration-line:underline;text-decoration-thickness:var(--border-size-1);text-decoration-skip-ink:all;text-decoration-color:color-mix(in oklch,var(--color)calc(100%*var(--underline-opacity)),transparent);text-underline-offset:.15em;transition:color .2s,text-decoration-color .2s}a:active,a:visited{color:var(--color)}a:hover{--color:var(--color-secondary);--underline-opacity:1}a:focus-visible{--color:var(--color-focus);--underline-opacity:0;outline:var(--focus-outline);outline-offset:var(--size-0)}.Anchor{--color:var(--color-anchor);color:var(--color);cursor:pointer;user-select:text;transition:color .2s}.Anchor:hover{--color:var(--color-secondary)}.Anchor:focus-visible{--color:var(--color-focus)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-size:var(--font-size);font-weight:var(--font-weight-2);line-height:var(--line-height);margin:0;margin-block-end:var(--block-gap-1)}:is(h1,h2,h3,h4,h5,h6):last-child{margin-block-end:0}:where(p,ol,ul)+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--grid-row-gap)}h1{--font-size:var(--font-size-5);line-height:1}h2{--font-size:var(--font-size-4);line-height:1.1}h3{--font-size:var(--font-size-3);line-height:1.2}h4{--font-size:var(--font-size-2);line-height:1.3}h5{--font-size:var(--font-size-1)}sup{font-size:var(--font-size-0);vertical-align:top}p{font-size:var(--font-size);max-inline-size:70ch;margin:0;margin-block-end:var(--block-gap-1)}p:last-child{margin-block-end:0}ul,ol{--bullet:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 15 15\"><path d=\"M9.625 5.375L15 7.5 9.625 9.625 7.5 15 5.375 9.625 0 7.5l5.375-2.125L7.5 0z\"/></svg>");--bullet-size:calc(var(--font-size)*var(--line-height));margin-block-end:var(--block-gap-1);list-style:none}:is(ul,ol):last-child{margin-block-end:0}:is(ul,ol) li{font-size:var(--font-size);margin-block-end:var(--size-2);padding-inline-start:calc(var(--bullet-size) + var(--size-2));position:relative}:is(ul,ol) li:last-child{margin-block-end:0}:is(ul,ol) li:before{content:"•";color:#0000;background-color:var(--color-text);mask:var(--bullet)center center/calc(var(--font-size)*.9)auto no-repeat;block-size:var(--bullet-size);inline-size:var(--bullet-size);display:block;position:absolute;inset-block-start:0;inset-inline-start:0}:where(:is(ul,ol)) :is(ul,ol){margin-block-start:var(--size-2)}ol{counter-reset:ol-counter}ol li:before{color:currentColor;content:counter(ol-counter)".";counter-increment:ol-counter;text-align:center;background:0 0;mask:none}pre{font-family:var(--font-mono);margin-block-end:var(--block-gap-1)}pre:last-child{margin-block-end:0}code{font-family:var(--font-mono);color:var(--color-secondary)}:is(small,figcaption){--font-size:var(--font-size-0);font-size:var(--font-size)}.Table{overscroll-behavior-inline:contain;margin-block:var(--block-gap-2);overflow:auto hidden}.Table:first-child{margin-block-start:0}.Table:last-child{margin-block-end:0}table{border-collapse:collapse;inline-size:100%}td,th{border-inline:var(--border-size-1)solid var(--color-bg-4);font-size:var(--font-size-0);padding:var(--size-2);text-align:start}th{font-weight:var(--font-weight-2)}tr{border-block:var(--border-size-1)solid var(--color-bg-4)}.Grid{--grid-columns:10;--grid-column-gap:var(--size-5);--grid-row-gap:var(--size-6);--grid-main:clamp(0px,calc(100% - (var(--grid-column-gap)*2)),1440px);--grid-column:calc((var(--grid-main) - (var(--grid-column-gap)*((var(--grid-columns) - 1))))/var(--grid-columns));--grid-template-basic:[outer-start]auto [inner-start main-start]var(--grid-main)[main-end inner-end]auto [outer-end];--grid-template-advanced:var(--grid-template-basic);--grid-template:var(--grid-template-advanced);align-items:start;column-gap:var(--grid-column-gap);grid-template-columns:var(--grid-template);row-gap:var(--grid-row-gap);inline-size:100%;display:grid;position:relative;container:grid/inline-size}:where(.Grid)>*{grid-column:main-start/main-end}@container body (inline-size>=900px){.Grid{--grid-aside-columns:3;--grid-main-columns:7;--grid-template-advanced:[outer-start]auto [inner-start aside-start]repeat(var(--grid-aside-columns),var(--grid-column))[aside-end main-start]repeat(var(--grid-main-columns),var(--grid-column))[main-end inner-end]auto [outer-end]}}@container body (inline-size>=1200px){.Grid{--grid-aside-columns:2;--grid-main-columns:8}}}@layer components{.Alert{--border-size:var(--border-size-2);--background-padding-box:linear-gradient(to right,var(--color-bg-1),var(--color-bg-2));--background-border-box:linear-gradient(45deg,var(--color-secondary),var(--color-primary));border:var(--border-size)solid var(--color-bg-4);border-radius:var(--radius-2);background:var(--background-padding-box)padding-box,var(--background-border-box)border-box;margin-block:var(--block-gap-2);padding:var(--size-5);text-align:center;border-color:#0000}.Alert:first-child{margin-block-start:0}.Alert:last-child{margin-block-end:0}.Alert>*{max-inline-size:none}.Alert--small{--border-size:1;--font-size:var(--font-size-0);padding:var(--size-3)}.Blockquote{margin-block:var(--block-gap-2);margin-inline:0;padding:0}.Blockquote:first-child{margin-block-start:0}.Blockquote:last-child{margin-block-end:0}.Blockquote>:nth-last-child(1 of p):after{content:close-quote}.Blockquote>:nth-child(1 of p):before{content:open-quote}.Radio,.Checkbox{--background-color:var(--color-bg-2);--border-color:var(--color-primary);--border-radius:var(--radius-1);--border-width:var(--border-size-1);--color:var(--color-text);--opacity-checked:1;--font-size:var(--font-size-0);--line-height:1.4;--size:var(--size-5);--block-size:var(--size);--inline-size:var(--size);display:block;position:relative}:is(.Radio,.Checkbox)>span{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight-1);line-height:var(--line-height);user-select:none;padding-inline-start:calc(var(--inline-size) + (var(--size-2)));display:block}:where(.Button) :is(:is(.Radio,.Checkbox)>span){font-size:inherit;line-height:inherit}:is(.Radio,.Checkbox)>span:after,:is(.Radio,.Checkbox)>span:before{content:"";block-size:var(--block-size);inline-size:var(--inline-size);border-radius:var(--border-radius);display:block;position:absolute;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}:is(.Radio,.Checkbox)>span:before{background-color:var(--background-color);border:var(--border-width)solid var(--border-color)}:is(.Radio,.Checkbox)>span:after{background-color:var(--color-text);opacity:0;transition:opacity .2s}:is(.Radio,.Checkbox) input:checked+span:after{opacity:var(--opacity-checked)}:is(.Radio,.Checkbox) input:focus-visible+span:before{outline:var(--focus-outline);outline-offset:var(--size-0)}:is(.Radio,.Checkbox):has(input:disabled){--border-color:var(--color-text)/.5;--background-color:var(--color-bg-4);--color:var(--color-text)/.5;--opacity-checked:.5;pointer-events:none}.Checkbox{--checkbox-image:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"white\" d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\"/></svg>")}.Checkbox>span:after{mask-image:var(--checkbox-image)}.Checkbox:has([switch]){--inline-size:calc((var(--size)*1.7))}.Checkbox:has([switch])>span:after{--block-size:calc(var(--size)*.7);--inline-size:calc(var(--size)*.7);--border-radius:var(--radius-0);background-image:var(--checkbox-image);background-color:var(--color-text);transform-origin:50%;opacity:.5;transition:background-color .2s,opacity .2s,transform .2s;inset-block-start:50%;inset-inline-start:calc((var(--size) - (var(--size)*.7))*.5);transform:translateY(-50%);mask-image:none}.Checkbox:has([switch]) input:not(:checked)+span:after{background-size:0 0}.Checkbox:has([switch]) input:checked+span:after{background-color:var(--color-primary);transform:translateY(-50%)translate(100%)}.Checkbox:has([switch]) input:checked+span:dir(rtl):after{transform:translateY(-50%)translate(-100%)}.Checkbox:has([switch]) input:disabled+span:after{background-color:var(--color-text);background-size:0 0}.Radio{--block-size:calc(var(--size) + 2px);--inline-size:calc(var(--size) + 2px);--border-radius:100%}.Radio>span:after,.Radio>span:before{inset-inline-start:-1px}.Radio>span:after{--block-size:calc(var(--size)*.6);--inline-size:calc(var(--size)*.6);background:var(--color-text);inset-block-start:50%;inset-inline-start:calc((var(--size) - (var(--size)*.6))*.5);transform:translateY(-50%)}.Range{--background-color:var(--color-bg-4);--color:var(--color-primary);--size:var(--size-5);block-size:var(--size);border-radius:var(--radius-1);inline-size:100%;display:block;overflow:clip}.Range:hover{--color:var(--color-secondary)}.Range:focus-visible{outline:var(--focus-outline);outline-offset:var(--size-0)}.Range:disabled{--color:var(--color-text)/.5;pointer-events:none}.Range::-moz-range-track{background:0 0;background-image:linear-gradient(to right,var(--background-color),var(--background-color));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);block-size:var(--size);inline-size:100%}.Range::-moz-range-thumb{appearance:none;background:var(--color);block-size:var(--size);inline-size:var(--size);border:0;border-radius:100%;transition:background-color .2s}.Range::-webkit-slider-runnable-track{background:0 0;background-image:linear-gradient(to right,var(--background-color),var(--background-color));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);block-size:var(--size);inline-size:100%}.Range::-webkit-slider-thumb{appearance:none;background:var(--color);block-size:var(--size);inline-size:var(--size);border:0;border-radius:100%;transition:background-color .2s}.Progress{--color:var(--color-primary);--size:var(--size-5);background-image:linear-gradient(to right,var(--color-bg-4),var(--color-bg-4));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);border-radius:var(--radius-1);block-size:var(--size);inline-size:100%;display:block;overflow:clip}.Progress::-moz-progress-bar{background:0 0;background-image:linear-gradient(to right,var(--color-secondary),var(--color-primary));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);block-size:var(--size);inline-size:100%}.Progress::-webkit-progress-bar{background:0 0}.Progress::-webkit-progress-value{background:0 0;background-image:linear-gradient(to right,var(--color-secondary),var(--color-primary));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);block-size:var(--size)}.Field{--background-color:var(--color-bg-2);--border-color:var(--color-primary);--border-radius:var(--radius-2);--border-width:var(--border-size-1);--color:var(--color-text);--font-size:var(--font-size-0);--line-height:1.5;--padding-block:var(--size-2);--padding-inline:var(--size-3);appearance:none;background:var(--background-color);border:var(--border-width)solid var(--border-color);border-radius:var(--border-radius);color:var(--color);font-family:var(--font-sans);font-size:var(--font-size);inline-size:100%;line-height:var(--line-height);padding:var(--padding-block)var(--padding-inline);transition:color .2s,border-color .2s;display:block}.Field:hover{--border-color:var(--color-secondary)}.Field:focus-visible{--border-color:var(--color-secondary);outline:var(--focus-outline);outline-offset:var(--size-0)}.Field::placeholder{color:var(--color-text);opacity:.5;font-size:var(--font-size-0)}.Field[disabled]{--background-color:var(--color-bg-3);--border-color:var(--color-bg-4);--color:var(--color-text)/.5;pointer-events:none}.Select{--background-light:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"none\" stroke=\"oklch(15% 0.04 45)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"m2 5 6 6 6-6\"/></svg>");--background-dark:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"none\" stroke=\"oklch(95% 0.04 65)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"m2 5 6 6 6-6\"/></svg>");--background-image:var(--background-light);--background-color:var(--color-bg-2);--border-color:var(--color-primary);--border-radius:var(--radius-2);--border-size:var(--border-size-1);--color:var(--color-text);--font-size:var(--font-size-0);--line-height:1.5;--padding-block:var(--size-2);--padding-inline:var(--size-3);appearance:none;background:var(--background-color);background-image:var(--background-image);background-size:var(--size-4)auto;background-repeat:no-repeat;background-position:right var(--size-3)center;border:var(--border-size)solid var(--border-color);border-radius:var(--border-radius);color:var(--color);font-family:var(--font-sans);font-size:var(--font-size);inline-size:100%;line-height:var(--line-height);padding:var(--padding-block)var(--padding-inline);padding-inline-end:calc(var(--size-4) + (var(--size-3)*2));transition:color .2s,border-color .2s;display:block}.Select:hover{--border-color:var(--color-secondary)}.Select:focus-visible{--border-color:var(--color-secondary);--underline-opacity:0;outline:var(--focus-outline);outline-offset:var(--size-0)}.Select[disabled]{--background-color:var(--color-bg-3);--border-color:var(--color-bg-4);--color:var(--color-text)/.5;pointer-events:none}.Select:dir(rtl){background-position:left var(--size-2)center}@media (prefers-color-scheme:light){.Select{--background-image:var(--background-light)}}@media (prefers-color-scheme:dark){.Select{--background-image:var(--background-dark)}}:where(:root[data-theme=light]) .Select{--background-image:var(--background-light)}:where(:root[data-theme=dark]) .Select{--background-image:var(--background-dark)}body{--button-height:calc((var(--font-size-0)*1.5) + (var(--size-2)*2) + (var(--border-size-1)*2))}.Button{--color:var(--color-primary);--background-padding-box:linear-gradient(to right,var(--color-bg-1),var(--color-bg-1)34%,color-mix(in oklch,var(--color-bg-1)90%,transparent)67%,color-mix(in oklch,var(--color-bg-1)80%,transparent));--background-border-box:linear-gradient(45deg,var(--color-secondary),var(--color-primary));--border-color:var(--color);--border-radius:var(--radius-2);--border-width:var(--border-size-1);--border-opacity:0;--border-mix:color-mix(in oklch,var(--border-color)calc(100%*var(--border-opacity)),transparent);--font-size:var(--font-size-0);--line-height:1.5;--icon-scale:.75;--padding-block:var(--size-2);--padding-inline:var(--size-3);border:var(--border-width)solid var(--border-mix);border-radius:var(--border-radius);background:var(--background-padding-box)padding-box,var(--background-border-box)border-box;color:var(--color);align-items:center;gap:var(--size-2);font-family:var(--font-sans);font-size:var(--font-size);font-weight:var(--font-weight-2);inline-size:fit-content;line-height:var(--line-height);padding:var(--padding-block)var(--padding-inline);text-align:start;background-position:0 0,0 0;background-size:300% 100%,100% 100%;flex-shrink:0;justify-content:center;text-decoration:none;transition:color .2s,border-color .2s,background-position .4s;display:flex}.Button:hover{--color:var(--color-secondary);--border-opacity:1;background-position:100% 0,0 0}.Button:focus-visible{--color:var(--color-focus);--underline-opacity:0;outline:var(--focus-outline);outline-offset:var(--size-0)}.Button:has(.Checkbox input:not(:checked)){--border-color:var(--color-bg-4);--border-opacity:1}.Button:has(.Checkbox input:checked) .Checkbox{--color:var(--color-primary)}.Button:disabled,.Button[disabled],.Button:has([disabled]){--background-color:var(--color-bg-3);--border-color:var(--color-bg-4);--border-opacity:1;--color:var(--color-text)/.5;background:var(--color-bg-3);pointer-events:none}.Button svg{--size:calc(var(--font-size)*var(--line-height));block-size:var(--size);color:currentColor;fill:currentColor;inline-size:var(--size);pointer-events:none;transform:scale(var(--icon-scale));transform-origin:50%;user-select:none;flex:none}.Button-group{margin-block:var(--block-gap-2);flex-wrap:wrap;align-items:center;display:flex}.Button-group>*{flex:none;margin-block:auto}.Button-group .Button:not(:last-of-type){border-start-end-radius:0;border-end-end-radius:0}.Button-group .Button:not(:first-of-type){border-start-start-radius:0;border-end-start-radius:0}:where(.Button-group:has([aria-current=page])) :is(.Button-group .Button):not(:focus-visible,:hover,[aria-current=page],[disabled]){--border-color:var(--color-bg-4);--border-opacity:1}.Button-group .Button[aria-current=page]{z-index:1}.Button-group .Button:focus,.Button-group .Button:hover{z-index:2}.Button-group .Button:disabled,.Button-group .Button[disabled]{z-index:-1}.Button-group .Button+:is(.Button-group .Button){margin-inline-start:calc(-1*var(--border-width))}.Button-group:first-child{margin-block-start:0}.Button-group:last-child{margin-block-end:0}.Button-tabs{margin-block:var(--block-gap-2);flex-wrap:wrap;align-items:center;display:flex}.Button-tabs>*{flex:none;margin-block:auto}.Button-tabs .Button{border-block-end:0;border-end-end-radius:0;border-end-start-radius:0;padding-block-end:calc(var(--padding-block) + var(--border-width))}.Button-tabs .Button[aria-current=page]{z-index:1}.Button-tabs .Button:not([aria-current=page]){background:0 0}.Button-tabs .Button:focus,.Button-tabs .Button:hover{z-index:2}.Button-tabs .Button:disabled,.Button-tabs .Button[disabled]{z-index:-1}.Button-tabs .Button+:is(.Button-tabs .Button){margin-inline-start:calc(-1*var(--border-width))}.Button-tabs:first-child{margin-block-start:0}.Button-tabs:last-child{margin-block-end:0}.Button-pagination{margin-block:var(--block-gap-2);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.Button-pagination>*{flex:none}.Button-pagination:first-child{margin-block-start:0}.Button-pagination:last-child{margin-block-end:0}.Menu{flex-direction:column;align-items:baseline;margin:0;list-style:none;display:flex}.Menu__item{--font-size:var(--font-size-0);border-block-end:var(--border-size-1)solid var(--color-bg-4);inline-size:100%;padding:var(--size-2);margin:0}.Menu__item:before{display:none}.Menu__link{display:block}.Menu__link[aria-current=page]{--color:var(--color-text);--underline-opacity:0}.Card-container{gap:var(--grid-column-gap);grid-template-columns:repeat(6,1fr);display:grid;container:card-container/inline-size}.Card-container>*{grid-column:1/-1}.Card{background-image:linear-gradient(225deg,var(--color-bg-1),color-mix(in oklch,var(--color-bg-3)50%,transparent));border:var(--border-size-1)solid var(--color-bg-4);border-radius:var(--radius-2);padding:var(--size-5)var(--size-6);display:block}.Card>:is(h2,h3){inline-size:fit-content;position:relative}.Card>:is(h2,h3):before{background-image:linear-gradient(to right,var(--color-secondary),color-mix(in oklch,var(--color-primary)50%,transparent)40%,color-mix(in oklch,var(--color-primary)0%,transparent)100%);block-size:var(--border-size-2);content:"";display:block;position:absolute;inset-block-start:100%;inset-inline:0}.Card p{--font-size:var(--font-size-0)}@container card-container (inline-size>=600px) and (inline-size<1000px){.Card{grid-column:auto/span 3}.Card:last-child:nth-child(odd){grid-column:1/-1}}@container card-container (inline-size>=1000px){.Card{grid-column:auto/span 2}}.Code{background:var(--color-bg-2);border:var(--border-size-2)solid var(--color-bg-4);border-radius:var(--radius-2);font-size:var(--font-size-0);margin-block:var(--block-gap-2);overscroll-behavior-inline:contain;padding:0;overflow:auto}.Code:first-child{margin-block-start:0}.Code:last-child{margin-block-end:0}.Code>code{color:var(--color-text);padding:var(--size-5);display:block}.Container{--background-color:var(--color-bg-1);--background-opacity:0;background:color-mix(in oklch,var(--background-color)calc(100%*var(--background-opacity)),transparent);padding-block:var(--grid-row-gap)}.Container>*{grid-column:inner-start/inner-end}.Container>.Container{grid-column:outer-start/outer-end;inline-size:auto}.Container>aside{order:2}.Container>main{order:1}.Container:not([class*=Container--])+.Container:not([class*=Container--]){padding-block-start:0}.Container--dark{--background-color:var(--color-bg-2);--background-opacity:1}.Container--light{--background-color:var(--color-bg-3);--background-opacity:1}@container body (inline-size>=900px){.Container>aside{order:1;grid-column:aside-start/aside-end}.Container>main{order:2;grid-column:main-start/main-end}}.Dialog{overscroll-behavior:contain;place-content:center;block-size:100%;inline-size:100%;inset:0;overflow:auto}.Dialog::backdrop{backdrop-filter:blur(2px);background-color:oklch(0% 0 0/.4)}.Dialog__body{background:var(--color-bg-1);border-radius:var(--radius-2);border:var(--border-size-2)solid var(--color-secondary);margin:var(--size-5)auto;max-inline-size:min(600px,calc(100% - (2*var(--size-5))));padding:var(--size-5)}.Dialog--css-transition{opacity:0;transition:display .4s allow-discrete,opacity .4s,overlay .4s allow-discrete}.Dialog--css-transition::backdrop{transition:background-color .4s,display .4s allow-discrete,overlay .4s allow-discrete;background-color:oklch(0% 0 0/0)}.Dialog--css-transition[open]{opacity:1}.Dialog--css-transition[open]::backdrop{background-color:oklch(0% 0 0/.4)}@starting-style{.Dialog--css-transition[open]{opacity:0}.Dialog--css-transition[open]::backdrop{background-color:oklch(0% 0 0/0)}}:state(opening)>.Dialog .Dialog__body{view-transition-name:--dialog-in}:state(opening)>.Dialog::backdrop{view-transition-name:--backdrop-in}:state(closing)>.Dialog .Dialog__body{view-transition-name:--dialog-out}:state(closing)>.Dialog::backdrop{view-transition-name:--backdrop-out}@keyframes --dialog-in{0%{opacity:0;transform:scale(1.2)}60%{opacity:1}to{transform:translateZ(0)}}@keyframes --dialog-out{to{opacity:0;transform:scale(.9)}}@keyframes --backdrop-in{0%{opacity:0}}@keyframes --backdrop-out{to{opacity:0}}::view-transition-new(--dialog-in){animation:.6s cubic-bezier(.6,2,.6,.8) --dialog-in}::view-transition-old(--dialog-in){animation:none}::view-transition-new(--dialog-out){animation:none}::view-transition-old(--dialog-out){animation:.3s ease-in --dialog-out}::view-transition-new(--backdrop-in){animation:.3s ease-out --backdrop-in}::view-transition-old(--backdrop-in){animation:none}::view-transition-new(--backdrop-out){animation:none}::view-transition-old(--backdrop-out){animation:.3s ease-in --backdrop-out}.Tooltip{background:var(--color-bg-2);border-radius:var(--radius-2);border:var(--border-size-1)solid var(--color-secondary);padding:var(--size-3)}@supports (position-area:end){.Tooltip{margin-inline:0;margin-block:var(--size-2);max-inline-size:calc(100% - var(--size-5));position-area:block-end span-inline-end;position-try-fallbacks:flip-inline;position-try-order:most-inline-size}}.Tooltip p{--font-size:var(--font-size-0)}#tooltip-anchor-1{anchor-name:--tooltip1}#tooltip-1{position-anchor:--tooltip1}.Nav{--grid-template:var(--grid-template-basic);background:var(--color-bg-2);block-size:auto;color:var(--color-text);inline-size:100%;min-block-size:var(--header-height);padding-block-start:var(--header-space);padding-block-end:calc(var(--header-space)*2);display:none;inset:0 0 auto}.Nav:popover-open{display:grid}.Nav.\:popover-open{margin-block-start:calc(-1*var(--header-space));margin-inline:calc(-1*var(--grid-column-gap));width:auto;display:grid}#settings-button{anchor-name:--settings}#settings{position-anchor:--settings;background:var(--color-bg-2);border-radius:var(--radius-2);border:var(--border-size-1)solid var(--color-bg-4);padding:var(--size-2)var(--size-3);margin:auto;inset:0}@supports (inset:anchor(end)){#settings{margin:0;inset:auto;inset-block-start:calc(anchor(end) + var(--size-3));inset-inline-end:anchor(end)}}@supports not (inset:anchor(end)){#settings::backdrop{backdrop-filter:blur(2px);background-color:oklch(0% 0 0/.4)}}@container header (inline-size<500px){.Nav .Button-group{grid-column:main-start/main-end}.Nav [popovertarget=settings]{display:none}#settings{display:contents}}@container header (inline-size>=500px){.Nav{display:contents}.Nav:popover-open{display:contents}.Nav.\:popover-open{display:contents}.Nav .Menu{gap:var(--size-3);flex-direction:row}.Nav .Menu__item{border:0;inline-size:auto;padding:0}@supports not selector(:popover-open){#settings:not(.\:popover-open){display:none}}}body{--header-space:var(--size-5);--header-height:calc((var(--header-space)*2) + var(--button-height))}.Header{--grid-template:var(--grid-template-basic);background:var(--color-bg-2);block-size:var(--header-height);padding-block:var(--header-space);z-index:1;position:relative}.Header__main{align-items:center;gap:var(--size-3);justify-content:space-between;display:flex;container:header/inline-size}.Header__main .Button[popovertarget=nav]{--icon-scale:1;justify-self:end}@container header (inline-size>=500px){.Header__main .Button[popovertarget=nav]{--icon-scale:1;justify-self:end;display:none}}.Header__logo{--underline-opacity:0;font-size:var(--font-size);font-weight:var(--font-weight-1);margin-inline-end:auto;position:relative}.Header__logo:not(:focus-visible,:hover){--color:var(--color-secondary)}.Header__tag{color:var(--color-bg-1);background:var(--color-primary);background-image:linear-gradient(45deg,var(--color-secondary),var(--color-primary));border-radius:var(--radius-2);font-size:var(--font-size-0);font-weight:var(--font-weight-2);padding:var(--size-1)var(--size-2);text-transform:uppercase;transform-origin:0 0;line-height:1;display:block;position:absolute;inset-block-start:0;inset-inline-start:calc(100% + var(--size-2));transform:scale(.75)}.Footer{--color-anchor:var(--color-text-subtle);--grid-template:var(--grid-template-basic);color:var(--color-text-subtle);background:var(--color-bg-2);padding-block:var(--size-7)}.Footer__main{align-items:start;gap:var(--size-3);justify-content:space-between;display:flex}@property --scroll-y{syntax:"<number>";inherits:true;initial-value:0}@property --scroll-dir{syntax:"<number>";inherits:true;initial-value:0}@property --hero-height{syntax:"<length>";inherits:true;initial-value:0}@property --hero-min-height{syntax:"<length>";inherits:true;initial-value:0}@property --hero-max-height{syntax:"<length>";inherits:true;initial-value:0}@property --hero-main-height{syntax:"<length>|<percentage>";inherits:true;initial-value:100%}@property --hero-main-min-height{syntax:"<length>|<percentage>";inherits:true;initial-value:100%}@property --hero-main-max-height{syntax:"<length>|<percentage>";inherits:true;initial-value:100%}@property --hero-offset-top{syntax:"<number>";inherits:true;initial-value:0}@property --hero-offset-height{syntax:"<number>|<percentage>";inherits:true;initial-value:100%}@property --hero-visible{syntax:"<number>";inherits:true;initial-value:1}@property --hero-visible-ratio{syntax:"<number>";inherits:true;initial-value:1}:root{--scroll-y:0;--scroll-dir:1}.Hero{--grid-template:var(--grid-template-basic);--hero-main-space:var(--size-6);--hero-min-height:calc((250/16)*1rem);--hero-max-height:calc((100dvh - var(--header-height))*.618);--hero-height:clamp(var(--hero-min-height),calc(100dvw/1.618),var(--hero-max-height));--hero-visible:min(max(0,var(--hero-offset-height) - (var(--scroll-y) - var(--hero-offset-top))),var(--hero-offset-height));--hero-visible-ratio:calc(var(--hero-visible)/var(--hero-offset-height));--hero-main-min-height:calc(var(--font-size-5) + (var(--hero-main-space)*2));--hero-main-max-height:calc(var(--hero-max-height) + (var(--hero-main-space)*2));--hero-main-height:clamp(var(--hero-main-min-height),calc(1px*(var(--hero-offset-height)*var(--hero-visible-ratio))),var(--hero-main-max-height));--hero-font-size:clamp(var(--font-size-5),calc(var(--font-size-5) + ((var(--font-size-6) - var(--font-size-5))*var(--hero-visible-ratio))),var(--font-size-6));aspect-ratio:1.618;block-size:var(--hero-height);min-block-size:var(--hero-min-height);max-block-size:var(--hero-max-height);align-items:start;position:relative;container:hero/size}.Hero:before{background:var(--color-bg-1);background-image:repeating-conic-gradient(from calc(var(--hero-visible-ratio)*20deg)at 0 100%,var(--color-bg-2)0 10deg,transparent 0 20deg),linear-gradient(225deg,color-mix(in oklch,var(--color-bg-2)50%,transparent),transparent);content:"";block-size:150%;inline-size:100%;display:block;position:absolute;top:0}.Hero:after{background:linear-gradient(to top,var(--color-bg-1),transparent),linear-gradient(to right,var(--color-bg-1),transparent);content:"";block-size:50%;inline-size:100%;display:block;position:absolute;top:100%}.Hero__main{block-size:var(--hero-main-height);min-block-size:var(--hero-main-min-height);max-block-size:var(--hero-main-max-height);padding-block:var(--hero-main-space);transform:translateY(calc(var(--hero-height) - var(--hero-main-height)));grid-template-columns:repeat(5,1fr);place-items:center start;display:grid;position:relative}.Hero__main>*{grid-area:1/1/auto/6;justify-self:start}.Hero__heading{--color1:color-mix(in oklch,var(--color-secondary)calc(100%*var(--hero-visible-ratio)),var(--color-text));--color2:color-mix(in oklch,var(--color-primary)calc(100%*var(--hero-visible-ratio)),var(--color-text));background:linear-gradient(50deg,var(--color1),var(--color2));-webkit-text-fill-color:transparent;font-size:var(--hero-font-size);transform-origin:0 100%;-webkit-background-clip:text;background-clip:text;margin:0}.Hero__intro{--opacity1:max(0,min(1,var(--hero-visible-ratio)));--font-size:var(--font-size-0);margin-top:calc((var(--hero-font-size)/2));opacity:var(--opacity2,var(--opacity1));text-wrap:balance;align-self:start;position:absolute;inset-block-start:50%}@container hero (block-size>300px){.Hero__intro{--font-size:var(--font-size-1)}}@supports (width:calc(1px * pow(1, 1))){.Hero__intro{--opacity2:pow(var(--opacity1),8)}}.List{--border-color:var(--color-bg-4);border:var(--border-size-1)solid var(--border-color);border-radius:var(--radius-2);grid-template-columns:1fr;list-style:none;display:grid}:where(.List)>*{border-block-end:var(--border-size-1)solid var(--border-color);inline-size:100%;min-inline-size:0;padding:var(--size-2)var(--size-3);background:0 0;margin:0}:where(.List)>*:last-child{border-block-end:0}:where(.List)>li:before{display:none}:where(.List>li)>:is(a,button){min-inline-size:100%;text-decoration:none;display:block}:where(.List>li)>:is(a,button):not(:focus-visible,:hover){--color:var(--color-text)}.Stack{grid-gap:var(--block-gap-1);grid-template-columns:1fr;display:grid}.Stack>*{margin-block:0}.Accordion{display:block}.Accordion__header{user-select:none;list-style:none}.Accordion__header::-webkit-details-marker{display:none}.Accordion__header:focus-visible{outline:var(--focus-outline);outline-offset:var(--size-0)}.Swatches{gap:var(--size-2);flex-wrap:wrap;list-style:none;display:flex}.Swatches li{aspect-ratio:1;font-size:var(--font-size-0);max-inline-size:6.25rem;padding:var(--size-2);flex:none;inline-size:100%;margin:0;display:block}.Swatches li:before{display:none}}@layer utility{.bg-default{background-color:var(--color-bg-1)}.bg-dark{background-color:var(--color-bg-2)}.bg-light{background-color:var(--color-bg-3)}.bg-lighter{background-color:var(--color-bg-4)}.bg-text{background-color:var(--color-text)}.bg-text-subtle{background-color:var(--color-text-subtle)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-tertiary{background-color:var(--color-tertiary)}.color-bg{color:var(--color-bg-1)}.color-text{color:var(--color-text)}.color-subtle{color:var(--color-text-subtle)}.color-primary{color:var(--color-primary)}.color-secondary{color:var(--color-secondary)}.color-tertiary{color:var(--color-tertiary)}.space-2xs,.space-xs{--space:var(--size-2)}.space-s{--space:var(--size-3)}.space-m{--space:var(--size-5)}.space-l{--space:var(--size-6)}.mb-start{margin-block-start:var(--space)}.mb-end{margin-block-end:var(--space)}.mb{margin-block:var(--space)}.mb-0{margin-block:0}.mi-start{margin-inline-start:var(--space)}.mi-end{margin-inline-end:var(--space)}.mi{margin-inline:var(--space)}.mi-0{margin-inline:0}.monospace{font-family:var(--font-mono)}.h0{--font-size:var(--font-size-5);font-size:var(--font-size)}.h1{--font-size:var(--font-size-4);font-size:var(--font-size)}.h2{--font-size:var(--font-size-3);font-size:var(--font-size)}.h3{--font-size:var(--font-size-2);font-size:var(--font-size)}.h4,.p{--font-size:var(--font-size-1);font-size:var(--font-size)}.small{--font-size:var(--font-size-0);font-size:var(--font-size)}.text-center{text-align:center}.text-end{text-align:end}.text-start{text-align:start}.va-bottom{vertical-align:bottom}.va-middle{vertical-align:middle}.va-top{vertical-align:top}.gap-2xs{gap:var(--size-1)}.gap-xs{gap:var(--size-2)}.gap-s{gap:var(--size-3)}.gap-m{gap:var(--size-5)}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-shrink-0{flex-shrink:0}.flex-grow-1{flex-grow:1}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.ac-around{align-content:space-around}.ac-between{align-content:space-between}.ac-evenly{align-content:space-evenly}.ac-center{align-content:center}.ac-end{align-content:end}.ac-start{align-content:start}.ac-stretch{align-content:stretch}.ai-baseline{align-items:baseline}.ai-center{align-items:center}.ai-end{align-items:end}.ai-start{align-items:start}.ai-stretch{align-items:stretch}.jc-around{justify-content:space-around}.jc-between{justify-content:space-between}.jc-evenly{justify-content:space-evenly}.jc-center{justify-content:center}.jc-end{justify-content:end}.jc-start{justify-content:start}.jc-stretch{justify-content:stretch}.ji-baseline{justify-items:baseline}.ji-center{justify-items:center}.ji-end{justify-items:end}.ji-start{justify-items:start}.ji-stretch{justify-items:stretch}.hidden,:where(.Checkbox,.Radio) :is(input[type=radio],input[type=checkbox]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}} \ No newline at end of file +@layer base{@font-face{font-family:Sora;src:url(/fonts/Sora-Variable.woff2?v=%DEPLOY_HASH%)format("woff2");font-display:swap;font-weight:100 800;font-style:normal}@property --font-size{syntax:"<length>";inherits:true;initial-value:16px}@property --line-height{syntax:"<number>";inherits:true;initial-value:1.4}:root{--color-bg-1:light-dark(oklch(97% .03 75),oklch(20% .015 275));--color-bg-2:light-dark(oklch(95% .03 75),oklch(15% .015 275));--color-bg-3:light-dark(oklch(93% .04 75),oklch(25% .015 275));--color-bg-4:light-dark(oklch(90% .05 75),oklch(35% .015 275));--color-text:light-dark(oklch(15% .04 45),oklch(95% .04 65));--color-text-subtle:light-dark(oklch(50% .04 45),oklch(65% .04 65));--color-secondary:light-dark(oklch(55% .14 25),oklch(75% .15 25));--color-primary:light-dark(oklch(55% .14 45),oklch(75% .15 45));--color-tertiary:light-dark(oklch(65% .22 0),oklch(90% .12 90));--color-focus:var(--color-tertiary);--color-anchor:var(--color-primary);--font-weight-base:0;--font-weight-1:calc(var(--font-weight-base) + 400);--font-weight-2:calc(var(--font-weight-base) + 600)}:root[data-theme=light]{--font-weight-base:0;color-scheme:light}:root[data-theme=dark]{--font-weight-base:50;color-scheme:dark}@media (prefers-color-scheme:light){:root{--font-weight-base:0;color-scheme:light}}@media (prefers-color-scheme:dark){:root{--font-weight-base:50;color-scheme:dark}}:root{--fluid:calc((100vi - 400px)/(1200 - 400));--rem:.0625rem;--size-0:clamp(2px,calc(2px + (3 - 2)*var(--fluid)),3px);--size-1:clamp(4px,calc(4px + (6 - 4)*var(--fluid)),6px);--size-2:clamp(8px,calc(8px + (10 - 8)*var(--fluid)),10px);--size-3:clamp(12px,calc(12px + (16 - 12)*var(--fluid)),16px);--size-4:clamp(16px,calc(16px + (20 - 16)*var(--fluid)),20px);--size-5:clamp(20px,calc(20px + (25 - 20)*var(--fluid)),25px);--size-6:clamp(26px,calc(26px + (32 - 26)*var(--fluid)),32px);--size-7:clamp(34px,calc(34px + (42 - 34)*var(--fluid)),42px);--size-8:clamp(44px,calc(44px + (55 - 44)*var(--fluid)),55px);--size-9:clamp(56px,calc(56px + (70 - 56)*var(--fluid)),70px);--block-gap-1:var(--size-4);--block-gap-2:var(--size-5);--border-size-1:1px;--border-size-2:2px;--radius-0:var(--size-0);--radius-1:var(--size-1);--radius-2:var(--size-2);--font-size-0:1rem;--font-size-1:clamp(calc(18*var(--rem)),calc((18*var(--rem)) + (20 - 18)*var(--fluid)),calc(20*var(--rem)));--font-size-2:clamp(calc(20*var(--rem)),calc((20*var(--rem)) + (24 - 20)*var(--fluid)),calc(24*var(--rem)));--font-size-3:clamp(calc(22*var(--rem)),calc((22*var(--rem)) + (28 - 22)*var(--fluid)),calc(28*var(--rem)));--font-size-4:clamp(calc(24*var(--rem)),calc((24*var(--rem)) + (34 - 24)*var(--fluid)),calc(34*var(--rem)));--font-size-5:clamp(calc(26*var(--rem)),calc((26*var(--rem)) + (42 - 26)*var(--fluid)),calc(42*var(--rem)));--font-size-6:clamp(calc(32*var(--rem)),calc((32*var(--rem)) + (90 - 32)*var(--fluid)),calc(90*var(--rem)));--font-size:var(--font-size-1);--line-height:1.4;--font-display:"Sora",sans-serif;--font-sans:"Sora",sans-serif;--font-mono:monospace;--focus-outline:var(--border-size-2)solid var(--color-focus)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{color-scheme:light dark;hanging-punctuation:first allow-end last;scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}html:where(.translated-rtl){direction:rtl}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{min-block-size:100svb;min-inline-size:300px}:where(canvas,img,picture,svg,video){border:none;block-size:auto;max-inline-size:100%;display:block}:where(button,input,progress,select,textarea){appearance:none;color:inherit;font:inherit;hanging-punctuation:none;line-height:inherit;text-align:start;touch-action:manipulation;background:0 0;border:none}:where(button){cursor:pointer;user-select:none}:where(textarea){resize:vertical}:where(b,strong){font-weight:var(--font-weight-2)}:where(p,li,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;text-wrap:pretty}:where(abbr)[title]{border:none;text-decoration:none}:where(cite){font-style:normal}:where(small){font-size:inherit}:where(ul,ol,li){list-style:none}:where(dialog,[popover]){color:inherit;background:0 0;border:none;max-block-size:none;max-inline-size:none;margin:auto;position:fixed}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none}@view-transition{navigation: auto;}@property --body-size{syntax:"<length>";inherits:true;initial-value:0}html{accent-color:var(--color-primary);background:var(--color-bg-1);color:var(--color-text);font-family:var(--font-sans);font-weight:var(--font-weight-1);line-height:var(--line-height);scrollbar-color:var(--color-secondary)var(--color-bg-1)}body:where([inert],:has(dialog[open])){overflow:hidden}patchwork-body{flex-direction:column;justify-content:start;min-block-size:100svb;min-inline-size:0;display:flex;container:body/inline-size}patchwork-body>*{--body-size:100cqi;flex:0 auto;min-inline-size:0;max-inline-size:100%}patchwork-body>:where(:last-child:not(:only-child),footer:last-of-type){margin-block-start:auto}patchwork-dialog,patchwork-nav{display:contents}::selection{background:var(--color-tertiary);color:var(--color-bg-1)}a{--color:var(--color-anchor);--underline-opacity:.5;color:var(--color);text-decoration-line:underline;text-decoration-thickness:var(--border-size-1);text-decoration-skip-ink:all;text-decoration-color:color-mix(in oklch,var(--color)calc(100%*var(--underline-opacity)),transparent);text-underline-offset:.15em;transition:color .2s,text-decoration-color .2s}a:active,a:visited{color:var(--color)}a:hover{--color:var(--color-secondary);--underline-opacity:1}a:focus-visible{--color:var(--color-focus);--underline-opacity:0;outline:var(--focus-outline);outline-offset:var(--size-0)}.Anchor{--color:var(--color-anchor);color:var(--color);cursor:pointer;user-select:text;transition:color .2s}.Anchor:hover{--color:var(--color-secondary)}.Anchor:focus-visible{--color:var(--color-focus)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-size:var(--font-size);font-weight:var(--font-weight-2);line-height:var(--line-height);margin:0;margin-block-end:var(--block-gap-1)}:is(h1,h2,h3,h4,h5,h6):last-child{margin-block-end:0}:where(p,ol,ul)+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--grid-row-gap)}h1{--font-size:var(--font-size-5);--line-height:1}h2{--font-size:var(--font-size-4);--line-height:1.1}h3{--font-size:var(--font-size-3);--line-height:1.2}h4{--font-size:var(--font-size-2);--line-height:1.3}h5{--font-size:var(--font-size-1)}sup{font-size:var(--font-size-0);vertical-align:top}p{font-size:var(--font-size);max-inline-size:70ch;margin:0;margin-block-end:var(--block-gap-1)}p:last-child{margin-block-end:0}ul,ol{--bullet:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 15 15\"><path d=\"M9.625 5.375L15 7.5 9.625 9.625 7.5 15 5.375 9.625 0 7.5l5.375-2.125L7.5 0z\"/></svg>");--bullet-size:calc(var(--font-size)*var(--line-height));margin-block-end:var(--block-gap-1);list-style:none}:is(ul,ol):last-child{margin-block-end:0}:is(ul,ol) li{font-size:var(--font-size);margin-block-end:var(--size-2);padding-inline-start:calc(var(--bullet-size) + var(--size-2));position:relative}:is(ul,ol) li:last-child{margin-block-end:0}:is(ul,ol) li:before{content:"•";color:#0000;background-color:var(--color-text);mask:var(--bullet)center center/calc(var(--font-size)*.9)auto no-repeat;block-size:var(--bullet-size);inline-size:var(--bullet-size);display:block;position:absolute;inset-block-start:0;inset-inline-start:0}:where(:is(ul,ol)) :is(ul,ol){margin-block-start:var(--size-2)}ol{counter-reset:ol-counter}ol li:before{color:currentColor;content:counter(ol-counter)".";counter-increment:ol-counter;text-align:center;background:0 0;mask:none}pre{font-family:var(--font-mono);margin-block-end:var(--block-gap-1)}pre:last-child{margin-block-end:0}code{font-family:var(--font-mono);color:var(--color-secondary)}:is(small,figcaption){--font-size:var(--font-size-0);font-size:var(--font-size)}.Table{overscroll-behavior-inline:contain;margin-block:var(--block-gap-2);overflow:auto hidden}.Table:first-child{margin-block-start:0}.Table:last-child{margin-block-end:0}table{border-collapse:collapse;inline-size:100%}td,th{border-inline:var(--border-size-1)solid var(--color-bg-4);font-size:var(--font-size-0);padding:var(--size-2);text-align:start}th{font-weight:var(--font-weight-2)}tr{border-block:var(--border-size-1)solid var(--color-bg-4)}.Grid{--grid-columns:10;--grid-column-gap:var(--size-5);--grid-row-gap:var(--size-6);--grid-main:clamp(0px,calc(100% - (var(--grid-column-gap)*2)),1440px);--grid-column:calc((var(--grid-main) - (var(--grid-column-gap)*((var(--grid-columns) - 1))))/var(--grid-columns));--grid-template-basic:[outer-start]auto [inner-start main-start]var(--grid-main)[main-end inner-end]auto [outer-end];--grid-template-advanced:var(--grid-template-basic);--grid-template:var(--grid-template-advanced);align-items:start;column-gap:var(--grid-column-gap);grid-template-columns:var(--grid-template);row-gap:var(--grid-row-gap);inline-size:100%;display:grid;position:relative;container:grid/inline-size}:where(.Grid)>*{grid-column:main-start/main-end}@container body (inline-size>=900px){.Grid{--grid-aside-columns:3;--grid-main-columns:7;--grid-template-advanced:[outer-start]auto [inner-start aside-start]repeat(var(--grid-aside-columns),var(--grid-column))[aside-end main-start]repeat(var(--grid-main-columns),var(--grid-column))[main-end inner-end]auto [outer-end]}}@container body (inline-size>=1200px){.Grid{--grid-aside-columns:2;--grid-main-columns:8}}}@layer components{.Alert{--border-size:var(--border-size-2);--background-padding-box:linear-gradient(to right,var(--color-bg-1),var(--color-bg-2));--background-border-box:linear-gradient(45deg,var(--color-secondary),var(--color-primary));border:var(--border-size)solid var(--color-bg-4);border-radius:var(--radius-2);background:var(--background-padding-box)padding-box,var(--background-border-box)border-box;margin-block:var(--block-gap-2);padding:var(--size-5);text-align:center;border-color:#0000}.Alert:first-child{margin-block-start:0}.Alert:last-child{margin-block-end:0}.Alert>*{max-inline-size:none}.Alert--small{--border-size:1;--font-size:var(--font-size-0);padding:var(--size-3)}.Blockquote{margin-block:var(--block-gap-2);margin-inline:0;padding:0}.Blockquote:first-child{margin-block-start:0}.Blockquote:last-child{margin-block-end:0}.Blockquote>:nth-last-child(1 of p):after{content:close-quote}.Blockquote>:nth-child(1 of p):before{content:open-quote}.Radio,.Checkbox{--background-color:var(--color-bg-2);--border-color:var(--color-primary);--border-radius:var(--radius-1);--border-width:var(--border-size-1);--color:var(--color-text);--opacity-checked:1;--font-size:var(--font-size-0);--line-height:1.4;--size:var(--size-5);--block-size:var(--size);--inline-size:var(--size);display:block;position:relative}:is(.Radio,.Checkbox)>span{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight-1);line-height:var(--line-height);user-select:none;padding-inline-start:calc(var(--inline-size) + (var(--size-2)));display:block}:where(.Button) :is(:is(.Radio,.Checkbox)>span){font-size:inherit;line-height:inherit}:is(.Radio,.Checkbox)>span:after,:is(.Radio,.Checkbox)>span:before{content:"";block-size:var(--block-size);inline-size:var(--inline-size);border-radius:var(--border-radius);display:block;position:absolute;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}:is(.Radio,.Checkbox)>span:before{background-color:var(--background-color);border:var(--border-width)solid var(--border-color)}:is(.Radio,.Checkbox)>span:after{background-color:var(--color-text);opacity:0;transition:opacity .2s}:is(.Radio,.Checkbox) input:checked+span:after{opacity:var(--opacity-checked)}:is(.Radio,.Checkbox) input:focus-visible+span:before{outline:var(--focus-outline);outline-offset:var(--size-0)}:is(.Radio,.Checkbox):has(input:disabled){--border-color:var(--color-text)/.5;--background-color:var(--color-bg-4);--color:var(--color-text)/.5;--opacity-checked:.5;pointer-events:none}.Checkbox{--checkbox-image:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"white\" d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\"/></svg>")}.Checkbox>span:after{mask-image:var(--checkbox-image)}.Checkbox:has([switch]){--inline-size:calc((var(--size)*1.7))}.Checkbox:has([switch])>span:after{--block-size:calc(var(--size)*.7);--inline-size:calc(var(--size)*.7);--border-radius:var(--radius-0);background-image:var(--checkbox-image);background-color:var(--color-text);transform-origin:50%;opacity:.5;transition:background-color .2s,opacity .2s,transform .2s;inset-block-start:50%;inset-inline-start:calc((var(--size) - (var(--size)*.7))*.5);transform:translateY(-50%);mask-image:none}.Checkbox:has([switch]) input:not(:checked)+span:after{background-size:0 0}.Checkbox:has([switch]) input:checked+span:after{background-color:var(--color-primary);transform:translateY(-50%)translate(100%)}.Checkbox:has([switch]) input:checked+span:dir(rtl):after{transform:translateY(-50%)translate(-100%)}.Checkbox:has([switch]) input:disabled+span:after{background-color:var(--color-text);background-size:0 0}.Radio{--block-size:calc(var(--size) + 2px);--inline-size:calc(var(--size) + 2px);--border-radius:100%}.Radio>span:after,.Radio>span:before{inset-inline-start:-1px}.Radio>span:after{--block-size:calc(var(--size)*.6);--inline-size:calc(var(--size)*.6);background:var(--color-text);inset-block-start:50%;inset-inline-start:calc((var(--size) - (var(--size)*.6))*.5);transform:translateY(-50%)}.Range{--background-color:var(--color-bg-4);--color:var(--color-primary);--size:var(--size-5);block-size:var(--size);border-radius:var(--radius-1);inline-size:100%;display:block;overflow:clip}.Range:hover{--color:var(--color-secondary)}.Range:focus-visible{outline:var(--focus-outline);outline-offset:var(--size-0)}.Range:disabled{--color:var(--color-text)/.5;pointer-events:none}.Range::-moz-range-track{background:0 0;background-image:linear-gradient(to right,var(--background-color),var(--background-color));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);block-size:var(--size);inline-size:100%}.Range::-moz-range-thumb{appearance:none;background:var(--color);block-size:var(--size);inline-size:var(--size);border:0;border-radius:100%;transition:background-color .2s}.Range::-webkit-slider-runnable-track{background:0 0;background-image:linear-gradient(to right,var(--background-color),var(--background-color));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);block-size:var(--size);inline-size:100%}.Range::-webkit-slider-thumb{appearance:none;background:var(--color);block-size:var(--size);inline-size:var(--size);border:0;border-radius:100%;transition:background-color .2s}.Progress{--color:var(--color-primary);--size:var(--size-5);background-image:linear-gradient(to right,var(--color-bg-4),var(--color-bg-4));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);border-radius:var(--radius-1);block-size:var(--size);inline-size:100%;display:block;overflow:clip}.Progress::-moz-progress-bar{background:0 0;background-image:linear-gradient(to right,var(--color-secondary),var(--color-primary));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);block-size:var(--size);inline-size:100%}.Progress::-webkit-progress-bar{background:0 0}.Progress::-webkit-progress-value{background:0 0;background-image:linear-gradient(to right,var(--color-secondary),var(--color-primary));background-position:0%;background-repeat:no-repeat;background-size:100% var(--size-2);block-size:var(--size)}.Field{--background-color:var(--color-bg-2);--border-color:var(--color-primary);--border-radius:var(--radius-2);--border-width:var(--border-size-1);--color:var(--color-text);--font-size:var(--font-size-0);--line-height:1.5;--padding-block:var(--size-2);--padding-inline:var(--size-3);appearance:none;background:var(--background-color);border:var(--border-width)solid var(--border-color);border-radius:var(--border-radius);color:var(--color);font-family:var(--font-sans);font-size:var(--font-size);inline-size:100%;line-height:var(--line-height);padding:var(--padding-block)var(--padding-inline);transition:color .2s,border-color .2s;display:block}.Field:hover{--border-color:var(--color-secondary)}.Field:focus-visible{--border-color:var(--color-secondary);outline:var(--focus-outline);outline-offset:var(--size-0)}.Field::placeholder{color:var(--color-text);opacity:.5;font-size:var(--font-size-0)}.Field[disabled]{--background-color:var(--color-bg-3);--border-color:var(--color-bg-4);--color:var(--color-text)/.5;pointer-events:none}.Select{--background-light:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"none\" stroke=\"oklch(15% 0.04 45)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"m2 5 6 6 6-6\"/></svg>");--background-dark:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"none\" stroke=\"oklch(95% 0.04 65)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"m2 5 6 6 6-6\"/></svg>");--background-image:var(--background-light);--background-color:var(--color-bg-2);--border-color:var(--color-primary);--border-radius:var(--radius-2);--border-size:var(--border-size-1);--color:var(--color-text);--font-size:var(--font-size-0);--line-height:1.5;--padding-block:var(--size-2);--padding-inline:var(--size-3);appearance:none;background:var(--background-color);background-image:var(--background-image);background-size:var(--size-4)auto;background-repeat:no-repeat;background-position:right var(--size-3)center;border:var(--border-size)solid var(--border-color);border-radius:var(--border-radius);color:var(--color);font-family:var(--font-sans);font-size:var(--font-size);inline-size:100%;line-height:var(--line-height);padding:var(--padding-block)var(--padding-inline);padding-inline-end:calc(var(--size-4) + (var(--size-3)*2));transition:color .2s,border-color .2s;display:block}.Select:hover{--border-color:var(--color-secondary)}.Select:focus-visible{--border-color:var(--color-secondary);--underline-opacity:0;outline:var(--focus-outline);outline-offset:var(--size-0)}.Select[disabled]{--background-color:var(--color-bg-3);--border-color:var(--color-bg-4);--color:var(--color-text)/.5;pointer-events:none}.Select:dir(rtl){background-position:left var(--size-2)center}@media (prefers-color-scheme:light){.Select{--background-image:var(--background-light)}}@media (prefers-color-scheme:dark){.Select{--background-image:var(--background-dark)}}:where(:root[data-theme=light]) .Select{--background-image:var(--background-light)}:where(:root[data-theme=dark]) .Select{--background-image:var(--background-dark)}:root{--button-height:calc((var(--font-size-0)*1.5) + (var(--size-2)*2) + (var(--border-size-1)*2))}.Button{--color:var(--color-primary);--background-padding-box:linear-gradient(to right,var(--color-bg-1),var(--color-bg-1)34%,color-mix(in oklch,var(--color-bg-1)90%,transparent)67%,color-mix(in oklch,var(--color-bg-1)80%,transparent));--background-border-box:linear-gradient(45deg,var(--color-secondary),var(--color-primary));--border-color:var(--color);--border-radius:var(--radius-2);--border-width:var(--border-size-1);--border-opacity:0;--border-mix:color-mix(in oklch,var(--border-color)calc(100%*var(--border-opacity)),transparent);--font-size:var(--font-size-0);--line-height:1.5;--icon-scale:.75;--padding-block:var(--size-2);--padding-inline:var(--size-3);border:var(--border-width)solid var(--border-mix);border-radius:var(--border-radius);background:var(--background-padding-box)padding-box,var(--background-border-box)border-box;color:var(--color);align-items:center;gap:var(--size-2);font-family:var(--font-sans);font-size:var(--font-size);font-weight:var(--font-weight-2);inline-size:fit-content;line-height:var(--line-height);padding:var(--padding-block)var(--padding-inline);text-align:start;background-position:0 0,0 0;background-size:300% 100%,100% 100%;flex-shrink:0;justify-content:center;text-decoration:none;transition:color .2s,border-color .2s,background-position .4s;display:flex}.Button:hover{--color:var(--color-secondary);--border-opacity:1;background-position:100% 0,0 0}.Button:focus-visible{--color:var(--color-focus);--underline-opacity:0;outline:var(--focus-outline);outline-offset:var(--size-0)}.Button:has(.Checkbox input:not(:checked)){--border-color:var(--color-bg-4);--border-opacity:1}.Button:has(.Checkbox input:checked) .Checkbox{--color:var(--color-primary)}.Button:disabled,.Button[disabled],.Button:has([disabled]){--background-color:var(--color-bg-3);--border-color:var(--color-bg-4);--border-opacity:1;--color:var(--color-text)/.5;background:var(--color-bg-3);pointer-events:none}.Button svg{--size:calc(var(--font-size)*var(--line-height));block-size:var(--size);color:currentColor;fill:currentColor;inline-size:var(--size);pointer-events:none;transform:scale(var(--icon-scale));transform-origin:50%;user-select:none;flex:none}.Button-group{margin-block:var(--block-gap-2);flex-wrap:wrap;align-items:center;display:flex}.Button-group>*{flex:none;margin-block:auto}.Button-group .Button:not(:last-of-type){border-start-end-radius:0;border-end-end-radius:0}.Button-group .Button:not(:first-of-type){border-start-start-radius:0;border-end-start-radius:0}:where(.Button-group:has([aria-current=page])) :is(.Button-group .Button):not(:focus-visible,:hover,[aria-current=page],[disabled]){--border-color:var(--color-bg-4);--border-opacity:1}.Button-group .Button[aria-current=page]{z-index:1}.Button-group .Button:focus,.Button-group .Button:hover{z-index:2}.Button-group .Button:disabled,.Button-group .Button[disabled]{z-index:-1}.Button-group .Button+:is(.Button-group .Button){margin-inline-start:calc(-1*var(--border-width))}.Button-group:first-child{margin-block-start:0}.Button-group:last-child{margin-block-end:0}.Button-tabs{margin-block:var(--block-gap-2);flex-wrap:wrap;align-items:center;display:flex}.Button-tabs>*{flex:none;margin-block:auto}.Button-tabs .Button{border-block-end:0;border-end-end-radius:0;border-end-start-radius:0;padding-block-end:calc(var(--padding-block) + var(--border-width))}.Button-tabs .Button[aria-current=page]{z-index:1}.Button-tabs .Button:not([aria-current=page]){background:0 0}.Button-tabs .Button:focus,.Button-tabs .Button:hover{z-index:2}.Button-tabs .Button:disabled,.Button-tabs .Button[disabled]{z-index:-1}.Button-tabs .Button+:is(.Button-tabs .Button){margin-inline-start:calc(-1*var(--border-width))}.Button-tabs:first-child{margin-block-start:0}.Button-tabs:last-child{margin-block-end:0}.Button-pagination{margin-block:var(--block-gap-2);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.Button-pagination>*{flex:none}.Button-pagination:first-child{margin-block-start:0}.Button-pagination:last-child{margin-block-end:0}.Menu{flex-direction:column;align-items:baseline;margin:0;list-style:none;display:flex}.Menu__item{--font-size:var(--font-size-0);border-block-end:var(--border-size-1)solid var(--color-bg-4);inline-size:100%;padding:var(--size-2);margin:0}.Menu__item:before{display:none}.Menu__link{display:block}.Menu__link[aria-current=page]{--color:var(--color-text);--underline-opacity:0}.Card-container{gap:var(--grid-column-gap);grid-template-columns:repeat(6,1fr);display:grid;container:card-container/inline-size}.Card-container>*{grid-column:1/-1}.Card{background-image:linear-gradient(225deg,var(--color-bg-1),color-mix(in oklch,var(--color-bg-3)50%,transparent));border:var(--border-size-1)solid var(--color-bg-4);border-radius:var(--radius-2);padding:var(--size-5)var(--size-6);display:block}.Card>:is(h2,h3){inline-size:fit-content;position:relative}.Card>:is(h2,h3):before{background-image:linear-gradient(to right,var(--color-secondary),color-mix(in oklch,var(--color-primary)50%,transparent)40%,color-mix(in oklch,var(--color-primary)0%,transparent)100%);block-size:var(--border-size-2);content:"";display:block;position:absolute;inset-block-start:100%;inset-inline:0}.Card p{--font-size:var(--font-size-0)}@container card-container (inline-size>=600px) and (inline-size<1000px){.Card{grid-column:auto/span 3}.Card:last-child:nth-child(odd){grid-column:1/-1}}@container card-container (inline-size>=1000px){.Card{grid-column:auto/span 2}}.Code{background:var(--color-bg-2);border:var(--border-size-2)solid var(--color-bg-4);border-radius:var(--radius-2);font-size:var(--font-size-0);margin-block:var(--block-gap-2);overscroll-behavior-inline:contain;padding:0;overflow:auto}.Code:first-child{margin-block-start:0}.Code:last-child{margin-block-end:0}.Code>code{color:var(--color-text);padding:var(--size-5);display:block}.Container{--background-color:var(--color-bg-1);--background-opacity:0;background:color-mix(in oklch,var(--background-color)calc(100%*var(--background-opacity)),transparent);padding-block:var(--grid-row-gap)}.Container>*{grid-column:inner-start/inner-end}.Container>.Container{grid-column:outer-start/outer-end;inline-size:auto}.Container>aside{order:2}.Container>main{order:1}.Container:not([class*=Container--])+.Container:not([class*=Container--]){padding-block-start:0}.Container--dark{--background-color:var(--color-bg-2);--background-opacity:1}.Container--light{--background-color:var(--color-bg-3);--background-opacity:1}@container body (inline-size>=900px){.Container>aside{order:1;grid-column:aside-start/aside-end}.Container>main{order:2;grid-column:main-start/main-end}}.Dialog{overscroll-behavior:contain;place-content:center;block-size:100%;inline-size:100%;inset:0;overflow:auto}.Dialog::backdrop{backdrop-filter:blur(2px);background-color:oklch(0% 0 0/.4)}.Dialog__body{background:var(--color-bg-1);border-radius:var(--radius-2);border:var(--border-size-2)solid var(--color-secondary);margin:var(--size-5)auto;max-inline-size:min(600px,calc(100% - (2*var(--size-5))));padding:var(--size-5)}.Dialog--css-transition{opacity:0;transition:display .4s allow-discrete,opacity .4s,overlay .4s allow-discrete}.Dialog--css-transition::backdrop{transition:background-color .4s,display .4s allow-discrete,overlay .4s allow-discrete;background-color:oklch(0% 0 0/0)}.Dialog--css-transition[open]{opacity:1}.Dialog--css-transition[open]::backdrop{background-color:oklch(0% 0 0/.4)}@starting-style{.Dialog--css-transition[open]{opacity:0}.Dialog--css-transition[open]::backdrop{background-color:oklch(0% 0 0/0)}}:state(opening)>.Dialog .Dialog__body{view-transition-name:--dialog-in}:state(opening)>.Dialog::backdrop{view-transition-name:--backdrop-in}:state(closing)>.Dialog .Dialog__body{view-transition-name:--dialog-out}:state(closing)>.Dialog::backdrop{view-transition-name:--backdrop-out}@keyframes --dialog-in{0%{opacity:0;transform:scale(1.2)}60%{opacity:1}to{transform:translateZ(0)}}@keyframes --dialog-out{to{opacity:0;transform:scale(.9)}}@keyframes --backdrop-in{0%{opacity:0}}@keyframes --backdrop-out{to{opacity:0}}::view-transition-new(--dialog-in){animation:.6s cubic-bezier(.6,2,.6,.8) --dialog-in}::view-transition-old(--dialog-in){animation:none}::view-transition-new(--dialog-out){animation:none}::view-transition-old(--dialog-out){animation:.3s ease-in --dialog-out}::view-transition-new(--backdrop-in){animation:.3s ease-out --backdrop-in}::view-transition-old(--backdrop-in){animation:none}::view-transition-new(--backdrop-out){animation:none}::view-transition-old(--backdrop-out){animation:.3s ease-in --backdrop-out}.Tooltip{background:var(--color-bg-2);border-radius:var(--radius-2);border:var(--border-size-1)solid var(--color-secondary);padding:var(--size-3)}@supports (position-area:end){.Tooltip{margin-inline:0;margin-block:var(--size-2);max-inline-size:calc(100% - var(--size-5));position-area:block-end span-inline-end;position-try-fallbacks:flip-inline;position-try-order:most-inline-size}}.Tooltip p{--font-size:var(--font-size-0)}#tooltip-anchor-1{anchor-name:--tooltip1}#tooltip-1{position-anchor:--tooltip1}.Nav{--grid-template:var(--grid-template-basic);background:var(--color-bg-2);block-size:auto;color:var(--color-text);inline-size:100%;min-block-size:var(--header-height);padding-block-start:var(--header-space);padding-block-end:calc(var(--header-space)*2);display:none;inset:0 0 auto}.Nav:popover-open{display:grid}.Nav.\:popover-open{margin-block-start:calc(-1*var(--header-space));margin-inline:calc(-1*var(--grid-column-gap));width:auto;display:grid}#settings-button{anchor-name:--settings}#settings{position-anchor:--settings;background:var(--color-bg-2);border-radius:var(--radius-2);border:var(--border-size-1)solid var(--color-bg-4);padding:var(--size-2)var(--size-3);margin:auto;inset:0}@supports (inset:anchor(end)){#settings{margin:0;inset:auto;inset-block-start:calc(anchor(end) + var(--size-3));inset-inline-end:anchor(end)}}@supports not (inset:anchor(end)){#settings::backdrop{backdrop-filter:blur(2px);background-color:oklch(0% 0 0/.4)}}@container header (inline-size<500px){.Nav .Button-group{grid-column:main-start/main-end}.Nav [popovertarget=settings]{display:none}#settings{display:contents}}@container header (inline-size>=500px){.Nav{display:contents}.Nav:popover-open{display:contents}.Nav.\:popover-open{display:contents}.Nav .Menu{gap:var(--size-3);flex-direction:row}.Nav .Menu__item{border:0;inline-size:auto;padding:0}@supports not selector(:popover-open){#settings:not(.\:popover-open){display:none}}}:root{--header-space:var(--size-5);--header-height:calc((var(--header-space)*2) + var(--button-height))}.Header{--grid-template:var(--grid-template-basic);background:var(--color-bg-2);block-size:var(--header-height);padding-block:var(--header-space);z-index:1;position:relative}.Header__main{align-items:center;gap:var(--size-3);justify-content:space-between;display:flex;container:header/inline-size}.Header__main .Button[popovertarget=nav]{--icon-scale:1;justify-self:end}@container header (inline-size>=500px){.Header__main .Button[popovertarget=nav]{--icon-scale:1;justify-self:end;display:none}}.Header__logo{--underline-opacity:0;font-size:var(--font-size);font-weight:var(--font-weight-1);margin-inline-end:auto;position:relative}.Header__logo:not(:focus-visible,:hover){--color:var(--color-secondary)}.Header__tag{color:var(--color-bg-1);background:var(--color-primary);background-image:linear-gradient(45deg,var(--color-secondary),var(--color-primary));border-radius:var(--radius-2);font-size:var(--font-size-0);font-weight:var(--font-weight-2);padding:var(--size-1)var(--size-2);text-transform:uppercase;transform-origin:0 0;line-height:1;display:block;position:absolute;inset-block-start:0;inset-inline-start:calc(100% + var(--size-2));transform:scale(.75)}.Footer{--color-anchor:var(--color-text-subtle);--grid-template:var(--grid-template-basic);color:var(--color-text-subtle);background:var(--color-bg-2);padding-block:var(--size-7)}.Footer__main{align-items:start;gap:var(--size-3);justify-content:space-between;display:flex}@property --hero-heading-size{syntax:"<length>";inherits:true;initial-value:16px}@property --hero-visibility{syntax:"<number>";inherits:true;initial-value:1}@keyframes --hero{0%{--hero-heading-size:var(--font-size-6);--hero-visibility:1}to{--hero-heading-size:var(--font-size-5);--hero-visibility:0}}.Hero{--grid-template:var(--grid-template-basic);--hero-height:clamp(calc((250/16)*1rem),calc(100dvw/1.618),calc((100dvh - var(--header-height))*.618));--hero-heading-size:var(--font-size-6);aspect-ratio:1.618;block-size:var(--hero-height);align-items:center;position:relative;container:hero/size}.Hero:before{background:var(--color-bg-1);background-image:repeating-conic-gradient(from calc(var(--hero-visibility)*20deg)at 0 100%,var(--color-bg-2)0 10deg,transparent 0 20deg),linear-gradient(225deg,color-mix(in oklch,var(--color-bg-2)50%,transparent),transparent);content:"";block-size:150%;inline-size:100%;display:block;position:absolute;inset-block-start:0}.Hero:after{background:linear-gradient(to top,var(--color-bg-1),transparent),linear-gradient(to right,var(--color-bg-1),transparent);content:"";block-size:50%;inline-size:100%;display:block;position:absolute;inset-block-start:100%}@supports (animation-timeline:view()){.Hero{animation-name:--hero;animation-timing-function:ease-out;animation-timeline:view(block var(--header-height)calc(100% - var(--header-height)))}}.Hero__main{--translate-y:calc((var(--hero-height)/2) - 50% - var(--size-2));transform:translateY(calc(var(--translate-y)*(1 - var(--hero-visibility))));grid-template-columns:repeat(5,1fr);place-items:center start;display:grid;position:relative}.Hero__main>*{grid-column:1/6;justify-self:start}.Hero__heading{--font-size:var(--hero-heading-size);--color1:color-mix(in oklch,var(--color-secondary)calc(100%*var(--hero-visibility)),var(--color-text));--color2:color-mix(in oklch,var(--color-primary)calc(100%*var(--hero-visibility)),var(--color-text));background:linear-gradient(50deg,var(--color1),var(--color2));-webkit-text-fill-color:transparent;background-clip:text;margin:0}.Hero__intro{--font-size:var(--font-size-0);opacity:pow(max(0,min(1,var(--hero-visibility))),8);text-wrap:balance}@container hero (block-size>300px){.Hero__intro{--font-size:var(--font-size-1)}}.List{--border-color:var(--color-bg-4);border:var(--border-size-1)solid var(--border-color);border-radius:var(--radius-2);grid-template-columns:1fr;list-style:none;display:grid}:where(.List)>*{border-block-end:var(--border-size-1)solid var(--border-color);inline-size:100%;min-inline-size:0;padding:var(--size-2)var(--size-3);background:0 0;margin:0}:where(.List)>*:last-child{border-block-end:0}:where(.List)>li:before{display:none}:where(.List>li)>:is(a,button){min-inline-size:100%;text-decoration:none;display:block}:where(.List>li)>:is(a,button):not(:focus-visible,:hover){--color:var(--color-text)}.Stack{grid-gap:var(--block-gap-1);grid-template-columns:1fr;display:grid}.Stack>*{margin-block:0}.Accordion{display:block}.Accordion__header{user-select:none;list-style:none}.Accordion__header::-webkit-details-marker{display:none}.Accordion__header:focus-visible{outline:var(--focus-outline);outline-offset:var(--size-0)}.Swatches{gap:var(--size-2);flex-wrap:wrap;list-style:none;display:flex}.Swatches li{aspect-ratio:1;font-size:var(--font-size-0);max-inline-size:6.25rem;padding:var(--size-2);flex:none;inline-size:100%;margin:0;display:block}.Swatches li:before{display:none}}@layer utility{.bg-default{background-color:var(--color-bg-1)}.bg-dark{background-color:var(--color-bg-2)}.bg-light{background-color:var(--color-bg-3)}.bg-lighter{background-color:var(--color-bg-4)}.bg-text{background-color:var(--color-text)}.bg-text-subtle{background-color:var(--color-text-subtle)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-tertiary{background-color:var(--color-tertiary)}.color-bg{color:var(--color-bg-1)}.color-text{color:var(--color-text)}.color-subtle{color:var(--color-text-subtle)}.color-primary{color:var(--color-primary)}.color-secondary{color:var(--color-secondary)}.color-tertiary{color:var(--color-tertiary)}.space-2xs,.space-xs{--space:var(--size-2)}.space-s{--space:var(--size-3)}.space-m{--space:var(--size-5)}.space-l{--space:var(--size-6)}.mb-start{margin-block-start:var(--space)}.mb-end{margin-block-end:var(--space)}.mb{margin-block:var(--space)}.mb-0{margin-block:0}.mi-start{margin-inline-start:var(--space)}.mi-end{margin-inline-end:var(--space)}.mi{margin-inline:var(--space)}.mi-0{margin-inline:0}.monospace{font-family:var(--font-mono)}.h0{--font-size:var(--font-size-5);font-size:var(--font-size)}.h1{--font-size:var(--font-size-4);font-size:var(--font-size)}.h2{--font-size:var(--font-size-3);font-size:var(--font-size)}.h3{--font-size:var(--font-size-2);font-size:var(--font-size)}.h4,.p{--font-size:var(--font-size-1);font-size:var(--font-size)}.small{--font-size:var(--font-size-0);font-size:var(--font-size)}.text-center{text-align:center}.text-end{text-align:end}.text-start{text-align:start}.va-bottom{vertical-align:bottom}.va-middle{vertical-align:middle}.va-top{vertical-align:top}.gap-2xs{gap:var(--size-1)}.gap-xs{gap:var(--size-2)}.gap-s{gap:var(--size-3)}.gap-m{gap:var(--size-5)}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-shrink-0{flex-shrink:0}.flex-grow-1{flex-grow:1}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.ac-around{align-content:space-around}.ac-between{align-content:space-between}.ac-evenly{align-content:space-evenly}.ac-center{align-content:center}.ac-end{align-content:end}.ac-start{align-content:start}.ac-stretch{align-content:stretch}.ai-baseline{align-items:baseline}.ai-center{align-items:center}.ai-end{align-items:end}.ai-start{align-items:start}.ai-stretch{align-items:stretch}.jc-around{justify-content:space-around}.jc-between{justify-content:space-between}.jc-evenly{justify-content:space-evenly}.jc-center{justify-content:center}.jc-end{justify-content:end}.jc-start{justify-content:start}.jc-stretch{justify-content:stretch}.ji-baseline{justify-items:baseline}.ji-center{justify-items:center}.ji-end{justify-items:end}.ji-start{justify-items:start}.ji-stretch{justify-items:stretch}.hidden,:where(.Checkbox,.Radio) :is(input[type=radio],input[type=checkbox]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}} \ No newline at end of file diff --git a/static/css/base/core.css b/static/css/base/core.css index 0a17973..6057e03 100644 --- a/static/css/base/core.css +++ b/static/css/base/core.css @@ -45,8 +45,6 @@ patchwork-body { } patchwork-dialog, -patchwork-header, -patchwork-hero, patchwork-nav { display: contents; } diff --git a/static/css/base/typography.css b/static/css/base/typography.css index ca180d6..8f98575 100644 --- a/static/css/base/typography.css +++ b/static/css/base/typography.css @@ -76,22 +76,22 @@ h6 { h1 { --font-size: var(--font-size-5); - line-height: 1; + --line-height: 1; } h2 { --font-size: var(--font-size-4); - line-height: 1.1; + --line-height: 1.1; } h3 { --font-size: var(--font-size-3); - line-height: 1.2; + --line-height: 1.2; } h4 { --font-size: var(--font-size-2); - line-height: 1.3; + --line-height: 1.3; } h5 { diff --git a/static/css/components/button.css b/static/css/components/button.css index 936d025..6c816a7 100644 --- a/static/css/components/button.css +++ b/static/css/components/button.css @@ -1,4 +1,4 @@ -body { +:root { --button-height: calc( (var(--font-size-0) * 1.5) + (var(--size-2) * 2) + (var(--border-size-1) * 2) diff --git a/static/css/components/header.css b/static/css/components/header.css index d936c71..433a5df 100644 --- a/static/css/components/header.css +++ b/static/css/components/header.css @@ -1,4 +1,4 @@ -body { +:root { --header-space: var(--size-5); --header-height: calc((var(--header-space) * 2) + var(--button-height)); } diff --git a/static/css/components/hero.css b/static/css/components/hero.css index e58f300..8e20d59 100644 --- a/static/css/components/hero.css +++ b/static/css/components/hero.css @@ -1,140 +1,45 @@ -@property --scroll-y { - syntax: '<number>'; - inherits: true; - initial-value: 0; -} - -@property --scroll-dir { - syntax: '<number>'; - inherits: true; - initial-value: 0; -} - -@property --hero-height { +@property --hero-heading-size { syntax: '<length>'; inherits: true; - initial-value: 0; -} - -@property --hero-min-height { - syntax: '<length>'; - inherits: true; - initial-value: 0; -} - -@property --hero-max-height { - syntax: '<length>'; - inherits: true; - initial-value: 0; -} - -@property --hero-main-height { - syntax: '<length> | <percentage>'; - inherits: true; - initial-value: 100%; -} - -@property --hero-main-min-height { - syntax: '<length> | <percentage>'; - inherits: true; - initial-value: 100%; -} - -@property --hero-main-max-height { - syntax: '<length> | <percentage>'; - inherits: true; - initial-value: 100%; -} - -@property --hero-offset-top { - syntax: '<number>'; - inherits: true; - initial-value: 0; -} - -@property --hero-offset-height { - syntax: '<number> | <percentage>'; - inherits: true; - initial-value: 100%; -} - -@property --hero-visible { - syntax: '<number>'; - inherits: true; - initial-value: 1; + initial-value: 16px; } -@property --hero-visible-ratio { +@property --hero-visibility { syntax: '<number>'; inherits: true; initial-value: 1; } -:root { - --scroll-y: 0; - --scroll-dir: 1; +@keyframes --hero { + 0% { + --hero-heading-size: var(--font-size-6); + --hero-visibility: 1; + } + 100% { + --hero-heading-size: var(--font-size-5); + --hero-visibility: 0; + } } .Hero { --grid-template: var(--grid-template-basic); - - --hero-main-space: var(--size-6); - - --hero-min-height: calc((250 / 16) * 1rem); - --hero-max-height: calc((100dvh - var(--header-height)) * 0.618); - --hero-height: clamp( - var(--hero-min-height), + calc((250 / 16) * 1rem), calc(100dvw / 1.618), - var(--hero-max-height) - ); - - /* Number of pixels visible */ - --hero-visible: min( - max( - 0, - var(--hero-offset-height) - (var(--scroll-y) - var(--hero-offset-top)) - ), - var(--hero-offset-height) - ); - - /* 1 = visible, 0 = invisible */ - --hero-visible-ratio: calc(var(--hero-visible) / var(--hero-offset-height)); - - --hero-main-min-height: calc( - var(--font-size-5) + (var(--hero-main-space) * 2) - ); - --hero-main-max-height: calc( - var(--hero-max-height) + (var(--hero-main-space) * 2) - ); - --hero-main-height: clamp( - var(--hero-main-min-height), - calc(1px * (var(--hero-offset-height) * var(--hero-visible-ratio))), - var(--hero-main-max-height) - ); - - --hero-font-size: clamp( - var(--font-size-5), - calc( - var(--font-size-5) + - ((var(--font-size-6) - var(--font-size-5)) * var(--hero-visible-ratio)) - ), - var(--font-size-6) + calc((100dvh - var(--header-height)) * 0.618) ); - + --hero-heading-size: var(--font-size-6); + align-items: center; aspect-ratio: 1.618 / 1; - align-items: start; block-size: var(--hero-height); container-name: hero; container-type: size; position: relative; - min-block-size: var(--hero-min-height); - max-block-size: var(--hero-max-height); &::before { background: var(--color-bg-1); background-image: repeating-conic-gradient( - from calc(var(--hero-visible-ratio) * 20deg) at 0 100%, + from calc(var(--hero-visibility) * 20deg) at 0 100%, var(--color-bg-2) 0 10deg, transparent 0 20deg ), @@ -144,11 +49,11 @@ transparent ); block-size: 150%; - display: block; content: ''; - position: absolute; - top: 0; + display: block; inline-size: 100%; + inset-block-start: 0; + position: absolute; } &::after { @@ -157,69 +62,62 @@ block-size: 50%; display: block; content: ''; - position: absolute; - top: 100%; inline-size: 100%; + inset-block-start: 100%; + position: absolute; + } + + @supports (animation-timeline: view()) { + /* animation-fill-mode: both; */ + animation-timing-function: ease-out; + animation-name: --hero; + animation-timeline: view( + block var(--header-height) calc(100% - var(--header-height)) + ); } } .Hero__main { + --translate-y: calc((var(--hero-height) / 2) - 50% - var(--size-2)); align-items: center; display: grid; grid-template-columns: repeat(5, 1fr); justify-items: start; - block-size: var(--hero-main-height); - - min-block-size: var(--hero-main-min-height); - max-block-size: var(--hero-main-max-height); - padding-block: var(--hero-main-space); position: relative; - transform: translateY(calc(var(--hero-height) - var(--hero-main-height))); + transform: translateY( + calc(var(--translate-y) * (1 - var(--hero-visibility))) + ); & > * { grid-column: 1 / 6; - grid-row: 1; justify-self: start; } } .Hero__heading { + --font-size: var(--hero-heading-size); --color1: color-mix( in oklch, - var(--color-secondary) calc(100% * var(--hero-visible-ratio)), + var(--color-secondary) calc(100% * var(--hero-visibility)), var(--color-text) ); --color2: color-mix( in oklch, - var(--color-primary) calc(100% * var(--hero-visible-ratio)), + var(--color-primary) calc(100% * var(--hero-visibility)), var(--color-text) ); background: linear-gradient(50deg, var(--color1), var(--color2)); background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-size: var(--hero-font-size); margin: 0; - transform-origin: 0 100%; + -webkit-text-fill-color: transparent; } .Hero__intro { - --opacity1: max(0, min(1, var(--hero-visible-ratio))); --font-size: var(--font-size-0); - align-self: start; - inset-block-start: 50%; - margin-top: calc((var(--hero-font-size) / 2)); - opacity: var(--opacity2, var(--opacity1)); - position: absolute; + opacity: pow(max(0, min(1, var(--hero-visibility))), 8); text-wrap: balance; @container hero (block-size > 300px) { --font-size: var(--font-size-1); } } - -@supports (width: calc(1px * pow(1, 1))) { - .Hero__intro { - --opacity2: pow(var(--opacity1), 8); - } -} diff --git a/static/scripts/patchwork-header.js b/static/scripts/patchwork-header.js deleted file mode 100644 index 9d235cb..0000000 --- a/static/scripts/patchwork-header.js +++ /dev/null @@ -1,35 +0,0 @@ -/// <reference lib="dom" /> -export class Component extends HTMLElement { - #scrollY = 0; - #scrollY2 = 0; - #scrollDir = 1; - - /** @returns {HTMLElement} */ - get root() { - return document.documentElement; - } - - connectedCallback() { - globalThis.addEventListener("load", () => { - this.#onScroll(); - }, { passive: true }); - globalThis.addEventListener("resize", () => { - this.#onScroll(); - }, { passive: true }); - globalThis.addEventListener("scroll", () => { - this.#onScroll(); - }, { passive: true }); - this.#onScroll(); - } - - #onScroll() { - this.#scrollY2 = this.#scrollY; - this.#scrollY = globalThis.scrollY; - this.#scrollDir = Math.max(-1, Math.min(1, this.#scrollY - this.#scrollY2)); - this.#scrollDir = this.#scrollDir === 0 ? 1 : this.#scrollDir; - this.root.style.setProperty("--scroll-y", this.#scrollY); - this.root.style.setProperty("--scroll-dir", this.#scrollDir); - } -} - -customElements.define("patchwork-header", Component); diff --git a/static/scripts/patchwork-hero.js b/static/scripts/patchwork-hero.js deleted file mode 100644 index e1774dc..0000000 --- a/static/scripts/patchwork-hero.js +++ /dev/null @@ -1,31 +0,0 @@ -/// <reference lib="dom" /> -export class Component extends HTMLElement { - #top = 0; - #height = 0; - - /** @returns {HTMLElement} */ - get hero() { - return this.querySelector(".Hero"); - } - - connectedCallback() { - globalThis.addEventListener("load", () => { - this.#onResize(); - }, { passive: true }); - globalThis.addEventListener("resize", () => { - this.#onResize(); - }, { passive: true }); - this.#onResize(); - } - - #onResize() { - requestAnimationFrame(() => { - this.#top = this.hero.offsetTop; - this.#height = this.hero.offsetHeight; - this.hero.style.setProperty("--hero-offset-top", this.#top); - this.hero.style.setProperty("--hero-offset-height", this.#height); - }); - } -} - -customElements.define("patchwork-hero", Component);