From fc2987abb2c5cd724a5ca132ed04f0688c974344 Mon Sep 17 00:00:00 2001 From: mikepadiernos Date: Thu, 30 Apr 2026 20:39:25 -0400 Subject: [PATCH 01/12] [feat] build / molecules, organisms, symbiosis - molecules: page-navigation - organisms: site_footer, site_header, site_main - symbiosis: page --- README.md | 11 ++++--- .../page_navigation/page-navigation.html.twig | 3 ++ .../variants/page-navigation--focus.html.twig | 5 +++ .../site_footer/site-footer.html.twig | 7 ++++ .../site_header/site-header.html.twig | 28 ++++++++++++++++ .../site_main/site-main.html.twig | 16 +++++++++ source/04-symbiosis/page/page.html.twig | 33 +++++++------------ 7 files changed, 76 insertions(+), 27 deletions(-) create mode 100644 source/02-molecules/page_navigation/page-navigation.html.twig create mode 100644 source/02-molecules/page_navigation/variants/page-navigation--focus.html.twig create mode 100644 source/03-organisms/site_footer/site-footer.html.twig create mode 100644 source/03-organisms/site_header/site-header.html.twig create mode 100644 source/03-organisms/site_main/site-main.html.twig diff --git a/README.md b/README.md index 7d44021..01a0caf 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,12 @@ 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 +- [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 +- [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 - [Node.js](https://nodejs.org) - Node.js 14 or higher for asset compilation ## Structure 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..d04cb97 --- /dev/null +++ b/source/02-molecules/page_navigation/page-navigation.html.twig @@ -0,0 +1,3 @@ +{% block page_navigation %} + {{ page.navigation }} +{% endblock %} 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..3b5fc45 --- /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 }} +{% endblock %} 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..61f7e62 --- /dev/null +++ b/source/03-organisms/site_footer/site-footer.html.twig @@ -0,0 +1,7 @@ +{% block footer %} + +{% 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..0488d8d --- /dev/null +++ b/source/03-organisms/site_header/site-header.html.twig @@ -0,0 +1,28 @@ +{% block header %} + + + +{% endblock %} 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..0423942 --- /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/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 %} From 689649b3d7a1b31291f0423f89fc20e257ab1919 Mon Sep 17 00:00:00 2001 From: mikepadiernos Date: Thu, 30 Apr 2026 23:40:55 -0400 Subject: [PATCH 02/12] [feat] build / header, navigation - coded brand items to standard size - structured & coded layout for the header & navigation --- .stylelintrc.json | 3 +- assets/css/matter.theme.css | 2 +- assets/css/matter.theme.css.map | 2 +- gulpfile.js | 2 + package.json | 1 + source/00-nucleus/root/globals/layout.css | 10 +++- source/00-nucleus/root/grid/grid-layout.css | 49 +++++++++++-------- source/00-nucleus/root/variables.root.css | 1 + .../00-nucleus/root/variables/breakpoints.css | 4 ++ .../brand_item/brand-item.molecules.css | 5 ++ .../page_navigation/page-navigation.html.twig | 2 +- .../page-navigation.molecules.css | 4 ++ .../variants/page-navigation--focus.html.twig | 2 +- .../site_footer/site-footer.html.twig | 2 +- .../site_header/site-header.html.twig | 6 +-- .../site_header/site-header.organisms.css | 13 +++++ .../site_main/site-main.html.twig | 2 +- source/matter.source.css | 2 + 18 files changed, 80 insertions(+), 32 deletions(-) create mode 100644 source/00-nucleus/root/variables/breakpoints.css create mode 100644 source/02-molecules/brand_item/brand-item.molecules.css create mode 100644 source/02-molecules/page_navigation/page-navigation.molecules.css create mode 100644 source/03-organisms/site_header/site-header.organisms.css 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/assets/css/matter.theme.css b/assets/css/matter.theme.css index af3f991..35cdd48 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}.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;--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}.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);--wrapper-size:calc((var(--wrapper-max-width) - var(--narrow-max-width)) / 2);--content-min-size:calc((var(--content-size) + var(--wrapper-size)) / 2)}.grid-wrapper--min{grid-template-columns:[page-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--content-max-width)) [content-end] minmax(var(--gutter), 1fr) [page-end]}.grid-wrapper--max{--narrow-max-width:42.875rem;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 (width>=1024px){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,& main,& footer{grid-template-columns:subgrid}& header{grid-row:header;& .block-system{align-items:center;min-block-size:100%}@media (width<1885px){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}.brand-item__logo{& img{max-block-size:var(--height)}}.page-navigation--focus{grid-column:page-end;margin-inline-start:auto}.brand{align-items:center;min-block-size:100%}.site-header{& .page-navigation--menu-button,& .page-navigation--menu-icon{display:block}@media (width>=768px){& .page-navigation--menu-button,& .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..6f40ebf 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":"AAAA,WAAA,kBAAA,CAAA,uDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,kBAAA,CAAA,oDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,kBAAA,CAAA,sDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,kBAAA,CAAA,0DAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,wDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,qDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,uDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,wDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,qDAAA,CAAA,eAAA,CAAA,iBAAA,CCxDA,mDAAA,sBAAA,CAAA,sBAAA,CAAA,uBAAA,CAAA,6BAAA,CASE,gCAAA,6BAAA,CAIA,iCAAA,8BAAA,CAAA,CAKF,aAAA,sBAAA,CAAA,sBAAA,CAAA,gMAAA,CAAA,qBAAA,CAAA,qBAAA,CAuBA,sCAAA,yBAAA,CAAA,4BAAA,CAAA,8EAAA,CASA,mBAAA,iQAAA,CAeA,mBAAA,4BAAA,CAAA,6EAAA,CAAA,0VAAA,CCjEA,aACE,KAAA,+BAAA,CAAA,6CAAA,CAAA,kCAAA,CAAA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,eAAA,CASE,8CAAA,sBAAA,CAAA,CAIF,KAAA,qBAAA,CAAA,mCAAA,CAAA,kCAAA,CAAA,+BAAA,CAAA,4BAAA,CAAA,gCAAA,CAAA,QAAA,CAAA,eAAA,CAAA,YAAA,CAYA,sCAAA,cAAA,CAYA,YAAA,iBAAA,CAMA,MAAA,eAAA,CAKA,GAAA,4BAAA,CAAA,eAAA,CAAA,iBAAA,CAMA,gBAAA,4BAAA,CAIA,wBAAA,mCAAA,CAIA,GAAA,4BAAA,CAIA,+BAAA,eAAA,CAUA,mBAAA,oBAAA,CAAA,WAAA,CAAA,aAAA,CAQA,6BAAA,mBAAA,CAAA,iBAAA,CAQA,SAAA,kBAAA,CAIA,eAAA,iBAAA,CAAA,2BAAA,CAAA,2BAAA,CAAA,8BAAA,CAME,wBAAA,iCAAA,CAAA,0BAAA,CAAA,+BAAA,CAAA,CAOF,YAAA,qDAAA,CAIA,SAAA,2BAAA,CAAA,CClHF,QAAA,iBAAA,CAAA,YAAA,CAKA,MAAA,YAAA,CAIA,MAAA,gBAAA,CAAA,iBAAA,CAAA,YAAA,CAOA,YAEE,WAAA,sBAAA,CAAA,CAKF,WAAA,0BAAA,CAIA,QAAA,oBAAA,CAAA,eAAA,CAKE,SAAA,mBAAA,CAIA,SAAA,mCAAA,CAIA,SAAA,6CAAA,CAAA,CAKF,MAAA,qBAAA,CAAA,mCAAA,CAKA,MAAA,qBAAA,CAAA,oBAAA,CAAA,KAAA,CAAA,oBAAA,CAOA,UAAA,2BAAA,CAAA,wBAAA,CAIE,IAAA,oBAAA,CAAA,CAKF,SAAA,4BAAA,CAAA,qFAAA,CAUA,OAAA,YAAA,CAGE,QAAA,0BAAA,CAAA,YAAA,CAAA,CAMF,OACE,cAAA,iEAAA,CAAA,6BAAA,CAAA,oDAAA,CAAA,sBAAA,CAAA,CAQF,YAAA,aAAA,CC9FA,UAAA,mCAAA,CAKA,kBAAA,eAAA,CAAA,mCAAA,CAUA,cAAA,qCAAA,CAKA,cAAA,sCAAA,CAKA,cAAA,mCAAA,CAKA,cAAA,uCAAA,CAKA,cAAA,kCAAA,CAKA,cAAA,mCAAA,CAKA,GAAA,iBAAA,CAIA,OAAA,eAAA,CCjDA,sBACE,cAAA,gDAAA,CAAA,oDAAA,CAIE,iCAAA,+CAAA,CAAA,mDAAA,CAAA,CAAA,CAOJ,YAAA,aAAA,CAGE,IAAA,gBAAA,CAIA,SAAA,eAAA,CAGE,gBAAA,kBAAA,CAAA,mBAAA,CAKA,sBAAA,mCAAA,CAAA,CAKF,OAAA,aAAA,CAGE,IAAA,mBAAA,CAAA,6BAAA,CAAA,YAAA,CAKE,IAAA,mBAAA,CAAA,CAAA,CAMJ,SAAA,eAAA,CAAA,CC9CF,YACE,IAAA,6BAAA,CAAA,4BAAA,CAAA,wCAAA,CAAA,6CAAA,CAAA,oCAAA,CAOE,QAAA,6BAAA,CAAA,CAAA,CCRJ,MAAA,wBAAA,CAAA,0BAAA,CAAA,0BAAA,CAAA,0BAAA,CAAA,uBAAA,CAAA,yBAAA,CAAA,yBAAA,CAAA,yBAAA,CAAA,2BAAA,CAAA,sBAAA,CAoBA,oCACE,MAAA,oBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,2BAAA,CAAA,CAmBF,mBAAA,oBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,mBAAA,CAeA,kBAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,2BAAA,CCvDA,MAAA,oDAAA,CAAA,uDAAA,CAAA,+CAAA,CAAA,uBAAA,CAAA,6DAAA,CAAA,4DAAA,CAAA,6DAAA,CAAA,4DAAA,CAAA,6DAAA,CAAA,8DAAA,CAAA,8DAAA,CAAA,8DAAA,CAAA,0BAAA,CAAA,yBAAA,CAAA,oDAAA,CAAA,aAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,qBAAA,CAAA,4DAAA,CAAA,uDAAA,CAAA,2DAAA,CAAA,qDAAA,CAAA,2DAAA,CAAA,uDAAA,CAAA,yDAAA,CAAA,6DAAA,CAAA,0DAAA,CAAA,4DAAA,CAAA,wDAAA,CAAA,+DAAA,CAAA,0DAAA,CAAA,2DAAA,CAAA,cAAA,CAAA,uCAAA,CAAA,0CAAA,CAAA,2CAAA,CAAA,iBAAA,CAAA,mBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qEAAA,CCAA,KAAA,qBAAA,CAIA,KAAA,mBAAA,CAAA,0BAAA,CAIE,gBACE,cAAA,mBAAA,CAAA,sBAAA,CAAA,gDAAA,CAAA,oDAAA,CAQE,eAAA,SAAA,CAAA,eAAA,CAAA,mBAAA,CAAA,CAAA,CAAA,CASN,YAAA,cAAA,CAAA,sBAAA,CAAA,iBAAA,CAAA,qBAAA,CAOE,UACE,eAGE,cAAA,oBAAA,CAAA,CAKF,UAEE,8EAAA,8BAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAQN,WAAA,cAAA,CAAA,2BAAA,CAAA,4BAAA,CAMA,aAAA,2BAAA,CAAA,gBAAA,CAIE,MAAA,mBAAA,CAAA,CAKF,wBAAA,gBAAA,CAAA,6BAAA,CAAA,YAAA,CAME,IAAA,mBAAA,CAAA,6BAAA,CAAA,YAAA,CAKE,iBAAA,6BAAA,CAAA,YAAA,CAMA,OAAA,gBAAA,CAGE,IAAA,mBAAA,CAAA,CAKF,mCAAA,mBAAA,CAAA,CAUF,kBACE,IAAA,mBAAA,CAAA,CAKF,gBACE,IAAA,mBAAA,CAAA,CAAA,CAMJ,iCACE,KACE,gBACE,cAAA,+CAAA,CAAA,mDAAA,CAIE,eAAA,YAAA,CAAA,0BAAA,CAAA,gBAAA,CAKE,sEAAA,cAAA,CAMA,sBACE,sEAAA,cAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CCtIZ,QAAA,2BAAA","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/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","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":"AAAA,WAAA,kBAAA,CAAA,uDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,kBAAA,CAAA,oDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,kBAAA,CAAA,sDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,kBAAA,CAAA,0DAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,wDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,qDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,uDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,wDAAA,CAAA,eAAA,CAAA,iBAAA,CAOA,WAAA,uBAAA,CAAA,qDAAA,CAAA,eAAA,CAAA,iBAAA,CCxDA,mDAAA,sBAAA,CAAA,sBAAA,CAAA,uBAAA,CAAA,6BAAA,CASE,gCAAA,6BAAA,CAIA,iCAAA,8BAAA,CAAA,CAKF,aAAA,sBAAA,CAAA,yBAAA,CAAA,4BAAA,CAAA,4BAAA,CAAA,8EAAA,CAAA,6EAAA,CAAA,wEAAA,CAAA,2XAAA,CAAA,qBAAA,CAAA,qBAAA,CAsCA,sCAAA,yBAAA,CAAA,4BAAA,CAAA,8EAAA,CAAA,6EAAA,CAAA,wEAAA,CAWA,mBAAA,qKAAA,CAWA,mBAAA,4BAAA,CAAA,0VAAA,CC9EA,aACE,KAAA,+BAAA,CAAA,6CAAA,CAAA,kCAAA,CAAA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,eAAA,CASE,8CAAA,sBAAA,CAAA,CAIF,KAAA,qBAAA,CAAA,mCAAA,CAAA,kCAAA,CAAA,+BAAA,CAAA,4BAAA,CAAA,gCAAA,CAAA,QAAA,CAAA,eAAA,CAAA,YAAA,CAYA,sCAAA,cAAA,CAYA,YAAA,iBAAA,CAMA,MAAA,eAAA,CAKA,GAAA,4BAAA,CAAA,eAAA,CAAA,iBAAA,CAMA,gBAAA,4BAAA,CAIA,wBAAA,mCAAA,CAIA,GAAA,4BAAA,CAIA,+BAAA,eAAA,CAUA,mBAAA,oBAAA,CAAA,WAAA,CAAA,aAAA,CAQA,6BAAA,mBAAA,CAAA,iBAAA,CAQA,SAAA,kBAAA,CAIA,eAAA,iBAAA,CAAA,2BAAA,CAAA,2BAAA,CAAA,8BAAA,CAME,wBAAA,iCAAA,CAAA,0BAAA,CAAA,+BAAA,CAAA,CAOF,YAAA,qDAAA,CAIA,SAAA,2BAAA,CAAA,CClHF,QAAA,iBAAA,CAAA,YAAA,CAKA,MAAA,YAAA,CAIA,MAAA,gBAAA,CAAA,iBAAA,CAAA,YAAA,CAOA,YAEE,WAAA,sBAAA,CAAA,CAKF,WAAA,0BAAA,CAIA,QAAA,oBAAA,CAAA,eAAA,CAKE,SAAA,mBAAA,CAIA,SAAA,mCAAA,CAIA,SAAA,6CAAA,CAAA,CAKF,MAAA,qBAAA,CAAA,mCAAA,CAKA,MAAA,qBAAA,CAAA,oBAAA,CAAA,KAAA,CAAA,oBAAA,CAOA,UAAA,2BAAA,CAAA,wBAAA,CAIE,IAAA,oBAAA,CAAA,CAKF,SAAA,4BAAA,CAAA,qFAAA,CAUA,OAAA,YAAA,CAGE,QAAA,0BAAA,CAAA,YAAA,CAAA,CAMF,OACE,cAAA,iEAAA,CAAA,6BAAA,CAAA,oDAAA,CAAA,sBAAA,CAAA,CAQF,YAAA,aAAA,CC9FA,UAAA,mCAAA,CAKA,kBAAA,eAAA,CAAA,mCAAA,CAUA,cAAA,qCAAA,CAKA,cAAA,sCAAA,CAKA,cAAA,mCAAA,CAKA,cAAA,uCAAA,CAKA,cAAA,kCAAA,CAKA,cAAA,mCAAA,CAKA,GAAA,iBAAA,CAIA,OAAA,eAAA,CCjDA,sBACE,cAAA,gDAAA,CAAA,oDAAA,CAIE,uBAAA,+CAAA,CAAA,mDAAA,CAAA,CAAA,CAOJ,YAAA,aAAA,CAGE,IAAA,gBAAA,CAIA,yBAAA,6BAAA,CAMA,SAAA,eAAA,CAGE,gBAAA,kBAAA,CAAA,mBAAA,CAKA,sBAAA,mCAAA,CAAA,CAKF,OAAA,aAAA,CAGE,IAAA,mBAAA,CAAA,6BAAA,CAAA,YAAA,CAKE,IAAA,mBAAA,CAAA,CAAA,CAMJ,SAAA,eAAA,CAAA,CCpDF,YACE,IAAA,6BAAA,CAAA,4BAAA,CAAA,wCAAA,CAAA,6CAAA,CAAA,oCAAA,CAOE,QAAA,6BAAA,CAAA,CAAA,CCRJ,MAAA,wBAAA,CAAA,0BAAA,CAAA,0BAAA,CAAA,0BAAA,CAAA,uBAAA,CAAA,yBAAA,CAAA,yBAAA,CAAA,yBAAA,CAAA,2BAAA,CAAA,sBAAA,CAoBA,oCACE,MAAA,oBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,2BAAA,CAAA,CAmBF,mBAAA,oBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,mBAAA,CAeA,kBAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,6BAAA,CAAA,6BAAA,CAAA,2BAAA,CCvDA,MAAA,oDAAA,CAAA,uDAAA,CAAA,+CAAA,CAAA,uBAAA,CAAA,6DAAA,CAAA,4DAAA,CAAA,6DAAA,CAAA,4DAAA,CAAA,6DAAA,CAAA,8DAAA,CAAA,8DAAA,CAAA,8DAAA,CAAA,0BAAA,CAAA,yBAAA,CAAA,oDAAA,CAAA,aAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,qBAAA,CAAA,4DAAA,CAAA,uDAAA,CAAA,2DAAA,CAAA,qDAAA,CAAA,2DAAA,CAAA,uDAAA,CAAA,yDAAA,CAAA,6DAAA,CAAA,0DAAA,CAAA,4DAAA,CAAA,wDAAA,CAAA,+DAAA,CAAA,0DAAA,CAAA,2DAAA,CAAA,cAAA,CAAA,uCAAA,CAAA,0CAAA,CAAA,2CAAA,CAAA,iBAAA,CAAA,mBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qEAAA,CCAA,KAAA,qBAAA,CAIA,KAAA,mBAAA,CAAA,0BAAA,CAIE,gBACE,cAAA,mBAAA,CAAA,sBAAA,CAAA,gDAAA,CAAA,oDAAA,CAQE,eAAA,SAAA,CAAA,eAAA,CAAA,mBAAA,CAAA,CAAA,CAAA,CASN,YAAA,cAAA,CAAA,sBAAA,CAAA,iBAAA,CAAA,qBAAA,CAOE,UACE,eAGE,cAAA,oBAAA,CAAA,CAKF,UAEE,8EAAA,8BAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAQN,WAAA,cAAA,CAAA,2BAAA,CAAA,4BAAA,CAMA,aAAA,2BAAA,CAAA,gBAAA,CAIE,MAAA,mBAAA,CAAA,CAKF,wBAAA,gBAAA,CAAA,6BAAA,CAAA,YAAA,CAME,IAAA,mBAAA,CAAA,6BAAA,CAAA,YAAA,CAKE,iBAAA,6BAAA,CAAA,YAAA,CAMA,OAAA,gBAAA,CAGE,IAAA,mBAAA,CAAA,CAKF,mCAAA,mBAAA,CAAA,CAUF,kBACE,IAAA,mBAAA,CAAA,CAKF,gBACE,IAAA,mBAAA,CAAA,CAAA,CAMJ,iCACE,KACE,gBACE,cAAA,+CAAA,CAAA,mDAAA,CAIE,eAAA,YAAA,CAAA,0BAAA,CAAA,gBAAA,CAKE,sEAAA,cAAA,CAMA,sBACE,sEAAA,cAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CCtIZ,QAAA,2BAAA,CCAA,kBACE,MAAA,4BAAA,CAAA,CCDF,wBAAA,oBAAA,CAAA,wBAAA,CCAA,OAAA,kBAAA,CAAA,mBAAA,CCAA,aACE,8DAAA,aAAA,CAKA,sBACE,8DAAA,YAAA,CAAA,CAAA","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 --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 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\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 --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\n.grid-wrapper--min {\n grid-template-columns:\n [page-start]\n minmax(var(--gutter), 1fr)\n [content-start]\n minmax(0, var(--content-max-width))\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 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 (--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\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 header {\n grid-row: header;\n\n :is(.block-system) {\n align-items: center;\n min-block-size: 100%;\n }\n\n @media (width < 1885px) {\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",".brand-item__logo {\n img {\n max-block-size: var(--height);\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}\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..b529441 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -16,6 +16,7 @@ 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_reporter from 'postcss-reporter' import stylelint from 'stylelint' @@ -44,6 +45,7 @@ function styles() { postcss_cq, postcss_imports, postcss_import, + postcss_media(), postcss_lightningcss({ browsers: 'last 2 versions, not dead', diff --git a/package.json b/package.json index 5b7b107..a298b9f 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "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", diff --git a/source/00-nucleus/root/globals/layout.css b/source/00-nucleus/root/globals/layout.css index c6080a6..c866f88 100644 --- a/source/00-nucleus/root/globals/layout.css +++ b/source/00-nucleus/root/globals/layout.css @@ -3,7 +3,7 @@ block-size: calc(100dvb - var(--toolbars-height)); min-block-size: calc(100dvb - var(--toolbars-height)); - @media screen and (width > 1023px) { + @media (--breakpoint-desktop) { block-size: calc(100dvb - var(--top-bar-height)); min-block-size: calc(100dvb - var(--top-bar-height)); } @@ -17,6 +17,12 @@ grid-column: page; } + header, + main, + footer { + grid-template-columns: subgrid; + } + header { grid-row: header; @@ -25,7 +31,7 @@ min-block-size: 100%; } - @media (width < 1700px) { + @media (width < 1885px) { grid-template-columns: auto 1fr auto; } } diff --git a/source/00-nucleus/root/grid/grid-layout.css b/source/00-nucleus/root/grid/grid-layout.css index 0924336..76a1721 100644 --- a/source/00-nucleus/root/grid/grid-layout.css +++ b/source/00-nucleus/root/grid/grid-layout.css @@ -22,21 +22,36 @@ overflow-inline: hidden; /* Content width constraints */ - --inner-max-width: 100%; + --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); + --wrapper-size: calc((var(--wrapper-max-width) - var(--narrow-max-width)) / 2); + --content-min-size: calc((var(--content-size) + var(--wrapper-size)) / 2); /* 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]; + "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]; } .grid-wrapper--min, @@ -46,6 +61,8 @@ /* Calculated sizes for responsive behavior */ --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-wrapper--min { @@ -53,11 +70,7 @@ [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)) + minmax(0, var(--content-max-width)) [content-end] minmax(var(--gutter), 1fr) [page-end]; @@ -66,10 +79,6 @@ .grid-wrapper--max { --narrow-max-width: 42.875rem; - - /* Calculated size for wrapper */ - --wrapper-size: calc((var(--wrapper-max-width) - var(--narrow-max-width)) / 2); - grid-template-columns: [page-start] minmax(var(--gutter), 1fr) 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/02-molecules/brand_item/brand-item.molecules.css b/source/02-molecules/brand_item/brand-item.molecules.css new file mode 100644 index 0000000..87ac991 --- /dev/null +++ b/source/02-molecules/brand_item/brand-item.molecules.css @@ -0,0 +1,5 @@ +.brand-item__logo { + img { + max-block-size: var(--height); + } +} diff --git a/source/02-molecules/page_navigation/page-navigation.html.twig b/source/02-molecules/page_navigation/page-navigation.html.twig index d04cb97..6ee2bad 100644 --- a/source/02-molecules/page_navigation/page-navigation.html.twig +++ b/source/02-molecules/page_navigation/page-navigation.html.twig @@ -1,3 +1,3 @@ {% block page_navigation %} - {{ 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..8496fa5 --- /dev/null +++ b/source/02-molecules/page_navigation/page-navigation.molecules.css @@ -0,0 +1,4 @@ +: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 index 3b5fc45..513af5a 100644 --- a/source/02-molecules/page_navigation/variants/page-navigation--focus.html.twig +++ b/source/02-molecules/page_navigation/variants/page-navigation--focus.html.twig @@ -1,5 +1,5 @@ {% extends "@molecules/page_navigation/page-navigation.html.twig" %} {% block page_navigation %} - {{ page.focus }} + {{ page.focus|add_class('page-navigation--focus') }} {% endblock %} diff --git a/source/03-organisms/site_footer/site-footer.html.twig b/source/03-organisms/site_footer/site-footer.html.twig index 61f7e62..afa6ac1 100644 --- a/source/03-organisms/site_footer/site-footer.html.twig +++ b/source/03-organisms/site_footer/site-footer.html.twig @@ -1,5 +1,5 @@ {% block footer %} -