diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml index cd1d799..4ee8605 100644 --- a/.gitea/workflows/deploy.yml +++ b/.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: diff --git a/.gitea/workflows/lint-and-reload.yml b/.gitea/workflows/lint-and-reload.yml index 93e988d..1c3bcfa 100644 --- a/.gitea/workflows/lint-and-reload.yml +++ b/.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 "" diff --git a/custom.css b/custom.css index de36052..8535256 100644 --- a/custom.css +++ b/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; +} diff --git a/images/bildeserie/01.webp b/images/bildeserie/01.webp new file mode 100644 index 0000000..7edfa41 Binary files /dev/null and b/images/bildeserie/01.webp differ diff --git a/images/bildeserie/02.webp b/images/bildeserie/02.webp new file mode 100644 index 0000000..fbe7fb9 Binary files /dev/null and b/images/bildeserie/02.webp differ diff --git a/images/bildeserie/03.webp b/images/bildeserie/03.webp new file mode 100644 index 0000000..25ae3bc Binary files /dev/null and b/images/bildeserie/03.webp differ diff --git a/images/bildeserie/04.webp b/images/bildeserie/04.webp new file mode 100644 index 0000000..231f075 Binary files /dev/null and b/images/bildeserie/04.webp differ diff --git a/images/bildeserie/05.webp b/images/bildeserie/05.webp new file mode 100644 index 0000000..f8e0776 Binary files /dev/null and b/images/bildeserie/05.webp differ diff --git a/images/bildeserie/06.webp b/images/bildeserie/06.webp new file mode 100644 index 0000000..d22ae42 Binary files /dev/null and b/images/bildeserie/06.webp differ diff --git a/images/bildeserie/07.webp b/images/bildeserie/07.webp new file mode 100644 index 0000000..f4ecee9 Binary files /dev/null and b/images/bildeserie/07.webp differ diff --git a/images/bildeserie/08.webp b/images/bildeserie/08.webp new file mode 100644 index 0000000..e7908a4 Binary files /dev/null and b/images/bildeserie/08.webp differ diff --git a/images/bildeserie/09.webp b/images/bildeserie/09.webp new file mode 100644 index 0000000..7d4e374 Binary files /dev/null and b/images/bildeserie/09.webp differ diff --git a/images/bildeserie/10.webp b/images/bildeserie/10.webp new file mode 100644 index 0000000..fb8705a Binary files /dev/null and b/images/bildeserie/10.webp differ diff --git a/images/bildeserie/11.webp b/images/bildeserie/11.webp new file mode 100644 index 0000000..0d73f01 Binary files /dev/null and b/images/bildeserie/11.webp differ diff --git a/images/bildeserie/12.webp b/images/bildeserie/12.webp new file mode 100644 index 0000000..2d5eb98 Binary files /dev/null and b/images/bildeserie/12.webp differ diff --git a/images/bildeserie/13.webp b/images/bildeserie/13.webp new file mode 100644 index 0000000..b55798b Binary files /dev/null and b/images/bildeserie/13.webp differ diff --git a/images/bildeserie/14.webp b/images/bildeserie/14.webp new file mode 100644 index 0000000..64b6e48 Binary files /dev/null and b/images/bildeserie/14.webp differ diff --git a/images/bildeserie/15.webp b/images/bildeserie/15.webp new file mode 100644 index 0000000..4bebfe8 Binary files /dev/null and b/images/bildeserie/15.webp differ diff --git a/images/bildeserie/16.webp b/images/bildeserie/16.webp new file mode 100644 index 0000000..fc3e007 Binary files /dev/null and b/images/bildeserie/16.webp differ diff --git a/images/bildeserie/17.webp b/images/bildeserie/17.webp new file mode 100644 index 0000000..096eb98 Binary files /dev/null and b/images/bildeserie/17.webp differ diff --git a/images/bildeserie/18.webp b/images/bildeserie/18.webp new file mode 100644 index 0000000..fabd509 Binary files /dev/null and b/images/bildeserie/18.webp differ diff --git a/images/bildeserie/19.webp b/images/bildeserie/19.webp new file mode 100644 index 0000000..bd39dd6 Binary files /dev/null and b/images/bildeserie/19.webp differ diff --git a/images/bildeserie/20.webp b/images/bildeserie/20.webp new file mode 100644 index 0000000..b711a49 Binary files /dev/null and b/images/bildeserie/20.webp differ diff --git a/images/bildeserie/21.webp b/images/bildeserie/21.webp new file mode 100644 index 0000000..fb3fff3 Binary files /dev/null and b/images/bildeserie/21.webp differ diff --git a/images/bildeserie/22.webp b/images/bildeserie/22.webp new file mode 100644 index 0000000..d30692d Binary files /dev/null and b/images/bildeserie/22.webp differ diff --git a/images/bildeserie/23.webp b/images/bildeserie/23.webp new file mode 100644 index 0000000..43dda06 Binary files /dev/null and b/images/bildeserie/23.webp differ diff --git a/images/bildeserie/24.webp b/images/bildeserie/24.webp new file mode 100644 index 0000000..67c1c7a Binary files /dev/null and b/images/bildeserie/24.webp differ diff --git a/images/bildeserie/25.webp b/images/bildeserie/25.webp new file mode 100644 index 0000000..80beee8 Binary files /dev/null and b/images/bildeserie/25.webp differ diff --git a/images/wordmark.svg b/images/wordmark.svg index 2abc90c..54294b6 100644 --- a/images/wordmark.svg +++ b/images/wordmark.svg @@ -1,5 +1,9 @@ Klingenberg Bygg + + @@ -51,7 +55,7 @@ - + @@ -64,7 +68,7 @@ - + diff --git a/questions/index.yaml b/questions/index.yaml index 398b670..4157b70 100644 --- a/questions/index.yaml +++ b/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: > diff --git a/site.yaml b/site.yaml index 0ec6653..0922faf 100644 --- a/site.yaml +++ b/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