From fd944be9cb927cad655c0d538359714a47841043 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Sun, 17 Nov 2024 11:53:11 +0100 Subject: [PATCH] feat: page structure experiments --- apps/experiments/.stylelintrc.json | 10 + apps/experiments/a0e31a7b0de22c8989df.woff2 | 1 + apps/experiments/ams-logo.svg | 7 + apps/experiments/amsterdam-theme.css | 38 ++ apps/experiments/purmerend-logo.svg | 168 ++++++++ apps/experiments/purmerend-theme.css | 122 ++++++ apps/experiments/render-template.mjs | 11 + apps/experiments/rijkshuisstijl-logo.svg | 14 + apps/experiments/rijkshuisstijl-theme.css | 41 ++ apps/experiments/rods-logo.svg | 1 + apps/experiments/rods-theme.css | 38 ++ apps/experiments/scaled-down.html | 409 ++++++++++++++++++++ apps/experiments/slideshow.css | 31 ++ apps/experiments/slideshow.html | 32 ++ apps/experiments/slideshow.mjs | 39 ++ apps/experiments/style.css | 185 +++++++++ apps/experiments/test.html | 381 ++++++++++++++++++ apps/experiments/theme.mjs | 30 ++ apps/experiments/utrecht-logo.svg | 105 +++++ apps/experiments/utrecht-theme.css | 39 ++ apps/experiments/utrecht.html | 357 +++++++++++++++++ components/index.css | 112 ++++++ package.json | 3 + 23 files changed, 2174 insertions(+) create mode 100644 apps/experiments/.stylelintrc.json create mode 100644 apps/experiments/a0e31a7b0de22c8989df.woff2 create mode 100644 apps/experiments/ams-logo.svg create mode 100644 apps/experiments/amsterdam-theme.css create mode 100644 apps/experiments/purmerend-logo.svg create mode 100644 apps/experiments/purmerend-theme.css create mode 100644 apps/experiments/render-template.mjs create mode 100644 apps/experiments/rijkshuisstijl-logo.svg create mode 100644 apps/experiments/rijkshuisstijl-theme.css create mode 100644 apps/experiments/rods-logo.svg create mode 100644 apps/experiments/rods-theme.css create mode 100644 apps/experiments/scaled-down.html create mode 100644 apps/experiments/slideshow.css create mode 100644 apps/experiments/slideshow.html create mode 100644 apps/experiments/slideshow.mjs create mode 100644 apps/experiments/style.css create mode 100644 apps/experiments/test.html create mode 100644 apps/experiments/theme.mjs create mode 100644 apps/experiments/utrecht-logo.svg create mode 100644 apps/experiments/utrecht-theme.css create mode 100644 apps/experiments/utrecht.html create mode 100644 components/index.css diff --git a/apps/experiments/.stylelintrc.json b/apps/experiments/.stylelintrc.json new file mode 100644 index 00000000000..726079201b2 --- /dev/null +++ b/apps/experiments/.stylelintrc.json @@ -0,0 +1,10 @@ +{ + "extends": ["../../.stylelintrc.json"], + "rules": { + "scss/dollar-variable-pattern": "^(ams|basis|example|purmerend|rhc|rijkshuisstijl|rods|utrecht)-[a-z0-9-]+$", + "scss/percent-placeholder-pattern": "^(ams|basis|example|purmerend|rhc|rijkshuisstijl|rods|utrecht)-[a-z0-9-]+$", + "custom-property-pattern": "^_?(ams|basis|example|denhaag|purmerend|rhc|rijkshuisstijl|rods|utrecht)-[a-z0-9-]+$", + "selector-class-pattern": "^(ams|basis|example|denhaag|purmerend|rhc|rijkshuisstijl|rods|utrecht)-[a-z0-9_-]+$", + "keyframes-name-pattern": "^(ams|basis|example|purmerend|rhc|rijkshuisstijl|rods|utrecht)-[a-z0-9-]+$" + } +} diff --git a/apps/experiments/a0e31a7b0de22c8989df.woff2 b/apps/experiments/a0e31a7b0de22c8989df.woff2 new file mode 100644 index 00000000000..444ce3f49c6 --- /dev/null +++ b/apps/experiments/a0e31a7b0de22c8989df.woff2 @@ -0,0 +1 @@ +export default __webpack_public_path__ + "be810be3a3e14c682a257d6eff341fe4.woff2"; \ No newline at end of file diff --git a/apps/experiments/ams-logo.svg b/apps/experiments/ams-logo.svg new file mode 100644 index 00000000000..4550095b479 --- /dev/null +++ b/apps/experiments/ams-logo.svg @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/apps/experiments/amsterdam-theme.css b/apps/experiments/amsterdam-theme.css new file mode 100644 index 00000000000..4b43e01aed4 --- /dev/null +++ b/apps/experiments/amsterdam-theme.css @@ -0,0 +1,38 @@ +.ams-theme { + --basis-page-padding: var(--ams-grid-padding-block-md); + --basis-page-max-inline-size: 1600px; + --basis-page-min-inline-size: 320px; + --utrecht-column-layout-column-width: calc(7 * var(--ams-space-grid-md)); + --utrecht-column-layout-gap: var(--ams-space-grid-md); + + /* todo */ + --utrecht-nav-bar-content-background-color: white; + --utrecht-nav-bar-content-color: white; + --utrecht-nav-bar-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-content-content-background-color: white; + --utrecht-page-content-content-color: black; + --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-content-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-background-color: var(--ams-spotlight-dark-blue-background-color); + --utrecht-page-footer-color: white; + --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-footer-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-content-padding-block-start: var(--ams-grid-padding-block-md); + --utrecht-page-footer-content-padding-block-end: var(--ams-grid-padding-block-md); + --utrecht-page-header-content-background-color: white; + --utrecht-page-header-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-header-content-padding-inline: var(--basis-page-padding); + --utrecht-page-header-content-padding-block-start: 1em; + --utrecht-page-header-content-padding-block-end: 1em; + --utrecht-root-background-color: var(--utrecht-color-grey-95, hsl(0 0% 95%)); + --utrecht-root-color: var(--utrecht-color-grey-10); + --utrecht-page-header-padding-inline: var(--basis-page-padding); + --utrecht-page-nav-bar-padding-inline: var(--basis-page-padding); + --utrecht-page-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-padding-inline: 0; + --utrecht-root-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif; + --utrecht-logo-min-block-size: 58.97px; + --utrecht-logo-min-inline-size: 110.57px; + --utrecht-logo-max-block-size: 103px; + --utrecht-logo-max-inline-size: 192px; +} diff --git a/apps/experiments/purmerend-logo.svg b/apps/experiments/purmerend-logo.svg new file mode 100644 index 00000000000..f1d19b60327 --- /dev/null +++ b/apps/experiments/purmerend-logo.svg @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/experiments/purmerend-theme.css b/apps/experiments/purmerend-theme.css new file mode 100644 index 00000000000..ca530556ee3 --- /dev/null +++ b/apps/experiments/purmerend-theme.css @@ -0,0 +1,122 @@ +.purmerend-theme { + --basis-page-max-inline-size: 1140px; + --utrecht-nav-bar-content-background-color: white; + --utrecht-nav-bar-content-color: rgb(0 54 95); + --utrecht-nav-bar-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-content-content-background-color: white; + --utrecht-page-content-content-color: rgb(0 54 95); + --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-content-content-padding-inline: 1em; + --utrecht-page-content-padding-inline: 1em; + --utrecht-page-footer-background-color: rgb(0 54 95); + --utrecht-page-footer-color: white; + --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-footer-content-padding-block-end: 1em; + --utrecht-page-footer-content-padding-block-start: 1em; + --utrecht-page-footer-content-padding-inline: 1em; + --utrecht-page-footer-padding-inline: 0; + --utrecht-page-header-content-background-color: white; + --utrecht-page-header-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-header-content-padding-block-end: 1em; + --utrecht-page-header-content-padding-block-start: 1em; + --utrecht-page-header-content-padding-inline: 1em; + --utrecht-page-header-padding-inline: 1em; + --utrecht-page-nav-bar-padding-inline: 1em; + --utrecht-root-background-color: white; + --utrecht-root-color: rgb(0 54 95); + --utrecht-page-header-border-block-end-width: 1px; + --utrecht-page-header-border-block-end-color: #c9c9c9; + --utrecht-root-font-family: "Cantarell", "Open Sans", sans-serif; + --utrecht-logo-min-block-size: 70px; + --utrecht-logo-min-inline-size: 150px; + --utrecht-logo-max-block-size: 70px; + --utrecht-logo-max-inline-size: 150px; +} + +/* latin-ext */ +@font-face { + font-display: swap; + font-family: "Cantarell"; + font-style: italic; + font-weight: 400; + src: url("https://fonts.gstatic.com/s/cantarell/v17/B50LF7ZDq37KMUvlO015iZJnNKuwL4YeuHg.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, + U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-display: swap; + font-family: "Cantarell"; + font-style: italic; + font-weight: 400; + src: url("https://fonts.gstatic.com/s/cantarell/v17/B50LF7ZDq37KMUvlO015iZJpNKuwL4Ye.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, + U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin-ext */ +@font-face { + font-display: swap; + font-family: "Cantarell"; + font-style: italic; + font-weight: 700; + src: url("https://fonts.gstatic.com/s/cantarell/v17/B50WF7ZDq37KMUvlO015iZrSEb6TDYs0gnHAA4E.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, + U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-display: swap; + font-family: "Cantarell"; + font-style: italic; + font-weight: 700; + src: url("https://fonts.gstatic.com/s/cantarell/v17/B50WF7ZDq37KMUvlO015iZrSEb6dDYs0gnHA.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, + U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin-ext */ +@font-face { + font-display: swap; + font-family: "Cantarell"; + font-style: normal; + font-weight: 400; + src: url("https://fonts.gstatic.com/s/cantarell/v17/B50NF7ZDq37KMUvlO015gqJrPqySLbYf.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, + U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-display: swap; + font-family: "Cantarell"; + font-style: normal; + font-weight: 400; + src: url("https://fonts.gstatic.com/s/cantarell/v17/B50NF7ZDq37KMUvlO015jKJrPqySLQ.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, + U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin-ext */ +@font-face { + font-display: swap; + font-family: "Cantarell"; + font-style: normal; + font-weight: 700; + src: url("https://fonts.gstatic.com/s/cantarell/v17/B50IF7ZDq37KMUvlO01xN4d-HY6fB4wWgEHB.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, + U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-display: swap; + font-family: "Cantarell"; + font-style: normal; + font-weight: 700; + src: url("https://fonts.gstatic.com/s/cantarell/v17/B50IF7ZDq37KMUvlO01xN4d-E46fB4wWgA.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, + U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/apps/experiments/render-template.mjs b/apps/experiments/render-template.mjs new file mode 100644 index 00000000000..a061d62f3b1 --- /dev/null +++ b/apps/experiments/render-template.mjs @@ -0,0 +1,11 @@ +customElements.define( + 'render-template', + class RenderTemplateElement extends HTMLElement { + connectedCallback() { + const ref = this.getAttribute('ref'); + const template = this.ownerDocument.getElementById(ref); + const clone = template.content.cloneNode(true); + this.appendChild(clone); + } + }, +); diff --git a/apps/experiments/rijkshuisstijl-logo.svg b/apps/experiments/rijkshuisstijl-logo.svg new file mode 100644 index 00000000000..3f17d3eca70 --- /dev/null +++ b/apps/experiments/rijkshuisstijl-logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + \ No newline at end of file diff --git a/apps/experiments/rijkshuisstijl-theme.css b/apps/experiments/rijkshuisstijl-theme.css new file mode 100644 index 00000000000..2497c0af281 --- /dev/null +++ b/apps/experiments/rijkshuisstijl-theme.css @@ -0,0 +1,41 @@ +.rijkshuisstijl-theme { + --basis-page-padding: 16px; + --basis-page-max-inline-size: 1200px; + --utrecht-nav-bar-background-color: #01689b; + --utrecht-root-color: white; + --utrecht-nav-bar-content-max-inline-size: var(--basis-page-max-inline-size); + + /* todo */ + --utrecht-nav-bar-content-color: white; + --utrecht-page-content-content-background-color: white; + --utrecht-page-content-content-color: black; + --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-content-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-background-color: #01689b; + --utrecht-page-footer-color: white; + --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-footer-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-content-padding-block-start: 1em; + --utrecht-page-footer-content-padding-block-end: 1em; + --utrecht-page-header-content-background-color: white; + --utrecht-page-header-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-header-content-padding-inline: var(--basis-page-padding); + --utrecht-page-header-content-padding-block-start: 1em; + --utrecht-page-header-content-padding-block-end: 1em; + --utrecht-root-background-color: var(--utrecht-color-grey-95, hsl(0 0% 95%)); + --utrecht-page-header-padding-inline: var(--basis-page-padding); + --utrecht-page-nav-bar-padding-inline: var(--basis-page-padding); + --utrecht-page-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-padding-inline: 0; + --utrecht-root-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif; + --utrecht-logo-min-block-size: 58.97px; + --utrecht-logo-min-inline-size: 110.57px; + --utrecht-logo-max-block-size: 103px; + --utrecht-logo-max-inline-size: 192px; +} + +@media screen and (width <= 480px) { + :root { + --utrecht-body-padding-inline: 0; + } +} diff --git a/apps/experiments/rods-logo.svg b/apps/experiments/rods-logo.svg new file mode 100644 index 00000000000..45025530e90 --- /dev/null +++ b/apps/experiments/rods-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/experiments/rods-theme.css b/apps/experiments/rods-theme.css new file mode 100644 index 00000000000..6f8a6450c73 --- /dev/null +++ b/apps/experiments/rods-theme.css @@ -0,0 +1,38 @@ +.rods-theme { + --basis-page-padding: 32px; + --basis-page-max-inline-size: 1600px; + --basis-page-min-inline-size: 320px; + --utrecht-logo-min-block-size: 44px; + --utrecht-logo-min-inline-size: 222px; + --utrecht-logo-max-block-size: 44px; + --utrecht-logo-max-inline-size: 222px; + --utrecht-page-header-border-block-end-width: 1px; + --utrecht-page-header-border-block-end-color: #cad6da; + --utrecht-nav-bar-background-color: white; + --utrecht-nav-bar-color: black; + --utrecht-nav-bar-content-max-inline-size: var(--basis-page-max-inline-size); + + /* todo */ + --utrecht-page-content-content-background-color: white; + --utrecht-page-content-content-color: black; + --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-content-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-background-color: #00811f; + --utrecht-page-footer-color: white; + --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-footer-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-content-padding-block-start: var(--basis-page-padding); + --utrecht-page-footer-content-padding-block-end: var(--basis-page-padding); + --utrecht-page-header-content-background-color: white; + --utrecht-page-header-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-header-content-padding-inline: var(--basis-page-padding); + --utrecht-page-header-content-padding-block-start: 1em; + --utrecht-page-header-content-padding-block-end: 1em; + --utrecht-root-background-color: var(--utrecht-color-grey-95, hsl(0 0% 95%)); + --utrecht-root-color: var(--utrecht-color-grey-10); + --utrecht-page-header-padding-inline: var(--basis-page-padding); + --utrecht-page-nav-bar-padding-inline: var(--basis-page-padding); + --utrecht-page-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-padding-inline: 0; + --utrecht-root-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif; +} diff --git a/apps/experiments/scaled-down.html b/apps/experiments/scaled-down.html new file mode 100644 index 00000000000..af7e4b901d7 --- /dev/null +++ b/apps/experiments/scaled-down.html @@ -0,0 +1,409 @@ + + + + + + + + + + + + + + + + + + + +

Voorbeelden

+

Interactief

+
+
+ +
+
+

Utrecht

+
+ +
+

Purmerend

+
+ +
+

Rotterdam

+ +

Rijkshuisstijl

+ +

Amsterdam

+ + + + + diff --git a/apps/experiments/slideshow.css b/apps/experiments/slideshow.css new file mode 100644 index 00000000000..89babdba2c0 --- /dev/null +++ b/apps/experiments/slideshow.css @@ -0,0 +1,31 @@ +.example-image-slides { + block-size: 100%; + box-sizing: border-box; + inline-size: 100%; + position: relative; +} + +.example-image-slides__slide { + block-size: 100%; + inline-size: 100%; + inset-block-start: 0; + inset-inline-start: 0; + opacity: 0%; + position: absolute; + transition: 500ms ease-in-out opacity; +} + +@media (prefers-reduced-motion: reduce) { + .example-image-slides__slide { + transition-duration: 0ms; + } +} + +.example-image-slides__slide--visible { + opacity: 100%; +} + +.example-image-slides__slide > * { + block-size: 100%; + inline-size: 100%; +} diff --git a/apps/experiments/slideshow.html b/apps/experiments/slideshow.html new file mode 100644 index 00000000000..b468793f6a4 --- /dev/null +++ b/apps/experiments/slideshow.html @@ -0,0 +1,32 @@ + + + + + Slideshow + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+

+ + +

+ + + diff --git a/apps/experiments/slideshow.mjs b/apps/experiments/slideshow.mjs new file mode 100644 index 00000000000..4bb4dd62973 --- /dev/null +++ b/apps/experiments/slideshow.mjs @@ -0,0 +1,39 @@ +const navigate = (offset) => { + const slides = document.querySelector('.image-slides'); + + if (!slides) { + return; + } + const slideList = Array.from(slides.childNodes).filter( + (el) => el.nodeType === 1 && el.classList.contains('image-slides__slide'), + ); + + const index = slideList.findIndex((el) => el.nodeType === 1 && el.classList.contains('image-slides__slide--visible')); + console.log(slideList); + if (index !== -1) { + const currentSlide = slideList[index]; + let targetOffset = index + offset; + + targetOffset = targetOffset < 0 ? slideList.length - 1 : targetOffset >= slideList.length ? 0 : targetOffset; + + const targetSlide = slideList[targetOffset]; + + if (targetSlide) { + currentSlide.classList.remove('image-slides__slide--visible'); + + if (targetSlide) { + targetSlide.classList.add('image-slides__slide--visible'); + } + } + } +}; +const next = () => { + navigate(1); +}; + +const prev = () => { + navigate(-1); +}; + +window.next = next; +window.prev = prev; diff --git a/apps/experiments/style.css b/apps/experiments/style.css new file mode 100644 index 00000000000..ee68fa0c735 --- /dev/null +++ b/apps/experiments/style.css @@ -0,0 +1,185 @@ +* { + transition: 400ms ease-in-out all; +} + +@media (prefers-reduced-motion: reduce) { + * { + transition-duration: 0ms; + } +} + +.utrecht-body { + align-items: flex-start; + block-size: 100%; + margin-block-end: 0; + margin-block-start: 0; + + /* reset `` styles for `margin` and `padding` */ + + /* display: flex; */ + + /* flex-direction: column; + justify-content: flex-start; */ + margin-inline-end: 0; + margin-inline-start: 0; + min-block-size: 100vb; + padding-block: 0; +} + +.utrecht-page-layout { + align-items: flex-start; + block-size: 100%; + display: flex; + flex-direction: column; + inline-size: 100%; + justify-content: flex-start; +} + +*[hidden] { + display: none !important; +} + +.utrecht-page-header { + background-color: var(--utrecht-page-header-background-color); + border-block-end-color: var(--utrecht-page-header-border-block-end-color, currentColor); + border-block-end-style: solid; + border-block-end-width: var(--utrecht-page-header-border-block-end-width, 0); + box-sizing: border-box; + color: var(--utrecht-page-header-color); + display: flex; + inline-size: 100%; + justify-content: center; +} + +.utrecht-page-header__content { + background-color: var(--utrecht-page-header-content-background-color); + box-sizing: border-box; + color: var(--utrecht-page-header-content-color); + inline-size: 100%; + max-inline-size: var(--utrecht-page-header-content-max-inline-size); + padding-block-end: var(--utrecht-page-header-content-padding-block-end); + padding-block-start: var(--utrecht-page-header-content-padding-block-start); + padding-inline: var(--utrecht-page-header-content-padding-inline); +} + +.utrecht-nav-bar { + background-color: var(--utrecht-nav-bar-background-color); + box-sizing: border-box; + color: var(--utrecht-nav-bar-color); + display: flex; + inline-size: 100%; + justify-content: center; + min-block-size: 44px; +} + +.utrecht-nav-bar__content { + background-color: var(--utrecht-nav-bar-content-background-color); + box-sizing: border-box; + color: var(--utrecht-nav-bar-content-color); + inline-size: 100%; + max-inline-size: var(--utrecht-nav-bar-content-max-inline-size); +} + +.utrecht-page-content { + background-color: var(--utrecht-page-content-background-color); + box-sizing: border-box; + color: var(--utrecht-page-content-color); + display: flex; + flex-grow: 1; + inline-size: 100%; + justify-content: center; +} + +.utrecht-page-content__content { + background-color: var(--utrecht-page-content-content-background-color); + box-sizing: border-box; + color: var(--utrecht-page-content-content-color); + inline-size: 100%; + max-inline-size: var(--utrecht-page-content-content-max-inline-size); + padding-inline: var(--utrecht-page-content-content-padding-inline); +} + +.utrecht-page-footer { + background-color: var(--utrecht-page-footer-background-color); + box-sizing: border-box; + color: var(--utrecht-page-footer-color); + display: flex; + inline-size: 100%; + justify-content: center; +} + +.utrecht-page-footer__content { + background-color: var(--utrecht-page-footer-content-background-color); + box-sizing: border-box; + color: var(--utrecht-page-footer-content-color); + inline-size: 100%; + max-inline-size: var(--utrecht-page-footer-content-max-inline-size); + padding-block-end: var(--utrecht-page-footer-content-padding-block-end); + padding-block-start: var(--utrecht-page-footer-content-padding-block-start); + padding-inline: var(--utrecht-page-footer-content-padding-inline); +} + +.utrecht-text-content { + /* TODO: calculate based on font-family and font-size */ + max-inline-size: 60em; +} + +/* +.utrecht-fade > * { + position: absolute; + inset-inline-start: 0; + inset-block-start: 0; +} */ + +.example-optional-logo { + display: none; +} + +.utrecht-logo { + block-size: 100%; +} + +.utrecht-theme .utrecht-logo-image, +.purmerend-theme .purmerend-logo-image, +.ams-theme .ams-logo-image, +.rods-theme .rods-logo-image, +.rijkshuisstijl-theme .rijkshuisstijl-logo-image { + opacity: 100%; +} + +.rijkshuisstijl-theme .utrecht-logo { + margin-inline-end: auto; + margin-inline-start: auto; +} + +.purmerend-theme .utrecht-logo { + margin-inline-end: 0; + margin-inline-start: auto; +} + +.example-small-root { + --example-inline-size: 1280px; + --example-block-size: 1024px; + --example-scale: 0.5; + + block-size: calc(var(--example-scale, 1) * var(--example-block-size)); + inline-size: calc(var(--example-scale, 1) * var(--example-inline-size)); + max-block-size: calc(var(--example-scale, 1) * var(--example-block-size)); + max-inline-size: calc(var(--example-scale, 1) * var(--example-inline-size)); + outline: 5px solid red; +} + +.example-small-root__contents { + block-size: var(--example-block-size); + inline-size: var(--example-inline-size); + max-block-size: var(--example-block-size); + max-inline-size: var(--example-inline-size); + scale: var(--example-scale); + translate: calc(-0.5 * var(--example-scale, 1) * var(--example-inline-size)) + calc(-0.5 * var(--example-scale, 1) * var(--example-block-size)); +} + +.example-docs-page { + margin-inline: auto; + max-inline-size: 40em; +} diff --git a/apps/experiments/test.html b/apps/experiments/test.html new file mode 100644 index 00000000000..ff447f1a976 --- /dev/null +++ b/apps/experiments/test.html @@ -0,0 +1,381 @@ + + + + + + + + + + + + + +
+
+ +
+
+
nav bar
+
+
+
+
+
+

Wij doen mee met NL Design System

+

+ Met een actieve community van specialisten verzamelt het kernteam de beste richtlijnen, componenten en + voorbeelden om robuuste websites en webapplicaties voor de digitale overheid te bouwen. +

+

+ NL Design System helpt om toegankelijk, inclusief en gebruiksvriendelijk ontwikkelen makkelijk te maken. +

+ +
    +
  • Gebouwd en gebruikt door de community (voor en door de overheid).
  • +
  • Platformonafhankelijk en voor iedere huisstijl.
  • +
  • Uitbreidbaar en publiek beschikbaar.
  • +
  • Lees de NL Design System introductie
  • +
+
+ Lorem ipsum in al zijn glorie +
+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo + fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt + est optio. Ut cumque numquam mollitia quia ullam alias. +

+
+
+
+
+
+
+
+ + + diff --git a/apps/experiments/theme.mjs b/apps/experiments/theme.mjs new file mode 100644 index 00000000000..010dfca5761 --- /dev/null +++ b/apps/experiments/theme.mjs @@ -0,0 +1,30 @@ +import './render-template.mjs'; + +const setTheme = (theme, target) => { + const root = target.closest('.theme-container'); + Array.from(root.classList) + .filter((className) => /-theme$/.test(className)) + .forEach((className) => { + root.classList.remove(className); + }); + + root.classList.add(theme); +}; + +const theme = location.search.replace(/^\?theme=(.+)/, '$1'); +if (theme) { + setTheme(theme); +} + +window.setTheme = setTheme; + +document.body.addEventListener('keypress', (evt) => { + if (evt.altKey && /^Digit\d$/.test(evt.code)) { + const number = parseInt(evt.code.replace(/[^\d]+/g, ''), 10); + const buttons = document.querySelectorAll('button[rel="theme"]'); + const targetButton = buttons[number - 1]; + if (targetButton) { + targetButton.click(); + } + } +}); diff --git a/apps/experiments/utrecht-logo.svg b/apps/experiments/utrecht-logo.svg new file mode 100644 index 00000000000..4ce6fd6c16f --- /dev/null +++ b/apps/experiments/utrecht-logo.svg @@ -0,0 +1,105 @@ + \ No newline at end of file diff --git a/apps/experiments/utrecht-theme.css b/apps/experiments/utrecht-theme.css new file mode 100644 index 00000000000..d342c11929a --- /dev/null +++ b/apps/experiments/utrecht-theme.css @@ -0,0 +1,39 @@ +.utrecht-theme { + --basis-page-padding: 1em; + --basis-page-max-inline-size: 1184px; + --utrecht-nav-bar-content-background-color: black; + --utrecht-nav-bar-content-color: white; + --utrecht-nav-bar-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-content-content-background-color: white; + --utrecht-page-content-content-color: black; + --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-content-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-background-color: hsl(0 100% 40%); + --utrecht-page-footer-color: white; + --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-footer-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-content-padding-block-start: 1em; + --utrecht-page-footer-content-padding-block-end: 1em; + --utrecht-page-header-content-background-color: white; + --utrecht-page-header-content-max-inline-size: var(--basis-page-max-inline-size); + --utrecht-page-header-content-padding-inline: var(--basis-page-padding); + --utrecht-page-header-content-padding-block-start: 1em; + --utrecht-page-header-content-padding-block-end: 1em; + --utrecht-root-background-color: var(--utrecht-color-grey-95, hsl(0 0% 95%)); + --utrecht-root-color: var(--utrecht-color-grey-10); + --utrecht-page-header-padding-inline: var(--basis-page-padding); + --utrecht-page-nav-bar-padding-inline: var(--basis-page-padding); + --utrecht-page-content-padding-inline: var(--basis-page-padding); + --utrecht-page-footer-padding-inline: 0; + --utrecht-root-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif; + --utrecht-logo-min-block-size: 58.97px; + --utrecht-logo-min-inline-size: 110.57px; + --utrecht-logo-max-block-size: 103px; + --utrecht-logo-max-inline-size: 192px; +} + +@media screen and (width <= 480px) { + :root { + --utrecht-body-padding-inline: 0; + } +} diff --git a/apps/experiments/utrecht.html b/apps/experiments/utrecht.html new file mode 100644 index 00000000000..20d0a265fb8 --- /dev/null +++ b/apps/experiments/utrecht.html @@ -0,0 +1,357 @@ + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+
+
nav bar
+
+
+
+
+
+

Wij doen mee met NL Design System

+

+ Met een actieve community van specialisten verzamelen we de beste richtlijnen, componenten en + voorbeelden om robuuste websites en webapplicaties voor de digitale overheid te bouwen. +

+

+ NL Design System helpt om toegankelijk, inclusief en gebruiksvriendelijk ontwikkelen makkelijk te maken. +

+ +
    +
  • Gebouwd en gebruikt door de community (voor en door de overheid).
  • +
  • Platformonafhankelijk en voor iedere huisstijl.
  • +
  • Uitbreidbaar en publiek beschikbaar.
  • +
  • Lees de NL Design System introductie
  • +
+
+ Lorem ipsum in al zijn glorie + +
+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+

+ Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut + doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci + quisquam dolor et. +

+

+ Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati + quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non + quae. Exercitationem et voluptas excepturi odit sed ut ratione. +

+

+ Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at + harum alias hic voluptatibus laborum ratione. +

+

+ Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure + rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias. +

+

+ Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt + explicabo fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit + nesciunt est optio. Ut cumque numquam mollitia quia ullam alias. +

+
+
+
+
+
+
+ +
+ + + diff --git a/components/index.css b/components/index.css new file mode 100644 index 00000000000..3dd03774199 --- /dev/null +++ b/components/index.css @@ -0,0 +1,112 @@ +/** + * @license EUPL-1.2 + * Copyright (c) 2021 Gemeente Utrecht + */ + +/* Collection of all BEM class names in the component library */ + +/* + * TODO: Once every component is a separate npm package, these imports should + * be updated to use a package reference instead of a relative path. + * + * For example: + * @import url("../../blockquote/index"); + * + * Will become: + * @import url("@utrecht/blockquote/index"); + */ + +@import "./accordion/dist/index.css"; +@import "./alert-dialog/dist/index.css"; +@import "./alert/dist/index.css"; +@import "./alternate-lang-nav/dist/index.css"; +@import "./article/dist/index.css"; +@import "./backdrop/dist/index.css"; +@import "./badge-counter/dist/index.css"; +@import "./badge-data/dist/index.css"; +@import "./badge-list/dist/index.css"; +@import "./badge-status/dist/index.css"; +@import "./blockquote/dist/index.css"; +@import "./breadcrumb-nav/dist/index.css"; +@import "./button-group/dist/index.css"; +@import "./button-link/dist/index.css"; +@import "./button/dist/index.css"; +@import "./calendar/dist/index.css"; +@import "./checkbox/dist/index.css"; +@import "./code-block/dist/index.css"; +@import "./code/dist/index.css"; +@import "./color-sample/dist/index.css"; +@import "./column-layout/dist/index.css"; +@import "./combobox/dist/index.css"; +@import "./currency-data/dist/index.css"; +@import "./custom-checkbox/dist/index.css"; +@import "./data-list/dist/index.css"; +@import "./data-placeholder/dist/index.css"; +@import "./digid-button/dist/index.css"; +@import "./document/dist/index.css"; +@import "./drawer/dist/index.css"; +@import "./emphasis/dist/index.css"; +@import "./figure/dist/index.css"; +@import "./form-field-description/dist/index.css"; +@import "./form-field-error-message/dist/index.css"; +@import "./form-field/dist/index.css"; +@import "./form-fieldset/dist/index.css"; +@import "./form-label/dist/index.css"; +@import "./form-toggle/dist/index.css"; +@import "./form/dist/index.css"; +@import "./heading-1/dist/index.css"; +@import "./heading-2/dist/index.css"; +@import "./heading-3/dist/index.css"; +@import "./heading-4/dist/index.css"; +@import "./heading-5/dist/index.css"; +@import "./heading-6/dist/index.css"; +@import "./heading-group/dist/index.css"; +@import "./iban-data/dist/index.css"; +@import "./icon/dist/index.css"; +@import "./img/dist/index.css"; +@import "./index-char-nav/dist/index.css"; +@import "./link-button/dist/index.css"; +@import "./link-list/dist/index.css"; +@import "./link-social/dist/index.css"; +@import "./link/dist/index.css"; +@import "./list-social/dist/index.css"; +@import "./listbox/dist/index.css"; +@import "./logo-button/dist/index.css"; +@import "./logo-image/dist/index.css"; +@import "./logo/dist/index.css"; +@import "./map-marker/dist/index.css"; +@import "./mapcontrolbutton/dist/index.css"; +@import "./mark/dist/index.css"; +@import "./menulijst/dist/index.css"; +@import "./multiline-data/dist/index.css"; +@import "./nav-bar/dist/index.css"; +@import "./nav-list/dist/index.css"; +@import "./navigatie sidenav/dist/index.css"; +@import "./navigatie topnav/dist/index.css"; +@import "./number-badge/dist/index.css"; +@import "./number-data/dist/index.css"; +@import "./ordered-list/dist/index.css"; +@import "./page-content/dist/index.css"; +@import "./page-footer/dist/index.css"; +@import "./page-header/dist/index.css"; +@import "./page/dist/index.css"; +@import "./pagination/dist/index.css"; +@import "./paragraph/dist/index.css"; +@import "./pre-heading/dist/index.css"; +@import "./preserve-data/dist/index.css"; +@import "./radio-button/dist/index.css"; +@import "./rich-text/dist/index.css"; +@import "./search-bar/dist/index.css"; +@import "./select/dist/index.css"; +@import "./separator/dist/index.css"; +@import "./skip-link/dist/index.css"; +@import "./spotlight-section/dist/index.css"; +@import "./surface/dist/index.css"; +@import "./table/dist/index.css"; +@import "./table-of-contents/dist/index.css"; +@import "./textarea/dist/index.css"; +@import "./textbox/dist/index.css"; +@import "./toptask-link/dist/index.css"; +@import "./toptask-nav/dist/index.css"; +@import "./unordered-list/dist/index.css"; +@import "./url-data/dist/index.css"; diff --git a/package.json b/package.json index eb8a6471cef..8de008892f0 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@nrwl/workspace": "15.9.7", "@typescript-eslint/eslint-plugin": "5.62.0", "@typescript-eslint/parser": "5.62.0", + "@utrecht/design-system": "link:", "eslint": "8.57.0", "eslint-config-prettier": "8.10.0", "eslint-plugin-import": "2.29.1", @@ -46,6 +47,7 @@ "eslint-plugin-vue": "9.26.0", "glob": "10.4.2", "html-validate": "8.20.1", + "http-server": "14.1.1", "husky": "9.0.11", "lint-staged": "15.2.7", "markdownlint-cli": "0.41.0", @@ -63,6 +65,7 @@ "scripts": { "add-repository-directory": "node ./add-repository-directory.mjs", "build": "pnpm run nx-build --skip-nx-cache", + "build:css": "pnpm run --dir components/ --filter '@utrecht/*-css' build", "nx-build": "nx run-many --target=build --all --parallel", "clean": "pnpm run --recursive clean", "docs": "pnpm run --workspace packages/docusaurus start",