diff --git a/.stylelintignore b/.stylelintignore index aebd0ab..0aab765 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1 +1,9 @@ source/matter.source.css +**/*.theme.css +.vscode +.idea +.ddev +assets +node_modules +dist +build diff --git a/.stylelintrc.json b/.stylelintrc.json index ac45530..3ceffd9 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -8,6 +8,7 @@ "custom-property-pattern": ["^[a-z]([a-z0-9]+-)*[a-z0-9]+(--[a-z0-9]+([a-z0-9-]+)?)*$", { "message": "Expected kebab-case with optional double-dash suffix" }], "media-feature-range-notation": null, "alpha-value-notation": null, - "at-rule-no-unknown": [true, { "ignoreAtRules": ["import-glob"] }] + "media-query-no-invalid": null, + "at-rule-no-unknown": [true, { "ignoreAtRules": ["import-glob", "custom-media"] }] } } diff --git a/README.md b/README.md index 7d44021..1f04f8f 100644 --- a/README.md +++ b/README.md @@ -8,13 +8,23 @@ Matter is a component-based Drupal base theme built on [atomic design](https://a ## Requirements -- [Drupal 11](https://www.drupal.org/about/drupal-11) - Drupal core 11 or higher -- [Components](https://www.drupal.org/project/components) - Drupal module -- [UI Icons](https://www.drupal.org/project/ui_icons) - Drupal module -- [UI Patterns](https://www.drupal.org/project/ui_patterns) - Drupal module -- [UI Skins](https://www.drupal.org/project/ui_skins) - Drupal module -- [UI Styles](https://www.drupal.org/project/ui_styles) - Drupal module -- [Node.js](https://nodejs.org) - Node.js 14 or higher for asset compilation +### Drupal +- [Drupal 11](https://www.drupal.org/about/drupal-11) - Drupal core 11 or higher +- [Components](https://www.drupal.org/project/components) - Drupal module: maps source components to Twig templates +- [More Global Variables](https://www.drupal.org/project/mgv) - Drupal module: provides additional global variables for use in Twig templates +- [Roles Classes](https://www.drupal.org/project/body_roles_classes) - Drupal module: adds role-based classes to the body element +- [UI Icons](https://www.drupal.org/project/ui_icons) - Drupal module: integrates icon libraries +- [UI Patterns](https://www.drupal.org/project/ui_patterns) - Drupal module: provides reusable UI patterns +- [UI Skins](https://www.drupal.org/project/ui_skins) - Drupal module: allows for themeable UI skins +- [UI Styles](https://www.drupal.org/project/ui_styles) - Drupal module: manages global UI styles + +### Development +- [Apache](https://httpd.apache.org/) - Apache 2.4 or higher for local development server +- [PHP](https://www.php.net) - PHP 8.0 or higher for Drupal and Composer (PHP 8.4 recommended) +- [Composer](https://getcomposer.org) - Composer 2 or higher for managing Drupal dependencies +- [Node.js](https://nodejs.org) - Node.js 14 or higher for asset compilation +- [Gulp](https://gulpjs.com/) - Gulp 4 for automating asset pipeline tasks +- [PostCSS](https://postcss.org/) - PostCSS 8 for processing CSS with plugins (import resolution, polyfills, minification) ## Structure diff --git a/assets/css/matter.theme.css b/assets/css/matter.theme.css index af3f991..58bbd3c 100644 --- a/assets/css/matter.theme.css +++ b/assets/css/matter.theme.css @@ -1 +1 @@ -@font-face{font-family:Roboto;src:local("../fonts/roboto/regular/Roboto-Regular.ttf");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:local("../fonts/roboto/regular/Roboto-Bold.ttf");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:local("../fonts/roboto/regular/Roboto-Italic.ttf");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:local("../fonts/roboto/regular/Roboto-BoldItalic.ttf");font-weight:700;font-style:italic}@font-face{font-family:Roboto Mono;src:local("../fonts/roboto/mono/RobotoMono-Regular.ttf");font-weight:400;font-style:normal}@font-face{font-family:Roboto Mono;src:local("../fonts/roboto/mono/RobotoMono-Bold.ttf");font-weight:700;font-style:normal}@font-face{font-family:Roboto Mono;src:local("../fonts/roboto/mono/RobotoMono-Italic.ttf");font-weight:400;font-style:italic}@font-face{font-family:Roboto Slab;src:local("../fonts/roboto/slab/RobotoSlab-Regular.ttf");font-weight:400;font-style:normal}@font-face{font-family:Roboto Slab;src:local("../fonts/roboto/slab/RobotoSlab-Bold.ttf");font-weight:700;font-style:normal}.grid-global,.grid-wrapper--min,.grid-wrapper--max{--gutter-mobile:1.5rem;--gutter-tablet:2.5rem;--gutter-desktop:3.5rem;--gutter:var(--gutter-mobile);@media screen and (width>786px){--gutter:var(--gutter-tablet)}@media screen and (width>1023px){--gutter:var(--gutter-desktop)}}.grid-global{overflow-inline:hidden;--inner-max-width:100%;grid-template:"header" auto "main" 1fr "footer" auto / [page-start] minmax(var(--gutter), 1fr) [inner-start] minmax(0, var(--inner-max-width)) [inner-end] minmax(var(--gutter), 1fr) [page-end];min-block-size:100dvb;max-inline-size:100vi}.grid-wrapper--min,.grid-wrapper--max{--content-max-width:85rem;--wrapper-max-width:75.75rem;--content-size:calc((var(--content-max-width) - var(--wrapper-max-width)) / 2)}.grid-wrapper--min{grid-template-columns:[page-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--content-size)) [wrapper-start] minmax(0, var(--wrapper-max-width)) [wrapper-end] minmax(0, var(--content-size)) [content-end] minmax(var(--gutter), 1fr) [page-end]}.grid-wrapper--max{--narrow-max-width:42.875rem;--wrapper-size:calc((var(--wrapper-max-width) - var(--narrow-max-width)) / 2);grid-template-columns:[page-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--content-size)) [wrapper-start] minmax(0, var(--wrapper-size)) [narrow-start] minmax(0, var(--narrow-max-width)) [narrow-end] minmax(0, var(--wrapper-size)) [wrapper-end] minmax(0, var(--content-size)) [content-end] minmax(var(--gutter), 1fr) [page-end]}@layer reset{html{interpolate-size:allow-keywords;font-family:var(--font-stack--base,system-ui);accent-color:var(--default-accent);-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;block-size:100%;scroll-padding-block:5lh;line-height:1.6;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}}body{min-block-size:100svh;font-family:var(--font-stack--base);background:var(--default-color-bg);color:var(--default-color-text);font-size:var(--font-size-0);grid-template-rows:auto 1fr auto;margin:0;line-height:1.6;display:grid}h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block:0}h1,h2,h3,h4{text-wrap:balance}h1,h2{font-weight:900}h1{font-size:var(--font-size-5);font-weight:900;position:relative}h1+p,.hero h1~p{font-size:var(--font-size-2)}.hero h1~p:last-of-type{margin-block-end:var(--spacing-2xl)}h2{font-size:var(--font-size-3)}h1,h2,h3,h4,button,input,label{line-height:1.1}img,picture,iframe{max-inline-size:100%;height:auto;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea{min-block-size:5lh}a:not([class]){color:var(--link);text-underline-offset:.25ex;text-decoration-thickness:0;transition:all .2s ease-in-out;&:hover,&:focus-visible{text-decoration-color:var(--link);text-underline-offset:.5ex;text-decoration-thickness:.25ex}}::selection{background:hsl(from var(--default-accent) h s l / .5)}::marker{color:var(--default-accent)}}.hidden{visibility:hidden;display:none}.grid{display:grid}.flex{--gutter:1.75rem;gap:var(--gutter);display:flex}.grid,.flex{&.centered{justify-content:center}}.container{container-type:inline-size}.sticky{--min-height:3.75rem;position:sticky;&.top-00{inset-block-start:0}&.top-01{inset-block-start:var(--min-height)}&.top-02{inset-block-start:calc(var(--min-height) * 2)}}.icon{vertical-align:middle;margin-block-start:calc(1ex - 1cap)}.hero{background-color:#fff;align-content:center;gap:0;min-block-size:30rem}.breakout{padding-block:var(--gutter);background-color:#add8e6;& p{max-inline-size:100%}}.overlay{--color-black--001:#00000080;border-image:linear-gradient(var(--color-black--001), var(--color-black--001)) fill 1}.cards{display:grid;& .card{grid-template-rows:subgrid;display:grid}}.focus{& .focus-item{border:calc(var(--border-size) * 2) solid var(--color-black--004);color:var(--color-black--001);min-block-size:calc(100% - (var(--border-size) * 4));background-color:#0000}}.no-bullets{list-style:""}html,body{font-family:var(--font-stack--base)}h1,h2,h3,h4,h5,h6{font-weight:700;font-family:var(--font-stack--slab)}h1,.heading-1{font-size:clamp(1.75rem,4vi,2.125rem)}h2,.heading-2{font-size:clamp(1.5rem,3.5vi,1.875rem)}h3,.heading-3{font-size:clamp(1.25rem,3vi,1.5rem)}h4,.heading-4{font-size:clamp(1.125rem,2.5vi,1.25rem)}h5,.heading-5{font-size:clamp(1rem,2vi,1.125rem)}h6,.heading-6{font-size:clamp(.875rem,1.5vi,1rem)}em{font-style:italic}strong{font-weight:700}.gin--core-navigation{& .off-canvas{block-size:calc(100dvb - var(--toolbars-height));min-block-size:calc(100dvb - var(--toolbars-height));@media screen and (width>1023px){block-size:calc(100dvb - var(--top-bar-height));min-block-size:calc(100dvb - var(--top-bar-height))}}}.off-canvas{overflow:clip;&>*{grid-column:page}& header{grid-row:header;& .block-system{align-items:center;min-block-size:100%}@media (width<1700px){grid-template-columns:auto 1fr auto}}& main{grid-row:main;&>*{grid-column:content;grid-template-columns:subgrid;display:grid;&>*{grid-column:content}}}& footer{grid-row:footer}}.off-canvas{& a{color:var(--color-black--004);text-decoration-style:dashed;text-decoration-thickness:var(--spacing);text-decoration-color:var(--color-black--004);text-underline-offset:var(--spacing);&:hover{color:var(--color-black--001)}}}:root{--color-light--001:white;--color-light--002:#f5f4f4;--color-light--003:#eae9e9;--color-light--004:#b7b7b6;--color-dark--001:black;--color-dark--002:#100f0d;--color-dark--003:#282725;--color-dark--004:#585756;--color-yellow--001:#efe100;--color-blue--001:#07c}@media (prefers-color-scheme:light){:root{--neutral-50:#f9fafb;--neutral-100:#f3f4f7;--neutral-200:#edeff2;--neutral-300:#e8eaed;--neutral-400:#e2e4e9;--neutral-500:#d3d7de;--neutral-600:#b8bdc7;--neutral-700:#818898;--neutral-800:#5a6272;--neutral-900:#14181f;--brand-blue:#1b4fb6;--brand-red:#d9363e;--color-state-success:#2eb88a;--color-state-warning:#f29e0d;--color-state-error:#dd4b52}}[data-theme=light]{--neutral-50:#f9fafb;--neutral-100:#f3f4f7;--neutral-200:#edeff2;--neutral-300:#e8eaed;--neutral-400:#e2e4e9;--neutral-500:#d3d7de;--neutral-600:#b8bdc7;--neutral-700:#818898;--neutral-800:#5a6272;--neutral-900:#14181f;--brand-blue:#1b4fb6;--brand-red:#d9363e}[data-theme=dark]{--neutral-900:#dadad7;--neutral-800:#b5b5b0;--neutral-700:#82827d;--neutral-600:#5e5e55;--neutral-500:#4a4a45;--neutral-400:#3f3f3b;--neutral-300:#393937;--neutral-200:#32322f;--neutral-100:#2a2a27;--neutral-50:#23231f;--color-state-success:#2eb88a;--color-state-warning:#f29e0d;--color-state-error:#dd4b52}:root{--font-stack--base:roboto, sans-serif, ui-sans-serif;--font-stack--mono:roboto mono, monospace, ui-monospace;--font-stack--slab:roboto slab, serif, ui-serif;--font-weight--bold:700;--font-size--2:clamp(.7387rem, .7987rem + -.0775vw, .7813rem);--font-size--1:clamp(.9375rem, .9182rem + .0857vw, .9846rem);--font-size-0:clamp(1.125rem, 1.0483rem + .3409vw, 1.3125rem);--font-size-1:clamp(1.35rem, 1.1865rem + .7265vw, 1.7496rem);--font-size-2:clamp(1.62rem, 1.3287rem + 1.2948vw, 2.3322rem);--font-size-3:clamp(1.944rem, 1.4675rem + 2.1178vw, 3.1088rem);--font-size-4:clamp(2.3328rem, 1.5919rem + 3.2931vw, 4.144rem);--font-size-5:clamp(2.7994rem, 1.6848rem + 4.9538vw, 5.524rem);--height:max(1.5rem, 4rem);--page-title-size:3.815em;--page-title-sub-size:clamp(.75rem, 1.5vi, 1.125rem);--gutter:2rem;--gap:1.5rem;--gap-alt:.5em;--space:.15em;--padding-block:.75rem;--padding-inline:1rem;--padding-default:var(--padding-block) var(--padding-inline);--spacing-3xs:clamp(.3125rem, .3125rem + 0vw, .3125rem);--spacing-2xs:clamp(.5625rem, .5114rem + .2273vw, .6875rem);--spacing-xs:clamp(.875rem, .8239rem + .2273vw, 1rem);--spacing-s:clamp(1.125rem, 1.0483rem + .3409vw, 1.3125rem);--spacing-m:clamp(1.6875rem, 1.5597rem + .5682vw, 2rem);--spacing-l:clamp(2.25rem, 2.0966rem + .6818vw, 2.625rem);--spacing-xl:clamp(3.375rem, 3.1449rem + 1.0227vw, 3.9375rem);--spacing-2xl:clamp(4.5rem, 4.1932rem + 1.3636vw, 5.25rem);--spacing-3xl:clamp(6.75rem, 6.2898rem + 2.0455vw, 7.875rem);--spacing-4xl:clamp(9rem, 8.3864rem + 2.7273vw, 10.5rem);--spacing-3xs-2xs:clamp(.3125rem, .1591rem + .6818vw, .6875rem);--spacing-2xs-xs:clamp(.5625rem, .3835rem + .7955vw, 1rem);--spacing-xs-s:clamp(.875rem, .696rem + .7955vw, 1.3125rem);--link:inherit;--default-accent:var(--color-blue--001);--default-color-bg:var(--color-light--001);--default-color-text:var(--color-dark--001);--border-size:2px;--border-radius:3px;--top-bar-height:54px;--toolbar-height:49px;--toolbars-height:calc(var(--top-bar-height) + var(--toolbar-height))}html{overflow-block:hidden}body{overflow-block:clip;container-type:inline-size;&.authenticated{& #off-canvas{overflow-block:auto;overflow-inline:hidden;block-size:calc(100dvb - var(--toolbars-height));min-block-size:calc(100dvb - var(--toolbars-height));& .site-header{z-index:1;position:sticky;inset-block-start:0}}}}.off-canvas{--spacing:.1em;overflow-block:initial;block-size:100dvb;min-block-size:100dvb;& article{& h2,& h3,& h4{&:first-child{margin-block-start:0}}& ul,& ol{&:not(.contextual-links,.entity-moderation-form,.format-filter-guidelines ul){margin-inline-start:var(--gap);display:grid}}}}.site-main{grid-area:main;grid-template-rows:auto 1fr;padding-block-end:var(--gap)}.site-footer{padding-block:var(--gutter);grid-area:footer;&>*>*{grid-column:wrapper}}.site-main,.site-footer{grid-column:page;grid-template-columns:subgrid;display:grid;&>*{grid-column:wrapper;grid-template-columns:subgrid;display:grid;&.hero,&.content{grid-template-columns:subgrid;display:grid}&.hero{grid-column:page;&>*{grid-column:content}}&.content,&:has(.node),&.content>*{grid-column:wrapper}}& .site-highlight{&>*{grid-column:wrapper}}& .site-content{&>*{grid-column:wrapper}}}@media screen and (width>=64rem){body{&.authenticated{& #off-canvas{block-size:calc(100dvb - var(--toolbar-height));min-block-size:calc(100dvb - var(--toolbar-height));& .site-header{opacity:.999;backdrop-filter:blur(12px);background:#fffc;& .region--branding,& .region--navigation,& .site-header__nav-wrapper{background:0 0}& .site-header__inner{& .region--branding,& .region--navigation,& .site-header__nav-wrapper{background:0 0}}}}}}}.region{min-inline-size:max-content}/*# sourceMappingURL=matter.theme.css.map */ +@font-face{font-family:Roboto;src:local("../fonts/roboto/regular/Roboto-Regular.ttf");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:local("../fonts/roboto/regular/Roboto-Bold.ttf");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:local("../fonts/roboto/regular/Roboto-Italic.ttf");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:local("../fonts/roboto/regular/Roboto-BoldItalic.ttf");font-weight:700;font-style:italic}@font-face{font-family:Roboto Mono;src:local("../fonts/roboto/mono/RobotoMono-Regular.ttf");font-weight:400;font-style:normal}@font-face{font-family:Roboto Mono;src:local("../fonts/roboto/mono/RobotoMono-Bold.ttf");font-weight:700;font-style:normal}@font-face{font-family:Roboto Mono;src:local("../fonts/roboto/mono/RobotoMono-Italic.ttf");font-weight:400;font-style:italic}@font-face{font-family:Roboto Slab;src:local("../fonts/roboto/slab/RobotoSlab-Regular.ttf");font-weight:400;font-style:normal}@font-face{font-family:Roboto Slab;src:local("../fonts/roboto/slab/RobotoSlab-Bold.ttf");font-weight:700;font-style:normal}:root{--color-light--001:white;--color-light--002:#f5f4f4;--color-light--003:#eae9e9;--color-light--004:#b7b7b6;--color-dark--001:black;--color-dark--002:#100f0d;--color-dark--003:#282725;--color-dark--004:#585756;--color-yellow--001:#efe100;--color-blue--001:#07c}@media (prefers-color-scheme:light){:root{--neutral-50:#f9fafb;--neutral-100:#f3f4f7;--neutral-200:#edeff2;--neutral-300:#e8eaed;--neutral-400:#e2e4e9;--neutral-500:#d3d7de;--neutral-600:#b8bdc7;--neutral-700:#818898;--neutral-800:#5a6272;--neutral-900:#14181f;--brand-blue:#1b4fb6;--brand-red:#d9363e;--color-state-success:#2eb88a;--color-state-warning:#f29e0d;--color-state-error:#dd4b52}}[data-theme=light]{--neutral-50:#f9fafb;--neutral-100:#f3f4f7;--neutral-200:#edeff2;--neutral-300:#e8eaed;--neutral-400:#e2e4e9;--neutral-500:#d3d7de;--neutral-600:#b8bdc7;--neutral-700:#818898;--neutral-800:#5a6272;--neutral-900:#14181f;--brand-blue:#1b4fb6;--brand-red:#d9363e}[data-theme=dark]{--neutral-900:#dadad7;--neutral-800:#b5b5b0;--neutral-700:#82827d;--neutral-600:#5e5e55;--neutral-500:#4a4a45;--neutral-400:#3f3f3b;--neutral-300:#393937;--neutral-200:#32322f;--neutral-100:#2a2a27;--neutral-50:#23231f;--color-state-success:#2eb88a;--color-state-warning:#f29e0d;--color-state-error:#dd4b52}:root{--font-stack--base:roboto, sans-serif, ui-sans-serif;--font-stack--mono:roboto mono, monospace, ui-monospace;--font-stack--slab:roboto slab, serif, ui-serif;--font-weight--bold:700;--font-size--2:clamp(.7387rem, .7987rem + -.0775vw, .7813rem);--font-size--1:clamp(.9375rem, .9182rem + .0857vw, .9846rem);--font-size-0:clamp(1.125rem, 1.0483rem + .3409vw, 1.3125rem);--font-size-1:clamp(1.35rem, 1.1865rem + .7265vw, 1.7496rem);--font-size-2:clamp(1.62rem, 1.3287rem + 1.2948vw, 2.3322rem);--font-size-3:clamp(1.944rem, 1.4675rem + 2.1178vw, 3.1088rem);--font-size-4:clamp(2.3328rem, 1.5919rem + 3.2931vw, 4.144rem);--font-size-5:clamp(2.7994rem, 1.6848rem + 4.9538vw, 5.524rem);--height:max(1.5rem, 4rem);--item-height:4rem;--page-title-size:3.815em;--page-title-sub-size:clamp(.75rem, 1.5vi, 1.125rem);--gutter:2rem;--space:.15em;--space--gap:1.5rem;--space--gap-alt:.75em;--padding-block:.75rem;--padding-inline:1rem;--padding-default:var(--padding-block) var(--padding-inline);--spacing-3xs:clamp(.3125rem, .3125rem + 0vw, .3125rem);--spacing-2xs:clamp(.5625rem, .5114rem + .2273vw, .6875rem);--spacing-xs:clamp(.875rem, .8239rem + .2273vw, 1rem);--spacing-s:clamp(1.125rem, 1.0483rem + .3409vw, 1.3125rem);--spacing-m:clamp(1.6875rem, 1.5597rem + .5682vw, 2rem);--spacing-l:clamp(2.25rem, 2.0966rem + .6818vw, 2.625rem);--spacing-xl:clamp(3.375rem, 3.1449rem + 1.0227vw, 3.9375rem);--spacing-2xl:clamp(4.5rem, 4.1932rem + 1.3636vw, 5.25rem);--spacing-3xl:clamp(6.75rem, 6.2898rem + 2.0455vw, 7.875rem);--spacing-4xl:clamp(9rem, 8.3864rem + 2.7273vw, 10.5rem);--spacing-3xs-2xs:clamp(.3125rem, .1591rem + .6818vw, .6875rem);--spacing-2xs-xs:clamp(.5625rem, .3835rem + .7955vw, 1rem);--spacing-xs-s:clamp(.875rem, .696rem + .7955vw, 1.3125rem);--link:inherit;--default-accent:var(--color-blue--001);--default-color-bg:var(--color-light--001);--default-color-text:var(--color-dark--001);--border-size:2px;--border-radius:3px;--top-bar-height:54px;--toolbar-height:49px;--toolbars-height:calc(var(--top-bar-height) + var(--toolbar-height))}.grid-global,.grid-wrapper--min,.grid-wrapper--max{--gutter-mobile:1.5rem;--gutter-tablet:2.75rem;--gutter-desktop:4rem;--gutter:var(--gutter-mobile)}@media screen and (width>=768px){.grid-global,.grid-wrapper--min,.grid-wrapper--max{--gutter:var(--gutter-tablet)}}@media screen and (width>=1024px){.grid-global,.grid-wrapper--min,.grid-wrapper--max{--gutter:var(--gutter-desktop)}}.grid-global{overflow-inline:hidden;--content-max-width:85rem;--wrapper-max-width:75.75rem;--narrow-max-width:42.875rem;--content-size:calc((var(--content-max-width) - var(--wrapper-max-width)) / 2);--wrapper-size:calc((var(--wrapper-max-width) - var(--narrow-max-width)) / 2);--content-min-size:calc((var(--content-size) + var(--wrapper-size)) / 2);grid-template:"header" auto "main" 1fr "footer" auto / [page-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--content-size)) [wrapper-start] minmax(0, var(--wrapper-size)) [narrow-start] minmax(0, var(--narrow-max-width)) [narrow-end] minmax(0, var(--wrapper-size)) [wrapper-end] minmax(0, var(--content-size)) [content-end] minmax(var(--gutter), 1fr) [page-end];min-block-size:100dvb;max-inline-size:100vi}@layer reset{html{interpolate-size:allow-keywords;font-family:var(--font-stack--base,system-ui);accent-color:var(--default-accent);-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;block-size:100%;scroll-padding-block:5lh;line-height:1.6}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{min-block-size:100svh;font-family:var(--font-stack--base);background:var(--default-color-bg);color:var(--default-color-text);font-size:var(--font-size-0);grid-template-rows:auto 1fr auto;margin:0;line-height:1.6;display:grid}h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block:0}h1,h2,h3,h4{text-wrap:balance}h1,h2{font-weight:900}h1{font-size:var(--font-size-5);font-weight:900;position:relative}h1+p,.hero h1~p{font-size:var(--font-size-2)}.hero h1~p:last-of-type{margin-block-end:var(--spacing-2xl)}h2{font-size:var(--font-size-3)}h1,h2,h3,h4,button,input,label{line-height:1.1}img,picture,iframe{max-inline-size:100%;height:auto;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea{min-block-size:5lh}:is(ul,ol)[class]:not(.links){margin:0;padding:0}:is(ul,ol):not(.links),:is(ul,ol)[role=list]{margin-inline-start:1.25em}a:not([class]){color:var(--link);text-underline-offset:.25ex;text-decoration-thickness:0;transition:all .2s ease-in-out}a:not([class]):hover,a:not([class]):focus-visible{text-decoration-color:var(--link);text-underline-offset:.5ex;text-decoration-thickness:.25ex}::selection{background:hsl(from var(--default-accent) h s l / .5)}::marker{color:var(--default-accent)}}.hidden{visibility:hidden;display:none}.grid{display:grid}.flex{display:flex}.grid.centered,.flex.centered{justify-content:center}.container{container-type:inline-size}.sticky{--min-height:3.75rem;position:sticky}.sticky.top-00{inset-block-start:0}.sticky.top-01{inset-block-start:var(--min-height)}.sticky.top-02{inset-block-start:calc(var(--min-height) * 2)}.icon{vertical-align:middle;margin-block-start:calc(1ex - 1cap)}.hero{background-color:#fff;align-content:center;gap:0;min-block-size:30rem}.breakout{padding-block:var(--gutter);background-color:#add8e6}.breakout p{max-inline-size:100%}.overlay{--color-black--001:#00000080;border-image:linear-gradient(var(--color-black--001), var(--color-black--001)) fill 1}.cards{display:grid}.cards .card{grid-template-rows:subgrid;display:grid}.focus .focus-item{border:calc(var(--border-size) * 2) solid var(--color-black--004);color:var(--color-black--001);min-block-size:calc(100% - (var(--border-size) * 4));background-color:#0000}.no-bullets{list-style:""}html,body{font-family:var(--font-stack--base)}h1,h2,h3,h4,h5,h6{font-weight:700;font-family:var(--font-stack--slab)}h1,.heading-1{font-size:clamp(1.75rem,4vi,2.125rem)}h2,.heading-2{font-size:clamp(1.5rem,3.5vi,1.875rem)}h3,.heading-3{font-size:clamp(1.25rem,3vi,1.5rem)}h4,.heading-4{font-size:clamp(1.125rem,2.5vi,1.25rem)}h5,.heading-5{font-size:clamp(1rem,2vi,1.125rem)}h6,.heading-6{font-size:clamp(.875rem,1.5vi,1rem)}em{font-style:italic}strong{font-weight:700}.off-canvas{overflow:clip}.off-canvas>*{grid-column:page}.off-canvas header,.off-canvas main,.off-canvas footer{grid-template-columns:subgrid}.off-canvas header>*,.off-canvas main>*,.off-canvas footer>*{grid-template-columns:subgrid;display:grid}.off-canvas main,.off-canvas footer{--padding-block:var(--space--gap);padding-block:var(--padding-block)}.off-canvas main>*,.off-canvas footer>*,.off-canvas main>*>*,.off-canvas footer>*>*{grid-column:content}.off-canvas header{grid-row:header;grid-template-columns:1fr;grid-auto-rows:max-content}.off-canvas header>*{min-block-size:var(--item-height);grid-column:1/-1}.off-canvas header .region>*{align-items:center;min-block-size:100%;display:flex}.off-canvas header .region .nav-link{min-block-size:var(--item-height);place-items:center;display:grid}@media (width>=768px){.off-canvas header{gap:var(--space--gap);grid-template-columns:auto 1fr auto}.off-canvas header>*{grid-column:auto}}@media (width>=1885px){.off-canvas header{grid-template-columns:inherit}}.off-canvas main{grid-row:main}.off-canvas footer{grid-row:footer}.off-canvas footer .block-system{align-content:center}.permission_navigation .off-canvas{block-size:calc(100dvb - var(--toolbars-height));min-block-size:calc(100dvb - var(--toolbars-height))}.permission_navigation .off-canvas header{min-block-size:calc(100dvb - var(--toolbars-height))}@media (width>=768px){.permission_navigation .off-canvas header{min-block-size:var(--item-height)}}@media (width>=1024px){.permission_navigation .off-canvas{block-size:calc(100dvb - var(--top-bar-height));min-block-size:calc(100dvb - var(--top-bar-height))}}.off-canvas a{color:var(--color-dark--004);text-decoration-style:dashed;text-decoration-thickness:var(--space);text-decoration-color:var(--color-dark--004);text-underline-offset:var(--space)}.off-canvas a:hover{color:var(--color-dark--001)}.off-canvas form{gap:var(--space--gap);grid-auto-rows:max-content}.off-canvas button,.off-canvas input,.off-canvas select,.off-canvas textarea{padding:var(--padding-default);border:2px solid var(--color-dark--001);field-sizing:content;font-family:inherit;font-size:inherit;background-color:var(--color-light--002);border-radius:0;margin:0}.off-canvas button:focus,.off-canvas button:focus-visible,.off-canvas button:focus-within,.off-canvas input:focus,.off-canvas input:focus-visible,.off-canvas input:focus-within,.off-canvas select:focus,.off-canvas select:focus-visible,.off-canvas select:focus-within,.off-canvas textarea:focus,.off-canvas textarea:focus-visible,.off-canvas textarea:focus-within{border-radius:0;outline:0}.off-canvas button,.off-canvas input,.off-canvas select{min-inline-size:0}.off-canvas input:focus::placeholder,.off-canvas input:focus-visible::placeholder,.off-canvas input:focus-within::placeholder,.off-canvas textarea:focus::placeholder,.off-canvas textarea:focus-visible::placeholder,.off-canvas textarea:focus-within::placeholder{color:#0000}.off-canvas textarea{min-block-size:10rem}.off-canvas .form-item{gap:var(--space);flex-direction:column;display:flex}.region{min-inline-size:max-content}.brand-item__logo img{max-block-size:var(--item-height)}.page-navigation--menu-button,.page-navigation--menu-icon{position:absolute}.page-navigation--focus{grid-column:page-end;margin-inline-start:auto}.brand{align-items:center;gap:var(--space--gap-alt);min-block-size:100%}.site-header .page-navigation--menu-button,.site-header .page-navigation--menu-icon{display:block}@media (width>=768px){.site-header .page-navigation--menu-button,.site-header .page-navigation--menu-icon{display:none}}/*# sourceMappingURL=matter.theme.css.map */ diff --git a/assets/css/matter.theme.css.map b/assets/css/matter.theme.css.map index 1c29bec..4c1aa1c 100644 --- a/assets/css/matter.theme.css.map +++ b/assets/css/matter.theme.css.map @@ -1 +1 @@ -{"version":3,"sources":["source/00-nucleus/core/fonts.core.css","source/00-nucleus/root/grid/grid-layout.css","source/00-nucleus/root/globals/reset.css","source/00-nucleus/root/globals/utilities.css","source/00-nucleus/root/globals/typography.css","source/00-nucleus/root/globals/layout.css","source/00-nucleus/root/globals/styling.css","source/00-nucleus/root/variables/colors.css","source/00-nucleus/root/variables/fonts.css","source/00-nucleus/defaults.nucleus.css","source/01-atoms/region/region.atoms.css"],"names":[],"mappings":"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","file":"matter.theme.css","sourcesContent":["@font-face {\n font-family: \"Roboto\";\n src: local(\"../fonts/roboto/regular/Roboto-Regular.ttf\");\n font-weight: 400;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto\";\n src: local(\"../fonts/roboto/regular/Roboto-Bold.ttf\");\n font-weight: 700;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto\";\n src: local(\"../fonts/roboto/regular/Roboto-Italic.ttf\");\n font-weight: 400;\n font-style: italic;\n}\n\n@font-face {\n font-family: \"Roboto\";\n src: local(\"../fonts/roboto/regular/Roboto-BoldItalic.ttf\");\n font-weight: 700;\n font-style: italic;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: local(\"../fonts/roboto/mono/RobotoMono-Regular.ttf\");\n font-weight: 400;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: local(\"../fonts/roboto/mono/RobotoMono-Bold.ttf\");\n font-weight: 700;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: local(\"../fonts/roboto/mono/RobotoMono-Italic.ttf\");\n font-weight: 400;\n font-style: italic;\n}\n\n@font-face {\n font-family: \"Roboto Slab\";\n src: local(\"../fonts/roboto/slab/RobotoSlab-Regular.ttf\");\n font-weight: 400;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Slab\";\n src: local(\"../fonts/roboto/slab/RobotoSlab-Bold.ttf\");\n font-weight: 700;\n font-style: normal;\n}\n",".grid-global,\n.grid-wrapper--min,\n.grid-wrapper--max {\n /* Layout variables - easier to customize */\n --gutter-mobile: 1.5rem;\n --gutter-tablet: 2.5rem;\n --gutter-desktop: 3.5rem;\n --gutter: var(--gutter-mobile);\n\n @media screen and (width > 786px) {\n --gutter: var(--gutter-tablet);\n }\n\n @media screen and (width > 1023px) {\n --gutter: var(--gutter-desktop);\n }\n}\n\n.grid-global {\n /* Prevent overflow on all screen sizes */\n max-inline-size: 100vi;\n overflow-inline: hidden;\n\n /* Content width constraints */\n --inner-max-width: 100%;\n\n /* Base grid setup with advanced layout as default */\n min-block-size: 100dvb;\n grid-template:\n \"header\" auto\n \"main\" 1fr\n \"footer\" auto /\n [page-start]\n minmax(var(--gutter), 1fr)\n [inner-start]\n minmax(0, var(--inner-max-width))\n [inner-end]\n minmax(var(--gutter), 1fr)\n [page-end];\n}\n\n.grid-wrapper--min,\n.grid-wrapper--max {\n --content-max-width: 85rem;\n --wrapper-max-width: 75.75rem;\n\n /* Calculated sizes for responsive behavior */\n --content-size: calc((var(--content-max-width) - var(--wrapper-max-width)) / 2);\n}\n\n.grid-wrapper--min {\n grid-template-columns:\n [page-start]\n minmax(var(--gutter), 1fr)\n [content-start]\n minmax(0, var(--content-size))\n [wrapper-start]\n minmax(0, var(--wrapper-max-width))\n [wrapper-end]\n minmax(0, var(--content-size))\n [content-end]\n minmax(var(--gutter), 1fr)\n [page-end];\n}\n\n.grid-wrapper--max {\n --narrow-max-width: 42.875rem;\n\n\n /* Calculated size for wrapper */\n --wrapper-size: calc((var(--wrapper-max-width) - var(--narrow-max-width)) / 2);\n\n grid-template-columns:\n [page-start]\n minmax(var(--gutter), 1fr)\n [content-start]\n minmax(0, var(--content-size))\n [wrapper-start]\n minmax(0, var(--wrapper-size))\n [narrow-start]\n minmax(0, var(--narrow-max-width))\n [narrow-end]\n minmax(0, var(--wrapper-size))\n [wrapper-end]\n minmax(0, var(--content-size))\n [content-end]\n minmax(var(--gutter), 1fr)\n [page-end];\n}\n","@layer reset {\n html {\n interpolate-size: allow-keywords;\n font-family: var(--font-stack--base, system-ui);\n line-height: 1.6;\n accent-color: var(--default-accent);\n block-size: 100%;\n text-size-adjust: none;\n scroll-padding-block: 5lh;\n\n @media(prefers-reduced-motion:no-preference) {\n scroll-behavior:smooth}\n }\n\n body {\n margin: 0;\n min-block-size: 100svh;\n display: grid;\n grid-template-rows: auto 1fr auto;\n font-family: var(--font-stack--base);\n background: var(--default-color-bg);\n color: var(--default-color-text);\n font-size: var(--font-size-0);\n line-height: 1.6\n }\n\n h1,\n h2,\n h3,\n h4,\n p,\n figure,\n blockquote,\n dl,\n dd {\n margin-block: 0\n }\n\n h1,\n h2,\n h3,h4 {\n text-wrap: balance\n }\n\n h1,\n h2 {\n font-weight: 900\n }\n\n h1 {\n font-size: var(--font-size-5);\n font-weight: 900;\n position: relative\n }\n\n h1+p,.hero h1~p {\n font-size: var(--font-size-2)\n }\n\n .hero h1~p:last-of-type {\n margin-block-end:var(--spacing-2xl)\n }\n\n h2 {\n font-size: var(--font-size-3)\n }\n\n h1,\n h2,\n h3,\n h4,\n button,\n input,\n label {\n line-height: 1.1\n }\n\n img,\n picture,\n iframe {\n max-inline-size: 100%;\n display: block;\n height: auto\n }\n\n input,\n button,\n textarea,\n select {\n font-family: inherit;\n font-size: inherit\n }\n\n textarea {\n min-block-size: 5lh\n }\n\n a:not([class]) {\n color:var(--link);\n text-underline-offset: .25ex;\n text-decoration-thickness: 0;\n transition: .2s ease-in-out;\n\n &:hover,&:focus-visible {\n text-decoration-color: var(--link);\n text-decoration-thickness: .25ex;\n text-underline-offset: .5ex;\n }\n }\n\n ::selection {\n background: hsl(from var(--default-accent) h s l / .5)\n }\n\n ::marker {\n color: var(--default-accent)\n }\n}\n",".hidden {\n display: none;\n visibility: hidden;\n}\n\n.grid {\n display: grid;\n}\n\n.flex {\n --gutter: 1.75rem;\n\n display: flex;\n gap: var(--gutter);\n}\n\n.grid,\n.flex {\n &.centered {\n justify-content: center;\n }\n}\n\n.container {\n container-type: inline-size;\n}\n\n.sticky {\n --min-height: 3.75rem;\n\n position: sticky;\n\n &.top-00 {\n inset-block-start: 0;\n }\n\n &.top-01 {\n inset-block-start: var(--min-height);\n }\n\n &.top-02 {\n inset-block-start: calc(var(--min-height) * 2);\n }\n}\n\n.icon {\n margin-block-start: calc(1ex - 1cap);\n vertical-align: middle;\n}\n\n.hero {\n background-color: white;\n min-block-size: max(5rem, 30rem);\n align-content: center;\n gap: 0;\n}\n\n.breakout {\n background-color: lightblue;\n padding-block: var(--gutter);\n\n p {\n max-inline-size: 100%;\n }\n}\n\n.overlay {\n --color-black--001: rgb(0 0 0 / 0.5);\n\n border-image: linear-gradient(\n var(--color-black--001),\n var(--color-black--001)\n )\n fill 1;\n}\n\n.cards {\n display: grid;\n\n .card {\n display: grid;\n grid-template-rows: subgrid;\n }\n}\n\n.focus {\n .focus-item {\n border: calc(var(--border-size) * 2) solid var(--color-black--004);\n background-color: transparent;\n color: var(--color-black--001);\n min-block-size: calc(100% - (var(--border-size) * 4));\n }\n}\n\n.no-bullets {\n list-style: \"\";\n}\n","html,\nbody {\n font-family: var(--font-stack--base);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 700;\n font-family: var(--font-stack--slab);\n}\n\nh1,\n.heading-1 {\n font-size: clamp(1.75rem, 4vi, 2.125rem);\n}\n\nh2,\n.heading-2 {\n font-size: clamp(1.5rem, 3.5vi, 1.875rem);\n}\n\nh3,\n.heading-3 {\n font-size: clamp(1.25rem, 3vi, 1.5rem);\n}\n\nh4,\n.heading-4 {\n font-size: clamp(1.125rem, 2.5vi, 1.25rem);\n}\n\nh5,\n.heading-5 {\n font-size: clamp(1rem, 2vi, 1.125rem);\n}\n\nh6,\n.heading-6 {\n font-size: clamp(0.875rem, 1.5vi, 1rem);\n}\n\nem {\n font-style: italic;\n}\n\nstrong {\n font-weight: 700;\n}\n",":is(.gin--core-navigation) {\n .off-canvas {\n block-size: calc(100dvb - var(--toolbars-height));\n min-block-size: calc(100dvb - var(--toolbars-height));\n\n @media screen and (width > 1023px) {\n block-size: calc(100dvb - var(--top-bar-height));\n min-block-size: calc(100dvb - var(--top-bar-height));\n }\n }\n}\n\n:is(.off-canvas) {\n overflow: clip;\n\n > * {\n grid-column: page;\n }\n\n header {\n grid-row: header;\n\n :is(.block-system) {\n align-items: center;\n min-block-size: 100%;\n }\n\n @media (width < 1700px) {\n grid-template-columns: auto 1fr auto;\n }\n }\n\n main {\n grid-row: main;\n\n > * {\n display: grid;\n grid-column: content;\n grid-template-columns: subgrid;\n\n > * {\n grid-column: content;\n }\n }\n }\n\n footer {\n grid-row: footer;\n }\n\n}\n",":is(.off-canvas) {\n a {\n color: var(--color-black--004);\n text-decoration-style: dashed;\n text-decoration-thickness: var(--spacing);\n text-decoration-color: var(--color-black--004);\n text-underline-offset: var(--spacing);\n\n &:hover {\n color: var(--color-black--001);\n }\n }\n}\n",":root {\n /* light */\n --color-light--001: white;\n --color-light--002: #f5f4f4;\n --color-light--003: #eae9e9;\n --color-light--004: #b7b7b6;\n\n /* dark */\n --color-dark--001: black;\n --color-dark--002: #100f0d;\n --color-dark--003: #282725;\n --color-dark--004: #585756;\n\n /* yellow */\n --color-yellow--001: #efe100;\n\n /* blue */\n --color-blue--001: #07c;\n}\n\n@media(prefers-color-scheme: light) {\n :root {\n --neutral-50: hsl(220deg 20% 98%);\n --neutral-100: hsl(220deg 18% 96%);\n --neutral-200: hsl(220deg 16% 94%);\n --neutral-300: hsl(220deg 14% 92%);\n --neutral-400: hsl(220deg 14% 90%);\n --neutral-500: hsl(220deg 14% 85%);\n --neutral-600: hsl(220deg 12% 75%);\n --neutral-700: hsl(220deg 10% 55%);\n --neutral-800: hsl(220deg 12% 40%);\n --neutral-900: hsl(220deg 20% 10%);\n --brand-blue: hsl(220deg 74% 41%);\n --brand-red: hsl(357deg 68% 53%);\n --color-state-success: hsl(160deg 60% 45%);\n --color-state-warning: hsl(38deg 90% 50%);\n --color-state-error: hsl(357deg 68% 58%)\n }\n}\n\n[data-theme=\"light\"] {\n --neutral-50: hsl(220deg 20% 98%);\n --neutral-100: hsl(220deg 18% 96%);\n --neutral-200: hsl(220deg 16% 94%);\n --neutral-300: hsl(220deg 14% 92%);\n --neutral-400: hsl(220deg 14% 90%);\n --neutral-500: hsl(220deg 14% 85%);\n --neutral-600: hsl(220deg 12% 75%);\n --neutral-700: hsl(220deg 10% 55%);\n --neutral-800: hsl(220deg 12% 40%);\n --neutral-900: hsl(220deg 20% 10%);\n --brand-blue: hsl(220deg 74% 41%);\n --brand-red: hsl(357deg 68% 53%)\n}\n\n[data-theme=\"dark\"] {\n --neutral-900: hsl(60deg 4% 85%);\n --neutral-800: hsl(60deg 3% 70%);\n --neutral-700: hsl(60deg 2% 50%);\n --neutral-600: hsl(60deg 5% 35%);\n --neutral-500: hsl(60deg 4% 28%);\n --neutral-400: hsl(60deg 3% 24%);\n --neutral-300: hsl(60deg 2% 22%);\n --neutral-200: hsl(60deg 3% 19%);\n --neutral-100: hsl(60deg 4% 16%);\n --neutral-50: hsl(60deg 5% 13%);\n --color-state-success: hsl(160deg 60% 45%);\n --color-state-warning: hsl(38deg 90% 50%);\n --color-state-error: hsl(357deg 68% 58%)\n}\n",":root {\n --font-stack--base: roboto, sans-serif, ui-sans-serif;\n --font-stack--mono: roboto mono, monospace, ui-monospace;\n --font-stack--slab: roboto slab, serif, ui-serif;\n --font-weight--bold: 700;\n --font-size--2: clamp(.7387rem, .7987rem + -.0775vw, .7813rem);\n --font-size--1: clamp(.9375rem, .9182rem + .0857vw, .9846rem);\n --font-size-0: clamp(1.125rem, 1.0483rem + .3409vw, 1.3125rem);\n --font-size-1: clamp(1.35rem, 1.1865rem + .7265vw, 1.7496rem);\n --font-size-2: clamp(1.62rem, 1.3287rem + 1.2948vw, 2.3322rem);\n --font-size-3: clamp(1.944rem, 1.4675rem + 2.1178vw, 3.1088rem);\n --font-size-4: clamp(2.3328rem, 1.5919rem + 3.2931vw, 4.144rem);\n --font-size-5: clamp(2.7994rem, 1.6848rem + 4.9538vw, 5.524rem);\n}\n","html {\n overflow-block: hidden;\n}\n\nbody {\n container-type: inline-size;\n overflow-block: clip;\n\n &.authenticated {\n #off-canvas {\n overflow-block: auto;\n overflow-inline: hidden;\n block-size: calc(100dvb - var(--toolbars-height));\n min-block-size: calc(100dvb - var(--toolbars-height));\n /* block-size: calc(100dvb - var(--toolbar-height));\n min-block-size: calc(100dvb - var(--toolbar-height)); */\n\n .site-header {\n position: sticky;\n inset-block-start: 0;\n z-index: 1;\n }\n }\n }\n}\n\n.off-canvas {\n --spacing: 0.1em;\n\n block-size: 100dvb;\n min-block-size: 100dvb;\n overflow-block: initial;\n\n article {\n h2,\n h3,\n h4 {\n &:is(:first-child) {\n margin-block-start: 0;\n }\n }\n\n ul,\n ol {\n &:not(.contextual-links, .entity-moderation-form, .format-filter-guidelines ul) {\n display: grid;\n margin-inline-start: var(--gap);\n }\n }\n }\n}\n\n.site-main {\n grid-area: main;\n grid-template-rows: auto 1fr;\n padding-block-end: var(--gap);\n}\n\n.site-footer {\n grid-area: footer;\n padding-block: var(--gutter);\n\n > * > * {\n grid-column: wrapper;\n }\n}\n\n.site-main,\n.site-footer {\n grid-column: page;\n display: grid;\n grid-template-columns: subgrid;\n\n > * {\n display: grid;\n grid-column: wrapper;\n grid-template-columns: subgrid;\n\n &.hero,\n &.content {\n display: grid;\n grid-template-columns: subgrid;\n }\n\n &.hero {\n grid-column: page;\n\n > * {\n grid-column: content;\n }\n }\n\n &.content {\n grid-column: wrapper;\n }\n\n &:has(.node),\n &.content > * {\n grid-column: wrapper;\n }\n }\n\n .site-highlight {\n > * {\n grid-column: wrapper;\n }\n }\n\n .site-content {\n > * {\n grid-column: wrapper;\n }\n }\n}\n\n@media screen and (min-width: 64rem) {\n body {\n &.authenticated {\n #off-canvas {\n block-size: calc(100dvb - var(--toolbar-height));\n min-block-size: calc(100dvb - var(--toolbar-height));\n\n .site-header {\n background: rgb(255 255 255 / 0.8);\n opacity: 0.999;\n backdrop-filter: blur(12px);\n\n .region--branding,\n .region--navigation,\n .site-header__nav-wrapper {\n background: transparent;\n }\n\n .site-header__inner {\n .region--branding,\n .region--navigation,\n .site-header__nav-wrapper {\n background: transparent;\n }\n }\n }\n }\n }\n }\n}\n",":is(.region) {\n min-inline-size: max-content;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["source/00-nucleus/core/fonts.core.css","source/00-nucleus/root/variables/colors.css","source/00-nucleus/root/variables/fonts.css","source/00-nucleus/root/grid/grid-layout.css","source/00-nucleus/root/globals/reset.css","source/00-nucleus/root/globals/utilities.css","source/00-nucleus/root/globals/typography.css","source/00-nucleus/root/globals/layout.css","source/00-nucleus/root/globals/styling.css","source/00-nucleus/root/globals/forms.css","source/01-atoms/region/region.atoms.css","source/02-molecules/brand_item/brand-item.molecules.css","source/02-molecules/page_navigation/page-navigation.molecules.css","source/03-organisms/brand/brand.organisms.css","source/03-organisms/site_header/site-header.organisms.css"],"names":[],"mappings":"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","file":"matter.theme.css","sourcesContent":["@font-face {\n font-family: \"Roboto\";\n src: local(\"../fonts/roboto/regular/Roboto-Regular.ttf\");\n font-weight: 400;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto\";\n src: local(\"../fonts/roboto/regular/Roboto-Bold.ttf\");\n font-weight: 700;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto\";\n src: local(\"../fonts/roboto/regular/Roboto-Italic.ttf\");\n font-weight: 400;\n font-style: italic;\n}\n\n@font-face {\n font-family: \"Roboto\";\n src: local(\"../fonts/roboto/regular/Roboto-BoldItalic.ttf\");\n font-weight: 700;\n font-style: italic;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: local(\"../fonts/roboto/mono/RobotoMono-Regular.ttf\");\n font-weight: 400;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: local(\"../fonts/roboto/mono/RobotoMono-Bold.ttf\");\n font-weight: 700;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: local(\"../fonts/roboto/mono/RobotoMono-Italic.ttf\");\n font-weight: 400;\n font-style: italic;\n}\n\n@font-face {\n font-family: \"Roboto Slab\";\n src: local(\"../fonts/roboto/slab/RobotoSlab-Regular.ttf\");\n font-weight: 400;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Slab\";\n src: local(\"../fonts/roboto/slab/RobotoSlab-Bold.ttf\");\n font-weight: 700;\n font-style: normal;\n}\n",":root {\n /* light */\n --color-light--001: white;\n --color-light--002: #f5f4f4;\n --color-light--003: #eae9e9;\n --color-light--004: #b7b7b6;\n\n /* dark */\n --color-dark--001: black;\n --color-dark--002: #100f0d;\n --color-dark--003: #282725;\n --color-dark--004: #585756;\n\n /* yellow */\n --color-yellow--001: #efe100;\n\n /* blue */\n --color-blue--001: #07c;\n}\n\n@media(prefers-color-scheme: light) {\n :root {\n --neutral-50: hsl(220deg 20% 98%);\n --neutral-100: hsl(220deg 18% 96%);\n --neutral-200: hsl(220deg 16% 94%);\n --neutral-300: hsl(220deg 14% 92%);\n --neutral-400: hsl(220deg 14% 90%);\n --neutral-500: hsl(220deg 14% 85%);\n --neutral-600: hsl(220deg 12% 75%);\n --neutral-700: hsl(220deg 10% 55%);\n --neutral-800: hsl(220deg 12% 40%);\n --neutral-900: hsl(220deg 20% 10%);\n --brand-blue: hsl(220deg 74% 41%);\n --brand-red: hsl(357deg 68% 53%);\n --color-state-success: hsl(160deg 60% 45%);\n --color-state-warning: hsl(38deg 90% 50%);\n --color-state-error: hsl(357deg 68% 58%)\n }\n}\n\n[data-theme=\"light\"] {\n --neutral-50: hsl(220deg 20% 98%);\n --neutral-100: hsl(220deg 18% 96%);\n --neutral-200: hsl(220deg 16% 94%);\n --neutral-300: hsl(220deg 14% 92%);\n --neutral-400: hsl(220deg 14% 90%);\n --neutral-500: hsl(220deg 14% 85%);\n --neutral-600: hsl(220deg 12% 75%);\n --neutral-700: hsl(220deg 10% 55%);\n --neutral-800: hsl(220deg 12% 40%);\n --neutral-900: hsl(220deg 20% 10%);\n --brand-blue: hsl(220deg 74% 41%);\n --brand-red: hsl(357deg 68% 53%)\n}\n\n[data-theme=\"dark\"] {\n --neutral-900: hsl(60deg 4% 85%);\n --neutral-800: hsl(60deg 3% 70%);\n --neutral-700: hsl(60deg 2% 50%);\n --neutral-600: hsl(60deg 5% 35%);\n --neutral-500: hsl(60deg 4% 28%);\n --neutral-400: hsl(60deg 3% 24%);\n --neutral-300: hsl(60deg 2% 22%);\n --neutral-200: hsl(60deg 3% 19%);\n --neutral-100: hsl(60deg 4% 16%);\n --neutral-50: hsl(60deg 5% 13%);\n --color-state-success: hsl(160deg 60% 45%);\n --color-state-warning: hsl(38deg 90% 50%);\n --color-state-error: hsl(357deg 68% 58%)\n}\n",":root {\n --font-stack--base: roboto, sans-serif, ui-sans-serif;\n --font-stack--mono: roboto mono, monospace, ui-monospace;\n --font-stack--slab: roboto slab, serif, ui-serif;\n --font-weight--bold: 700;\n --font-size--2: clamp(.7387rem, .7987rem + -.0775vw, .7813rem);\n --font-size--1: clamp(.9375rem, .9182rem + .0857vw, .9846rem);\n --font-size-0: clamp(1.125rem, 1.0483rem + .3409vw, 1.3125rem);\n --font-size-1: clamp(1.35rem, 1.1865rem + .7265vw, 1.7496rem);\n --font-size-2: clamp(1.62rem, 1.3287rem + 1.2948vw, 2.3322rem);\n --font-size-3: clamp(1.944rem, 1.4675rem + 2.1178vw, 3.1088rem);\n --font-size-4: clamp(2.3328rem, 1.5919rem + 3.2931vw, 4.144rem);\n --font-size-5: clamp(2.7994rem, 1.6848rem + 4.9538vw, 5.524rem);\n}\n",".grid-global,\n.grid-wrapper--min,\n.grid-wrapper--max {\n /* Layout variables - easier to customize */\n --gutter-mobile: 1.5rem;\n --gutter-tablet: 2.75rem;\n --gutter-desktop: 4rem;\n\n /* Set the default gutter variable to mobile by default */\n --gutter: var(--gutter-mobile);\n\n /* Update gutter variable for tablet breakpoint */\n @media screen and (--breakpoint-tablet) {\n --gutter: var(--gutter-tablet);\n }\n\n /* Update gutter variable for desktop breakpoint */\n @media screen and (--breakpoint-desktop) {\n --gutter: var(--gutter-desktop);\n }\n}\n\n.grid-global {\n /* Prevent overflow on all screen sizes */\n max-inline-size: 100vi;\n overflow-inline: hidden;\n\n /* Content width constraints */\n --content-max-width: 85rem;\n --wrapper-max-width: 75.75rem;\n --narrow-max-width: 42.875rem;\n\n /* Calculated sizes for responsive behavior */\n --content-size: calc((var(--content-max-width) - var(--wrapper-max-width)) / 2);\n --wrapper-size: calc((var(--wrapper-max-width) - var(--narrow-max-width)) / 2);\n --content-min-size: calc((var(--content-size) + var(--wrapper-size)) / 2);\n\n /* Base grid setup with advanced layout as default */\n min-block-size: 100dvb;\n\n /* Define the grid areas and columns for the overall page layout */\n grid-template:\n \"header\" auto\n \"main\" 1fr\n \"footer\" auto /\n [page-start]\n minmax(var(--gutter), 1fr)\n [content-start]\n minmax(0, var(--content-size))\n [wrapper-start]\n minmax(0, var(--wrapper-size))\n [narrow-start]\n minmax(0, var(--narrow-max-width))\n [narrow-end]\n minmax(0, var(--wrapper-size))\n [wrapper-end]\n minmax(0, var(--content-size))\n [content-end]\n minmax(var(--gutter), 1fr)\n [page-end];\n}\n","@layer reset {\n html {\n interpolate-size: allow-keywords;\n font-family: var(--font-stack--base, system-ui);\n line-height: 1.6;\n accent-color: var(--default-accent);\n block-size: 100%;\n text-size-adjust: none;\n scroll-padding-block: 5lh;\n\n @media(prefers-reduced-motion:no-preference) {\n scroll-behavior:smooth}\n }\n\n body {\n margin: 0;\n min-block-size: 100svh;\n display: grid;\n grid-template-rows: auto 1fr auto;\n font-family: var(--font-stack--base);\n background: var(--default-color-bg);\n color: var(--default-color-text);\n font-size: var(--font-size-0);\n line-height: 1.6\n }\n\n h1,\n h2,\n h3,\n h4,\n p,\n figure,\n blockquote,\n dl,\n dd {\n margin-block: 0\n }\n\n h1,\n h2,\n h3,h4 {\n text-wrap: balance\n }\n\n h1,\n h2 {\n font-weight: 900\n }\n\n h1 {\n font-size: var(--font-size-5);\n font-weight: 900;\n position: relative\n }\n\n h1+p,.hero h1~p {\n font-size: var(--font-size-2)\n }\n\n .hero h1~p:last-of-type {\n margin-block-end:var(--spacing-2xl)\n }\n\n h2 {\n font-size: var(--font-size-3)\n }\n\n h1,\n h2,\n h3,\n h4,\n button,\n input,\n label {\n line-height: 1.1\n }\n\n img,\n picture,\n iframe {\n max-inline-size: 100%;\n display: block;\n height: auto\n }\n\n input,\n button,\n textarea,\n select {\n font-family: inherit;\n font-size: inherit\n }\n\n textarea {\n min-block-size: 5lh\n }\n\n /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */\n :is(ul, ol)[class]:not(.links) {\n margin: 0;\n padding: 0;\n }\n\n :is(ul, ol):not(.links),\n :is(ul, ol)[role=\"list\"] {\n margin-inline-start: 1.25em;\n }\n\n a:not([class]) {\n color:var(--link);\n text-underline-offset: .25ex;\n text-decoration-thickness: 0;\n transition: .2s ease-in-out;\n\n &:hover,&:focus-visible {\n text-decoration-color: var(--link);\n text-decoration-thickness: .25ex;\n text-underline-offset: .5ex;\n }\n }\n\n ::selection {\n background: hsl(from var(--default-accent) h s l / .5)\n }\n\n ::marker {\n color: var(--default-accent)\n }\n}\n",".hidden {\n display: none;\n visibility: hidden;\n}\n\n.grid {\n display: grid;\n}\n\n.flex {\n display: flex;\n}\n\n.grid,\n.flex {\n &.centered {\n justify-content: center;\n }\n}\n\n.container {\n container-type: inline-size;\n}\n\n.sticky {\n --min-height: 3.75rem;\n\n position: sticky;\n\n &.top-00 {\n inset-block-start: 0;\n }\n\n &.top-01 {\n inset-block-start: var(--min-height);\n }\n\n &.top-02 {\n inset-block-start: calc(var(--min-height) * 2);\n }\n}\n\n.icon {\n margin-block-start: calc(1ex - 1cap);\n vertical-align: middle;\n}\n\n.hero {\n background-color: white;\n min-block-size: max(5rem, 30rem);\n align-content: center;\n gap: 0;\n}\n\n.breakout {\n background-color: lightblue;\n padding-block: var(--gutter);\n\n p {\n max-inline-size: 100%;\n }\n}\n\n.overlay {\n --color-black--001: rgb(0 0 0 / 0.5);\n\n border-image: linear-gradient(\n var(--color-black--001),\n var(--color-black--001)\n )\n fill 1;\n}\n\n.cards {\n display: grid;\n\n .card {\n display: grid;\n grid-template-rows: subgrid;\n }\n}\n\n.focus {\n .focus-item {\n border: calc(var(--border-size) * 2) solid var(--color-black--004);\n background-color: transparent;\n color: var(--color-black--001);\n min-block-size: calc(100% - (var(--border-size) * 4));\n }\n}\n\n.no-bullets {\n list-style: \"\";\n}\n","html,\nbody {\n font-family: var(--font-stack--base);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 700;\n font-family: var(--font-stack--slab);\n}\n\nh1,\n.heading-1 {\n font-size: clamp(1.75rem, 4vi, 2.125rem);\n}\n\nh2,\n.heading-2 {\n font-size: clamp(1.5rem, 3.5vi, 1.875rem);\n}\n\nh3,\n.heading-3 {\n font-size: clamp(1.25rem, 3vi, 1.5rem);\n}\n\nh4,\n.heading-4 {\n font-size: clamp(1.125rem, 2.5vi, 1.25rem);\n}\n\nh5,\n.heading-5 {\n font-size: clamp(1rem, 2vi, 1.125rem);\n}\n\nh6,\n.heading-6 {\n font-size: clamp(0.875rem, 1.5vi, 1rem);\n}\n\nem {\n font-style: italic;\n}\n\nstrong {\n font-weight: 700;\n}\n",":is(.off-canvas) {\n overflow: clip;\n\n > * {\n grid-column: page;\n }\n\n header,\n main,\n footer {\n grid-template-columns: subgrid;\n\n > * {\n display: grid;\n grid-template-columns: subgrid;\n }\n }\n\n main,\n footer {\n --padding-block: var(--space--gap);\n\n padding-block: var(--padding-block);\n\n > * {\n grid-column: content;\n\n > * {\n grid-column: content;\n }\n }\n }\n\n header {\n grid-row: header;\n grid-template-columns: 1fr;\n grid-auto-rows: max-content;\n\n > * {\n min-block-size: var(--item-height);\n grid-column: 1 / -1;\n }\n\n :is(.region) {\n > * {\n display: flex;\n align-items: center;\n min-block-size: 100%;\n }\n\n :is(.nav-link) {\n display: grid;\n place-items: center;\n min-block-size: var(--item-height);\n }\n }\n\n @media (width >= 768px) {\n gap: var(--space--gap);\n grid-template-columns: auto 1fr auto;\n\n > * {\n grid-column: auto;\n }\n }\n\n @media (width >= 1885px) {\n grid-template-columns: inherit;\n }\n }\n\n main {\n grid-row: main;\n }\n\n footer {\n grid-row: footer;\n\n :is(.block-system) {\n align-content: center;\n }\n }\n}\n\n/* stylelint-disable-next-line selector-class-pattern */\n:is(.permission_navigation) {\n .off-canvas {\n block-size: calc(100dvb - var(--toolbars-height));\n min-block-size: calc(100dvb - var(--toolbars-height));\n\n header {\n min-block-size: calc(100dvb - var(--toolbars-height));\n }\n\n @media (--breakpoint-tablet) {\n header {\n min-block-size: var(--item-height);\n }\n }\n\n @media (--breakpoint-desktop) {\n block-size: calc(100dvb - var(--top-bar-height));\n min-block-size: calc(100dvb - var(--top-bar-height));\n }\n }\n}\n",":is(.off-canvas) {\n a {\n color: var(--color-dark--004);\n text-decoration-style: dashed;\n text-decoration-thickness: var(--space);\n text-decoration-color: var(--color-dark--004);\n text-underline-offset: var(--space);\n\n &:hover {\n color: var(--color-dark--001);\n }\n }\n}\n",":is(.off-canvas) {\n form {\n gap: var(--space--gap);\n grid-auto-rows: max-content;\n }\n\n button,\n input,\n select,\n textarea {\n margin: 0;\n padding: var(--padding-default);\n border: 2px solid var(--color-dark--001);\n border-radius: 0;\n field-sizing: content;\n font-family: inherit;\n font-size: inherit;\n background-color: var(--color-light--002);\n\n &:focus,\n &:focus-visible,\n &:focus-within {\n outline: 0;\n border-radius: 0;\n }\n }\n\n button,\n input,\n select {\n min-inline-size: 0;\n }\n\n input,\n textarea {\n &:focus,\n &:focus-visible,\n &:focus-within {\n &::placeholder {\n color: transparent;\n }\n }\n }\n\n textarea {\n min-block-size: 10rem;\n }\n\n :is(.form-item) {\n display: flex;\n flex-direction: column;\n gap: var(--space)\n }\n\n}\n",":is(.region) {\n min-inline-size: max-content;\n}\n",".brand-item__logo {\n img {\n max-block-size: var(--item-height);\n }\n}\n",":is(.page-navigation--menu-button),\n:is(.page-navigation--menu-icon) {\n position: absolute;\n}\n\n:is(.page-navigation--focus) {\n margin-inline-start: auto;\n grid-column: page-end;\n}\n",".brand {\n align-items: center;\n min-block-size: 100%;\n gap: var(--space--gap-alt);\n}\n",":is(.site-header) {\n .page-navigation--menu-button,\n .page-navigation--menu-icon {\n display: block;\n }\n\n @media (--breakpoint-tablet) {\n .page-navigation--menu-button,\n .page-navigation--menu-icon {\n display: none;\n }\n }\n}\n"]} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 3890b6b..5fa0348 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -16,6 +16,8 @@ import postcss_cq from 'cqfill/postcss' import postcss_import from 'postcss-import' import postcss_imports from 'postcss-import-ext-glob' import postcss_lightningcss from 'postcss-lightningcss' +import postcss_media from 'postcss-custom-media' +import postcss_nested from 'postcss-nested' import postcss_reporter from 'postcss-reporter' import stylelint from 'stylelint' @@ -44,6 +46,8 @@ function styles() { postcss_cq, postcss_imports, postcss_import, + postcss_media(), + postcss_nested, postcss_lightningcss({ browsers: 'last 2 versions, not dead', diff --git a/matter.info.yml b/matter.info.yml index 087b5d7..c1f4fe6 100644 --- a/matter.info.yml +++ b/matter.info.yml @@ -8,6 +8,7 @@ libraries: - matter/global-styling dependencies: + - body_roles_classes:body_roles_classes - components:components - mgv:mgv - ui_icons:ui_icons diff --git a/package.json b/package.json index 5b7b107..17384d4 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,11 @@ "gulp-uglify": "^3.0.2", "postcss": "^8.5.12", "postcss-cli": "^11.0.1", + "postcss-custom-media": "^12.0.1", "postcss-import": "^16.1.1", "postcss-import-ext-glob": "^2.1.1", "postcss-lightningcss": "^1.1.0", + "postcss-nested": "^7.0.2", "postcss-reporter": "^7.1.0", "stylelint": "^17.9.1", "stylelint-config-standard": "^40.0.0" diff --git a/source/00-nucleus/defaults.nucleus.css b/source/00-nucleus/defaults.nucleus.css index 9d61736..ca8545e 100644 --- a/source/00-nucleus/defaults.nucleus.css +++ b/source/00-nucleus/defaults.nucleus.css @@ -44,7 +44,7 @@ body { ol { &:not(.contextual-links, .entity-moderation-form, .format-filter-guidelines ul) { display: grid; - margin-inline-start: var(--gap); + margin-inline-start: var(--space--gap); } } } @@ -53,7 +53,7 @@ body { .site-main { grid-area: main; grid-template-rows: auto 1fr; - padding-block-end: var(--gap); + padding-block-end: var(--space--gap); } .site-footer { diff --git a/source/00-nucleus/root/globals.root.css b/source/00-nucleus/root/globals.root.css index 17bf0fa..8629c32 100644 --- a/source/00-nucleus/root/globals.root.css +++ b/source/00-nucleus/root/globals.root.css @@ -1,7 +1,7 @@ @import "./globals/reset.css"; @import "./globals/utilities.css"; @import "./globals/typography.css"; -/* @import "./globals/forms.css"; */ @import "./globals/layout.css"; /* @import "./globals/animations.css"; */ @import "./globals/styling.css"; +@import "./globals/forms.css"; diff --git a/source/00-nucleus/root/globals/forms.alt.css b/source/00-nucleus/root/globals/forms.alt.css new file mode 100644 index 0000000..e1730ae --- /dev/null +++ b/source/00-nucleus/root/globals/forms.alt.css @@ -0,0 +1,45 @@ +.form-field { + --form-field-width: 30ch; + + background-color: var(--color-light--002); + border: 2px solid; + border-radius: var(--border-radius); + padding: 0.25em 0.5em; + font-family: inherit; + color: inherit; + + /* fallback */ + font-size: 16px; + /* Capitalized to prevent Sass thinking it's the Sass max() */ + font-size: max(16px, 1em); + max-width: 100%; + width: var(--form-field-width, 30ch); + + &:not(textarea, .select--multiple) { + line-height: 1; + height: 2.25rem; + } + + & select { + appearance: none; + background-color: transparent; + border: none; + padding: 0 1em 0 0; + margin: 0; + width: 100%; + font-family: inherit; + font-size: inherit; + color: inherit; + cursor: inherit; + line-height: inherit; + + /* Remove dropdown arrow in IE10 & IE11 */ + /* @link https://www.filamentgroup.com/lab/select-css.html */ + &::-ms-expand { + display: none; + } + + /* Remove focus outline, will add on alternate element */ + outline: none; + } +} diff --git a/source/00-nucleus/root/globals/forms.css b/source/00-nucleus/root/globals/forms.css index f4c317e..d3a4a45 100644 --- a/source/00-nucleus/root/globals/forms.css +++ b/source/00-nucleus/root/globals/forms.css @@ -1,51 +1,55 @@ -form, - .form-wrapper, { - > .form-item { - > * { - margin-block-end: var(--gap-alt); - } +:is(.off-canvas) { + form { + gap: var(--space--gap); + grid-auto-rows: max-content; } -} -button, -input, -select, -textarea { - margin: 0; - padding: var(--padding-default); - border: 2px solid var(--color-black--001); - border-radius: 0; - field-sizing: content; - font-family: inherit; - font-size: inherit; - background-color: var(--color-white--002); - - &:focus, - &:focus-visible, - &:focus-within { - outline: 0; + button, + input, + select, + textarea { + margin: 0; + padding: var(--padding-default); + border: 2px solid var(--color-dark--001); border-radius: 0; + field-sizing: content; + font-family: inherit; + font-size: inherit; + background-color: var(--color-light--002); + + &:focus, + &:focus-visible, + &:focus-within { + outline: 0; + border-radius: 0; + } } -} -button, -input, -select { - min-inline-size: 0; -} + button, + input, + select { + min-inline-size: 0; + } -input, -textarea { - &:focus, - &:focus-visible, - &:focus-within { - &::placeholder { - color: transparent; + input, + textarea { + &:focus, + &:focus-visible, + &:focus-within { + &::placeholder { + color: transparent; + } } } -} -textarea { - min-inline-size: 100%; - min-block-size: 10rem; + textarea { + min-block-size: 10rem; + } + + :is(.form-item) { + display: flex; + flex-direction: column; + gap: var(--space) + } + } diff --git a/source/00-nucleus/root/globals/forms.old.css b/source/00-nucleus/root/globals/forms.old.css new file mode 100644 index 0000000..d8ecb9f --- /dev/null +++ b/source/00-nucleus/root/globals/forms.old.css @@ -0,0 +1,51 @@ +form, + .form-wrapper { + > .form-item { + > * { + margin-block-end: var(--space--gap-alt); + } + } +} + +button, +input, +select, +textarea { + margin: 0; + padding: var(--padding-default); + border: 2px solid var(--color-dark--001); + border-radius: 0; + field-sizing: content; + font-family: inherit; + font-size: inherit; + background-color: var(--color-light--002); + + &:focus, + &:focus-visible, + &:focus-within { + outline: 0; + border-radius: 0; + } +} + +button, +input, +select { + min-inline-size: 0; +} + +input, +textarea { + &:focus, + &:focus-visible, + &:focus-within { + &::placeholder { + color: transparent; + } + } +} + +textarea { + min-inline-size: 100%; + min-block-size: 10rem; +} diff --git a/source/00-nucleus/root/globals/layout.css b/source/00-nucleus/root/globals/layout.css index c6080a6..fd46d96 100644 --- a/source/00-nucleus/root/globals/layout.css +++ b/source/00-nucleus/root/globals/layout.css @@ -1,15 +1,3 @@ -:is(.gin--core-navigation) { - .off-canvas { - block-size: calc(100dvb - var(--toolbars-height)); - min-block-size: calc(100dvb - var(--toolbars-height)); - - @media screen and (width > 1023px) { - block-size: calc(100dvb - var(--top-bar-height)); - min-block-size: calc(100dvb - var(--top-bar-height)); - } - } -} - :is(.off-canvas) { overflow: clip; @@ -17,26 +5,25 @@ grid-column: page; } - header { - grid-row: header; - - :is(.block-system) { - align-items: center; - min-block-size: 100%; - } + header, + main, + footer { + grid-template-columns: subgrid; - @media (width < 1700px) { - grid-template-columns: auto 1fr auto; + > * { + display: grid; + grid-template-columns: subgrid; } } - main { - grid-row: main; + main, + footer { + --padding-block: var(--space--gap); + + padding-block: var(--padding-block); > * { - display: grid; grid-column: content; - grid-template-columns: subgrid; > * { grid-column: content; @@ -44,8 +31,76 @@ } } + header { + grid-row: header; + grid-template-columns: 1fr; + grid-auto-rows: max-content; + + > * { + min-block-size: var(--item-height); + grid-column: 1 / -1; + } + + :is(.region) { + > * { + display: flex; + align-items: center; + min-block-size: 100%; + } + + :is(.nav-link) { + display: grid; + place-items: center; + min-block-size: var(--item-height); + } + } + + @media (width >= 768px) { + gap: var(--space--gap); + grid-template-columns: auto 1fr auto; + + > * { + grid-column: auto; + } + } + + @media (width >= 1885px) { + grid-template-columns: inherit; + } + } + + main { + grid-row: main; + } + footer { grid-row: footer; + + :is(.block-system) { + align-content: center; + } } +} +/* stylelint-disable-next-line selector-class-pattern */ +:is(.permission_navigation) { + .off-canvas { + block-size: calc(100dvb - var(--toolbars-height)); + min-block-size: calc(100dvb - var(--toolbars-height)); + + header { + min-block-size: calc(100dvb - var(--toolbars-height)); + } + + @media (--breakpoint-tablet) { + header { + min-block-size: var(--item-height); + } + } + + @media (--breakpoint-desktop) { + block-size: calc(100dvb - var(--top-bar-height)); + min-block-size: calc(100dvb - var(--top-bar-height)); + } + } } diff --git a/source/00-nucleus/root/globals/reset.css b/source/00-nucleus/root/globals/reset.css index e7eff88..b3f2b55 100644 --- a/source/00-nucleus/root/globals/reset.css +++ b/source/00-nucleus/root/globals/reset.css @@ -95,6 +95,17 @@ min-block-size: 5lh } + /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ + :is(ul, ol)[class]:not(.links) { + margin: 0; + padding: 0; + } + + :is(ul, ol):not(.links), + :is(ul, ol)[role="list"] { + margin-inline-start: 1.25em; + } + a:not([class]) { color:var(--link); text-underline-offset: .25ex; diff --git a/source/00-nucleus/root/globals/styling.css b/source/00-nucleus/root/globals/styling.css index f4977b9..be78f6d 100644 --- a/source/00-nucleus/root/globals/styling.css +++ b/source/00-nucleus/root/globals/styling.css @@ -1,13 +1,13 @@ :is(.off-canvas) { a { - color: var(--color-black--004); + color: var(--color-dark--004); text-decoration-style: dashed; - text-decoration-thickness: var(--spacing); - text-decoration-color: var(--color-black--004); - text-underline-offset: var(--spacing); + text-decoration-thickness: var(--space); + text-decoration-color: var(--color-dark--004); + text-underline-offset: var(--space); &:hover { - color: var(--color-black--001); + color: var(--color-dark--001); } } } diff --git a/source/00-nucleus/root/globals/utilities.css b/source/00-nucleus/root/globals/utilities.css index 31f163b..844d737 100644 --- a/source/00-nucleus/root/globals/utilities.css +++ b/source/00-nucleus/root/globals/utilities.css @@ -8,10 +8,7 @@ } .flex { - --gutter: 1.75rem; - display: flex; - gap: var(--gutter); } .grid, diff --git a/source/00-nucleus/root/grid/grid-layout.css b/source/00-nucleus/root/grid/grid-layout.css index 0924336..623142c 100644 --- a/source/00-nucleus/root/grid/grid-layout.css +++ b/source/00-nucleus/root/grid/grid-layout.css @@ -3,15 +3,19 @@ .grid-wrapper--max { /* Layout variables - easier to customize */ --gutter-mobile: 1.5rem; - --gutter-tablet: 2.5rem; - --gutter-desktop: 3.5rem; + --gutter-tablet: 2.75rem; + --gutter-desktop: 4rem; + + /* Set the default gutter variable to mobile by default */ --gutter: var(--gutter-mobile); - @media screen and (width > 786px) { + /* Update gutter variable for tablet breakpoint */ + @media screen and (--breakpoint-tablet) { --gutter: var(--gutter-tablet); } - @media screen and (width > 1023px) { + /* Update gutter variable for desktop breakpoint */ + @media screen and (--breakpoint-desktop) { --gutter: var(--gutter-desktop); } } @@ -22,55 +26,23 @@ overflow-inline: hidden; /* Content width constraints */ - --inner-max-width: 100%; - - /* Base grid setup with advanced layout as default */ - min-block-size: 100dvb; - grid-template: - "header" auto - "main" 1fr - "footer" auto / - [page-start] - minmax(var(--gutter), 1fr) - [inner-start] - minmax(0, var(--inner-max-width)) - [inner-end] - minmax(var(--gutter), 1fr) - [page-end]; -} - -.grid-wrapper--min, -.grid-wrapper--max { --content-max-width: 85rem; --wrapper-max-width: 75.75rem; + --narrow-max-width: 42.875rem; /* Calculated sizes for responsive behavior */ --content-size: calc((var(--content-max-width) - var(--wrapper-max-width)) / 2); -} - -.grid-wrapper--min { - grid-template-columns: - [page-start] - minmax(var(--gutter), 1fr) - [content-start] - minmax(0, var(--content-size)) - [wrapper-start] - minmax(0, var(--wrapper-max-width)) - [wrapper-end] - minmax(0, var(--content-size)) - [content-end] - minmax(var(--gutter), 1fr) - [page-end]; -} - -.grid-wrapper--max { - --narrow-max-width: 42.875rem; - - - /* Calculated size for wrapper */ --wrapper-size: calc((var(--wrapper-max-width) - var(--narrow-max-width)) / 2); + --content-min-size: calc((var(--content-size) + var(--wrapper-size)) / 2); - grid-template-columns: + /* Base grid setup with advanced layout as default */ + min-block-size: 100dvb; + + /* Define the grid areas and columns for the overall page layout */ + grid-template: + "header" auto + "main" 1fr + "footer" auto / [page-start] minmax(var(--gutter), 1fr) [content-start] diff --git a/source/00-nucleus/root/variables.root.css b/source/00-nucleus/root/variables.root.css index f15acb6..d43c1e5 100644 --- a/source/00-nucleus/root/variables.root.css +++ b/source/00-nucleus/root/variables.root.css @@ -1,3 +1,4 @@ +@import "./variables/breakpoints.css"; @import "./variables/colors.css"; @import "./variables/fonts.css"; @import "./variables/sizes.css"; diff --git a/source/00-nucleus/root/variables/breakpoints.css b/source/00-nucleus/root/variables/breakpoints.css new file mode 100644 index 0000000..c496623 --- /dev/null +++ b/source/00-nucleus/root/variables/breakpoints.css @@ -0,0 +1,4 @@ +@custom-media --breakpoint-mobile (width >= 480px); +@custom-media --breakpoint-tablet (width >= 768px); +@custom-media --breakpoint-desktop (width >= 1024px); +@custom-media --breakpoint-desktop-large (width >= 1200px); diff --git a/source/00-nucleus/root/variables/sizes.css b/source/00-nucleus/root/variables/sizes.css index 4b68d69..13df8e8 100644 --- a/source/00-nucleus/root/variables/sizes.css +++ b/source/00-nucleus/root/variables/sizes.css @@ -1,5 +1,6 @@ :root { --height: max(1.5rem, 4rem); + --item-height: 4rem; /* Page Title Sizes */ --page-title-size: clamp(2rem, 5vi, 3.5rem); diff --git a/source/00-nucleus/root/variables/spacing.css b/source/00-nucleus/root/variables/spacing.css index 8f936d5..752563f 100644 --- a/source/00-nucleus/root/variables/spacing.css +++ b/source/00-nucleus/root/variables/spacing.css @@ -1,11 +1,16 @@ :root { + /* Spacing */ --gutter: 2rem; - --gap: 1.5rem; - --gap-alt: 0.5em; --space: 0.15em; + --space--gap: 1.5rem; + --space--gap-alt: 0.75em; + + /* Padding */ --padding-block: 0.75rem; --padding-inline: 1rem; --padding-default: var(--padding-block) var(--padding-inline); + + /* Spacing with scaling */ --spacing-3xs: clamp(.3125rem, .3125rem + 0vw, .3125rem); --spacing-2xs: clamp(.5625rem, .5114rem + .2273vw, .6875rem); --spacing-xs: clamp(.875rem, .8239rem + .2273vw, 1rem); diff --git a/source/02-molecules/brand_item/brand-item.molecules.css b/source/02-molecules/brand_item/brand-item.molecules.css new file mode 100644 index 0000000..f8fd4f2 --- /dev/null +++ b/source/02-molecules/brand_item/brand-item.molecules.css @@ -0,0 +1,5 @@ +.brand-item__logo { + img { + max-block-size: var(--item-height); + } +} diff --git a/source/02-molecules/form-element/form-element.html.twig b/source/02-molecules/form-element/form-element.html.twig new file mode 100644 index 0000000..e52416b --- /dev/null +++ b/source/02-molecules/form-element/form-element.html.twig @@ -0,0 +1,61 @@ +{% block form_element %} + {% + set classes = [ + 'form-item', + 'form-item-' ~ name|clean_class, + 'js-form-item', + 'js-form-item-' ~ name|clean_class, + 'js-form-type-' ~ type|clean_class, + title_display not in ['after', 'before'] ? 'form-no-label', + disabled == 'disabled' ? 'form-disabled', + errors ? 'form-item--error', + ] + %} + + {% + set description_classes = [ + 'description', + description_display == 'invisible' ? 'visually-hidden', + ] + %} + + + + {% if label_display in ['before', 'invisible'] %} + {{ label }} + {% endif %} + + {% if prefix is not empty %} + {{ prefix }} + {% endif %} + + {% if description_display == 'before' and description.content %} + + {{ description.content }} + + {% endif %} + + {{ children }} + + {% if suffix is not empty %} + {{ suffix }} + {% endif %} + + {% if label_display == 'after' %} + {{ label }} + {% endif %} + + {% if errors %} +
+ {{ errors }} +
+ {% endif %} + + {% if description_display in ['after', 'invisible'] and description.content %} + + {{ description.content }} + + {% endif %} + + +{% endblock %} diff --git a/source/02-molecules/form-element/variants/form-element--textarea.html.twig b/source/02-molecules/form-element/variants/form-element--textarea.html.twig new file mode 100644 index 0000000..35d4dee --- /dev/null +++ b/source/02-molecules/form-element/variants/form-element--textarea.html.twig @@ -0,0 +1 @@ +{% extends '@molecules/form-element/form-element.html.twig' %} diff --git a/source/02-molecules/form-element/variants/form-element--textfield.html.twig b/source/02-molecules/form-element/variants/form-element--textfield.html.twig new file mode 100644 index 0000000..35d4dee --- /dev/null +++ b/source/02-molecules/form-element/variants/form-element--textfield.html.twig @@ -0,0 +1 @@ +{% extends '@molecules/form-element/form-element.html.twig' %} diff --git a/source/02-molecules/menu/menu.html.twig b/source/02-molecules/menu/menu.html.twig new file mode 100644 index 0000000..d647837 --- /dev/null +++ b/source/02-molecules/menu/menu.html.twig @@ -0,0 +1,55 @@ +{# +/** + * @file + * Default theme implementation to display a menu. + * + * Available variables: + * - menu_name: The machine name of the menu. + * - items: A nested list of menu items. Each menu item contains: + * - attributes: HTML attributes for the menu item. + * - below: The menu item child items. + * - title: The menu link title. + * - url: The menu link URL, instance of \Drupal\Core\Url + * - localized_options: Menu link localized options. + * - is_expanded: TRUE if the link has visible children within the current + * menu tree. + * - is_collapsed: TRUE if the link has children within the current menu tree + * that are not currently visible. + * - in_active_trail: TRUE if the link is in the active trail. + * + * @ingroup themeable + */ +#} +{% block menu_list %} + + {% import _self as menus %} + + {# + We call a macro which calls itself to render the full tree. + https://twig.symfony.com/doc/3.x/tags/macro.html + #} + {{ menus.menu_links(items, attributes, 0) }} + + {% macro menu_links(items, attributes, menu_level) %} + {% import _self as menus %} + {% if items %} + + {% if menu_level == 0 %} + + {% else %} +
    + {% endif %} + {% for item in items %} + + {{ link(item.title, item.url) }} + {% if item.below %} + {{ menus.menu_links(item.below, attributes, menu_level + 1) }} + {% endif %} + + {% endfor %} +
+ + {% endif %} + {% endmacro %} + +{% endblock %} diff --git a/source/02-molecules/menu/variants/menu--main.html.twig b/source/02-molecules/menu/variants/menu--main.html.twig new file mode 100644 index 0000000..53eb97a --- /dev/null +++ b/source/02-molecules/menu/variants/menu--main.html.twig @@ -0,0 +1,61 @@ +{% extends '@molecules/menu/menu.html.twig' %} + +{% block menu_list %} + + {% import _self as menus %} + + {% + set classes = [ + 'navigation-main', + 'no-bullets', + 'grid' + ] + %} + + {% + set menu_classes = [ + 'menu-item', + item.is_expanded ? 'menu-item--expanded', + item.is_collapsed ? 'menu-item--collapsed', + item.in_active_trail ? 'menu-item--active-trail', + ] + %} + + {% + set nav_classes = [ + 'nav-link' + ] + %} + + {# + We call a macro which calls itself to render the full tree. + https://twig.symfony.com/doc/3.x/tags/macro.html + #} + {{ menus.menu_links(items, attributes, classes, menu_classes, nav_classes, 0) }} + + {% macro menu_links(items, attributes, classes, menu_classes, nav_classes, menu_level) %} + {% set primary_nav_level = 'menu--level-' ~ (menu_level + 1) %} + {% import _self as menus %} + {% if items %} + {% if menu_level == 0 %} + + {% else %} +
    + {% endif %} + {% for item in items %} + + + {{ link(item.title, item.url)|add_class(nav_classes) }} + {% if item.below %} + + {{ menus.menu_links(item.below, attributes, classes, menu_classes, nav_classes, menu_level + 1) }} + {% endif %} + + + {% endfor %} + +
+ {% endif %} + {% endmacro %} + +{% endblock %} diff --git a/source/02-molecules/menu/variants/menu--navigation-focus.html.twig b/source/02-molecules/menu/variants/menu--navigation-focus.html.twig new file mode 100644 index 0000000..33f33d5 --- /dev/null +++ b/source/02-molecules/menu/variants/menu--navigation-focus.html.twig @@ -0,0 +1,46 @@ +{% extends '@molecules/menu/menu.html.twig' %} + +{% block menu_list %} + + {% import _self as menus %} + + {% + set classes = [ + 'navigation-focus', + 'no-bullets', + 'grid' + ] + %} + + {% + set nav_classes = [ + 'nav-link' + ] + %} + + {# + We call a macro which calls itself to render the full tree. + https://twig.symfony.com/doc/3.x/tags/macro.html + #} + {{ menus.menu_links(items, attributes, classes, nav_classes, 0) }} + + {% macro menu_links(items, attributes, classes, nav_classes, menu_level) %} + {% import _self as menus %} + + + + {% for item in items %} + + {{ link(item.title, item.url)|add_class(nav_classes) }} + {% if item.below %} + {{ menus.menu_links(item.below, attributes, menu_level + 1) }} + {% endif %} + + {% endfor %} + + + + {% endmacro %} + +{% endblock %} + diff --git a/source/02-molecules/page_navigation/page-navigation.html.twig b/source/02-molecules/page_navigation/page-navigation.html.twig new file mode 100644 index 0000000..6ee2bad --- /dev/null +++ b/source/02-molecules/page_navigation/page-navigation.html.twig @@ -0,0 +1,3 @@ +{% block page_navigation %} + {{ page.navigation|add_class('page-navigation') }} +{% endblock %} diff --git a/source/02-molecules/page_navigation/page-navigation.molecules.css b/source/02-molecules/page_navigation/page-navigation.molecules.css new file mode 100644 index 0000000..b325d7d --- /dev/null +++ b/source/02-molecules/page_navigation/page-navigation.molecules.css @@ -0,0 +1,9 @@ +:is(.page-navigation--menu-button), +:is(.page-navigation--menu-icon) { + position: absolute; +} + +:is(.page-navigation--focus) { + margin-inline-start: auto; + grid-column: page-end; +} diff --git a/source/02-molecules/page_navigation/variants/page-navigation--focus.html.twig b/source/02-molecules/page_navigation/variants/page-navigation--focus.html.twig new file mode 100644 index 0000000..513af5a --- /dev/null +++ b/source/02-molecules/page_navigation/variants/page-navigation--focus.html.twig @@ -0,0 +1,5 @@ +{% extends "@molecules/page_navigation/page-navigation.html.twig" %} + +{% block page_navigation %} + {{ page.focus|add_class('page-navigation--focus') }} +{% endblock %} diff --git a/source/02-molecules/textarea/textarea.html.twig b/source/02-molecules/textarea/textarea.html.twig new file mode 100644 index 0000000..d768607 --- /dev/null +++ b/source/02-molecules/textarea/textarea.html.twig @@ -0,0 +1,24 @@ +{# +/** + * @file + * Default theme implementation for a 'textarea' #type form element. + * + * Available variables + * - wrapper_attributes: A list of HTML attributes for the wrapper element. + * - attributes: A list of HTML attributes for the + {% else %} + {{ value }} + {% endif %} +{% endblock %} diff --git a/source/03-organisms/brand/brand.organisms.css b/source/03-organisms/brand/brand.organisms.css index 827daa4..595123e 100644 --- a/source/03-organisms/brand/brand.organisms.css +++ b/source/03-organisms/brand/brand.organisms.css @@ -1,4 +1,5 @@ .brand { align-items: center; min-block-size: 100%; + gap: var(--space--gap-alt); } diff --git a/source/03-organisms/site_footer/site-footer.html.twig b/source/03-organisms/site_footer/site-footer.html.twig new file mode 100644 index 0000000..afa6ac1 --- /dev/null +++ b/source/03-organisms/site_footer/site-footer.html.twig @@ -0,0 +1,7 @@ +{% block footer %} +
+ {% if page.footer %} + {{ page.footer }} + {% endif %} +
+{% endblock %} diff --git a/source/03-organisms/site_header/site-header.html.twig b/source/03-organisms/site_header/site-header.html.twig new file mode 100644 index 0000000..932406f --- /dev/null +++ b/source/03-organisms/site_header/site-header.html.twig @@ -0,0 +1,30 @@ +{% block header %} + + + +{% endblock %} diff --git a/source/03-organisms/site_header/site-header.organisms.css b/source/03-organisms/site_header/site-header.organisms.css new file mode 100644 index 0000000..1c1f7d2 --- /dev/null +++ b/source/03-organisms/site_header/site-header.organisms.css @@ -0,0 +1,13 @@ +:is(.site-header) { + .page-navigation--menu-button, + .page-navigation--menu-icon { + display: block; + } + + @media (--breakpoint-tablet) { + .page-navigation--menu-button, + .page-navigation--menu-icon { + display: none; + } + } +} diff --git a/source/03-organisms/site_main/site-main.html.twig b/source/03-organisms/site_main/site-main.html.twig new file mode 100644 index 0000000..c55b432 --- /dev/null +++ b/source/03-organisms/site_main/site-main.html.twig @@ -0,0 +1,16 @@ +{% block main %} + +
+ {# link is in html.html.twig #} + + {{ page.content }} + + {% if page.sidebar %} + + {% endif %} + +
+ +{% endblock %} diff --git a/source/03-organisms/webform/webform.html.twig b/source/03-organisms/webform/webform.html.twig new file mode 100644 index 0000000..40fa649 --- /dev/null +++ b/source/03-organisms/webform/webform.html.twig @@ -0,0 +1,33 @@ +{# +/** + * @file + * Theme implementation for a 'webform' element. + * + * This is an copy of the webform.html.twig theme_wrapper which includes the + * 'title_prefix' and 'title_suffix' variables needed for + * contextual links to appear. + * + * Available variables + * - attributes: A list of HTML attributes for the wrapper element. + * - children: The child elements of the webform. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_webform() + * @see _webform_form_after_build() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'grid', + ] + %} + + {{ title_prefix }} + {{ children }} + {{ title_suffix }} + diff --git a/source/04-symbiosis/page/page.html.twig b/source/04-symbiosis/page/page.html.twig index e8758a7..b93f527 100644 --- a/source/04-symbiosis/page/page.html.twig +++ b/source/04-symbiosis/page/page.html.twig @@ -42,29 +42,18 @@ */ #} - +{% block page %} -
- {# link is in html.html.twig #} + {% block site_header %} + {% include '@organisms/site_header/site-header.html.twig' %} + {% endblock %} - {{ page.content }} + {% block site_main %} + {% include '@organisms/site_main/site-main.html.twig' %} + {% endblock %} - {% if page.sidebar %} - - {% endif %} + {% block site_footer %} + {% include '@organisms/site_footer/site-footer.html.twig' %} + {% endblock %} -
- - +{% endblock %} diff --git a/source/matter.source.css b/source/matter.source.css index e17e6e3..05a51d0 100644 --- a/source/matter.source.css +++ b/source/matter.source.css @@ -2,12 +2,14 @@ @import "./00-nucleus/core/fonts.core.css"; /* Root */ +@import "./00-nucleus/root/variables.root.css"; @import "./00-nucleus/root/grid.root.css"; @import "./00-nucleus/root/globals.root.css"; -@import "./00-nucleus/root/variables.root.css"; /* Defaults */ -@import "./00-nucleus/defaults.nucleus.css"; +/* @import "./00-nucleus/defaults.nucleus.css"; */ /* Atomic design imports using postcss-import-ext-glob */ @import-glob "./01-atoms/**/*.css"; +@import-glob "./02-molecules/**/*.css"; +@import-glob "./03-organisms/**/*.css";