.gitea/workflows/deploy.yml

@@ -24,7 +24,7 @@ on:
       - .gitea/workflows/deploy.yml
 
 env:
-  PORTAL_RELEASE: v0.5.2
+  PORTAL_RELEASE: v0.6.2
   INSTANCE: klingenberg-portal
 
 jobs:

.gitea/workflows/lint-and-reload.yml

@@ -9,11 +9,13 @@ jobs:
       - name: checkout
         run: |
           rm -rf checkout && git clone --depth 1 https://prosjekt.klingenbergbygg.no/klingenbergbygg/questions.git checkout
+      # The lint is portal itself (`portal lint`), at the version this
+      # site runs (PORTAL_RELEASE in deploy.yml).
       - name: lint
         env:
-          IRIS_RELEASE: v0.5.2
+          PORTAL_RELEASE: v0.6.2
         run: |
-          curl -sfL "https://project.uhhm.no/uhhm/iris/releases/download/$IRIS_RELEASE/iris" -o iris && chmod +x iris
-          ./iris check --path checkout/questions
+          curl -sfL "https://project.uhhm.no/uhhm/portal/releases/download/$PORTAL_RELEASE/portal-x86_64-linux" -o portal && chmod +x portal
+          ./portal lint --path checkout/questions
       - name: reload
         run: nats --server nats://127.0.0.1:4222 pub portal.content.reload ""

custom.css

@@ -1,8 +1,11 @@
-/* Klingenberg Bygg — brand skin over the default portal stylesheet.
-   Loaded after portal's main.css (site.yaml `stylesheet`), so these
-   rules win. The whole recolor rides portal's own CSS custom
-   properties, so chrome stays consistent; fonts and a few section
-   treatments do the rest. */
+/* Klingenberg Bygg - the skin over portal's own stylesheet
+   (site.yaml `stylesheet`, loaded after main.css, so these rules win).
+
+   One idea: a builder's drawing. Warm paper, near-black ink, the
+   logo's brick red as the only colour, heavy Futura for what is
+   asked and Garamond for what is said. Everything sits on one left
+   edge, from the wordmark down. Both colour schemes are drawn; the
+   page follows the reader's. */
 
 @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
 
@@ -19,109 +22,232 @@
   src: url("/site/fonts/futura-medium.ttf") format("truetype");
 }
 
+/* ---- colour: light, then dark ---------------------------------- */
+
 :root {
-  /* Brick red — the logo tile's own colour. */
+  --brick: #8a1e12;
   --accent: #8a1e12;
   --accent-soft: rgba(138, 30, 18, 0.12);
   --paper: #f6f5f3;
   --ink: #201a18;
-  --ink-dim: #6b615c;
-  --line: #ddd6d0;
-  --card-bg: rgba(255, 255, 255, 0.55);
-  --card-bg-opaque: rgba(255, 255, 255, 0.9);
-  --card-shadow: rgba(60, 30, 20, 0.14);
+  --ink-dim: #635953;
+  --line: #d8d0c9;
+  --card-bg: #ffffff;
+  --card-bg-opaque: #ffffff;
+  --card-shadow: rgba(60, 30, 20, 0.10);
+  --field: #fbfaf8;
   --hero-glow: rgba(246, 245, 243, 0.85);
-  --heading: "FuturaNow", var(--sans);
+  --error: #a8261a;
+  --heading: "FuturaNow", "Futura", "Century Gothic", sans-serif;
   --sans: "EB Garamond", Georgia, "Times New Roman", serif;
+  --radius: 0.5rem;
+  --measure: 46rem;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Brick does not carry as text on a dark ground; terracotta does.
+       The brick itself stays for what is filled: buttons, the rule. */
+    --accent: #e2a08f;
+    --accent-soft: rgba(226, 160, 143, 0.16);
+    --paper: #171412;
+    --ink: #f1ece6;
+    --ink-dim: #b9aea4;
+    --line: #3a322c;
+    --card-bg: #211c19;
+    --card-bg-opaque: #211c19;
+    --card-shadow: rgba(0, 0, 0, 0.45);
+    --field: #171412;
+    --hero-glow: rgba(23, 20, 18, 0.85);
+    --error: #ff8f80;
+    color-scheme: dark;
+  }
+}
+
+/* ---- type ------------------------------------------------------- */
+
+body {
+  font-family: var(--sans);
+  font-size: 1.08rem;
+  line-height: 1.5;
 }
 
-/* Display headings in heavy Futura, tightened. */
 h1, h2, h3 {
   font-family: var(--heading);
-  letter-spacing: -0.01em;
+  font-weight: 800;
+  letter-spacing: -0.012em;
+  line-height: 1.1;
 }
