From 5a08238ca964f2361e91e6aaa716954d3a4eca7c Mon Sep 17 00:00:00 2001 From: Tobias Wolf Date: Tue, 12 Sep 2023 11:19:41 +0000 Subject: [PATCH] Replaces -- in CSS variables names with - --- blueprint-kirby/public/assets/css/index.css | 2 +- .../public/assets/css/index.css.map | 2 +- .../develop/css/components/a-heading.css | 14 +- blueprint/develop/css/components/a-text.css | 36 ++--- blueprint/develop/css/framework/variables.css | 134 +++++++++--------- blueprint/public/assets/css/index.css | 2 +- blueprint/public/assets/css/index.css.map | 2 +- css/README.md | 6 +- 8 files changed, 99 insertions(+), 99 deletions(-) diff --git a/blueprint-kirby/public/assets/css/index.css b/blueprint-kirby/public/assets/css/index.css index 878b376..a374144 100644 --- a/blueprint-kirby/public/assets/css/index.css +++ b/blueprint-kirby/public/assets/css/index.css @@ -1,2 +1,2 @@ -@font-face{font-display:swap;font-family:FONT_NAME;font-style:normal;font-weight:400;src:url(fonts/font-name-400.woff2) format("woff2"),url(fonts/font-name-400.woff) format("woff")}*{margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none;color-scheme:dark light;font-family:system-ui,sans-serif;font-size:62.5%;line-height:1.5}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{font-size:1.6rem;margin:0;min-block-size:100%;min-block-size:100dvb}dialog{margin:auto}a{color:inherit;text-underline-offset:.2ex}audio,canvas,embed,iframe,img,object,svg,video{display:block}img,picture,svg{block-size:auto;max-inline-size:100%}iframe{border:0}fieldset{border:0;margin:0;padding:0}label{display:block}button,input,textarea{background-color:transparent;border-radius:0;border-style:solid;border-width:1px;color:inherit;font:inherit;line-height:inherit;margin:0;padding:0}input[type=date],input[type=time]{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:inherit}textarea{resize:vertical;resize:block}button{text-align:start}button,summary{border:0;cursor:pointer}hr{-webkit-border-before:1px solid;block-size:0;border:none;border-block-start:1px solid;color:inherit;overflow:visible}summary{display:block}table{border-collapse:collapse}:disabled{cursor:not-allowed}:focus-visible{outline:2px solid Highlight;outline-offset:2px}[hidden]:not([hidden=until-found]){display:none!important}:root{--gap-inline:4rem;--gap-block:4rem;--max-width:160rem;--max-width--content:108rem;--max-width--text:68rem;--font-family:"FONT NAME",sans-serif;--font-family--display:serif;--font-family--heading:serif;--font-size--display-large:9.6rem;--font-size--display-medium:5.2rem;--font-size--display-small:5.2rem;--font-size--display-xsmall:3.6rem;--font-size--heading-xxlarge:4.0rem;--font-size--heading-xlarge:3.6rem;--font-size--heading-large:3.2rem;--font-size--heading-medium:2.8rem;--font-size--heading-small:2.4rem;--font-size--heading-xsmall:2.0rem;--font-size--label-large:1.8rem;--font-size--label-medium:1.6rem;--font-size--label-small:1.4rem;--font-size--label-xsmall:1.2rem;--font-size--paragraphs-large:1.8rem;--font-size--paragraphs-medium:1.6rem;--font-size--paragraphs-small:1.4rem;--font-size--paragraphs-xsmall:1.2rem;--font-size:var(--font-size--paragraphs-medium);--line-height--display-large:0.85714;--line-height--display-medium:0.8125;--line-height--display-small:1;--line-height--display-xsmall:0.81818;--line-height--heading-xxlarge:0.76923;--line-height--heading-xlarge:0.81818;--line-height--heading-large:0.8;--line-height--heading-medium:0.77778;--line-height--heading-small:0.75;--line-height--heading-xsmall:0.71429;--line-height--label-large:0.75;--line-height--label-medium:0.8;--line-height--label-small:0.875;--line-height--label-xsmall:0.75;--line-height--paragraphs-large:1.55556;--line-height--paragraphs-medium:1.5;--line-height--paragraphs-small:1.42857;--line-height--paragraphs-xsmall:1.66667;--line-height:var(--line-height--paragraphs-medium);--font--display-large:700 var(--font-size--display-large)/var(--line-height--display-large) var(--font-family--display);--font--display-medium:700 var(--font-size--display-medium)/var(--line-height--display-medium) var(--font-family--display);--font--display-small:700 var(--font-size--display-small)/var(--line-height--display-small) var(--font-family--display);--font--display-xsmall:700 var(--font-size--display-xsmall)/var(--line-height--display-xsmall) var(--font-family--display);--font--heading-xxlarge:700 var(--font-size--heading-xxlarge)/var(--line-height--heading-xxlarge) var(--font-family--heading);--font--heading-xlarge:700 var(--font-size--heading-xlarge)/var(--line-height--heading-xlarge) var(--font-family--heading);--font--heading-large:700 var(--font-size--heading-large)/var(--line-height--heading-large) var(--font-family--heading);--font--heading-medium:700 var(--font-size--heading-medium)/var(--line-height--heading-medium) var(--font-family--heading);--font--heading-small:700 var(--font-size--heading-small)/var(--line-height--heading-small) var(--font-family--heading);--font--heading-xsmall:700 var(--font-size--heading-xsmall)/var(--line-height--heading-xsmall) var(--font-family--heading);--font--label-large:400 var(--font-size--label-large)/var(--line-height--label-large) var(--font-family);--font--label-medium:400 var(--font-size--label-medium)/var(--line-height--label-medium) var(--font-family);--font--label-small:400 var(--font-size--label-small)/var(--line-height--label-small) var(--font-family);--font--label-xsmall:400 var(--font-size--label-xsmall)/var(--line-height--label-xsmall) var(--font-family);--font--paragraphs-large:400 var(--font-size--paragraphs-large)/var(--line-height--paragraphs-large) var(--font-family);--font--paragraphs-medium:400 var(--font-size--paragraphs-medium)/var(--line-height--paragraphs-medium) var(--font-family);--font--paragraphs-small:400 var(--font-size--paragraphs-small)/var(--line-height--paragraphs-small) var(--font-family);--font--paragraphs-xsmall:400 var(--font-size--paragraphs-xsmall)/var(--line-height--paragraphs-xsmall) var(--font-family);--leter-spacing--display:-0.003em;--color-white:#fff;--color-gray-50:#f2f2f2;--color-gray-100:#e6e6e6;--color-gray-200:#ccc;--color-gray-300:#b3b3b3;--color-gray-400:#999;--color-gray-500:grey;--color-gray-600:#666;--color-gray-700:#4d4d4d;--color-gray-800:#333;--color-gray-900:#1a1a1a;--color-gray-950:#0d0d0d;--color-black:#000;--color-red-50:#ffe6e6;--color-red-100:#fcc;--color-red-200:#f99;--color-red-300:#f66;--color-red-400:#f33;--color-red-500:red;--color-red-600:#c00;--color-red-700:#900;--color-red-800:#600;--color-red-900:#300;--color-yellow-50:#fffde6;--color-yellow-100:#fffbcc;--color-yellow-200:#fff799;--color-yellow-300:#fff266;--color-yellow-400:#fe3;--color-yellow-500:#ffea00;--color-yellow-600:#cb0;--color-yellow-700:#998c00;--color-yellow-800:#665e00;--color-yellow-900:#332f00;--color-primary-a:var(--color-black);--color-primary-b:var(--color-white);--color-negative:var(--color-red-400);--color-warning:var(--color-yellow-400);--color-positive:var(--color-green-400);--color-background-primary:var(--color-primary-b);--color-background-secondary:var(--color-gray-50);--color-background-tertiary:var(--color-gray-100);--color-background-primary-inverse:var(--color-primary-a);--color-background-secondary-inverse:var(--color-gray-800);--color-content-primary:var(--color-black);--color-content-secondary:var(--color-gray-600);--color-content-tertiary:var(--color-gray-500);--color-content-primary-inverse:var(--color-white);--color-content-secondary-inverse:var(--color-gray-300);--color-content-tertiary-inverse:var(--color-gray-400);--color-border-opaque:var(--color-gray-200);--color-border-transparent:color-mix(in hsl,var(--color-primary-a) 8%,transparent);--color-border-selected:var(--color-content-primary);--color-border-opaque-inverse:var(--color-gray-700);--color-border-transparent-inverse:color-mix(in hsl,var(--color-primary-b) 8%,transparent);--color-border-selected-inverse:var(--color-primary-b);--box-shadow:0 1px 10px -10px rgba(0,0,0,.1),0 1.5px 20px -10px rgba(0,0,0,.1),0 2px 30px -10px rgba(0,0,0,.1);--border-radius:0.5rem;--border-radius--button:0.6rem;--border-radius--small:0.4rem}@media (prefers-color-scheme:dark){:root{--color-primary-a:var(--color-gray-100);--color-primary-b:var(--color-gray-900);--color-negative:var(--color-red-600);--color-warning:var(--color-yellow-600);--color-positive:var(--color-green-600);--color-background-primary:var(--color-primary-b);--color-background-secondary:var(--color-gray-900);--color-background-tertiary:var(--color-gray-800);--color-background-primary-inverse:var(--color-gray-200);--color-background-secondary-inverse:var(--color-gray-300);--color-content-primary:var(--color-gray-100);--color-content-secondary:var(--color-gray-200);--color-content-tertiary:var(--color-gray-300);--color-content-primary-inverse:var(--color-black);--color-content-secondary-inverse:var(--color-gray-800);--color-content-tertiary-inverse:var(--color-gray-700);--color-border-opaque:var(--color-gray-900);--color-border-transparent:color-mix(in hsl,var(--color-primary-a) 8%,transparent);--color-border-selected:var(--color-primary-a);--color-border-opaque-inverse:var(--color-gray-700);--color-border-transparent-inverse:color-mix(in hsl,var(--color-primary-b) 20%,transparent);--color-border-selected-inverse:var(--color-primary-b)}}.GRID{--grid-inline:24px;--grid-block:10px;background-image:-webkit-linear-gradient(rgba(0,0,0,.02) var(--grid-block),transparent var(--grid-block)),-webkit-linear-gradient(left,rgba(0,0,0,.02) var(--grid-inline),transparent var(--grid-inline));background-image:linear-gradient(rgba(0,0,0,.02) var(--grid-block),transparent var(--grid-block)),linear-gradient(90deg,rgba(0,0,0,.02) var(--grid-inline),transparent var(--grid-inline));background-position:top,calc(50% - var(--grid-inline)*.5);background-size:100% calc(var(--grid-block)*2),calc(var(--grid-inline)*2) 100%;inset:0;pointer-events:none;position:fixed}.a-heading,.a-heading.-xxlarge,h1.a-heading{font:var(--font--heading-xxlarge)}.a-heading.-xlarge,h2.a-heading{font:var(--font--heading-xlarge)}.a-heading.-large,h3.a-heading{font:var(--font--heading-large)}.a-heading.-medium,h4.a-heading{font:var(--font--heading-medium)}.a-heading.-small,h5.a-heading{font:var(--font--heading-small)}.a-heading.-xsmall,h5.a-heading{font:var(--font--heading-xsmall)}.a-text{--font-size:var(--font-size--paragraphs-medium);--line-height:var(--line-height--paragraphs-medium);font:var(--font--paragraphs-medium)}.a-text>h1{font:var(--font--heading-xxlarge)}.a-text>h2{font:var(--font--heading-xlarge)}.a-text>h3{font:var(--font--heading-large)}.a-text>h4{font:var(--font--heading-medium)}.a-text>h5{font:var(--font--heading-small)}.a-text>h6{font:var(--font--heading-xsmall)}.a-text>*+*{-webkit-margin-before:calc(var(--gap-block)*.75 + var(--typo-margin-top) + var(--typo-margin-bottom));margin-block-start:calc(var(--gap-block)*.75 + var(--typo-margin-top) + var(--typo-margin-bottom))}.a-text.-large{--font-size:var(--font-size--paragraphs-large);--line-height:var(--line-height--paragraphs-large);font:var(--font--paragraphs-large)}.a-text.-small{--font-size:var(--font-size--paragraphs-small);--line-height:var(--line-height--paragraphs-small);font:var(--font--paragraphs-small)}.a-text.-xsmall{--font-size:var(--font-size--paragraphs-xsmall);--line-height:var(--line-height--paragraphs-xsmall);font:var(--font--paragraphs-xsmall)}.a-text+.a-text{-webkit-margin-before:calc(var(--font-size)*var(--line-height));margin-block-start:calc(var(--font-size)*var(--line-height))}.a-heading+.a-text,.a-text.-large+.a-text{-webkit-margin-before:var(--gap-block);margin-block-start:var(--gap-block)}:root{--typo-cap-height:0.705;--typo-shoulder:calc(1 - var(--typo-cap-height));--typo-whitespace-top:0.17;--typo-whitespace-bottom:calc(var(--typo-shoulder) - var(--typo-whitespace-top))}.a-trim-leading{--typo-leading-remainder:calc((var(--line-height) - 1)/2);--typo-leading-top:calc(var(--typo-whitespace-top) + var(--typo-leading-remainder));--typo-leading-bottom:calc(var(--typo-whitespace-bottom) + var(--typo-leading-remainder));--typo-margin-top:calc(var(--typo-leading-top)*-1*var(--font-size));--typo-margin-bottom:calc(var(--typo-leading-bottom)*-1*var(--font-size));display:flow-root}.a-trim-leading:after,.a-trim-leading:before{content:"";display:block;visibility:hidden}.a-trim-leading:before{-webkit-margin-before:var(--typo-margin-top);margin-block-start:var(--typo-margin-top)}.a-trim-leading:after{-webkit-margin-after:var(--typo-margin-bottom);margin-block-end:var(--typo-margin-bottom)}.a-visually-hidden{border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.o-article{align-self:center;max-width:var(--max-width-content);padding-inline:var(--gap-inline)}.o-footer{-webkit-margin-before:auto;margin-block-start:auto}.t-default{-webkit-box-orient:vertical;-webkit-box-direction:normal;align-content:start;display:-webkit-box;display:flex;flex-direction:column} +@font-face{font-display:swap;font-family:FONT_NAME;font-style:normal;font-weight:400;src:url(fonts/font-name-400.woff2) format("woff2"),url(fonts/font-name-400.woff) format("woff")}*{margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none;color-scheme:dark light;font-family:system-ui,sans-serif;font-size:62.5%;line-height:1.5}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{font-size:1.6rem;margin:0;min-block-size:100%;min-block-size:100dvb}dialog{margin:auto}a{color:inherit;text-underline-offset:.2ex}audio,canvas,embed,iframe,img,object,svg,video{display:block}img,picture,svg{block-size:auto;max-inline-size:100%}iframe{border:0}fieldset{border:0;margin:0;padding:0}label{display:block}button,input,textarea{background-color:transparent;border-radius:0;border-style:solid;border-width:1px;color:inherit;font:inherit;line-height:inherit;margin:0;padding:0}input[type=date],input[type=time]{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:inherit}textarea{resize:vertical;resize:block}button{text-align:start}button,summary{border:0;cursor:pointer}hr{-webkit-border-before:1px solid;block-size:0;border:none;border-block-start:1px solid;color:inherit;overflow:visible}summary{display:block}table{border-collapse:collapse}:disabled{cursor:not-allowed}:focus-visible{outline:2px solid Highlight;outline-offset:2px}[hidden]:not([hidden=until-found]){display:none!important}:root{--gap-inline:4rem;--gap-block:4rem;--max-width:160rem;--max-width-content:108rem;--max-width-text:68rem;--font-family:"FONT NAME",sans-serif;--font-family-display:serif;--font-family-heading:serif;--font-size-display-large:9.6rem;--font-size-display-medium:5.2rem;--font-size-display-small:5.2rem;--font-size-display-xsmall:3.6rem;--font-size-heading-xxlarge:4.0rem;--font-size-heading-xlarge:3.6rem;--font-size-heading-large:3.2rem;--font-size-heading-medium:2.8rem;--font-size-heading-small:2.4rem;--font-size-heading-xsmall:2.0rem;--font-size-label-large:1.8rem;--font-size-label-medium:1.6rem;--font-size-label-small:1.4rem;--font-size-label-xsmall:1.2rem;--font-size-paragraphs-large:1.8rem;--font-size-paragraphs-medium:1.6rem;--font-size-paragraphs-small:1.4rem;--font-size-paragraphs-xsmall:1.2rem;--font-size:var(--font-size-paragraphs-medium);--line-height-display-large:0.85714;--line-height-display-medium:0.8125;--line-height-display-small:1;--line-height-display-xsmall:0.81818;--line-height-heading-xxlarge:0.76923;--line-height-heading-xlarge:0.81818;--line-height-heading-large:0.8;--line-height-heading-medium:0.77778;--line-height-heading-small:0.75;--line-height-heading-xsmall:0.71429;--line-height-label-large:0.75;--line-height-label-medium:0.8;--line-height-label-small:0.875;--line-height-label-xsmall:0.75;--line-height-paragraphs-large:1.55556;--line-height-paragraphs-medium:1.5;--line-height-paragraphs-small:1.42857;--line-height-paragraphs-xsmall:1.66667;--line-height:var(--line-height-paragraphs-medium);--font-display-large:700 var(--font-size-display-large)/var(--line-height-display-large) var(--font-family-display);--font-display-medium:700 var(--font-size-display-medium)/var(--line-height-display-medium) var(--font-family-display);--font-display-small:700 var(--font-size-display-small)/var(--line-height-display-small) var(--font-family-display);--font-display-xsmall:700 var(--font-size-display-xsmall)/var(--line-height-display-xsmall) var(--font-family-display);--font-heading-xxlarge:700 var(--font-size-heading-xxlarge)/var(--line-height-heading-xxlarge) var(--font-family-heading);--font-heading-xlarge:700 var(--font-size-heading-xlarge)/var(--line-height-heading-xlarge) var(--font-family-heading);--font-heading-large:700 var(--font-size-heading-large)/var(--line-height-heading-large) var(--font-family-heading);--font-heading-medium:700 var(--font-size-heading-medium)/var(--line-height-heading-medium) var(--font-family-heading);--font-heading-small:700 var(--font-size-heading-small)/var(--line-height-heading-small) var(--font-family-heading);--font-heading-xsmall:700 var(--font-size-heading-xsmall)/var(--line-height-heading-xsmall) var(--font-family-heading);--font-label-large:400 var(--font-size-label-large)/var(--line-height-label-large) var(--font-family);--font-label-medium:400 var(--font-size-label-medium)/var(--line-height-label-medium) var(--font-family);--font-label-small:400 var(--font-size-label-small)/var(--line-height-label-small) var(--font-family);--font-label-xsmall:400 var(--font-size-label-xsmall)/var(--line-height-label-xsmall) var(--font-family);--font-paragraphs-large:400 var(--font-size-paragraphs-large)/var(--line-height-paragraphs-large) var(--font-family);--font-paragraphs-medium:400 var(--font-size-paragraphs-medium)/var(--line-height-paragraphs-medium) var(--font-family);--font-paragraphs-small:400 var(--font-size-paragraphs-small)/var(--line-height-paragraphs-small) var(--font-family);--font-paragraphs-xsmall:400 var(--font-size-paragraphs-xsmall)/var(--line-height-paragraphs-xsmall) var(--font-family);--leter-spacing-display:-0.003em;--color-white:#fff;--color-gray-50:#f2f2f2;--color-gray-100:#e6e6e6;--color-gray-200:#ccc;--color-gray-300:#b3b3b3;--color-gray-400:#999;--color-gray-500:grey;--color-gray-600:#666;--color-gray-700:#4d4d4d;--color-gray-800:#333;--color-gray-900:#1a1a1a;--color-gray-950:#0d0d0d;--color-black:#000;--color-red-50:#ffe6e6;--color-red-100:#fcc;--color-red-200:#f99;--color-red-300:#f66;--color-red-400:#f33;--color-red-500:red;--color-red-600:#c00;--color-red-700:#900;--color-red-800:#600;--color-red-900:#300;--color-yellow-50:#fffde6;--color-yellow-100:#fffbcc;--color-yellow-200:#fff799;--color-yellow-300:#fff266;--color-yellow-400:#fe3;--color-yellow-500:#ffea00;--color-yellow-600:#cb0;--color-yellow-700:#998c00;--color-yellow-800:#665e00;--color-yellow-900:#332f00;--color-primary-a:var(--color-black);--color-primary-b:var(--color-white);--color-negative:var(--color-red-400);--color-warning:var(--color-yellow-400);--color-positive:var(--color-green-400);--color-background-primary:var(--color-primary-b);--color-background-secondary:var(--color-gray-50);--color-background-tertiary:var(--color-gray-100);--color-background-primary-inverse:var(--color-primary-a);--color-background-secondary-inverse:var(--color-gray-800);--color-content-primary:var(--color-black);--color-content-secondary:var(--color-gray-600);--color-content-tertiary:var(--color-gray-500);--color-content-primary-inverse:var(--color-white);--color-content-secondary-inverse:var(--color-gray-300);--color-content-tertiary-inverse:var(--color-gray-400);--color-border-opaque:var(--color-gray-200);--color-border-transparent:color-mix(in hsl,var(--color-primary-a) 8%,transparent);--color-border-selected:var(--color-content-primary);--color-border-opaque-inverse:var(--color-gray-700);--color-border-transparent-inverse:color-mix(in hsl,var(--color-primary-b) 8%,transparent);--color-border-selected-inverse:var(--color-primary-b);--box-shadow:0 1px 10px -10px rgba(0,0,0,.1),0 1.5px 20px -10px rgba(0,0,0,.1),0 2px 30px -10px rgba(0,0,0,.1);--border-radius:0.5rem;--border-radius-button:0.6rem;--border-radius-small:0.4rem}@media (prefers-color-scheme:dark){:root{--color-primary-a:var(--color-gray-100);--color-primary-b:var(--color-gray-900);--color-negative:var(--color-red-600);--color-warning:var(--color-yellow-600);--color-positive:var(--color-green-600);--color-background-primary:var(--color-primary-b);--color-background-secondary:var(--color-gray-900);--color-background-tertiary:var(--color-gray-800);--color-background-primary-inverse:var(--color-gray-200);--color-background-secondary-inverse:var(--color-gray-300);--color-content-primary:var(--color-gray-100);--color-content-secondary:var(--color-gray-200);--color-content-tertiary:var(--color-gray-300);--color-content-primary-inverse:var(--color-black);--color-content-secondary-inverse:var(--color-gray-800);--color-content-tertiary-inverse:var(--color-gray-700);--color-border-opaque:var(--color-gray-900);--color-border-transparent:color-mix(in hsl,var(--color-primary-a) 8%,transparent);--color-border-selected:var(--color-primary-a);--color-border-opaque-inverse:var(--color-gray-700);--color-border-transparent-inverse:color-mix(in hsl,var(--color-primary-b) 20%,transparent);--color-border-selected-inverse:var(--color-primary-b)}}.GRID{--grid-inline:24px;--grid-block:10px;background-image:-webkit-linear-gradient(rgba(0,0,0,.02) var(--grid-block),transparent var(--grid-block)),-webkit-linear-gradient(left,rgba(0,0,0,.02) var(--grid-inline),transparent var(--grid-inline));background-image:linear-gradient(rgba(0,0,0,.02) var(--grid-block),transparent var(--grid-block)),linear-gradient(90deg,rgba(0,0,0,.02) var(--grid-inline),transparent var(--grid-inline));background-position:top,calc(50% - var(--grid-inline)*.5);background-size:100% calc(var(--grid-block)*2),calc(var(--grid-inline)*2) 100%;inset:0;pointer-events:none;position:fixed}.a-heading,.a-heading.-xxlarge,h1.a-heading{font:var(--font-heading-xxlarge)}.a-heading.-xlarge,h2.a-heading{font:var(--font-heading-xlarge)}.a-heading.-large,h3.a-heading{font:var(--font-heading-large)}.a-heading.-medium,h4.a-heading{font:var(--font-heading-medium)}.a-heading.-small,h5.a-heading{font:var(--font-heading-small)}.a-heading.-xsmall,h5.a-heading{font:var(--font-heading-xsmall)}.a-text{--font-size:var(--font-size-paragraphs-medium);--line-height:var(--line-height-paragraphs-medium);font:var(--font-paragraphs-medium)}.a-text>h1{font:var(--font-heading-xxlarge)}.a-text>h2{font:var(--font-heading-xlarge)}.a-text>h3{font:var(--font-heading-large)}.a-text>h4{font:var(--font-heading-medium)}.a-text>h5{font:var(--font-heading-small)}.a-text>h6{font:var(--font-heading-xsmall)}.a-text>*+*{-webkit-margin-before:calc(var(--gap-block)*.75 + var(--typo-margin-top) + var(--typo-margin-bottom));margin-block-start:calc(var(--gap-block)*.75 + var(--typo-margin-top) + var(--typo-margin-bottom))}.a-text.-large{--font-size:var(--font-size-paragraphs-large);--line-height:var(--line-height-paragraphs-large);font:var(--font-paragraphs-large)}.a-text.-small{--font-size:var(--font-size-paragraphs-small);--line-height:var(--line-height-paragraphs-small);font:var(--font-paragraphs-small)}.a-text.-xsmall{--font-size:var(--font-size-paragraphs-xsmall);--line-height:var(--line-height-paragraphs-xsmall);font:var(--font-paragraphs-xsmall)}.a-text+.a-text{-webkit-margin-before:calc(var(--font-size)*var(--line-height));margin-block-start:calc(var(--font-size)*var(--line-height))}.a-heading+.a-text,.a-text.-large+.a-text{-webkit-margin-before:var(--gap-block);margin-block-start:var(--gap-block)}:root{--typo-cap-height:0.705;--typo-shoulder:calc(1 - var(--typo-cap-height));--typo-whitespace-top:0.17;--typo-whitespace-bottom:calc(var(--typo-shoulder) - var(--typo-whitespace-top))}.a-trim-leading{--typo-leading-remainder:calc((var(--line-height) - 1)/2);--typo-leading-top:calc(var(--typo-whitespace-top) + var(--typo-leading-remainder));--typo-leading-bottom:calc(var(--typo-whitespace-bottom) + var(--typo-leading-remainder));--typo-margin-top:calc(var(--typo-leading-top)*-1*var(--font-size));--typo-margin-bottom:calc(var(--typo-leading-bottom)*-1*var(--font-size));display:flow-root}.a-trim-leading:after,.a-trim-leading:before{content:"";display:block;visibility:hidden}.a-trim-leading:before{-webkit-margin-before:var(--typo-margin-top);margin-block-start:var(--typo-margin-top)}.a-trim-leading:after{-webkit-margin-after:var(--typo-margin-bottom);margin-block-end:var(--typo-margin-bottom)}.a-visually-hidden{border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.o-article{align-self:center;max-width:var(--max-width-content);padding-inline:var(--gap-inline)}.o-footer{-webkit-margin-before:auto;margin-block-start:auto}.t-default{-webkit-box-orient:vertical;-webkit-box-direction:normal;align-content:start;display:-webkit-box;display:flex;flex-direction:column} /*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/blueprint-kirby/public/assets/css/index.css.map b/blueprint-kirby/public/assets/css/index.css.map index c6485a4..746764d 100644 --- a/blueprint-kirby/public/assets/css/index.css.map +++ b/blueprint-kirby/public/assets/css/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../../../blueprint/develop/css/fonts/FONT_NAME.css","../../../../blueprint/develop/css/framework/reset.css","../../../../blueprint/develop/css/framework/variables.css","../../../../blueprint/develop/css/framework/GRID.css","../../../../blueprint/develop/css/components/a-heading.css","../../../../blueprint/develop/css/components/a-text.css","../../../../blueprint/develop/css/components/a-trim-leading.css","../../../../blueprint/develop/css/components/a-visually-hidden.css","../../../../blueprint/develop/css/components/o-article.css","../../../../blueprint/develop/css/components/o-footer.css","../../../../blueprint/develop/css/components/t-default.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["@font-face {\n\tfont-family: 'FONT_NAME';\n\tsrc: url('fonts/font-name-400.woff2') format('woff2'), url('fonts/font-name-400.woff') format('woff');\n\tfont-weight: 400;\n\tfont-display: swap; /* optional for “main” font weight */\n\tfont-style: normal;\n}\n","* {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nhtml {\n\tfont-family: system-ui, sans-serif;\n\t/* 1rem equals 10px, when 16px is default font-size */\n\tfont-size: 62.5%;\n\tline-height: 1.5;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\t-webkit-text-size-adjust: none;\n\tcolor-scheme: dark light;\n}\n@media (prefers-reduced-motion: no-preference) {\n\thtml {\n\t\tscroll-behavior: smooth;\n\t}\n}\n\nbody {\n\tmargin: 0;\n\tmin-block-size: 100%;\n\tmin-block-size: 100dvb;\n\tfont-size: 1.6rem;\n}\n\ndialog {\n\tmargin: auto;\n}\n\na {\n\tcolor: inherit;\n\ttext-underline-offset: 0.2ex;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nimg, picture, svg {\n\tmax-inline-size: 100%;\n\tblock-size: auto;\n}\n\niframe {\n\tborder: 0;\n}\n\nfieldset {\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput,\ntextarea,\nbutton {\n\tmargin: 0;\n\tborder-radius: 0;\n\tpadding: 0;\n\tfont: inherit;\n\tline-height: inherit;\n\tcolor: inherit;\n\tborder-width: 1px;\n\tborder-style: solid;\n\tbackground-color: transparent;\n}\n\ninput[type=\"date\"],\ninput[type=\"time\"] {\n\tappearance: none;\n\n\t&::-webkit-date-and-time-value {\n\t\ttext-align: inherit;\n\t}\n\t/* ::-webkit-calendar-picker-indicator {\n\t\tdisplay: none;\n\t} */\n}\n\ntextarea {\n\tresize: vertical;\n\tresize: block;\n}\n\nbutton {\n\ttext-align: start;\n}\n\nbutton, summary {\n\tborder: 0;\n\tcursor: pointer;\n}\n\nhr {\n\tborder: none;\n\tborder-block-start: 1px solid;\n\tcolor: inherit;\n\tblock-size: 0;\n\toverflow: visible;\n}\n\nsummary {\n\tdisplay: block;\n}\n\ntable {\n\tborder-collapse: collapse;\n}\n\n:disabled {\n\tcursor: not-allowed;\n}\n\n:focus-visible {\n\toutline: 2px solid Highlight;\n\toutline-offset: 2px;\n}\n\n[hidden]:not([hidden=\"until-found\"]) {\n\tdisplay: none !important;\n}\n","/* Naming of colors and fonts inspired by Uber Base (https://base.uber.com/6d2425e9f/p/8898fb-color-legacy/b/065744) */\n\n:root {\n\t/**\n\t * 1rem equals to 10px.\n\t * Each size should divide by 4.\n\t */\n\n\t/* Grid */\n\t--gap-inline: 4rem;\n\t--gap-block: 4rem;\n\n\t/* Sizes */\n\t--max-width: 160rem;\n\t--max-width--content: 108rem;\n\t--max-width--text: 68rem;\n\n\t/* Typography */\n\t--font-family: 'FONT NAME', sans-serif;\n\t--font-family--display: serif;\n\t--font-family--heading: serif;\n\n\t--font-size--display-large: 9.6rem;\n\t--font-size--display-medium: 5.2rem;\n\t--font-size--display-small: 5.2rem;\n\t--font-size--display-xsmall: 3.6rem;\n\t--font-size--heading-xxlarge: 4.0rem;\n\t--font-size--heading-xlarge: 3.6rem;\n\t--font-size--heading-large: 3.2rem;\n\t--font-size--heading-medium: 2.8rem;\n\t--font-size--heading-small: 2.4rem;\n\t--font-size--heading-xsmall: 2.0rem;\n\t--font-size--label-large: 1.8rem;\n\t--font-size--label-medium: 1.6rem;\n\t--font-size--label-small: 1.4rem;\n\t--font-size--label-xsmall: 1.2rem;\n\t--font-size--paragraphs-large: 1.8rem;\n\t--font-size--paragraphs-medium: 1.6rem;\n\t--font-size--paragraphs-small: 1.4rem;\n\t--font-size--paragraphs-xsmall: 1.2rem;\n\t--font-size: var(--font-size--paragraphs-medium);\n\n\t--line-height--display-large: calc(96 / 112);\n\t--line-height--display-medium: calc(52 / 64);\n\t--line-height--display-small: calc(52 / 52);\n\t--line-height--display-xsmall: calc(36 / 44);\n\t--line-height--heading-xxlarge: calc(40 / 52);\n\t--line-height--heading-xlarge: calc(36 / 44);\n\t--line-height--heading-large: calc(32 / 40);\n\t--line-height--heading-medium: calc(28 / 36);\n\t--line-height--heading-small: calc(24 / 32);\n\t--line-height--heading-xsmall: calc(20 / 28);\n\t--line-height--label-large: calc(18 / 24);\n\t--line-height--label-medium: calc(16 / 20);\n\t--line-height--label-small: calc(14 / 16);\n\t--line-height--label-xsmall: calc(12 / 16);\n\t--line-height--paragraphs-large: calc(28 / 18);\n\t--line-height--paragraphs-medium: calc(24 / 16);\n\t--line-height--paragraphs-small: calc(20 / 14);\n\t--line-height--paragraphs-xsmall: calc(20 / 12);\n\t--line-height: var(--line-height--paragraphs-medium);\n\n\t--font--display-large: 700 var(--font-size--display-large)/var(--line-height--display-large) var(--font-family--display);\n\t--font--display-medium: 700 var(--font-size--display-medium)/var(--line-height--display-medium) var(--font-family--display);\n\t--font--display-small: 700 var(--font-size--display-small)/var(--line-height--display-small) var(--font-family--display);\n\t--font--display-xsmall: 700 var(--font-size--display-xsmall)/var(--line-height--display-xsmall) var(--font-family--display);\n\t--font--heading-xxlarge: 700 var(--font-size--heading-xxlarge)/var(--line-height--heading-xxlarge) var(--font-family--heading);\n\t--font--heading-xlarge: 700 var(--font-size--heading-xlarge)/var(--line-height--heading-xlarge) var(--font-family--heading);\n\t--font--heading-large: 700 var(--font-size--heading-large)/var(--line-height--heading-large) var(--font-family--heading);\n\t--font--heading-medium: 700 var(--font-size--heading-medium)/var(--line-height--heading-medium) var(--font-family--heading);\n\t--font--heading-small: 700 var(--font-size--heading-small)/var(--line-height--heading-small) var(--font-family--heading);\n\t--font--heading-xsmall: 700 var(--font-size--heading-xsmall)/var(--line-height--heading-xsmall) var(--font-family--heading);\n\t--font--label-large: 400 var(--font-size--label-large)/var(--line-height--label-large) var(--font-family);\n\t--font--label-medium: 400 var(--font-size--label-medium)/var(--line-height--label-medium) var(--font-family);\n\t--font--label-small: 400 var(--font-size--label-small)/var(--line-height--label-small) var(--font-family);\n\t--font--label-xsmall: 400 var(--font-size--label-xsmall)/var(--line-height--label-xsmall) var(--font-family);\n\t--font--paragraphs-large: 400 var(--font-size--paragraphs-large)/var(--line-height--paragraphs-large) var(--font-family);\n\t--font--paragraphs-medium: 400 var(--font-size--paragraphs-medium)/var(--line-height--paragraphs-medium) var(--font-family);\n\t--font--paragraphs-small: 400 var(--font-size--paragraphs-small)/var(--line-height--paragraphs-small) var(--font-family);\n\t--font--paragraphs-xsmall: 400 var(--font-size--paragraphs-xsmall)/var(--line-height--paragraphs-xsmall) var(--font-family);\n\n\t--leter-spacing--display: -0.003em;\n\n\t/* Color Primitives */\n\t--color-white: hsla(0, 0%, 100%, 1);\n\t--color-gray-50: hsla(0, 0%, 95%, 1);\n\t--color-gray-100: hsla(0, 0%, 90%, 1);\n\t--color-gray-200: hsla(0, 0%, 80%, 1);\n\t--color-gray-300: hsla(0, 0%, 70%, 1);\n\t--color-gray-400: hsla(0, 0%, 60%, 1);\n\t--color-gray-500: hsla(0, 0%, 50%, 1);\n\t--color-gray-600: hsla(0, 0%, 40%, 1);\n\t--color-gray-700: hsla(0, 0%, 30%, 1);\n\t--color-gray-800: hsla(0, 0%, 20%, 1);\n\t--color-gray-900: hsla(0, 0%, 10%, 1);\n\t--color-gray-950: hsla(0, 0%, 5%, 1);\n\t--color-black: hsla(0, 0%, 0%, 1);\n\n\t--color-red-50: hsla(360, 100%, 95%, 1);\n\t--color-red-100: hsla(360, 100%, 90%, 1);\n\t--color-red-200: hsla(360, 100%, 80%, 1);\n\t--color-red-300: hsla(360, 100%, 70%, 1);\n\t--color-red-400: hsla(360, 100%, 60%, 1);\n\t--color-red-500: hsla(360, 100%, 50%, 1);\n\t--color-red-600: hsla(360, 100%, 40%, 1);\n\t--color-red-700: hsla(360, 100%, 30%, 1);\n\t--color-red-800: hsla(360, 100%, 20%, 1);\n\t--color-red-900: hsla(360, 100%, 10%, 1);\n\n\t--color-yellow-50: hsla(55, 100%, 95%, 1);\n\t--color-yellow-100: hsla(55, 100%, 90%, 1);\n\t--color-yellow-200: hsla(55, 100%, 80%, 1);\n\t--color-yellow-300: hsla(55, 100%, 70%, 1);\n\t--color-yellow-400: hsla(55, 100%, 60%, 1);\n\t--color-yellow-500: hsla(55, 100%, 50%, 1);\n\t--color-yellow-600: hsla(55, 100%, 40%, 1);\n\t--color-yellow-700: hsla(55, 100%, 30%, 1);\n\t--color-yellow-800: hsla(55, 100%, 20%, 1);\n\t--color-yellow-900: hsla(55, 100%, 10%, 1);\n\n\t/* Foundation Colors */\n\t--color-primary-a: var(--color-black);\n\t--color-primary-b: var(--color-white);\n\t--color-negative: var(--color-red-400);\n\t--color-warning: var(--color-yellow-400);\n\t--color-positive: var(--color-green-400);\n\n\t/* Core Colors */\n\t--color-background-primary: var(--color-primary-b);\n\t--color-background-secondary: var(--color-gray-50);\n\t--color-background-tertiary: var(--color-gray-100);\n\t--color-background-primary-inverse: var(--color-primary-a);\n\t--color-background-secondary-inverse: var(--color-gray-800);\n\n\t--color-content-primary: var(--color-black);\n\t--color-content-secondary: var(--color-gray-600);\n\t--color-content-tertiary: var(--color-gray-500);\n\t--color-content-primary-inverse: var(--color-white);\n\t--color-content-secondary-inverse: var(--color-gray-300);\n\t--color-content-tertiary-inverse: var(--color-gray-400);\n\n\t--color-border-opaque: var(--color-gray-200);\n\t--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);\n\t--color-border-selected: var(--color-content-primary);\n\t--color-border-opaque-inverse: var(--color-gray-700);\n\t--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 8%, transparent);\n\t--color-border-selected-inverse: var(--color-primary-b);\n\n\t/* Shadows */\n\t--box-shadow: 0 1px 10px -10px rgba(0,0,0,0.1),\n\t 0 1.5px 20px -10px rgba(0,0,0,0.1),\n\t 0 2px 30px -10px rgba(0,0,0,0.1);\n\n\t/* Border */\n\t--border-radius: 0.5rem;\n\t--border-radius--button: 0.6rem;\n\t--border-radius--small: 0.4rem;\n\n\t@media (prefers-color-scheme: dark) {\n\t\t/* Foundation Colors */\n\t\t--color-primary-a: var(--color-gray-100);\n\t\t--color-primary-b: var(--color-gray-900);\n\t\t--color-negative: var(--color-red-600);\n\t\t--color-warning: var(--color-yellow-600);\n\t\t--color-positive: var(--color-green-600);\n\n\t\t/* Core Colors */\n\t\t--color-background-primary: var(--color-primary-b);\n\t\t--color-background-secondary: var(--color-gray-900);\n\t\t--color-background-tertiary: var(--color-gray-800);\n\t\t--color-background-primary-inverse: var(--color-gray-200);\n\t\t--color-background-secondary-inverse: var(--color-gray-300);\n\n\t\t--color-content-primary: var(--color-gray-100);\n\t\t--color-content-secondary: var(--color-gray-200);\n\t\t--color-content-tertiary: var(--color-gray-300);\n\t\t--color-content-primary-inverse: var(--color-black);\n\t\t--color-content-secondary-inverse: var(--color-gray-800);\n\t\t--color-content-tertiary-inverse: var(--color-gray-700);\n\n\t\t--color-border-opaque: var(--color-gray-900);\n\t\t--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);\n\t\t--color-border-selected: var(--color-primary-a);\n\t\t--color-border-opaque-inverse: var(--color-gray-700);\n\t\t--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 20%, transparent);\n\t\t--color-border-selected-inverse: var(--color-primary-b);\n\t}\n}\n",".GRID {\n\t--grid-inline: 24px;\n\t--grid-block: 10px;\n\tposition: fixed;\n\tinset: 0;\n\tbackground-image:\n\t\tlinear-gradient(hsla(0, 0%, 0%, 0.02) var(--grid-block), hsla(0, 0%, 0%, 0) var(--grid-block)),\n\t\tlinear-gradient(90deg, hsla(0, 0%, 0%, 0.02) var(--grid-inline), hsla(0, 0%, 0%, 0) var(--grid-inline));\n\tbackground-size:\n\t\t100% calc(var(--grid-block) * 2),\n\t\tcalc(var(--grid-inline) * 2) 100%;\n\tbackground-position:\n\t\ttop,\n\t\tcalc(50% - var(--grid-inline) * .5);\n\tpointer-events: none;\n}\n",".a-heading {\n\tfont: var(--font--heading-xxlarge);\n}\n\nh1.a-heading,\n.a-heading.-xxlarge {\n\tfont: var(--font--heading-xxlarge);\n}\nh2.a-heading,\n.a-heading.-xlarge {\n\tfont: var(--font--heading-xlarge);\n}\nh3.a-heading,\n.a-heading.-large {\n\tfont: var(--font--heading-large);\n}\nh4.a-heading,\n.a-heading.-medium {\n\tfont: var(--font--heading-medium);\n}\nh5.a-heading,\n.a-heading.-small {\n\tfont: var(--font--heading-small);\n}\nh5.a-heading,\n.a-heading.-xsmall {\n\tfont: var(--font--heading-xsmall);\n}\n",".a-text {\n\t--font-size: var(--font-size--paragraphs-medium);\n\t--line-height: var(--line-height--paragraphs-medium);\n\n\tfont: var(--font--paragraphs-medium);\n\n\t> h1 {\n\t\tfont: var(--font--heading-xxlarge);\n\t}\n\t> h2 {\n\t\tfont: var(--font--heading-xlarge);\n\t}\n\t> h3 {\n\t\tfont: var(--font--heading-large);\n\t}\n\t> h4 {\n\t\tfont: var(--font--heading-medium);\n\t}\n\t> h5 {\n\t\tfont: var(--font--heading-small);\n\t}\n\t> h6 {\n\t\tfont: var(--font--heading-xsmall);\n\t}\n\n\t> * + * {\n\t\tmargin-block-start: calc(var(--gap-block) * 0.75 + var(--typo-margin-top) + var(--typo-margin-bottom));\n\t}\n\n\t&.-large {\n\t\t--font-size: var(--font-size--paragraphs-large);\n\t\t--line-height: var(--line-height--paragraphs-large);\n\n\t\tfont: var(--font--paragraphs-large);\n\t}\n\t&.-small {\n\t\t--font-size: var(--font-size--paragraphs-small);\n\t\t--line-height: var(--line-height--paragraphs-small);\n\n\t\tfont: var(--font--paragraphs-small);\n\t}\n\t&.-xsmall {\n\t\t--font-size: var(--font-size--paragraphs-xsmall);\n\t\t--line-height: var(--line-height--paragraphs-xsmall);\n\n\t\tfont: var(--font--paragraphs-xsmall);\n\t}\n\n\t& + & {\n\t\tmargin-block-start: calc(var(--font-size) * var(--line-height));\n\t}\n\t&.-large + & {\n\t\tmargin-block-start: var(--gap-block);\n\t}\n\n\t.a-heading + & {\n\t\tmargin-block-start: var(--gap-block);\n\t}\n}\n","/**\n * This class produces a block which is exactly as big as the\n * text content inside.\n * The whitespace above and below the text content is removed\n * by margin-block-[start|end].\n * `--font-size` and `--line-height` variables must be present.\n *\n * inspired by moma.org\n *\n * Further reading:\n * https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202\n * https://matthiasott.com/notes/the-thing-with-leading-in-css\n */\n\n:root {\n\t--typo-cap-height: 0.705; /* relative to leading */\n\t--typo-shoulder: calc(1 - var(--typo-cap-height));\n\t--typo-whitespace-top: 0.17;\n\t--typo-whitespace-bottom: calc(var(--typo-shoulder) - var(--typo-whitespace-top));\n}\n\n.a-trim-leading {\n\t--typo-leading-remainder: calc((var(--line-height) - 1) / 2);\n\t--typo-leading-top: calc(var(--typo-whitespace-top) + var(--typo-leading-remainder));\n\t--typo-leading-bottom: calc(var(--typo-whitespace-bottom) + var(--typo-leading-remainder));\n\t--typo-margin-top: calc(-1 * var(--typo-leading-top) * var(--font-size));\n\t--typo-margin-bottom: calc(-1 * var(--typo-leading-bottom) * var(--font-size));\n\n\tdisplay: flow-root;\n\n\t&::before,\n\t&::after {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tvisibility: hidden;\n\t}\n\n\t&::before {\n\t\tmargin-block-start: var(--typo-margin-top);\n\t}\n\n\t&::after {\n\t\tmargin-block-end: var(--typo-margin-bottom);\n\t}\n}\n",".a-visually-hidden {\n\tclip-path: inset(50%) !important;\n\theight: 1px !important;\n\twidth: 1px !important;\n\toverflow: hidden !important;\n\tposition: absolute !important;\n\twhite-space: nowrap !important;\n\tborder: 0 !important;\n}\n",".o-article {\n\talign-self: center;\n\t/* margin-block-start: 20px; */\n\tmax-width: var(--max-width-content);\n\tpadding-inline: var(--gap-inline);\n}\n",".o-footer {\n\tmargin-block-start: auto;\n}\n","/* Template components can only apply to the body element */\n.t-default {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-content: start;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../../../../blueprint/develop/css/fonts/FONT_NAME.css","../../../../blueprint/develop/css/framework/reset.css","../../../../blueprint/develop/css/framework/variables.css","../../../../blueprint/develop/css/framework/GRID.css","../../../../blueprint/develop/css/components/a-heading.css","../../../../blueprint/develop/css/components/a-text.css","../../../../blueprint/develop/css/components/a-trim-leading.css","../../../../blueprint/develop/css/components/a-visually-hidden.css","../../../../blueprint/develop/css/components/o-article.css","../../../../blueprint/develop/css/components/o-footer.css","../../../../blueprint/develop/css/components/t-default.css"],"names":[],"mappings":"AAAA,WAIC,iBAAkB,CAHlB,qBAAwB,CAIxB,iBAAkB,CAFlB,eAAgB,CADhB,+FAID,CCNA,EACC,QAAS,CACT,SACD,CAEA,KAKC,kCAAmC,CACnC,iCAAkC,CAClC,6BAA8B,CAC9B,uBAAwB,CAPxB,gCAAkC,CAElC,eAAgB,CAChB,eAKD,CACA,8CACC,KACC,sBACD,CACD,CAEA,KAIC,gBAAiB,CAHjB,QAAS,CACT,mBAAoB,CACpB,qBAED,CAEA,OACC,WACD,CAEA,EACC,aAAc,CACd,0BACD,CAEA,+CACC,aACD,CAEA,gBAEC,eAAgB,CADhB,oBAED,CAEA,OACC,QACD,CAEA,SAEC,QAAS,CADT,QAAS,CAET,SACD,CAEA,MACC,aACD,CAEA,sBAWC,4BAA6B,CAP7B,eAAgB,CAMhB,kBAAmB,CADnB,gBAAiB,CADjB,aAAc,CAFd,YAAa,CACb,mBAAoB,CAJpB,QAAS,CAET,SAOD,CAEA,kCAEC,uBAAgB,CAAhB,oBAAgB,CAAhB,eAQD,CANC,4FACC,kBACD,CAMD,SACC,eAAgB,CAChB,YACD,CAEA,OACC,gBACD,CAEA,eACC,QAAS,CACT,cACD,CAEA,GAEC,+BAA6B,CAE7B,YAAa,CAHb,WAAY,CACZ,4BAA6B,CAC7B,aAAc,CAEd,gBACD,CAEA,QACC,aACD,CAEA,MACC,wBACD,CAEA,UACC,kBACD,CAEA,eACC,2BAA4B,CAC5B,kBACD,CAEA,mCACC,sBACD,CC7HA,MAOC,iBAAkB,CAClB,gBAAiB,CAGjB,kBAAmB,CACnB,2BAA4B,CAC5B,uBAAwB,CAGxB,oCAAsC,CACtC,4BAA6B,CAC7B,4BAA6B,CAE7B,iCAAkC,CAClC,kCAAmC,CACnC,iCAAkC,CAClC,kCAAmC,CACnC,mCAAoC,CACpC,kCAAmC,CACnC,iCAAkC,CAClC,kCAAmC,CACnC,iCAAkC,CAClC,kCAAmC,CACnC,+BAAgC,CAChC,gCAAiC,CACjC,+BAAgC,CAChC,gCAAiC,CACjC,oCAAqC,CACrC,qCAAsC,CACtC,oCAAqC,CACrC,qCAAsC,CACtC,+CAAgD,CAEhD,oCAA4C,CAC5C,oCAA4C,CAC5C,8BAA2C,CAC3C,qCAA4C,CAC5C,sCAA6C,CAC7C,qCAA4C,CAC5C,gCAA2C,CAC3C,qCAA4C,CAC5C,iCAA2C,CAC3C,qCAA4C,CAC5C,+BAAyC,CACzC,+BAA0C,CAC1C,gCAAyC,CACzC,gCAA0C,CAC1C,uCAA8C,CAC9C,oCAA+C,CAC/C,uCAA8C,CAC9C,wCAA+C,CAC/C,mDAAoD,CAEpD,uHAAwH,CACxH,0HAA2H,CAC3H,uHAAwH,CACxH,0HAA2H,CAC3H,6HAA8H,CAC9H,0HAA2H,CAC3H,uHAAwH,CACxH,0HAA2H,CAC3H,uHAAwH,CACxH,0HAA2H,CAC3H,wGAAyG,CACzG,2GAA4G,CAC5G,wGAAyG,CACzG,2GAA4G,CAC5G,uHAAwH,CACxH,0HAA2H,CAC3H,uHAAwH,CACxH,0HAA2H,CAE3H,iCAAkC,CAGlC,kBAAmC,CACnC,uBAAoC,CACpC,wBAAqC,CACrC,qBAAqC,CACrC,wBAAqC,CACrC,qBAAqC,CACrC,qBAAqC,CACrC,qBAAqC,CACrC,wBAAqC,CACrC,qBAAqC,CACrC,wBAAqC,CACrC,wBAAoC,CACpC,kBAAiC,CAEjC,sBAAuC,CACvC,oBAAwC,CACxC,oBAAwC,CACxC,oBAAwC,CACxC,oBAAwC,CACxC,mBAAwC,CACxC,oBAAwC,CACxC,oBAAwC,CACxC,oBAAwC,CACxC,oBAAwC,CAExC,yBAAyC,CACzC,0BAA0C,CAC1C,0BAA0C,CAC1C,0BAA0C,CAC1C,uBAA0C,CAC1C,0BAA0C,CAC1C,uBAA0C,CAC1C,0BAA0C,CAC1C,0BAA0C,CAC1C,0BAA0C,CAG1C,oCAAqC,CACrC,oCAAqC,CACrC,qCAAsC,CACtC,uCAAwC,CACxC,uCAAwC,CAGxC,iDAAkD,CAClD,iDAAkD,CAClD,iDAAkD,CAClD,yDAA0D,CAC1D,0DAA2D,CAE3D,0CAA2C,CAC3C,+CAAgD,CAChD,8CAA+C,CAC/C,kDAAmD,CACnD,uDAAwD,CACxD,sDAAuD,CAEvD,2CAA4C,CAC5C,kFAAqF,CACrF,oDAAqD,CACrD,mDAAoD,CACpD,0FAA6F,CAC7F,sDAAuD,CAGvD,8GAE8C,CAG9C,sBAAuB,CACvB,8BAA+B,CAC/B,6BA+BD,CA7BC,mCA5JD,MA8JE,uCAAwC,CACxC,uCAAwC,CACxC,qCAAsC,CACtC,uCAAwC,CACxC,uCAAwC,CAGxC,iDAAkD,CAClD,kDAAmD,CACnD,iDAAkD,CAClD,wDAAyD,CACzD,0DAA2D,CAE3D,6CAA8C,CAC9C,+CAAgD,CAChD,8CAA+C,CAC/C,kDAAmD,CACnD,uDAAwD,CACxD,sDAAuD,CAEvD,2CAA4C,CAC5C,kFAAqF,CACrF,8CAA+C,CAC/C,mDAAoD,CACpD,2FAA8F,CAC9F,sDAEF,CADC,CC1LD,MACC,kBAAmB,CACnB,iBAAkB,CAGlB,yMAEwG,CAFxG,0LAEwG,CAIxG,yDAEoC,CALpC,8EAEkC,CANlC,OAAQ,CAUR,mBAAoB,CAXpB,cAYD,CCXA,4CAEC,iCACD,CACA,gCAEC,gCACD,CACA,+BAEC,+BACD,CACA,gCAEC,gCACD,CACA,+BAEC,+BACD,CACA,gCAEC,gCACD,CC3BA,QACC,+CAAgD,CAChD,mDAAoD,CAEpD,mCAsDD,CApDC,WACC,iCACD,CACA,WACC,gCACD,CACA,WACC,+BACD,CACA,WACC,gCACD,CACA,WACC,+BACD,CACA,WACC,gCACD,CAEA,YACC,qGAAsG,CAAtG,kGACD,CAEA,eACC,8CAA+C,CAC/C,kDAAmD,CAEnD,kCACD,CACA,eACC,8CAA+C,CAC/C,kDAAmD,CAEnD,kCACD,CACA,gBACC,+CAAgD,CAChD,mDAAoD,CAEpD,mCACD,CAEA,gBACC,+DAA+D,CAA/D,4DACD,CAKA,0CACC,sCAAoC,CAApC,mCACD,CC3CD,MACC,uBAAwB,CACxB,gDAAiD,CACjD,0BAA2B,CAC3B,gFACD,CAEA,gBACC,yDAA4D,CAC5D,mFAAoF,CACpF,yFAA0F,CAC1F,mEAAwE,CACxE,yEAA8E,CAE9E,iBAgBD,CAdC,6CAEC,UAAW,CACX,aAAc,CACd,iBACD,CAEA,uBACC,4CAA0C,CAA1C,yCACD,CAEA,sBACC,8CAA2C,CAA3C,0CACD,CC3CD,mBAOC,kBAAoB,CANpB,sCAAgC,CAAhC,8BAAgC,CAChC,oBAAsB,CAEtB,yBAA2B,CAC3B,2BAA6B,CAC7B,4BAA8B,CAH9B,mBAKD,CCRA,WACC,iBAAkB,CAElB,kCAAmC,CACnC,gCACD,CCLA,UACC,0BAAwB,CAAxB,uBACD,CCDA,WAEC,2BAAsB,CAAtB,4BAAsB,CACtB,mBAAoB,CAFpB,mBAAa,CAAb,YAAa,CACb,qBAED","file":"index.css","sourcesContent":["@font-face {\n\tfont-family: 'FONT_NAME';\n\tsrc: url('fonts/font-name-400.woff2') format('woff2'), url('fonts/font-name-400.woff') format('woff');\n\tfont-weight: 400;\n\tfont-display: swap; /* optional for “main” font weight */\n\tfont-style: normal;\n}\n","* {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nhtml {\n\tfont-family: system-ui, sans-serif;\n\t/* 1rem equals 10px, when 16px is default font-size */\n\tfont-size: 62.5%;\n\tline-height: 1.5;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\t-webkit-text-size-adjust: none;\n\tcolor-scheme: dark light;\n}\n@media (prefers-reduced-motion: no-preference) {\n\thtml {\n\t\tscroll-behavior: smooth;\n\t}\n}\n\nbody {\n\tmargin: 0;\n\tmin-block-size: 100%;\n\tmin-block-size: 100dvb;\n\tfont-size: 1.6rem;\n}\n\ndialog {\n\tmargin: auto;\n}\n\na {\n\tcolor: inherit;\n\ttext-underline-offset: 0.2ex;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nimg, picture, svg {\n\tmax-inline-size: 100%;\n\tblock-size: auto;\n}\n\niframe {\n\tborder: 0;\n}\n\nfieldset {\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput,\ntextarea,\nbutton {\n\tmargin: 0;\n\tborder-radius: 0;\n\tpadding: 0;\n\tfont: inherit;\n\tline-height: inherit;\n\tcolor: inherit;\n\tborder-width: 1px;\n\tborder-style: solid;\n\tbackground-color: transparent;\n}\n\ninput[type=\"date\"],\ninput[type=\"time\"] {\n\tappearance: none;\n\n\t&::-webkit-date-and-time-value {\n\t\ttext-align: inherit;\n\t}\n\t/* ::-webkit-calendar-picker-indicator {\n\t\tdisplay: none;\n\t} */\n}\n\ntextarea {\n\tresize: vertical;\n\tresize: block;\n}\n\nbutton {\n\ttext-align: start;\n}\n\nbutton, summary {\n\tborder: 0;\n\tcursor: pointer;\n}\n\nhr {\n\tborder: none;\n\tborder-block-start: 1px solid;\n\tcolor: inherit;\n\tblock-size: 0;\n\toverflow: visible;\n}\n\nsummary {\n\tdisplay: block;\n}\n\ntable {\n\tborder-collapse: collapse;\n}\n\n:disabled {\n\tcursor: not-allowed;\n}\n\n:focus-visible {\n\toutline: 2px solid Highlight;\n\toutline-offset: 2px;\n}\n\n[hidden]:not([hidden=\"until-found\"]) {\n\tdisplay: none !important;\n}\n","/* Naming of colors and fonts inspired by Uber Base (https://base.uber.com/6d2425e9f/p/8898fb-color-legacy/b/065744) */\n\n:root {\n\t/**\n\t * 1rem equals to 10px.\n\t * Each size should divide by 4.\n\t */\n\n\t/* Grid */\n\t--gap-inline: 4rem;\n\t--gap-block: 4rem;\n\n\t/* Sizes */\n\t--max-width: 160rem;\n\t--max-width-content: 108rem;\n\t--max-width-text: 68rem;\n\n\t/* Typography */\n\t--font-family: 'FONT NAME', sans-serif;\n\t--font-family-display: serif;\n\t--font-family-heading: serif;\n\n\t--font-size-display-large: 9.6rem;\n\t--font-size-display-medium: 5.2rem;\n\t--font-size-display-small: 5.2rem;\n\t--font-size-display-xsmall: 3.6rem;\n\t--font-size-heading-xxlarge: 4.0rem;\n\t--font-size-heading-xlarge: 3.6rem;\n\t--font-size-heading-large: 3.2rem;\n\t--font-size-heading-medium: 2.8rem;\n\t--font-size-heading-small: 2.4rem;\n\t--font-size-heading-xsmall: 2.0rem;\n\t--font-size-label-large: 1.8rem;\n\t--font-size-label-medium: 1.6rem;\n\t--font-size-label-small: 1.4rem;\n\t--font-size-label-xsmall: 1.2rem;\n\t--font-size-paragraphs-large: 1.8rem;\n\t--font-size-paragraphs-medium: 1.6rem;\n\t--font-size-paragraphs-small: 1.4rem;\n\t--font-size-paragraphs-xsmall: 1.2rem;\n\t--font-size: var(--font-size-paragraphs-medium);\n\n\t--line-height-display-large: calc(96 / 112);\n\t--line-height-display-medium: calc(52 / 64);\n\t--line-height-display-small: calc(52 / 52);\n\t--line-height-display-xsmall: calc(36 / 44);\n\t--line-height-heading-xxlarge: calc(40 / 52);\n\t--line-height-heading-xlarge: calc(36 / 44);\n\t--line-height-heading-large: calc(32 / 40);\n\t--line-height-heading-medium: calc(28 / 36);\n\t--line-height-heading-small: calc(24 / 32);\n\t--line-height-heading-xsmall: calc(20 / 28);\n\t--line-height-label-large: calc(18 / 24);\n\t--line-height-label-medium: calc(16 / 20);\n\t--line-height-label-small: calc(14 / 16);\n\t--line-height-label-xsmall: calc(12 / 16);\n\t--line-height-paragraphs-large: calc(28 / 18);\n\t--line-height-paragraphs-medium: calc(24 / 16);\n\t--line-height-paragraphs-small: calc(20 / 14);\n\t--line-height-paragraphs-xsmall: calc(20 / 12);\n\t--line-height: var(--line-height-paragraphs-medium);\n\n\t--font-display-large: 700 var(--font-size-display-large)/var(--line-height-display-large) var(--font-family-display);\n\t--font-display-medium: 700 var(--font-size-display-medium)/var(--line-height-display-medium) var(--font-family-display);\n\t--font-display-small: 700 var(--font-size-display-small)/var(--line-height-display-small) var(--font-family-display);\n\t--font-display-xsmall: 700 var(--font-size-display-xsmall)/var(--line-height-display-xsmall) var(--font-family-display);\n\t--font-heading-xxlarge: 700 var(--font-size-heading-xxlarge)/var(--line-height-heading-xxlarge) var(--font-family-heading);\n\t--font-heading-xlarge: 700 var(--font-size-heading-xlarge)/var(--line-height-heading-xlarge) var(--font-family-heading);\n\t--font-heading-large: 700 var(--font-size-heading-large)/var(--line-height-heading-large) var(--font-family-heading);\n\t--font-heading-medium: 700 var(--font-size-heading-medium)/var(--line-height-heading-medium) var(--font-family-heading);\n\t--font-heading-small: 700 var(--font-size-heading-small)/var(--line-height-heading-small) var(--font-family-heading);\n\t--font-heading-xsmall: 700 var(--font-size-heading-xsmall)/var(--line-height-heading-xsmall) var(--font-family-heading);\n\t--font-label-large: 400 var(--font-size-label-large)/var(--line-height-label-large) var(--font-family);\n\t--font-label-medium: 400 var(--font-size-label-medium)/var(--line-height-label-medium) var(--font-family);\n\t--font-label-small: 400 var(--font-size-label-small)/var(--line-height-label-small) var(--font-family);\n\t--font-label-xsmall: 400 var(--font-size-label-xsmall)/var(--line-height-label-xsmall) var(--font-family);\n\t--font-paragraphs-large: 400 var(--font-size-paragraphs-large)/var(--line-height-paragraphs-large) var(--font-family);\n\t--font-paragraphs-medium: 400 var(--font-size-paragraphs-medium)/var(--line-height-paragraphs-medium) var(--font-family);\n\t--font-paragraphs-small: 400 var(--font-size-paragraphs-small)/var(--line-height-paragraphs-small) var(--font-family);\n\t--font-paragraphs-xsmall: 400 var(--font-size-paragraphs-xsmall)/var(--line-height-paragraphs-xsmall) var(--font-family);\n\n\t--leter-spacing-display: -0.003em;\n\n\t/* Color Primitives */\n\t--color-white: hsla(0, 0%, 100%, 1);\n\t--color-gray-50: hsla(0, 0%, 95%, 1);\n\t--color-gray-100: hsla(0, 0%, 90%, 1);\n\t--color-gray-200: hsla(0, 0%, 80%, 1);\n\t--color-gray-300: hsla(0, 0%, 70%, 1);\n\t--color-gray-400: hsla(0, 0%, 60%, 1);\n\t--color-gray-500: hsla(0, 0%, 50%, 1);\n\t--color-gray-600: hsla(0, 0%, 40%, 1);\n\t--color-gray-700: hsla(0, 0%, 30%, 1);\n\t--color-gray-800: hsla(0, 0%, 20%, 1);\n\t--color-gray-900: hsla(0, 0%, 10%, 1);\n\t--color-gray-950: hsla(0, 0%, 5%, 1);\n\t--color-black: hsla(0, 0%, 0%, 1);\n\n\t--color-red-50: hsla(360, 100%, 95%, 1);\n\t--color-red-100: hsla(360, 100%, 90%, 1);\n\t--color-red-200: hsla(360, 100%, 80%, 1);\n\t--color-red-300: hsla(360, 100%, 70%, 1);\n\t--color-red-400: hsla(360, 100%, 60%, 1);\n\t--color-red-500: hsla(360, 100%, 50%, 1);\n\t--color-red-600: hsla(360, 100%, 40%, 1);\n\t--color-red-700: hsla(360, 100%, 30%, 1);\n\t--color-red-800: hsla(360, 100%, 20%, 1);\n\t--color-red-900: hsla(360, 100%, 10%, 1);\n\n\t--color-yellow-50: hsla(55, 100%, 95%, 1);\n\t--color-yellow-100: hsla(55, 100%, 90%, 1);\n\t--color-yellow-200: hsla(55, 100%, 80%, 1);\n\t--color-yellow-300: hsla(55, 100%, 70%, 1);\n\t--color-yellow-400: hsla(55, 100%, 60%, 1);\n\t--color-yellow-500: hsla(55, 100%, 50%, 1);\n\t--color-yellow-600: hsla(55, 100%, 40%, 1);\n\t--color-yellow-700: hsla(55, 100%, 30%, 1);\n\t--color-yellow-800: hsla(55, 100%, 20%, 1);\n\t--color-yellow-900: hsla(55, 100%, 10%, 1);\n\n\t/* Foundation Colors */\n\t--color-primary-a: var(--color-black);\n\t--color-primary-b: var(--color-white);\n\t--color-negative: var(--color-red-400);\n\t--color-warning: var(--color-yellow-400);\n\t--color-positive: var(--color-green-400);\n\n\t/* Core Colors */\n\t--color-background-primary: var(--color-primary-b);\n\t--color-background-secondary: var(--color-gray-50);\n\t--color-background-tertiary: var(--color-gray-100);\n\t--color-background-primary-inverse: var(--color-primary-a);\n\t--color-background-secondary-inverse: var(--color-gray-800);\n\n\t--color-content-primary: var(--color-black);\n\t--color-content-secondary: var(--color-gray-600);\n\t--color-content-tertiary: var(--color-gray-500);\n\t--color-content-primary-inverse: var(--color-white);\n\t--color-content-secondary-inverse: var(--color-gray-300);\n\t--color-content-tertiary-inverse: var(--color-gray-400);\n\n\t--color-border-opaque: var(--color-gray-200);\n\t--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);\n\t--color-border-selected: var(--color-content-primary);\n\t--color-border-opaque-inverse: var(--color-gray-700);\n\t--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 8%, transparent);\n\t--color-border-selected-inverse: var(--color-primary-b);\n\n\t/* Shadows */\n\t--box-shadow: 0 1px 10px -10px rgba(0,0,0,0.1),\n\t 0 1.5px 20px -10px rgba(0,0,0,0.1),\n\t 0 2px 30px -10px rgba(0,0,0,0.1);\n\n\t/* Border */\n\t--border-radius: 0.5rem;\n\t--border-radius-button: 0.6rem;\n\t--border-radius-small: 0.4rem;\n\n\t@media (prefers-color-scheme: dark) {\n\t\t/* Foundation Colors */\n\t\t--color-primary-a: var(--color-gray-100);\n\t\t--color-primary-b: var(--color-gray-900);\n\t\t--color-negative: var(--color-red-600);\n\t\t--color-warning: var(--color-yellow-600);\n\t\t--color-positive: var(--color-green-600);\n\n\t\t/* Core Colors */\n\t\t--color-background-primary: var(--color-primary-b);\n\t\t--color-background-secondary: var(--color-gray-900);\n\t\t--color-background-tertiary: var(--color-gray-800);\n\t\t--color-background-primary-inverse: var(--color-gray-200);\n\t\t--color-background-secondary-inverse: var(--color-gray-300);\n\n\t\t--color-content-primary: var(--color-gray-100);\n\t\t--color-content-secondary: var(--color-gray-200);\n\t\t--color-content-tertiary: var(--color-gray-300);\n\t\t--color-content-primary-inverse: var(--color-black);\n\t\t--color-content-secondary-inverse: var(--color-gray-800);\n\t\t--color-content-tertiary-inverse: var(--color-gray-700);\n\n\t\t--color-border-opaque: var(--color-gray-900);\n\t\t--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);\n\t\t--color-border-selected: var(--color-primary-a);\n\t\t--color-border-opaque-inverse: var(--color-gray-700);\n\t\t--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 20%, transparent);\n\t\t--color-border-selected-inverse: var(--color-primary-b);\n\t}\n}\n",".GRID {\n\t--grid-inline: 24px;\n\t--grid-block: 10px;\n\tposition: fixed;\n\tinset: 0;\n\tbackground-image:\n\t\tlinear-gradient(hsla(0, 0%, 0%, 0.02) var(--grid-block), hsla(0, 0%, 0%, 0) var(--grid-block)),\n\t\tlinear-gradient(90deg, hsla(0, 0%, 0%, 0.02) var(--grid-inline), hsla(0, 0%, 0%, 0) var(--grid-inline));\n\tbackground-size:\n\t\t100% calc(var(--grid-block) * 2),\n\t\tcalc(var(--grid-inline) * 2) 100%;\n\tbackground-position:\n\t\ttop,\n\t\tcalc(50% - var(--grid-inline) * .5);\n\tpointer-events: none;\n}\n",".a-heading {\n\tfont: var(--font-heading-xxlarge);\n}\n\nh1.a-heading,\n.a-heading.-xxlarge {\n\tfont: var(--font-heading-xxlarge);\n}\nh2.a-heading,\n.a-heading.-xlarge {\n\tfont: var(--font-heading-xlarge);\n}\nh3.a-heading,\n.a-heading.-large {\n\tfont: var(--font-heading-large);\n}\nh4.a-heading,\n.a-heading.-medium {\n\tfont: var(--font-heading-medium);\n}\nh5.a-heading,\n.a-heading.-small {\n\tfont: var(--font-heading-small);\n}\nh5.a-heading,\n.a-heading.-xsmall {\n\tfont: var(--font-heading-xsmall);\n}\n",".a-text {\n\t--font-size: var(--font-size-paragraphs-medium);\n\t--line-height: var(--line-height-paragraphs-medium);\n\n\tfont: var(--font-paragraphs-medium);\n\n\t> h1 {\n\t\tfont: var(--font-heading-xxlarge);\n\t}\n\t> h2 {\n\t\tfont: var(--font-heading-xlarge);\n\t}\n\t> h3 {\n\t\tfont: var(--font-heading-large);\n\t}\n\t> h4 {\n\t\tfont: var(--font-heading-medium);\n\t}\n\t> h5 {\n\t\tfont: var(--font-heading-small);\n\t}\n\t> h6 {\n\t\tfont: var(--font-heading-xsmall);\n\t}\n\n\t> * + * {\n\t\tmargin-block-start: calc(var(--gap-block) * 0.75 + var(--typo-margin-top) + var(--typo-margin-bottom));\n\t}\n\n\t&.-large {\n\t\t--font-size: var(--font-size-paragraphs-large);\n\t\t--line-height: var(--line-height-paragraphs-large);\n\n\t\tfont: var(--font-paragraphs-large);\n\t}\n\t&.-small {\n\t\t--font-size: var(--font-size-paragraphs-small);\n\t\t--line-height: var(--line-height-paragraphs-small);\n\n\t\tfont: var(--font-paragraphs-small);\n\t}\n\t&.-xsmall {\n\t\t--font-size: var(--font-size-paragraphs-xsmall);\n\t\t--line-height: var(--line-height-paragraphs-xsmall);\n\n\t\tfont: var(--font-paragraphs-xsmall);\n\t}\n\n\t& + & {\n\t\tmargin-block-start: calc(var(--font-size) * var(--line-height));\n\t}\n\t&.-large + & {\n\t\tmargin-block-start: var(--gap-block);\n\t}\n\n\t.a-heading + & {\n\t\tmargin-block-start: var(--gap-block);\n\t}\n}\n","/**\n * This class produces a block which is exactly as big as the\n * text content inside.\n * The whitespace above and below the text content is removed\n * by margin-block-[start|end].\n * `--font-size` and `--line-height` variables must be present.\n *\n * inspired by moma.org\n *\n * Further reading:\n * https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202\n * https://matthiasott.com/notes/the-thing-with-leading-in-css\n */\n\n:root {\n\t--typo-cap-height: 0.705; /* relative to leading */\n\t--typo-shoulder: calc(1 - var(--typo-cap-height));\n\t--typo-whitespace-top: 0.17;\n\t--typo-whitespace-bottom: calc(var(--typo-shoulder) - var(--typo-whitespace-top));\n}\n\n.a-trim-leading {\n\t--typo-leading-remainder: calc((var(--line-height) - 1) / 2);\n\t--typo-leading-top: calc(var(--typo-whitespace-top) + var(--typo-leading-remainder));\n\t--typo-leading-bottom: calc(var(--typo-whitespace-bottom) + var(--typo-leading-remainder));\n\t--typo-margin-top: calc(-1 * var(--typo-leading-top) * var(--font-size));\n\t--typo-margin-bottom: calc(-1 * var(--typo-leading-bottom) * var(--font-size));\n\n\tdisplay: flow-root;\n\n\t&::before,\n\t&::after {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tvisibility: hidden;\n\t}\n\n\t&::before {\n\t\tmargin-block-start: var(--typo-margin-top);\n\t}\n\n\t&::after {\n\t\tmargin-block-end: var(--typo-margin-bottom);\n\t}\n}\n",".a-visually-hidden {\n\tclip-path: inset(50%) !important;\n\theight: 1px !important;\n\twidth: 1px !important;\n\toverflow: hidden !important;\n\tposition: absolute !important;\n\twhite-space: nowrap !important;\n\tborder: 0 !important;\n}\n",".o-article {\n\talign-self: center;\n\t/* margin-block-start: 20px; */\n\tmax-width: var(--max-width-content);\n\tpadding-inline: var(--gap-inline);\n}\n",".o-footer {\n\tmargin-block-start: auto;\n}\n","/* Template components can only apply to the body element */\n.t-default {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-content: start;\n}\n"]} \ No newline at end of file diff --git a/blueprint/develop/css/components/a-heading.css b/blueprint/develop/css/components/a-heading.css index 98b9a29..04a9446 100644 --- a/blueprint/develop/css/components/a-heading.css +++ b/blueprint/develop/css/components/a-heading.css @@ -1,28 +1,28 @@ .a-heading { - font: var(--font--heading-xxlarge); + font: var(--font-heading-xxlarge); } h1.a-heading, .a-heading.-xxlarge { - font: var(--font--heading-xxlarge); + font: var(--font-heading-xxlarge); } h2.a-heading, .a-heading.-xlarge { - font: var(--font--heading-xlarge); + font: var(--font-heading-xlarge); } h3.a-heading, .a-heading.-large { - font: var(--font--heading-large); + font: var(--font-heading-large); } h4.a-heading, .a-heading.-medium { - font: var(--font--heading-medium); + font: var(--font-heading-medium); } h5.a-heading, .a-heading.-small { - font: var(--font--heading-small); + font: var(--font-heading-small); } h5.a-heading, .a-heading.-xsmall { - font: var(--font--heading-xsmall); + font: var(--font-heading-xsmall); } diff --git a/blueprint/develop/css/components/a-text.css b/blueprint/develop/css/components/a-text.css index 11ddc23..d58d640 100644 --- a/blueprint/develop/css/components/a-text.css +++ b/blueprint/develop/css/components/a-text.css @@ -1,26 +1,26 @@ .a-text { - --font-size: var(--font-size--paragraphs-medium); - --line-height: var(--line-height--paragraphs-medium); + --font-size: var(--font-size-paragraphs-medium); + --line-height: var(--line-height-paragraphs-medium); - font: var(--font--paragraphs-medium); + font: var(--font-paragraphs-medium); > h1 { - font: var(--font--heading-xxlarge); + font: var(--font-heading-xxlarge); } > h2 { - font: var(--font--heading-xlarge); + font: var(--font-heading-xlarge); } > h3 { - font: var(--font--heading-large); + font: var(--font-heading-large); } > h4 { - font: var(--font--heading-medium); + font: var(--font-heading-medium); } > h5 { - font: var(--font--heading-small); + font: var(--font-heading-small); } > h6 { - font: var(--font--heading-xsmall); + font: var(--font-heading-xsmall); } > * + * { @@ -28,22 +28,22 @@ } &.-large { - --font-size: var(--font-size--paragraphs-large); - --line-height: var(--line-height--paragraphs-large); + --font-size: var(--font-size-paragraphs-large); + --line-height: var(--line-height-paragraphs-large); - font: var(--font--paragraphs-large); + font: var(--font-paragraphs-large); } &.-small { - --font-size: var(--font-size--paragraphs-small); - --line-height: var(--line-height--paragraphs-small); + --font-size: var(--font-size-paragraphs-small); + --line-height: var(--line-height-paragraphs-small); - font: var(--font--paragraphs-small); + font: var(--font-paragraphs-small); } &.-xsmall { - --font-size: var(--font-size--paragraphs-xsmall); - --line-height: var(--line-height--paragraphs-xsmall); + --font-size: var(--font-size-paragraphs-xsmall); + --line-height: var(--line-height-paragraphs-xsmall); - font: var(--font--paragraphs-xsmall); + font: var(--font-paragraphs-xsmall); } & + & { diff --git a/blueprint/develop/css/framework/variables.css b/blueprint/develop/css/framework/variables.css index 56bd293..3dc7170 100644 --- a/blueprint/develop/css/framework/variables.css +++ b/blueprint/develop/css/framework/variables.css @@ -12,74 +12,74 @@ /* Sizes */ --max-width: 160rem; - --max-width--content: 108rem; - --max-width--text: 68rem; + --max-width-content: 108rem; + --max-width-text: 68rem; /* Typography */ --font-family: 'FONT NAME', sans-serif; - --font-family--display: serif; - --font-family--heading: serif; - - --font-size--display-large: 9.6rem; - --font-size--display-medium: 5.2rem; - --font-size--display-small: 5.2rem; - --font-size--display-xsmall: 3.6rem; - --font-size--heading-xxlarge: 4.0rem; - --font-size--heading-xlarge: 3.6rem; - --font-size--heading-large: 3.2rem; - --font-size--heading-medium: 2.8rem; - --font-size--heading-small: 2.4rem; - --font-size--heading-xsmall: 2.0rem; - --font-size--label-large: 1.8rem; - --font-size--label-medium: 1.6rem; - --font-size--label-small: 1.4rem; - --font-size--label-xsmall: 1.2rem; - --font-size--paragraphs-large: 1.8rem; - --font-size--paragraphs-medium: 1.6rem; - --font-size--paragraphs-small: 1.4rem; - --font-size--paragraphs-xsmall: 1.2rem; - --font-size: var(--font-size--paragraphs-medium); - - --line-height--display-large: calc(96 / 112); - --line-height--display-medium: calc(52 / 64); - --line-height--display-small: calc(52 / 52); - --line-height--display-xsmall: calc(36 / 44); - --line-height--heading-xxlarge: calc(40 / 52); - --line-height--heading-xlarge: calc(36 / 44); - --line-height--heading-large: calc(32 / 40); - --line-height--heading-medium: calc(28 / 36); - --line-height--heading-small: calc(24 / 32); - --line-height--heading-xsmall: calc(20 / 28); - --line-height--label-large: calc(18 / 24); - --line-height--label-medium: calc(16 / 20); - --line-height--label-small: calc(14 / 16); - --line-height--label-xsmall: calc(12 / 16); - --line-height--paragraphs-large: calc(28 / 18); - --line-height--paragraphs-medium: calc(24 / 16); - --line-height--paragraphs-small: calc(20 / 14); - --line-height--paragraphs-xsmall: calc(20 / 12); - --line-height: var(--line-height--paragraphs-medium); - - --font--display-large: 700 var(--font-size--display-large)/var(--line-height--display-large) var(--font-family--display); - --font--display-medium: 700 var(--font-size--display-medium)/var(--line-height--display-medium) var(--font-family--display); - --font--display-small: 700 var(--font-size--display-small)/var(--line-height--display-small) var(--font-family--display); - --font--display-xsmall: 700 var(--font-size--display-xsmall)/var(--line-height--display-xsmall) var(--font-family--display); - --font--heading-xxlarge: 700 var(--font-size--heading-xxlarge)/var(--line-height--heading-xxlarge) var(--font-family--heading); - --font--heading-xlarge: 700 var(--font-size--heading-xlarge)/var(--line-height--heading-xlarge) var(--font-family--heading); - --font--heading-large: 700 var(--font-size--heading-large)/var(--line-height--heading-large) var(--font-family--heading); - --font--heading-medium: 700 var(--font-size--heading-medium)/var(--line-height--heading-medium) var(--font-family--heading); - --font--heading-small: 700 var(--font-size--heading-small)/var(--line-height--heading-small) var(--font-family--heading); - --font--heading-xsmall: 700 var(--font-size--heading-xsmall)/var(--line-height--heading-xsmall) var(--font-family--heading); - --font--label-large: 400 var(--font-size--label-large)/var(--line-height--label-large) var(--font-family); - --font--label-medium: 400 var(--font-size--label-medium)/var(--line-height--label-medium) var(--font-family); - --font--label-small: 400 var(--font-size--label-small)/var(--line-height--label-small) var(--font-family); - --font--label-xsmall: 400 var(--font-size--label-xsmall)/var(--line-height--label-xsmall) var(--font-family); - --font--paragraphs-large: 400 var(--font-size--paragraphs-large)/var(--line-height--paragraphs-large) var(--font-family); - --font--paragraphs-medium: 400 var(--font-size--paragraphs-medium)/var(--line-height--paragraphs-medium) var(--font-family); - --font--paragraphs-small: 400 var(--font-size--paragraphs-small)/var(--line-height--paragraphs-small) var(--font-family); - --font--paragraphs-xsmall: 400 var(--font-size--paragraphs-xsmall)/var(--line-height--paragraphs-xsmall) var(--font-family); - - --leter-spacing--display: -0.003em; + --font-family-display: serif; + --font-family-heading: serif; + + --font-size-display-large: 9.6rem; + --font-size-display-medium: 5.2rem; + --font-size-display-small: 5.2rem; + --font-size-display-xsmall: 3.6rem; + --font-size-heading-xxlarge: 4.0rem; + --font-size-heading-xlarge: 3.6rem; + --font-size-heading-large: 3.2rem; + --font-size-heading-medium: 2.8rem; + --font-size-heading-small: 2.4rem; + --font-size-heading-xsmall: 2.0rem; + --font-size-label-large: 1.8rem; + --font-size-label-medium: 1.6rem; + --font-size-label-small: 1.4rem; + --font-size-label-xsmall: 1.2rem; + --font-size-paragraphs-large: 1.8rem; + --font-size-paragraphs-medium: 1.6rem; + --font-size-paragraphs-small: 1.4rem; + --font-size-paragraphs-xsmall: 1.2rem; + --font-size: var(--font-size-paragraphs-medium); + + --line-height-display-large: calc(96 / 112); + --line-height-display-medium: calc(52 / 64); + --line-height-display-small: calc(52 / 52); + --line-height-display-xsmall: calc(36 / 44); + --line-height-heading-xxlarge: calc(40 / 52); + --line-height-heading-xlarge: calc(36 / 44); + --line-height-heading-large: calc(32 / 40); + --line-height-heading-medium: calc(28 / 36); + --line-height-heading-small: calc(24 / 32); + --line-height-heading-xsmall: calc(20 / 28); + --line-height-label-large: calc(18 / 24); + --line-height-label-medium: calc(16 / 20); + --line-height-label-small: calc(14 / 16); + --line-height-label-xsmall: calc(12 / 16); + --line-height-paragraphs-large: calc(28 / 18); + --line-height-paragraphs-medium: calc(24 / 16); + --line-height-paragraphs-small: calc(20 / 14); + --line-height-paragraphs-xsmall: calc(20 / 12); + --line-height: var(--line-height-paragraphs-medium); + + --font-display-large: 700 var(--font-size-display-large)/var(--line-height-display-large) var(--font-family-display); + --font-display-medium: 700 var(--font-size-display-medium)/var(--line-height-display-medium) var(--font-family-display); + --font-display-small: 700 var(--font-size-display-small)/var(--line-height-display-small) var(--font-family-display); + --font-display-xsmall: 700 var(--font-size-display-xsmall)/var(--line-height-display-xsmall) var(--font-family-display); + --font-heading-xxlarge: 700 var(--font-size-heading-xxlarge)/var(--line-height-heading-xxlarge) var(--font-family-heading); + --font-heading-xlarge: 700 var(--font-size-heading-xlarge)/var(--line-height-heading-xlarge) var(--font-family-heading); + --font-heading-large: 700 var(--font-size-heading-large)/var(--line-height-heading-large) var(--font-family-heading); + --font-heading-medium: 700 var(--font-size-heading-medium)/var(--line-height-heading-medium) var(--font-family-heading); + --font-heading-small: 700 var(--font-size-heading-small)/var(--line-height-heading-small) var(--font-family-heading); + --font-heading-xsmall: 700 var(--font-size-heading-xsmall)/var(--line-height-heading-xsmall) var(--font-family-heading); + --font-label-large: 400 var(--font-size-label-large)/var(--line-height-label-large) var(--font-family); + --font-label-medium: 400 var(--font-size-label-medium)/var(--line-height-label-medium) var(--font-family); + --font-label-small: 400 var(--font-size-label-small)/var(--line-height-label-small) var(--font-family); + --font-label-xsmall: 400 var(--font-size-label-xsmall)/var(--line-height-label-xsmall) var(--font-family); + --font-paragraphs-large: 400 var(--font-size-paragraphs-large)/var(--line-height-paragraphs-large) var(--font-family); + --font-paragraphs-medium: 400 var(--font-size-paragraphs-medium)/var(--line-height-paragraphs-medium) var(--font-family); + --font-paragraphs-small: 400 var(--font-size-paragraphs-small)/var(--line-height-paragraphs-small) var(--font-family); + --font-paragraphs-xsmall: 400 var(--font-size-paragraphs-xsmall)/var(--line-height-paragraphs-xsmall) var(--font-family); + + --leter-spacing-display: -0.003em; /* Color Primitives */ --color-white: hsla(0, 0%, 100%, 1); @@ -153,8 +153,8 @@ /* Border */ --border-radius: 0.5rem; - --border-radius--button: 0.6rem; - --border-radius--small: 0.4rem; + --border-radius-button: 0.6rem; + --border-radius-small: 0.4rem; @media (prefers-color-scheme: dark) { /* Foundation Colors */ diff --git a/blueprint/public/assets/css/index.css b/blueprint/public/assets/css/index.css index 60ec703..83a6f1c 100644 --- a/blueprint/public/assets/css/index.css +++ b/blueprint/public/assets/css/index.css @@ -1,2 +1,2 @@ -@font-face{font-display:swap;font-family:FONT_NAME;font-style:normal;font-weight:400;src:url(fonts/font-name-400.woff2) format("woff2"),url(fonts/font-name-400.woff) format("woff")}*{margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none;color-scheme:dark light;font-family:system-ui,sans-serif;font-size:62.5%;line-height:1.5}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{font-size:1.6rem;margin:0;min-block-size:100%;min-block-size:100dvb}dialog{margin:auto}a{color:inherit;text-underline-offset:.2ex}audio,canvas,embed,iframe,img,object,svg,video{display:block}img,picture,svg{block-size:auto;max-inline-size:100%}iframe{border:0}fieldset{border:0;margin:0;padding:0}label{display:block}button,input,textarea{background-color:transparent;border-radius:0;border-style:solid;border-width:1px;color:inherit;font:inherit;line-height:inherit;margin:0;padding:0}input[type=date],input[type=time]{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:inherit}textarea{resize:vertical;resize:block}button{text-align:start}button,summary{border:0;cursor:pointer}hr{-webkit-border-before:1px solid;block-size:0;border:none;border-block-start:1px solid;color:inherit;overflow:visible}summary{display:block}table{border-collapse:collapse}:disabled{cursor:not-allowed}:focus-visible{outline:2px solid Highlight;outline-offset:2px}[hidden]:not([hidden=until-found]){display:none!important}:root{--gap-inline:4rem;--gap-block:4rem;--max-width:160rem;--max-width--content:108rem;--max-width--text:68rem;--font-family:"FONT NAME",sans-serif;--font-family--display:serif;--font-family--heading:serif;--font-size--display-large:9.6rem;--font-size--display-medium:5.2rem;--font-size--display-small:5.2rem;--font-size--display-xsmall:3.6rem;--font-size--heading-xxlarge:4.0rem;--font-size--heading-xlarge:3.6rem;--font-size--heading-large:3.2rem;--font-size--heading-medium:2.8rem;--font-size--heading-small:2.4rem;--font-size--heading-xsmall:2.0rem;--font-size--label-large:1.8rem;--font-size--label-medium:1.6rem;--font-size--label-small:1.4rem;--font-size--label-xsmall:1.2rem;--font-size--paragraphs-large:1.8rem;--font-size--paragraphs-medium:1.6rem;--font-size--paragraphs-small:1.4rem;--font-size--paragraphs-xsmall:1.2rem;--font-size:var(--font-size--paragraphs-medium);--line-height--display-large:0.85714;--line-height--display-medium:0.8125;--line-height--display-small:1;--line-height--display-xsmall:0.81818;--line-height--heading-xxlarge:0.76923;--line-height--heading-xlarge:0.81818;--line-height--heading-large:0.8;--line-height--heading-medium:0.77778;--line-height--heading-small:0.75;--line-height--heading-xsmall:0.71429;--line-height--label-large:0.75;--line-height--label-medium:0.8;--line-height--label-small:0.875;--line-height--label-xsmall:0.75;--line-height--paragraphs-large:1.55556;--line-height--paragraphs-medium:1.5;--line-height--paragraphs-small:1.42857;--line-height--paragraphs-xsmall:1.66667;--line-height:var(--line-height--paragraphs-medium);--font--display-large:700 var(--font-size--display-large)/var(--line-height--display-large) var(--font-family--display);--font--display-medium:700 var(--font-size--display-medium)/var(--line-height--display-medium) var(--font-family--display);--font--display-small:700 var(--font-size--display-small)/var(--line-height--display-small) var(--font-family--display);--font--display-xsmall:700 var(--font-size--display-xsmall)/var(--line-height--display-xsmall) var(--font-family--display);--font--heading-xxlarge:700 var(--font-size--heading-xxlarge)/var(--line-height--heading-xxlarge) var(--font-family--heading);--font--heading-xlarge:700 var(--font-size--heading-xlarge)/var(--line-height--heading-xlarge) var(--font-family--heading);--font--heading-large:700 var(--font-size--heading-large)/var(--line-height--heading-large) var(--font-family--heading);--font--heading-medium:700 var(--font-size--heading-medium)/var(--line-height--heading-medium) var(--font-family--heading);--font--heading-small:700 var(--font-size--heading-small)/var(--line-height--heading-small) var(--font-family--heading);--font--heading-xsmall:700 var(--font-size--heading-xsmall)/var(--line-height--heading-xsmall) var(--font-family--heading);--font--label-large:400 var(--font-size--label-large)/var(--line-height--label-large) var(--font-family);--font--label-medium:400 var(--font-size--label-medium)/var(--line-height--label-medium) var(--font-family);--font--label-small:400 var(--font-size--label-small)/var(--line-height--label-small) var(--font-family);--font--label-xsmall:400 var(--font-size--label-xsmall)/var(--line-height--label-xsmall) var(--font-family);--font--paragraphs-large:400 var(--font-size--paragraphs-large)/var(--line-height--paragraphs-large) var(--font-family);--font--paragraphs-medium:400 var(--font-size--paragraphs-medium)/var(--line-height--paragraphs-medium) var(--font-family);--font--paragraphs-small:400 var(--font-size--paragraphs-small)/var(--line-height--paragraphs-small) var(--font-family);--font--paragraphs-xsmall:400 var(--font-size--paragraphs-xsmall)/var(--line-height--paragraphs-xsmall) var(--font-family);--leter-spacing--display:-0.003em;--color-white:#fff;--color-gray-50:#f2f2f2;--color-gray-100:#e6e6e6;--color-gray-200:#ccc;--color-gray-300:#b3b3b3;--color-gray-400:#999;--color-gray-500:grey;--color-gray-600:#666;--color-gray-700:#4d4d4d;--color-gray-800:#333;--color-gray-900:#1a1a1a;--color-gray-950:#0d0d0d;--color-black:#000;--color-red-50:#ffe6e6;--color-red-100:#fcc;--color-red-200:#f99;--color-red-300:#f66;--color-red-400:#f33;--color-red-500:red;--color-red-600:#c00;--color-red-700:#900;--color-red-800:#600;--color-red-900:#300;--color-yellow-50:#fffde6;--color-yellow-100:#fffbcc;--color-yellow-200:#fff799;--color-yellow-300:#fff266;--color-yellow-400:#fe3;--color-yellow-500:#ffea00;--color-yellow-600:#cb0;--color-yellow-700:#998c00;--color-yellow-800:#665e00;--color-yellow-900:#332f00;--color-primary-a:var(--color-black);--color-primary-b:var(--color-white);--color-negative:var(--color-red-400);--color-warning:var(--color-yellow-400);--color-positive:var(--color-green-400);--color-background-primary:var(--color-primary-b);--color-background-secondary:var(--color-gray-50);--color-background-tertiary:var(--color-gray-100);--color-background-primary-inverse:var(--color-primary-a);--color-background-secondary-inverse:var(--color-gray-800);--color-content-primary:var(--color-black);--color-content-secondary:var(--color-gray-600);--color-content-tertiary:var(--color-gray-500);--color-content-primary-inverse:var(--color-white);--color-content-secondary-inverse:var(--color-gray-300);--color-content-tertiary-inverse:var(--color-gray-400);--color-border-opaque:var(--color-gray-200);--color-border-transparent:color-mix(in hsl,var(--color-primary-a) 8%,transparent);--color-border-selected:var(--color-content-primary);--color-border-opaque-inverse:var(--color-gray-700);--color-border-transparent-inverse:color-mix(in hsl,var(--color-primary-b) 8%,transparent);--color-border-selected-inverse:var(--color-primary-b);--box-shadow:0 1px 10px -10px rgba(0,0,0,.1),0 1.5px 20px -10px rgba(0,0,0,.1),0 2px 30px -10px rgba(0,0,0,.1);--border-radius:0.5rem;--border-radius--button:0.6rem;--border-radius--small:0.4rem}@media (prefers-color-scheme:dark){:root{--color-primary-a:var(--color-gray-100);--color-primary-b:var(--color-gray-900);--color-negative:var(--color-red-600);--color-warning:var(--color-yellow-600);--color-positive:var(--color-green-600);--color-background-primary:var(--color-primary-b);--color-background-secondary:var(--color-gray-900);--color-background-tertiary:var(--color-gray-800);--color-background-primary-inverse:var(--color-gray-200);--color-background-secondary-inverse:var(--color-gray-300);--color-content-primary:var(--color-gray-100);--color-content-secondary:var(--color-gray-200);--color-content-tertiary:var(--color-gray-300);--color-content-primary-inverse:var(--color-black);--color-content-secondary-inverse:var(--color-gray-800);--color-content-tertiary-inverse:var(--color-gray-700);--color-border-opaque:var(--color-gray-900);--color-border-transparent:color-mix(in hsl,var(--color-primary-a) 8%,transparent);--color-border-selected:var(--color-primary-a);--color-border-opaque-inverse:var(--color-gray-700);--color-border-transparent-inverse:color-mix(in hsl,var(--color-primary-b) 20%,transparent);--color-border-selected-inverse:var(--color-primary-b)}}.GRID{--grid-inline:24px;--grid-block:10px;background-image:linear-gradient(rgba(0,0,0,.02) var(--grid-block),transparent var(--grid-block)),linear-gradient(90deg,rgba(0,0,0,.02) var(--grid-inline),transparent var(--grid-inline));background-position:top,calc(50% - var(--grid-inline)*.5);background-size:100% calc(var(--grid-block)*2),calc(var(--grid-inline)*2) 100%;inset:0;pointer-events:none;position:fixed}.a-heading,.a-heading.-xxlarge,h1.a-heading{font:var(--font--heading-xxlarge)}.a-heading.-xlarge,h2.a-heading{font:var(--font--heading-xlarge)}.a-heading.-large,h3.a-heading{font:var(--font--heading-large)}.a-heading.-medium,h4.a-heading{font:var(--font--heading-medium)}.a-heading.-small,h5.a-heading{font:var(--font--heading-small)}.a-heading.-xsmall,h5.a-heading{font:var(--font--heading-xsmall)}.a-text{--font-size:var(--font-size--paragraphs-medium);--line-height:var(--line-height--paragraphs-medium);font:var(--font--paragraphs-medium)}.a-text>h1{font:var(--font--heading-xxlarge)}.a-text>h2{font:var(--font--heading-xlarge)}.a-text>h3{font:var(--font--heading-large)}.a-text>h4{font:var(--font--heading-medium)}.a-text>h5{font:var(--font--heading-small)}.a-text>h6{font:var(--font--heading-xsmall)}.a-text>*+*{-webkit-margin-before:calc(var(--gap-block)*.75 + var(--typo-margin-top) + var(--typo-margin-bottom));margin-block-start:calc(var(--gap-block)*.75 + var(--typo-margin-top) + var(--typo-margin-bottom))}.a-text.-large{--font-size:var(--font-size--paragraphs-large);--line-height:var(--line-height--paragraphs-large);font:var(--font--paragraphs-large)}.a-text.-small{--font-size:var(--font-size--paragraphs-small);--line-height:var(--line-height--paragraphs-small);font:var(--font--paragraphs-small)}.a-text.-xsmall{--font-size:var(--font-size--paragraphs-xsmall);--line-height:var(--line-height--paragraphs-xsmall);font:var(--font--paragraphs-xsmall)}.a-text+.a-text{-webkit-margin-before:calc(var(--font-size)*var(--line-height));margin-block-start:calc(var(--font-size)*var(--line-height))}.a-heading+.a-text,.a-text.-large+.a-text{-webkit-margin-before:var(--gap-block);margin-block-start:var(--gap-block)}:root{--typo-cap-height:0.705;--typo-shoulder:calc(1 - var(--typo-cap-height));--typo-whitespace-top:0.17;--typo-whitespace-bottom:calc(var(--typo-shoulder) - var(--typo-whitespace-top))}.a-trim-leading{--typo-leading-remainder:calc((var(--line-height) - 1)/2);--typo-leading-top:calc(var(--typo-whitespace-top) + var(--typo-leading-remainder));--typo-leading-bottom:calc(var(--typo-whitespace-bottom) + var(--typo-leading-remainder));--typo-margin-top:calc(var(--typo-leading-top)*-1*var(--font-size));--typo-margin-bottom:calc(var(--typo-leading-bottom)*-1*var(--font-size));display:flow-root}.a-trim-leading:after,.a-trim-leading:before{content:"";display:block;visibility:hidden}.a-trim-leading:before{-webkit-margin-before:var(--typo-margin-top);margin-block-start:var(--typo-margin-top)}.a-trim-leading:after{-webkit-margin-after:var(--typo-margin-bottom);margin-block-end:var(--typo-margin-bottom)}.a-visually-hidden{border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.o-article{align-self:center;max-width:var(--max-width-content);padding-inline:var(--gap-inline)}.o-footer{-webkit-margin-before:auto;margin-block-start:auto}.t-default{align-content:start;display:flex;flex-direction:column} +@font-face{font-display:swap;font-family:FONT_NAME;font-style:normal;font-weight:400;src:url(fonts/font-name-400.woff2) format("woff2"),url(fonts/font-name-400.woff) format("woff")}*{margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none;color-scheme:dark light;font-family:system-ui,sans-serif;font-size:62.5%;line-height:1.5}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{font-size:1.6rem;margin:0;min-block-size:100%;min-block-size:100dvb}dialog{margin:auto}a{color:inherit;text-underline-offset:.2ex}audio,canvas,embed,iframe,img,object,svg,video{display:block}img,picture,svg{block-size:auto;max-inline-size:100%}iframe{border:0}fieldset{border:0;margin:0;padding:0}label{display:block}button,input,textarea{background-color:transparent;border-radius:0;border-style:solid;border-width:1px;color:inherit;font:inherit;line-height:inherit;margin:0;padding:0}input[type=date],input[type=time]{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:inherit}textarea{resize:vertical;resize:block}button{text-align:start}button,summary{border:0;cursor:pointer}hr{-webkit-border-before:1px solid;block-size:0;border:none;border-block-start:1px solid;color:inherit;overflow:visible}summary{display:block}table{border-collapse:collapse}:disabled{cursor:not-allowed}:focus-visible{outline:2px solid Highlight;outline-offset:2px}[hidden]:not([hidden=until-found]){display:none!important}:root{--gap-inline:4rem;--gap-block:4rem;--max-width:160rem;--max-width-content:108rem;--max-width-text:68rem;--font-family:"FONT NAME",sans-serif;--font-family-display:serif;--font-family-heading:serif;--font-size-display-large:9.6rem;--font-size-display-medium:5.2rem;--font-size-display-small:5.2rem;--font-size-display-xsmall:3.6rem;--font-size-heading-xxlarge:4.0rem;--font-size-heading-xlarge:3.6rem;--font-size-heading-large:3.2rem;--font-size-heading-medium:2.8rem;--font-size-heading-small:2.4rem;--font-size-heading-xsmall:2.0rem;--font-size-label-large:1.8rem;--font-size-label-medium:1.6rem;--font-size-label-small:1.4rem;--font-size-label-xsmall:1.2rem;--font-size-paragraphs-large:1.8rem;--font-size-paragraphs-medium:1.6rem;--font-size-paragraphs-small:1.4rem;--font-size-paragraphs-xsmall:1.2rem;--font-size:var(--font-size-paragraphs-medium);--line-height-display-large:0.85714;--line-height-display-medium:0.8125;--line-height-display-small:1;--line-height-display-xsmall:0.81818;--line-height-heading-xxlarge:0.76923;--line-height-heading-xlarge:0.81818;--line-height-heading-large:0.8;--line-height-heading-medium:0.77778;--line-height-heading-small:0.75;--line-height-heading-xsmall:0.71429;--line-height-label-large:0.75;--line-height-label-medium:0.8;--line-height-label-small:0.875;--line-height-label-xsmall:0.75;--line-height-paragraphs-large:1.55556;--line-height-paragraphs-medium:1.5;--line-height-paragraphs-small:1.42857;--line-height-paragraphs-xsmall:1.66667;--line-height:var(--line-height-paragraphs-medium);--font-display-large:700 var(--font-size-display-large)/var(--line-height-display-large) var(--font-family-display);--font-display-medium:700 var(--font-size-display-medium)/var(--line-height-display-medium) var(--font-family-display);--font-display-small:700 var(--font-size-display-small)/var(--line-height-display-small) var(--font-family-display);--font-display-xsmall:700 var(--font-size-display-xsmall)/var(--line-height-display-xsmall) var(--font-family-display);--font-heading-xxlarge:700 var(--font-size-heading-xxlarge)/var(--line-height-heading-xxlarge) var(--font-family-heading);--font-heading-xlarge:700 var(--font-size-heading-xlarge)/var(--line-height-heading-xlarge) var(--font-family-heading);--font-heading-large:700 var(--font-size-heading-large)/var(--line-height-heading-large) var(--font-family-heading);--font-heading-medium:700 var(--font-size-heading-medium)/var(--line-height-heading-medium) var(--font-family-heading);--font-heading-small:700 var(--font-size-heading-small)/var(--line-height-heading-small) var(--font-family-heading);--font-heading-xsmall:700 var(--font-size-heading-xsmall)/var(--line-height-heading-xsmall) var(--font-family-heading);--font-label-large:400 var(--font-size-label-large)/var(--line-height-label-large) var(--font-family);--font-label-medium:400 var(--font-size-label-medium)/var(--line-height-label-medium) var(--font-family);--font-label-small:400 var(--font-size-label-small)/var(--line-height-label-small) var(--font-family);--font-label-xsmall:400 var(--font-size-label-xsmall)/var(--line-height-label-xsmall) var(--font-family);--font-paragraphs-large:400 var(--font-size-paragraphs-large)/var(--line-height-paragraphs-large) var(--font-family);--font-paragraphs-medium:400 var(--font-size-paragraphs-medium)/var(--line-height-paragraphs-medium) var(--font-family);--font-paragraphs-small:400 var(--font-size-paragraphs-small)/var(--line-height-paragraphs-small) var(--font-family);--font-paragraphs-xsmall:400 var(--font-size-paragraphs-xsmall)/var(--line-height-paragraphs-xsmall) var(--font-family);--leter-spacing-display:-0.003em;--color-white:#fff;--color-gray-50:#f2f2f2;--color-gray-100:#e6e6e6;--color-gray-200:#ccc;--color-gray-300:#b3b3b3;--color-gray-400:#999;--color-gray-500:grey;--color-gray-600:#666;--color-gray-700:#4d4d4d;--color-gray-800:#333;--color-gray-900:#1a1a1a;--color-gray-950:#0d0d0d;--color-black:#000;--color-red-50:#ffe6e6;--color-red-100:#fcc;--color-red-200:#f99;--color-red-300:#f66;--color-red-400:#f33;--color-red-500:red;--color-red-600:#c00;--color-red-700:#900;--color-red-800:#600;--color-red-900:#300;--color-yellow-50:#fffde6;--color-yellow-100:#fffbcc;--color-yellow-200:#fff799;--color-yellow-300:#fff266;--color-yellow-400:#fe3;--color-yellow-500:#ffea00;--color-yellow-600:#cb0;--color-yellow-700:#998c00;--color-yellow-800:#665e00;--color-yellow-900:#332f00;--color-primary-a:var(--color-black);--color-primary-b:var(--color-white);--color-negative:var(--color-red-400);--color-warning:var(--color-yellow-400);--color-positive:var(--color-green-400);--color-background-primary:var(--color-primary-b);--color-background-secondary:var(--color-gray-50);--color-background-tertiary:var(--color-gray-100);--color-background-primary-inverse:var(--color-primary-a);--color-background-secondary-inverse:var(--color-gray-800);--color-content-primary:var(--color-black);--color-content-secondary:var(--color-gray-600);--color-content-tertiary:var(--color-gray-500);--color-content-primary-inverse:var(--color-white);--color-content-secondary-inverse:var(--color-gray-300);--color-content-tertiary-inverse:var(--color-gray-400);--color-border-opaque:var(--color-gray-200);--color-border-transparent:color-mix(in hsl,var(--color-primary-a) 8%,transparent);--color-border-selected:var(--color-content-primary);--color-border-opaque-inverse:var(--color-gray-700);--color-border-transparent-inverse:color-mix(in hsl,var(--color-primary-b) 8%,transparent);--color-border-selected-inverse:var(--color-primary-b);--box-shadow:0 1px 10px -10px rgba(0,0,0,.1),0 1.5px 20px -10px rgba(0,0,0,.1),0 2px 30px -10px rgba(0,0,0,.1);--border-radius:0.5rem;--border-radius-button:0.6rem;--border-radius-small:0.4rem}@media (prefers-color-scheme:dark){:root{--color-primary-a:var(--color-gray-100);--color-primary-b:var(--color-gray-900);--color-negative:var(--color-red-600);--color-warning:var(--color-yellow-600);--color-positive:var(--color-green-600);--color-background-primary:var(--color-primary-b);--color-background-secondary:var(--color-gray-900);--color-background-tertiary:var(--color-gray-800);--color-background-primary-inverse:var(--color-gray-200);--color-background-secondary-inverse:var(--color-gray-300);--color-content-primary:var(--color-gray-100);--color-content-secondary:var(--color-gray-200);--color-content-tertiary:var(--color-gray-300);--color-content-primary-inverse:var(--color-black);--color-content-secondary-inverse:var(--color-gray-800);--color-content-tertiary-inverse:var(--color-gray-700);--color-border-opaque:var(--color-gray-900);--color-border-transparent:color-mix(in hsl,var(--color-primary-a) 8%,transparent);--color-border-selected:var(--color-primary-a);--color-border-opaque-inverse:var(--color-gray-700);--color-border-transparent-inverse:color-mix(in hsl,var(--color-primary-b) 20%,transparent);--color-border-selected-inverse:var(--color-primary-b)}}.GRID{--grid-inline:24px;--grid-block:10px;background-image:linear-gradient(rgba(0,0,0,.02) var(--grid-block),transparent var(--grid-block)),linear-gradient(90deg,rgba(0,0,0,.02) var(--grid-inline),transparent var(--grid-inline));background-position:top,calc(50% - var(--grid-inline)*.5);background-size:100% calc(var(--grid-block)*2),calc(var(--grid-inline)*2) 100%;inset:0;pointer-events:none;position:fixed}.a-heading,.a-heading.-xxlarge,h1.a-heading{font:var(--font-heading-xxlarge)}.a-heading.-xlarge,h2.a-heading{font:var(--font-heading-xlarge)}.a-heading.-large,h3.a-heading{font:var(--font-heading-large)}.a-heading.-medium,h4.a-heading{font:var(--font-heading-medium)}.a-heading.-small,h5.a-heading{font:var(--font-heading-small)}.a-heading.-xsmall,h5.a-heading{font:var(--font-heading-xsmall)}.a-text{--font-size:var(--font-size-paragraphs-medium);--line-height:var(--line-height-paragraphs-medium);font:var(--font-paragraphs-medium)}.a-text>h1{font:var(--font-heading-xxlarge)}.a-text>h2{font:var(--font-heading-xlarge)}.a-text>h3{font:var(--font-heading-large)}.a-text>h4{font:var(--font-heading-medium)}.a-text>h5{font:var(--font-heading-small)}.a-text>h6{font:var(--font-heading-xsmall)}.a-text>*+*{-webkit-margin-before:calc(var(--gap-block)*.75 + var(--typo-margin-top) + var(--typo-margin-bottom));margin-block-start:calc(var(--gap-block)*.75 + var(--typo-margin-top) + var(--typo-margin-bottom))}.a-text.-large{--font-size:var(--font-size-paragraphs-large);--line-height:var(--line-height-paragraphs-large);font:var(--font-paragraphs-large)}.a-text.-small{--font-size:var(--font-size-paragraphs-small);--line-height:var(--line-height-paragraphs-small);font:var(--font-paragraphs-small)}.a-text.-xsmall{--font-size:var(--font-size-paragraphs-xsmall);--line-height:var(--line-height-paragraphs-xsmall);font:var(--font-paragraphs-xsmall)}.a-text+.a-text{-webkit-margin-before:calc(var(--font-size)*var(--line-height));margin-block-start:calc(var(--font-size)*var(--line-height))}.a-heading+.a-text,.a-text.-large+.a-text{-webkit-margin-before:var(--gap-block);margin-block-start:var(--gap-block)}:root{--typo-cap-height:0.705;--typo-shoulder:calc(1 - var(--typo-cap-height));--typo-whitespace-top:0.17;--typo-whitespace-bottom:calc(var(--typo-shoulder) - var(--typo-whitespace-top))}.a-trim-leading{--typo-leading-remainder:calc((var(--line-height) - 1)/2);--typo-leading-top:calc(var(--typo-whitespace-top) + var(--typo-leading-remainder));--typo-leading-bottom:calc(var(--typo-whitespace-bottom) + var(--typo-leading-remainder));--typo-margin-top:calc(var(--typo-leading-top)*-1*var(--font-size));--typo-margin-bottom:calc(var(--typo-leading-bottom)*-1*var(--font-size));display:flow-root}.a-trim-leading:after,.a-trim-leading:before{content:"";display:block;visibility:hidden}.a-trim-leading:before{-webkit-margin-before:var(--typo-margin-top);margin-block-start:var(--typo-margin-top)}.a-trim-leading:after{-webkit-margin-after:var(--typo-margin-bottom);margin-block-end:var(--typo-margin-bottom)}.a-visually-hidden{border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.o-article{align-self:center;max-width:var(--max-width-content);padding-inline:var(--gap-inline)}.o-footer{-webkit-margin-before:auto;margin-block-start:auto}.t-default{align-content:start;display:flex;flex-direction:column} /*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/blueprint/public/assets/css/index.css.map b/blueprint/public/assets/css/index.css.map index 9cdf1ea..e9b3bbe 100644 --- a/blueprint/public/assets/css/index.css.map +++ b/blueprint/public/assets/css/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../../develop/css/fonts/FONT_NAME.css","../../../develop/css/framework/reset.css","../../../develop/css/framework/variables.css","../../../develop/css/framework/GRID.css","../../../develop/css/components/a-heading.css","../../../develop/css/components/a-text.css","../../../develop/css/components/a-trim-leading.css","../../../develop/css/components/a-visually-hidden.css","../../../develop/css/components/o-article.css","../../../develop/css/components/o-footer.css","../../../develop/css/components/t-default.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["@font-face {\n\tfont-family: 'FONT_NAME';\n\tsrc: url('fonts/font-name-400.woff2') format('woff2'), url('fonts/font-name-400.woff') format('woff');\n\tfont-weight: 400;\n\tfont-display: swap; /* optional for “main” font weight */\n\tfont-style: normal;\n}\n","* {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nhtml {\n\tfont-family: system-ui, sans-serif;\n\t/* 1rem equals 10px, when 16px is default font-size */\n\tfont-size: 62.5%;\n\tline-height: 1.5;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\t-webkit-text-size-adjust: none;\n\tcolor-scheme: dark light;\n}\n@media (prefers-reduced-motion: no-preference) {\n\thtml {\n\t\tscroll-behavior: smooth;\n\t}\n}\n\nbody {\n\tmargin: 0;\n\tmin-block-size: 100%;\n\tmin-block-size: 100dvb;\n\tfont-size: 1.6rem;\n}\n\ndialog {\n\tmargin: auto;\n}\n\na {\n\tcolor: inherit;\n\ttext-underline-offset: 0.2ex;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nimg, picture, svg {\n\tmax-inline-size: 100%;\n\tblock-size: auto;\n}\n\niframe {\n\tborder: 0;\n}\n\nfieldset {\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput,\ntextarea,\nbutton {\n\tmargin: 0;\n\tborder-radius: 0;\n\tpadding: 0;\n\tfont: inherit;\n\tline-height: inherit;\n\tcolor: inherit;\n\tborder-width: 1px;\n\tborder-style: solid;\n\tbackground-color: transparent;\n}\n\ninput[type=\"date\"],\ninput[type=\"time\"] {\n\tappearance: none;\n\n\t&::-webkit-date-and-time-value {\n\t\ttext-align: inherit;\n\t}\n\t/* ::-webkit-calendar-picker-indicator {\n\t\tdisplay: none;\n\t} */\n}\n\ntextarea {\n\tresize: vertical;\n\tresize: block;\n}\n\nbutton {\n\ttext-align: start;\n}\n\nbutton, summary {\n\tborder: 0;\n\tcursor: pointer;\n}\n\nhr {\n\tborder: none;\n\tborder-block-start: 1px solid;\n\tcolor: inherit;\n\tblock-size: 0;\n\toverflow: visible;\n}\n\nsummary {\n\tdisplay: block;\n}\n\ntable {\n\tborder-collapse: collapse;\n}\n\n:disabled {\n\tcursor: not-allowed;\n}\n\n:focus-visible {\n\toutline: 2px solid Highlight;\n\toutline-offset: 2px;\n}\n\n[hidden]:not([hidden=\"until-found\"]) {\n\tdisplay: none !important;\n}\n","/* Naming of colors and fonts inspired by Uber Base (https://base.uber.com/6d2425e9f/p/8898fb-color-legacy/b/065744) */\n\n:root {\n\t/**\n\t * 1rem equals to 10px.\n\t * Each size should divide by 4.\n\t */\n\n\t/* Grid */\n\t--gap-inline: 4rem;\n\t--gap-block: 4rem;\n\n\t/* Sizes */\n\t--max-width: 160rem;\n\t--max-width--content: 108rem;\n\t--max-width--text: 68rem;\n\n\t/* Typography */\n\t--font-family: 'FONT NAME', sans-serif;\n\t--font-family--display: serif;\n\t--font-family--heading: serif;\n\n\t--font-size--display-large: 9.6rem;\n\t--font-size--display-medium: 5.2rem;\n\t--font-size--display-small: 5.2rem;\n\t--font-size--display-xsmall: 3.6rem;\n\t--font-size--heading-xxlarge: 4.0rem;\n\t--font-size--heading-xlarge: 3.6rem;\n\t--font-size--heading-large: 3.2rem;\n\t--font-size--heading-medium: 2.8rem;\n\t--font-size--heading-small: 2.4rem;\n\t--font-size--heading-xsmall: 2.0rem;\n\t--font-size--label-large: 1.8rem;\n\t--font-size--label-medium: 1.6rem;\n\t--font-size--label-small: 1.4rem;\n\t--font-size--label-xsmall: 1.2rem;\n\t--font-size--paragraphs-large: 1.8rem;\n\t--font-size--paragraphs-medium: 1.6rem;\n\t--font-size--paragraphs-small: 1.4rem;\n\t--font-size--paragraphs-xsmall: 1.2rem;\n\t--font-size: var(--font-size--paragraphs-medium);\n\n\t--line-height--display-large: calc(96 / 112);\n\t--line-height--display-medium: calc(52 / 64);\n\t--line-height--display-small: calc(52 / 52);\n\t--line-height--display-xsmall: calc(36 / 44);\n\t--line-height--heading-xxlarge: calc(40 / 52);\n\t--line-height--heading-xlarge: calc(36 / 44);\n\t--line-height--heading-large: calc(32 / 40);\n\t--line-height--heading-medium: calc(28 / 36);\n\t--line-height--heading-small: calc(24 / 32);\n\t--line-height--heading-xsmall: calc(20 / 28);\n\t--line-height--label-large: calc(18 / 24);\n\t--line-height--label-medium: calc(16 / 20);\n\t--line-height--label-small: calc(14 / 16);\n\t--line-height--label-xsmall: calc(12 / 16);\n\t--line-height--paragraphs-large: calc(28 / 18);\n\t--line-height--paragraphs-medium: calc(24 / 16);\n\t--line-height--paragraphs-small: calc(20 / 14);\n\t--line-height--paragraphs-xsmall: calc(20 / 12);\n\t--line-height: var(--line-height--paragraphs-medium);\n\n\t--font--display-large: 700 var(--font-size--display-large)/var(--line-height--display-large) var(--font-family--display);\n\t--font--display-medium: 700 var(--font-size--display-medium)/var(--line-height--display-medium) var(--font-family--display);\n\t--font--display-small: 700 var(--font-size--display-small)/var(--line-height--display-small) var(--font-family--display);\n\t--font--display-xsmall: 700 var(--font-size--display-xsmall)/var(--line-height--display-xsmall) var(--font-family--display);\n\t--font--heading-xxlarge: 700 var(--font-size--heading-xxlarge)/var(--line-height--heading-xxlarge) var(--font-family--heading);\n\t--font--heading-xlarge: 700 var(--font-size--heading-xlarge)/var(--line-height--heading-xlarge) var(--font-family--heading);\n\t--font--heading-large: 700 var(--font-size--heading-large)/var(--line-height--heading-large) var(--font-family--heading);\n\t--font--heading-medium: 700 var(--font-size--heading-medium)/var(--line-height--heading-medium) var(--font-family--heading);\n\t--font--heading-small: 700 var(--font-size--heading-small)/var(--line-height--heading-small) var(--font-family--heading);\n\t--font--heading-xsmall: 700 var(--font-size--heading-xsmall)/var(--line-height--heading-xsmall) var(--font-family--heading);\n\t--font--label-large: 400 var(--font-size--label-large)/var(--line-height--label-large) var(--font-family);\n\t--font--label-medium: 400 var(--font-size--label-medium)/var(--line-height--label-medium) var(--font-family);\n\t--font--label-small: 400 var(--font-size--label-small)/var(--line-height--label-small) var(--font-family);\n\t--font--label-xsmall: 400 var(--font-size--label-xsmall)/var(--line-height--label-xsmall) var(--font-family);\n\t--font--paragraphs-large: 400 var(--font-size--paragraphs-large)/var(--line-height--paragraphs-large) var(--font-family);\n\t--font--paragraphs-medium: 400 var(--font-size--paragraphs-medium)/var(--line-height--paragraphs-medium) var(--font-family);\n\t--font--paragraphs-small: 400 var(--font-size--paragraphs-small)/var(--line-height--paragraphs-small) var(--font-family);\n\t--font--paragraphs-xsmall: 400 var(--font-size--paragraphs-xsmall)/var(--line-height--paragraphs-xsmall) var(--font-family);\n\n\t--leter-spacing--display: -0.003em;\n\n\t/* Color Primitives */\n\t--color-white: hsla(0, 0%, 100%, 1);\n\t--color-gray-50: hsla(0, 0%, 95%, 1);\n\t--color-gray-100: hsla(0, 0%, 90%, 1);\n\t--color-gray-200: hsla(0, 0%, 80%, 1);\n\t--color-gray-300: hsla(0, 0%, 70%, 1);\n\t--color-gray-400: hsla(0, 0%, 60%, 1);\n\t--color-gray-500: hsla(0, 0%, 50%, 1);\n\t--color-gray-600: hsla(0, 0%, 40%, 1);\n\t--color-gray-700: hsla(0, 0%, 30%, 1);\n\t--color-gray-800: hsla(0, 0%, 20%, 1);\n\t--color-gray-900: hsla(0, 0%, 10%, 1);\n\t--color-gray-950: hsla(0, 0%, 5%, 1);\n\t--color-black: hsla(0, 0%, 0%, 1);\n\n\t--color-red-50: hsla(360, 100%, 95%, 1);\n\t--color-red-100: hsla(360, 100%, 90%, 1);\n\t--color-red-200: hsla(360, 100%, 80%, 1);\n\t--color-red-300: hsla(360, 100%, 70%, 1);\n\t--color-red-400: hsla(360, 100%, 60%, 1);\n\t--color-red-500: hsla(360, 100%, 50%, 1);\n\t--color-red-600: hsla(360, 100%, 40%, 1);\n\t--color-red-700: hsla(360, 100%, 30%, 1);\n\t--color-red-800: hsla(360, 100%, 20%, 1);\n\t--color-red-900: hsla(360, 100%, 10%, 1);\n\n\t--color-yellow-50: hsla(55, 100%, 95%, 1);\n\t--color-yellow-100: hsla(55, 100%, 90%, 1);\n\t--color-yellow-200: hsla(55, 100%, 80%, 1);\n\t--color-yellow-300: hsla(55, 100%, 70%, 1);\n\t--color-yellow-400: hsla(55, 100%, 60%, 1);\n\t--color-yellow-500: hsla(55, 100%, 50%, 1);\n\t--color-yellow-600: hsla(55, 100%, 40%, 1);\n\t--color-yellow-700: hsla(55, 100%, 30%, 1);\n\t--color-yellow-800: hsla(55, 100%, 20%, 1);\n\t--color-yellow-900: hsla(55, 100%, 10%, 1);\n\n\t/* Foundation Colors */\n\t--color-primary-a: var(--color-black);\n\t--color-primary-b: var(--color-white);\n\t--color-negative: var(--color-red-400);\n\t--color-warning: var(--color-yellow-400);\n\t--color-positive: var(--color-green-400);\n\n\t/* Core Colors */\n\t--color-background-primary: var(--color-primary-b);\n\t--color-background-secondary: var(--color-gray-50);\n\t--color-background-tertiary: var(--color-gray-100);\n\t--color-background-primary-inverse: var(--color-primary-a);\n\t--color-background-secondary-inverse: var(--color-gray-800);\n\n\t--color-content-primary: var(--color-black);\n\t--color-content-secondary: var(--color-gray-600);\n\t--color-content-tertiary: var(--color-gray-500);\n\t--color-content-primary-inverse: var(--color-white);\n\t--color-content-secondary-inverse: var(--color-gray-300);\n\t--color-content-tertiary-inverse: var(--color-gray-400);\n\n\t--color-border-opaque: var(--color-gray-200);\n\t--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);\n\t--color-border-selected: var(--color-content-primary);\n\t--color-border-opaque-inverse: var(--color-gray-700);\n\t--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 8%, transparent);\n\t--color-border-selected-inverse: var(--color-primary-b);\n\n\t/* Shadows */\n\t--box-shadow: 0 1px 10px -10px rgba(0,0,0,0.1),\n\t 0 1.5px 20px -10px rgba(0,0,0,0.1),\n\t 0 2px 30px -10px rgba(0,0,0,0.1);\n\n\t/* Border */\n\t--border-radius: 0.5rem;\n\t--border-radius--button: 0.6rem;\n\t--border-radius--small: 0.4rem;\n\n\t@media (prefers-color-scheme: dark) {\n\t\t/* Foundation Colors */\n\t\t--color-primary-a: var(--color-gray-100);\n\t\t--color-primary-b: var(--color-gray-900);\n\t\t--color-negative: var(--color-red-600);\n\t\t--color-warning: var(--color-yellow-600);\n\t\t--color-positive: var(--color-green-600);\n\n\t\t/* Core Colors */\n\t\t--color-background-primary: var(--color-primary-b);\n\t\t--color-background-secondary: var(--color-gray-900);\n\t\t--color-background-tertiary: var(--color-gray-800);\n\t\t--color-background-primary-inverse: var(--color-gray-200);\n\t\t--color-background-secondary-inverse: var(--color-gray-300);\n\n\t\t--color-content-primary: var(--color-gray-100);\n\t\t--color-content-secondary: var(--color-gray-200);\n\t\t--color-content-tertiary: var(--color-gray-300);\n\t\t--color-content-primary-inverse: var(--color-black);\n\t\t--color-content-secondary-inverse: var(--color-gray-800);\n\t\t--color-content-tertiary-inverse: var(--color-gray-700);\n\n\t\t--color-border-opaque: var(--color-gray-900);\n\t\t--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);\n\t\t--color-border-selected: var(--color-primary-a);\n\t\t--color-border-opaque-inverse: var(--color-gray-700);\n\t\t--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 20%, transparent);\n\t\t--color-border-selected-inverse: var(--color-primary-b);\n\t}\n}\n",".GRID {\n\t--grid-inline: 24px;\n\t--grid-block: 10px;\n\tposition: fixed;\n\tinset: 0;\n\tbackground-image:\n\t\tlinear-gradient(hsla(0, 0%, 0%, 0.02) var(--grid-block), hsla(0, 0%, 0%, 0) var(--grid-block)),\n\t\tlinear-gradient(90deg, hsla(0, 0%, 0%, 0.02) var(--grid-inline), hsla(0, 0%, 0%, 0) var(--grid-inline));\n\tbackground-size:\n\t\t100% calc(var(--grid-block) * 2),\n\t\tcalc(var(--grid-inline) * 2) 100%;\n\tbackground-position:\n\t\ttop,\n\t\tcalc(50% - var(--grid-inline) * .5);\n\tpointer-events: none;\n}\n",".a-heading {\n\tfont: var(--font--heading-xxlarge);\n}\n\nh1.a-heading,\n.a-heading.-xxlarge {\n\tfont: var(--font--heading-xxlarge);\n}\nh2.a-heading,\n.a-heading.-xlarge {\n\tfont: var(--font--heading-xlarge);\n}\nh3.a-heading,\n.a-heading.-large {\n\tfont: var(--font--heading-large);\n}\nh4.a-heading,\n.a-heading.-medium {\n\tfont: var(--font--heading-medium);\n}\nh5.a-heading,\n.a-heading.-small {\n\tfont: var(--font--heading-small);\n}\nh5.a-heading,\n.a-heading.-xsmall {\n\tfont: var(--font--heading-xsmall);\n}\n",".a-text {\n\t--font-size: var(--font-size--paragraphs-medium);\n\t--line-height: var(--line-height--paragraphs-medium);\n\n\tfont: var(--font--paragraphs-medium);\n\n\t> h1 {\n\t\tfont: var(--font--heading-xxlarge);\n\t}\n\t> h2 {\n\t\tfont: var(--font--heading-xlarge);\n\t}\n\t> h3 {\n\t\tfont: var(--font--heading-large);\n\t}\n\t> h4 {\n\t\tfont: var(--font--heading-medium);\n\t}\n\t> h5 {\n\t\tfont: var(--font--heading-small);\n\t}\n\t> h6 {\n\t\tfont: var(--font--heading-xsmall);\n\t}\n\n\t> * + * {\n\t\tmargin-block-start: calc(var(--gap-block) * 0.75 + var(--typo-margin-top) + var(--typo-margin-bottom));\n\t}\n\n\t&.-large {\n\t\t--font-size: var(--font-size--paragraphs-large);\n\t\t--line-height: var(--line-height--paragraphs-large);\n\n\t\tfont: var(--font--paragraphs-large);\n\t}\n\t&.-small {\n\t\t--font-size: var(--font-size--paragraphs-small);\n\t\t--line-height: var(--line-height--paragraphs-small);\n\n\t\tfont: var(--font--paragraphs-small);\n\t}\n\t&.-xsmall {\n\t\t--font-size: var(--font-size--paragraphs-xsmall);\n\t\t--line-height: var(--line-height--paragraphs-xsmall);\n\n\t\tfont: var(--font--paragraphs-xsmall);\n\t}\n\n\t& + & {\n\t\tmargin-block-start: calc(var(--font-size) * var(--line-height));\n\t}\n\t&.-large + & {\n\t\tmargin-block-start: var(--gap-block);\n\t}\n\n\t.a-heading + & {\n\t\tmargin-block-start: var(--gap-block);\n\t}\n}\n","/**\n * This class produces a block which is exactly as big as the\n * text content inside.\n * The whitespace above and below the text content is removed\n * by margin-block-[start|end].\n * `--font-size` and `--line-height` variables must be present.\n *\n * inspired by moma.org\n *\n * Further reading:\n * https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202\n * https://matthiasott.com/notes/the-thing-with-leading-in-css\n */\n\n:root {\n\t--typo-cap-height: 0.705; /* relative to leading */\n\t--typo-shoulder: calc(1 - var(--typo-cap-height));\n\t--typo-whitespace-top: 0.17;\n\t--typo-whitespace-bottom: calc(var(--typo-shoulder) - var(--typo-whitespace-top));\n}\n\n.a-trim-leading {\n\t--typo-leading-remainder: calc((var(--line-height) - 1) / 2);\n\t--typo-leading-top: calc(var(--typo-whitespace-top) + var(--typo-leading-remainder));\n\t--typo-leading-bottom: calc(var(--typo-whitespace-bottom) + var(--typo-leading-remainder));\n\t--typo-margin-top: calc(-1 * var(--typo-leading-top) * var(--font-size));\n\t--typo-margin-bottom: calc(-1 * var(--typo-leading-bottom) * var(--font-size));\n\n\tdisplay: flow-root;\n\n\t&::before,\n\t&::after {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tvisibility: hidden;\n\t}\n\n\t&::before {\n\t\tmargin-block-start: var(--typo-margin-top);\n\t}\n\n\t&::after {\n\t\tmargin-block-end: var(--typo-margin-bottom);\n\t}\n}\n",".a-visually-hidden {\n\tclip-path: inset(50%) !important;\n\theight: 1px !important;\n\twidth: 1px !important;\n\toverflow: hidden !important;\n\tposition: absolute !important;\n\twhite-space: nowrap !important;\n\tborder: 0 !important;\n}\n",".o-article {\n\talign-self: center;\n\t/* margin-block-start: 20px; */\n\tmax-width: var(--max-width-content);\n\tpadding-inline: var(--gap-inline);\n}\n",".o-footer {\n\tmargin-block-start: auto;\n}\n","/* Template components can only apply to the body element */\n.t-default {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-content: start;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../../../develop/css/fonts/FONT_NAME.css","../../../develop/css/framework/reset.css","../../../develop/css/framework/variables.css","../../../develop/css/framework/GRID.css","../../../develop/css/components/a-heading.css","../../../develop/css/components/a-text.css","../../../develop/css/components/a-trim-leading.css","../../../develop/css/components/a-visually-hidden.css","../../../develop/css/components/o-article.css","../../../develop/css/components/o-footer.css","../../../develop/css/components/t-default.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["@font-face {\n\tfont-family: 'FONT_NAME';\n\tsrc: url('fonts/font-name-400.woff2') format('woff2'), url('fonts/font-name-400.woff') format('woff');\n\tfont-weight: 400;\n\tfont-display: swap; /* optional for “main” font weight */\n\tfont-style: normal;\n}\n","* {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nhtml {\n\tfont-family: system-ui, sans-serif;\n\t/* 1rem equals 10px, when 16px is default font-size */\n\tfont-size: 62.5%;\n\tline-height: 1.5;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\t-webkit-text-size-adjust: none;\n\tcolor-scheme: dark light;\n}\n@media (prefers-reduced-motion: no-preference) {\n\thtml {\n\t\tscroll-behavior: smooth;\n\t}\n}\n\nbody {\n\tmargin: 0;\n\tmin-block-size: 100%;\n\tmin-block-size: 100dvb;\n\tfont-size: 1.6rem;\n}\n\ndialog {\n\tmargin: auto;\n}\n\na {\n\tcolor: inherit;\n\ttext-underline-offset: 0.2ex;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nimg, picture, svg {\n\tmax-inline-size: 100%;\n\tblock-size: auto;\n}\n\niframe {\n\tborder: 0;\n}\n\nfieldset {\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput,\ntextarea,\nbutton {\n\tmargin: 0;\n\tborder-radius: 0;\n\tpadding: 0;\n\tfont: inherit;\n\tline-height: inherit;\n\tcolor: inherit;\n\tborder-width: 1px;\n\tborder-style: solid;\n\tbackground-color: transparent;\n}\n\ninput[type=\"date\"],\ninput[type=\"time\"] {\n\tappearance: none;\n\n\t&::-webkit-date-and-time-value {\n\t\ttext-align: inherit;\n\t}\n\t/* ::-webkit-calendar-picker-indicator {\n\t\tdisplay: none;\n\t} */\n}\n\ntextarea {\n\tresize: vertical;\n\tresize: block;\n}\n\nbutton {\n\ttext-align: start;\n}\n\nbutton, summary {\n\tborder: 0;\n\tcursor: pointer;\n}\n\nhr {\n\tborder: none;\n\tborder-block-start: 1px solid;\n\tcolor: inherit;\n\tblock-size: 0;\n\toverflow: visible;\n}\n\nsummary {\n\tdisplay: block;\n}\n\ntable {\n\tborder-collapse: collapse;\n}\n\n:disabled {\n\tcursor: not-allowed;\n}\n\n:focus-visible {\n\toutline: 2px solid Highlight;\n\toutline-offset: 2px;\n}\n\n[hidden]:not([hidden=\"until-found\"]) {\n\tdisplay: none !important;\n}\n","/* Naming of colors and fonts inspired by Uber Base (https://base.uber.com/6d2425e9f/p/8898fb-color-legacy/b/065744) */\n\n:root {\n\t/**\n\t * 1rem equals to 10px.\n\t * Each size should divide by 4.\n\t */\n\n\t/* Grid */\n\t--gap-inline: 4rem;\n\t--gap-block: 4rem;\n\n\t/* Sizes */\n\t--max-width: 160rem;\n\t--max-width-content: 108rem;\n\t--max-width-text: 68rem;\n\n\t/* Typography */\n\t--font-family: 'FONT NAME', sans-serif;\n\t--font-family-display: serif;\n\t--font-family-heading: serif;\n\n\t--font-size-display-large: 9.6rem;\n\t--font-size-display-medium: 5.2rem;\n\t--font-size-display-small: 5.2rem;\n\t--font-size-display-xsmall: 3.6rem;\n\t--font-size-heading-xxlarge: 4.0rem;\n\t--font-size-heading-xlarge: 3.6rem;\n\t--font-size-heading-large: 3.2rem;\n\t--font-size-heading-medium: 2.8rem;\n\t--font-size-heading-small: 2.4rem;\n\t--font-size-heading-xsmall: 2.0rem;\n\t--font-size-label-large: 1.8rem;\n\t--font-size-label-medium: 1.6rem;\n\t--font-size-label-small: 1.4rem;\n\t--font-size-label-xsmall: 1.2rem;\n\t--font-size-paragraphs-large: 1.8rem;\n\t--font-size-paragraphs-medium: 1.6rem;\n\t--font-size-paragraphs-small: 1.4rem;\n\t--font-size-paragraphs-xsmall: 1.2rem;\n\t--font-size: var(--font-size-paragraphs-medium);\n\n\t--line-height-display-large: calc(96 / 112);\n\t--line-height-display-medium: calc(52 / 64);\n\t--line-height-display-small: calc(52 / 52);\n\t--line-height-display-xsmall: calc(36 / 44);\n\t--line-height-heading-xxlarge: calc(40 / 52);\n\t--line-height-heading-xlarge: calc(36 / 44);\n\t--line-height-heading-large: calc(32 / 40);\n\t--line-height-heading-medium: calc(28 / 36);\n\t--line-height-heading-small: calc(24 / 32);\n\t--line-height-heading-xsmall: calc(20 / 28);\n\t--line-height-label-large: calc(18 / 24);\n\t--line-height-label-medium: calc(16 / 20);\n\t--line-height-label-small: calc(14 / 16);\n\t--line-height-label-xsmall: calc(12 / 16);\n\t--line-height-paragraphs-large: calc(28 / 18);\n\t--line-height-paragraphs-medium: calc(24 / 16);\n\t--line-height-paragraphs-small: calc(20 / 14);\n\t--line-height-paragraphs-xsmall: calc(20 / 12);\n\t--line-height: var(--line-height-paragraphs-medium);\n\n\t--font-display-large: 700 var(--font-size-display-large)/var(--line-height-display-large) var(--font-family-display);\n\t--font-display-medium: 700 var(--font-size-display-medium)/var(--line-height-display-medium) var(--font-family-display);\n\t--font-display-small: 700 var(--font-size-display-small)/var(--line-height-display-small) var(--font-family-display);\n\t--font-display-xsmall: 700 var(--font-size-display-xsmall)/var(--line-height-display-xsmall) var(--font-family-display);\n\t--font-heading-xxlarge: 700 var(--font-size-heading-xxlarge)/var(--line-height-heading-xxlarge) var(--font-family-heading);\n\t--font-heading-xlarge: 700 var(--font-size-heading-xlarge)/var(--line-height-heading-xlarge) var(--font-family-heading);\n\t--font-heading-large: 700 var(--font-size-heading-large)/var(--line-height-heading-large) var(--font-family-heading);\n\t--font-heading-medium: 700 var(--font-size-heading-medium)/var(--line-height-heading-medium) var(--font-family-heading);\n\t--font-heading-small: 700 var(--font-size-heading-small)/var(--line-height-heading-small) var(--font-family-heading);\n\t--font-heading-xsmall: 700 var(--font-size-heading-xsmall)/var(--line-height-heading-xsmall) var(--font-family-heading);\n\t--font-label-large: 400 var(--font-size-label-large)/var(--line-height-label-large) var(--font-family);\n\t--font-label-medium: 400 var(--font-size-label-medium)/var(--line-height-label-medium) var(--font-family);\n\t--font-label-small: 400 var(--font-size-label-small)/var(--line-height-label-small) var(--font-family);\n\t--font-label-xsmall: 400 var(--font-size-label-xsmall)/var(--line-height-label-xsmall) var(--font-family);\n\t--font-paragraphs-large: 400 var(--font-size-paragraphs-large)/var(--line-height-paragraphs-large) var(--font-family);\n\t--font-paragraphs-medium: 400 var(--font-size-paragraphs-medium)/var(--line-height-paragraphs-medium) var(--font-family);\n\t--font-paragraphs-small: 400 var(--font-size-paragraphs-small)/var(--line-height-paragraphs-small) var(--font-family);\n\t--font-paragraphs-xsmall: 400 var(--font-size-paragraphs-xsmall)/var(--line-height-paragraphs-xsmall) var(--font-family);\n\n\t--leter-spacing-display: -0.003em;\n\n\t/* Color Primitives */\n\t--color-white: hsla(0, 0%, 100%, 1);\n\t--color-gray-50: hsla(0, 0%, 95%, 1);\n\t--color-gray-100: hsla(0, 0%, 90%, 1);\n\t--color-gray-200: hsla(0, 0%, 80%, 1);\n\t--color-gray-300: hsla(0, 0%, 70%, 1);\n\t--color-gray-400: hsla(0, 0%, 60%, 1);\n\t--color-gray-500: hsla(0, 0%, 50%, 1);\n\t--color-gray-600: hsla(0, 0%, 40%, 1);\n\t--color-gray-700: hsla(0, 0%, 30%, 1);\n\t--color-gray-800: hsla(0, 0%, 20%, 1);\n\t--color-gray-900: hsla(0, 0%, 10%, 1);\n\t--color-gray-950: hsla(0, 0%, 5%, 1);\n\t--color-black: hsla(0, 0%, 0%, 1);\n\n\t--color-red-50: hsla(360, 100%, 95%, 1);\n\t--color-red-100: hsla(360, 100%, 90%, 1);\n\t--color-red-200: hsla(360, 100%, 80%, 1);\n\t--color-red-300: hsla(360, 100%, 70%, 1);\n\t--color-red-400: hsla(360, 100%, 60%, 1);\n\t--color-red-500: hsla(360, 100%, 50%, 1);\n\t--color-red-600: hsla(360, 100%, 40%, 1);\n\t--color-red-700: hsla(360, 100%, 30%, 1);\n\t--color-red-800: hsla(360, 100%, 20%, 1);\n\t--color-red-900: hsla(360, 100%, 10%, 1);\n\n\t--color-yellow-50: hsla(55, 100%, 95%, 1);\n\t--color-yellow-100: hsla(55, 100%, 90%, 1);\n\t--color-yellow-200: hsla(55, 100%, 80%, 1);\n\t--color-yellow-300: hsla(55, 100%, 70%, 1);\n\t--color-yellow-400: hsla(55, 100%, 60%, 1);\n\t--color-yellow-500: hsla(55, 100%, 50%, 1);\n\t--color-yellow-600: hsla(55, 100%, 40%, 1);\n\t--color-yellow-700: hsla(55, 100%, 30%, 1);\n\t--color-yellow-800: hsla(55, 100%, 20%, 1);\n\t--color-yellow-900: hsla(55, 100%, 10%, 1);\n\n\t/* Foundation Colors */\n\t--color-primary-a: var(--color-black);\n\t--color-primary-b: var(--color-white);\n\t--color-negative: var(--color-red-400);\n\t--color-warning: var(--color-yellow-400);\n\t--color-positive: var(--color-green-400);\n\n\t/* Core Colors */\n\t--color-background-primary: var(--color-primary-b);\n\t--color-background-secondary: var(--color-gray-50);\n\t--color-background-tertiary: var(--color-gray-100);\n\t--color-background-primary-inverse: var(--color-primary-a);\n\t--color-background-secondary-inverse: var(--color-gray-800);\n\n\t--color-content-primary: var(--color-black);\n\t--color-content-secondary: var(--color-gray-600);\n\t--color-content-tertiary: var(--color-gray-500);\n\t--color-content-primary-inverse: var(--color-white);\n\t--color-content-secondary-inverse: var(--color-gray-300);\n\t--color-content-tertiary-inverse: var(--color-gray-400);\n\n\t--color-border-opaque: var(--color-gray-200);\n\t--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);\n\t--color-border-selected: var(--color-content-primary);\n\t--color-border-opaque-inverse: var(--color-gray-700);\n\t--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 8%, transparent);\n\t--color-border-selected-inverse: var(--color-primary-b);\n\n\t/* Shadows */\n\t--box-shadow: 0 1px 10px -10px rgba(0,0,0,0.1),\n\t 0 1.5px 20px -10px rgba(0,0,0,0.1),\n\t 0 2px 30px -10px rgba(0,0,0,0.1);\n\n\t/* Border */\n\t--border-radius: 0.5rem;\n\t--border-radius-button: 0.6rem;\n\t--border-radius-small: 0.4rem;\n\n\t@media (prefers-color-scheme: dark) {\n\t\t/* Foundation Colors */\n\t\t--color-primary-a: var(--color-gray-100);\n\t\t--color-primary-b: var(--color-gray-900);\n\t\t--color-negative: var(--color-red-600);\n\t\t--color-warning: var(--color-yellow-600);\n\t\t--color-positive: var(--color-green-600);\n\n\t\t/* Core Colors */\n\t\t--color-background-primary: var(--color-primary-b);\n\t\t--color-background-secondary: var(--color-gray-900);\n\t\t--color-background-tertiary: var(--color-gray-800);\n\t\t--color-background-primary-inverse: var(--color-gray-200);\n\t\t--color-background-secondary-inverse: var(--color-gray-300);\n\n\t\t--color-content-primary: var(--color-gray-100);\n\t\t--color-content-secondary: var(--color-gray-200);\n\t\t--color-content-tertiary: var(--color-gray-300);\n\t\t--color-content-primary-inverse: var(--color-black);\n\t\t--color-content-secondary-inverse: var(--color-gray-800);\n\t\t--color-content-tertiary-inverse: var(--color-gray-700);\n\n\t\t--color-border-opaque: var(--color-gray-900);\n\t\t--color-border-transparent: color-mix(in hsl, var(--color-primary-a) 8%, transparent);\n\t\t--color-border-selected: var(--color-primary-a);\n\t\t--color-border-opaque-inverse: var(--color-gray-700);\n\t\t--color-border-transparent-inverse: color-mix(in hsl, var(--color-primary-b) 20%, transparent);\n\t\t--color-border-selected-inverse: var(--color-primary-b);\n\t}\n}\n",".GRID {\n\t--grid-inline: 24px;\n\t--grid-block: 10px;\n\tposition: fixed;\n\tinset: 0;\n\tbackground-image:\n\t\tlinear-gradient(hsla(0, 0%, 0%, 0.02) var(--grid-block), hsla(0, 0%, 0%, 0) var(--grid-block)),\n\t\tlinear-gradient(90deg, hsla(0, 0%, 0%, 0.02) var(--grid-inline), hsla(0, 0%, 0%, 0) var(--grid-inline));\n\tbackground-size:\n\t\t100% calc(var(--grid-block) * 2),\n\t\tcalc(var(--grid-inline) * 2) 100%;\n\tbackground-position:\n\t\ttop,\n\t\tcalc(50% - var(--grid-inline) * .5);\n\tpointer-events: none;\n}\n",".a-heading {\n\tfont: var(--font-heading-xxlarge);\n}\n\nh1.a-heading,\n.a-heading.-xxlarge {\n\tfont: var(--font-heading-xxlarge);\n}\nh2.a-heading,\n.a-heading.-xlarge {\n\tfont: var(--font-heading-xlarge);\n}\nh3.a-heading,\n.a-heading.-large {\n\tfont: var(--font-heading-large);\n}\nh4.a-heading,\n.a-heading.-medium {\n\tfont: var(--font-heading-medium);\n}\nh5.a-heading,\n.a-heading.-small {\n\tfont: var(--font-heading-small);\n}\nh5.a-heading,\n.a-heading.-xsmall {\n\tfont: var(--font-heading-xsmall);\n}\n",".a-text {\n\t--font-size: var(--font-size-paragraphs-medium);\n\t--line-height: var(--line-height-paragraphs-medium);\n\n\tfont: var(--font-paragraphs-medium);\n\n\t> h1 {\n\t\tfont: var(--font-heading-xxlarge);\n\t}\n\t> h2 {\n\t\tfont: var(--font-heading-xlarge);\n\t}\n\t> h3 {\n\t\tfont: var(--font-heading-large);\n\t}\n\t> h4 {\n\t\tfont: var(--font-heading-medium);\n\t}\n\t> h5 {\n\t\tfont: var(--font-heading-small);\n\t}\n\t> h6 {\n\t\tfont: var(--font-heading-xsmall);\n\t}\n\n\t> * + * {\n\t\tmargin-block-start: calc(var(--gap-block) * 0.75 + var(--typo-margin-top) + var(--typo-margin-bottom));\n\t}\n\n\t&.-large {\n\t\t--font-size: var(--font-size-paragraphs-large);\n\t\t--line-height: var(--line-height-paragraphs-large);\n\n\t\tfont: var(--font-paragraphs-large);\n\t}\n\t&.-small {\n\t\t--font-size: var(--font-size-paragraphs-small);\n\t\t--line-height: var(--line-height-paragraphs-small);\n\n\t\tfont: var(--font-paragraphs-small);\n\t}\n\t&.-xsmall {\n\t\t--font-size: var(--font-size-paragraphs-xsmall);\n\t\t--line-height: var(--line-height-paragraphs-xsmall);\n\n\t\tfont: var(--font-paragraphs-xsmall);\n\t}\n\n\t& + & {\n\t\tmargin-block-start: calc(var(--font-size) * var(--line-height));\n\t}\n\t&.-large + & {\n\t\tmargin-block-start: var(--gap-block);\n\t}\n\n\t.a-heading + & {\n\t\tmargin-block-start: var(--gap-block);\n\t}\n}\n","/**\n * This class produces a block which is exactly as big as the\n * text content inside.\n * The whitespace above and below the text content is removed\n * by margin-block-[start|end].\n * `--font-size` and `--line-height` variables must be present.\n *\n * inspired by moma.org\n *\n * Further reading:\n * https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202\n * https://matthiasott.com/notes/the-thing-with-leading-in-css\n */\n\n:root {\n\t--typo-cap-height: 0.705; /* relative to leading */\n\t--typo-shoulder: calc(1 - var(--typo-cap-height));\n\t--typo-whitespace-top: 0.17;\n\t--typo-whitespace-bottom: calc(var(--typo-shoulder) - var(--typo-whitespace-top));\n}\n\n.a-trim-leading {\n\t--typo-leading-remainder: calc((var(--line-height) - 1) / 2);\n\t--typo-leading-top: calc(var(--typo-whitespace-top) + var(--typo-leading-remainder));\n\t--typo-leading-bottom: calc(var(--typo-whitespace-bottom) + var(--typo-leading-remainder));\n\t--typo-margin-top: calc(-1 * var(--typo-leading-top) * var(--font-size));\n\t--typo-margin-bottom: calc(-1 * var(--typo-leading-bottom) * var(--font-size));\n\n\tdisplay: flow-root;\n\n\t&::before,\n\t&::after {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tvisibility: hidden;\n\t}\n\n\t&::before {\n\t\tmargin-block-start: var(--typo-margin-top);\n\t}\n\n\t&::after {\n\t\tmargin-block-end: var(--typo-margin-bottom);\n\t}\n}\n",".a-visually-hidden {\n\tclip-path: inset(50%) !important;\n\theight: 1px !important;\n\twidth: 1px !important;\n\toverflow: hidden !important;\n\tposition: absolute !important;\n\twhite-space: nowrap !important;\n\tborder: 0 !important;\n}\n",".o-article {\n\talign-self: center;\n\t/* margin-block-start: 20px; */\n\tmax-width: var(--max-width-content);\n\tpadding-inline: var(--gap-inline);\n}\n",".o-footer {\n\tmargin-block-start: auto;\n}\n","/* Template components can only apply to the body element */\n.t-default {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-content: start;\n}\n"]} \ No newline at end of file diff --git a/css/README.md b/css/README.md index 78a946a..1c4a0aa 100644 --- a/css/README.md +++ b/css/README.md @@ -34,11 +34,11 @@ Variables should be named after the property for which they are intended. Example: `--transition-duration: 300ms` instead of `--transition: 300ms`. `--transition: opacity 200ms linear` is fine, beacuse it describes the whole transition property. -Most of the time, variables are meant for a specific *thing*. To describe this specific *thing*, use `--` to separate the attribute name from the *thing*. -Example: `--transition-duration--popup: 500ms` +Most of the time, variables are meant for a specific *thing*. To describe this specific *thing*, use `-` to separate the attribute name from the *thing*. +Example: `--transition-duration-popup: 500ms` For *variables*, the rule that function is preferable over appearance also applies. -Example: `--font-family--heading` instead of `--font-family--serif`. +Example: `--font-family-heading` instead of `--font-family-serif`.
Colors