feat: page structure experiments

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-]+$"
+  }
+}

apps/experiments/a0e31a7b0de22c8989df.woff2

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "be810be3a3e14c682a257d6eff341fe4.woff2";

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;
+}