-.hero-copy h1 { font-size: 2.6rem; }
 
-/* Hero stack, left-aligned: wordmark, then the tagline description,
-   then the big question - the description reordered to sit between
-   them. */
-.hero {
-  align-items: flex-start;
+/* ---- the top: wordmark bar, pictures, question ------------------ */
+
+.hero,
+.hero-slides {
+  align-items: stretch;
   text-align: left;
 }
+
+/* The bar and the copy share the page's one left edge. */
+.hero-bar,
+.hero-slides .hero-copy,
+.hero:not(.hero-slides) {
+  width: 100%;
+  max-width: var(--measure);
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+
+.hero-bar {
+  padding: 1rem 1.5rem;
+}
+
+.wordmark {
+  opacity: 1;
+}
+
+/* Who is here sits on the bar's line, at the page's right edge. */
+.session {
+  top: 1.75rem;
+  right: max(1.5rem, calc((100vw - var(--measure)) / 2 + 1.5rem));
+  font-family: var(--heading);
+  font-weight: 500;
+  font-size: 0.85rem;
+}
+
+.slideshow {
+  --swiper-navigation-size: 1.6rem;
+  background: var(--line);
+}
+
+.slide figcaption {
+  font-size: 1rem;
+  font-style: italic;
+  padding: 2.6rem 1.1rem 0.9rem;
+}
+
 .hero-copy {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   text-align: left;
-  gap: 0.55rem;
+  gap: 0.5rem;
 }
-.hero-copy .wordmark { order: 0; margin-bottom: 0.35rem; }
-.hero-copy p { order: 1; margin: 0; }
-.hero-copy h1 { order: 2; margin: 0.1rem 0 0; }
 
-/* Body reads as Garamond serif. */
-body { font-family: var(--sans); font-size: 1.06rem; }
-
-/* The section rhythm of the original: the service cards alternate a
-   dark, a plain, and a brick panel down the page. Text and controls
-   invert on the dark and brick ones. */
-.alt-card:nth-of-type(3n+1) {
-  --card-bg: #1a1613;
-  --card-bg-opaque: #1a1613;
-  --ink: #f3efe9;
-  --ink-dim: #cfc4b8;
-  --line: #3a322c;
-  /* Light terracotta so links, icons and encouragements read on the
-     near-black panel (brick was invisible there). */
-  --accent: #e2a99b;
-  color: #f3efe9;
+/* What we do, then what we ask: the tagline leads the question. */
+.hero-copy p {
+  order: 1;
+  margin: 0;
+  max-width: 34rem;
+  font-size: 1.15rem;
+  color: var(--ink-dim);
 }
-.alt-card:nth-of-type(3n) {
-  --card-bg: #8a1e12;
-  --card-bg-opaque: #8a1e12;
-  --ink: #fdf3ef;
-  --ink-dim: #f4dbd4;
-  --line: #b2493d;
-  --accent: #fdf3ef;
+
+.hero-copy p strong {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.hero-copy h1 {
+  order: 2;
+  margin: 0.15rem 0 0;
+  font-size: clamp(2rem, 1.2rem + 3.2vw, 3rem);
+}
+
+/* ---- the cards -------------------------------------------------- */
+
+.alternatives {
+  max-width: var(--measure);
+  gap: 1.5rem;
+}
+
+/* A sheet on the drawing board: flat, ruled in brick along its top. */
+.alt-card {
+  background: var(--card-bg);
+  border: 0.06rem solid var(--line);
+  border-top: 0.3rem solid var(--brick);
+  border-radius: var(--radius);
+  box-shadow: 0 0.5rem 1.4rem var(--card-shadow);
+  padding: 1.7rem 1.8rem 1.8rem;
+  backdrop-filter: none;
+}
+
+.alt-card h2 {
+  font-size: 1.45rem;
+  margin: 0 0 0.35rem;
+}
+
+.alt-description {
+  font-size: 1.08rem;
+}
+
+.feature h3,
+.feature-name {
+  font-family: var(--heading);
+  font-weight: 500;
+}
+
+.feature p a,
+.alt-description a,
+.hero-copy p a {
+  border-bottom-color: var(--accent);
+}
+
+.alt-encouragement {
+  color: var(--ink-dim);
+}
+
+/* ---- forms ------------------------------------------------------ */
+
+.field-label {
+  font-family: var(--heading);
+  font-weight: 500;
+  font-size: 0.8em;
+  letter-spacing: 0.01em;
+  color: var(--ink);
+}
+
+input,
+textarea,
+.select-option {
+  background: var(--field);
+  border-color: var(--line);
+  border-radius: 0.35em;
+}
+
+.select-option {
+  border-radius: 999rem;
+}
+
+.select-option.selected {
+  background: var(--brick);
+  border-color: var(--brick);
   color: #fdf3ef;
 }
-/* On the brick panel the primary button flips to ink-on-cream. */
-.alt-card:nth-of-type(3n) .alt-submit {
-  background: #fdf3ef;
-  color: #8a1e12;
+
+/* The button is always brick with cream on it, in either scheme. */
+.alt-submit {
+  font-family: var(--heading);
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  background: var(--brick);
+  color: #fdf3ef;
+  border-radius: 0.35em;
 }
 
-/* Form controls keep their light surface inside the dark and brick
-   panels, so their text must NOT inherit the panel's light ink -
-   pin it dark, and darken the placeholder, so nothing is light-on-
-   light. The selected pill fills with the panel accent (terracotta /
-   cream) and carries dark ink, which reads on either panel. */
-.alt-card:nth-of-type(3n+1) .select-option,
-.alt-card:nth-of-type(3n) .select-option,
-.alt-card:nth-of-type(3n+1) input,
-.alt-card:nth-of-type(3n) input,
-.alt-card:nth-of-type(3n+1) textarea,
-.alt-card:nth-of-type(3n) textarea {
-  color: #201a18;
-  background: #f6f5f3;
-  border-color: #cabfb6;
-}
-.alt-card:nth-of-type(3n+1) .select-option.selected,
-.alt-card:nth-of-type(3n) .select-option.selected {
-  color: #201a18;
-  background: var(--accent);
-  border-color: var(--accent);
-}
-.alt-card:nth-of-type(3n+1) ::placeholder,
-.alt-card:nth-of-type(3n) ::placeholder {
-  color: #8a827b;
-  opacity: 1;
+/* ---- the foot --------------------------------------------------- */
+
+.question-nav,
+.down-the-tree-foot,
+.question-responsible {
+  font-family: var(--heading);
+  font-weight: 500;
 }
 
-/* Wordmark: the mark carries its own red ground, so just seat it. */
-.wordmark img { border-radius: 0.35rem; }
-
-/* Partner logos, when dropped into a feature as markdown images, sit
-   quiet and small rather than full-bleed. */
-.feature p img { max-width: 9rem; width: auto; border: none; }
+/* Partner logos, when a text carries them as markdown images, sit
+   quiet and small rather than full width. */
+.feature p img {
+  max-width: 9rem;
+  width: auto;
+  border: none;
+}

images/wordmark.svg

@@ -1,5 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 805 224" role="img" aria-label="Klingenberg Bygg">
   <title>Klingenberg Bygg</title>
+  <!-- The lettering follows the reader's colour scheme: ink on paper
+       in light, paper on ink in dark. An <img> cannot inherit the
+       page's colours, so the rule lives in the file. -->
+  <style>.ink { fill: #1a1613 } @media (prefers-color-scheme: dark) { .ink { fill: #f3efe9 } }</style>
   <!-- The red KB square mark (same as the favicon), colours fixed
        from the mark plus two graduated ghost chevrons. -->
   <defs><path d="M 0,0 15,20 0,40" id="k"/></defs>
@@ -51,7 +55,7 @@
 </g>
 </g>
 </defs>
-<g fill="#1a1613" fill-opacity="1">
+<g class="ink" fill-opacity="1">
 <use xlink:href="#glyph-0-0" x="10" y="88.719727"/>
 <use xlink:href="#glyph-0-1" x="79" y="88.719727"/>
 <use xlink:href="#glyph-0-2" x="108" y="88.719727"/>
@@ -64,7 +68,7 @@
 <use xlink:href="#glyph-0-7" x="500" y="88.719727"/>
 <use xlink:href="#glyph-0-4" x="541" y="88.719727"/>
 </g>
-<g fill="#1a1613" fill-opacity="1">
+<g class="ink" fill-opacity="1">
 <use xlink:href="#glyph-0-8" x="10" y="193.359375"/>
 <use xlink:href="#glyph-0-9" x="73" y="193.359375"/>
 <use xlink:href="#glyph-0-4" x="129" y="193.359375"/>

questions/index.yaml

@@ -8,6 +8,111 @@ description: >
 responsible:
   name: Fredrik Borch Lynghaug
   contact: fredrik@klingenbergbygg.no
+# Bildeserien: det vi har bygd og undersøkt, tvers over skjermen under
+# spørsmålet. Bildetekstene er beskrivelsene som ligger i bildene selv.
+slideshow:
+  max_height: 60
+  slides:
+    - image: images/bildeserie/01.webp
+      width: 1867
+      height: 1400
+      caption: Tilstandsanalyse for politisk vurdering.
+    - image: images/bildeserie/02.webp
+      width: 2365
+      height: 1400
+      caption: Tilleggsisolert fasade uten fasadeendring. Tanum skole.
+    - image: images/bildeserie/03.webp
+      width: 1867
+      height: 1400
+      caption: Fundamenteringen av brannstasjonen i Ytre Enebakk
+    - image: images/bildeserie/04.webp
+      width: 1867
+      height: 1400
+      caption: Gammel stjernehimmel skal fornyes
+    - image: images/bildeserie/05.webp
+      width: 1050
+      height: 1400
+      caption: Sprekk midt på stuevegg
+    - image: images/bildeserie/06.webp
+      width: 1867
+      height: 1400
+      caption: Snart klart for overlevering! Løvenstad omsorgsboliger.
+    - image: images/bildeserie/07.webp
+      width: 1867
+      height: 1400
+      caption: Omlegging av vannforsyning før etablering av nye boliger
+    - image: images/bildeserie/08.webp
+      width: 1777
+      height: 1400
+      caption: Utbedring parkett i gymsal, sliping og lakking.
+    - image: images/bildeserie/09.webp
+      width: 3629
+      height: 1400
+      caption: Tilbygg på skole i drift, i Ås
+    - image: images/bildeserie/10.webp
+      width: 3207
+      height: 1400
+      caption: Fornying kantine Det Norske Teatret
+    - image: images/bildeserie/11.webp
+      width: 1050
+      height: 1400
+      caption: Solid veggprofil tilpasset lyd og brann-krav
+    - image: images/bildeserie/12.webp
+      width: 1867
+      height: 1400
+      caption: Nye vinduer med tradisjonelt-utseende «Restover» glass som avslører utsikten fra Munkeramme på Hvitsten
+    - image: images/bildeserie/13.webp
+      width: 2571
+      height: 1400
+      caption: Kjærneved til varanda og inngangspartiet til Muncheramme
+    - image: images/bildeserie/14.webp
+      width: 1050
+      height: 1400
+      caption: Drenering og riktige rammer før kunsgressbanen legges mesterfullt ned helt uten gummikuler
+    - image: images/bildeserie/15.webp
+      width: 2098
+      height: 1400
+      caption: Navnebror sprenger plass til ny brannstasjon
+    - image: images/bildeserie/16.webp
+      width: 1283
+      height: 1400
+      caption: Kontroll av betong før støping
+    - image: images/bildeserie/17.webp
+      width: 1050
+      height: 1400
+      caption: Etanblering av ny byggekran
+    - image: images/bildeserie/18.webp
+      width: 1050
+      height: 1400
+      caption: Armerignskontroll før støping
+    - image: images/bildeserie/19.webp
+      width: 1867
+      height: 1400
+      caption: Brannstasjonens tårn under oppføring blir også klatrevegg
+    - image: images/bildeserie/20.webp
+      width: 1867
+      height: 1400
+      caption: Her heises Moelvens modulskole i vestby på plass. Den blir stående i 10 år.
+    - image: images/bildeserie/21.webp
+      width: 1867
+      height: 1400
+      caption: Nyetablering av vei.
+    - image: images/bildeserie/22.webp
+      width: 838
+      height: 1400
+      caption: Støpefeil med frosset treverk i søyle fra 1960, avdekket og utbedret
+    - image: images/bildeserie/23.webp
+      width: 2095
+      height: 1400
+      caption: Nytt kunstgress med varme på Fredikstad stasion.
+    - image: images/bildeserie/24.webp
+      width: 1050
+      height: 1400
+      caption: Sydvendte fasader er utsatt for slagregn. Dette bygget er på byantikvarens gule liste.
+    - image: images/bildeserie/25.webp
+      width: 1487
+      height: 1400
+      caption: pH-test av borreprøver i mur fra forskjellige dybder
 alternatives:
   - name: Få kartlagt byggets tilstand
     description: >

site.yaml

@@ -1,6 +1,6 @@
 title: Klingenberg Bygg
-wordmark: https://prosjekt.klingenbergbygg.no/klingenbergbygg/questions/raw/branch/main/images/wordmark.svg
-wordmark_height: 4.4
+wordmark: /site/images/wordmark.svg
+wordmark_height: 2.6
 lang: no
 stylesheet: custom.css
 favicon: images/logo.svg