Compare commits
6
Commits
bildeserie
...
fe60fd42c5
| Author | SHA1 | Date | |
|---|---|---|---|
  blandClaude Opus 5.5
|
fe60fd42c5
|
||
|
bl
|
8ac3c3628f | ||
|
blandClaude Opus 5.5
|
041ad8918d
|
||
|
bl
|
7cd9ff243f | ||
|
blandClaude Opus 5.5
|
efc5c5a70a
|
||
|
blandClaude Opus 5.5
|
cf5759d627
|
No files matched your search
@@ -24,7 +24,7 @@ on:
|
||||
- .gitea/workflows/deploy.yml
|
||||
|
||||
env:
|
||||
PORTAL_RELEASE: v0.5.2
|
||||
PORTAL_RELEASE: v0.6.2
|
||||
INSTANCE: klingenberg-portal
|
||||
|
||||
jobs:
|
||||
|
||||
@@ -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 ""
|
||||
+215
-82
@@ -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,239 @@
|
||||
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 wordmark's line, at the page's right edge. */
|
||||
.session {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.hero-top {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hero-top .session {
|
||||
position: static;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
+6
-2
@@ -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"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
@@ -56,19 +56,19 @@ slideshow:
|
||||
- image: images/bildeserie/11.webp
|
||||
width: 1050
|
||||
height: 1400
|
||||
caption: Solid veggprofil tilpasset lyd og brann-krav
|
||||
caption: Solid veggprofil tilpasset lyd- og brannkrav
|
||||
- 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
|
||||
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
|
||||
caption: Kjerneved til verandaen 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
|
||||
caption: Drenering og riktige rammer før kunstgressbanen legges mesterfullt ned helt uten gummikuler
|
||||
- image: images/bildeserie/15.webp
|
||||
width: 2098
|
||||
height: 1400
|
||||
@@ -80,11 +80,11 @@ slideshow:
|
||||
- image: images/bildeserie/17.webp
|
||||
width: 1050
|
||||
height: 1400
|
||||
caption: Etanblering av ny byggekran
|
||||
caption: Etablering av ny byggekran
|
||||
- image: images/bildeserie/18.webp
|
||||
width: 1050
|
||||
height: 1400
|
||||
caption: Armerignskontroll før støping
|
||||
caption: Armeringskontroll før støping
|
||||
- image: images/bildeserie/19.webp
|
||||
width: 1867
|
||||
height: 1400
|
||||
@@ -92,7 +92,7 @@ slideshow:
|
||||
- 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.
|
||||
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
|
||||
@@ -104,7 +104,7 @@ slideshow:
|
||||
- image: images/bildeserie/23.webp
|
||||
width: 2095
|
||||
height: 1400
|
||||
caption: Nytt kunstgress med varme på Fredikstad stasion.
|
||||
caption: Nytt kunstgress med varme på Fredrikstad stasjon.
|
||||
- image: images/bildeserie/24.webp
|
||||
width: 1050
|
||||
height: 1400
|
||||
@@ -112,7 +112,7 @@ slideshow:
|
||||
- image: images/bildeserie/25.webp
|
||||
width: 1487
|
||||
height: 1400
|
||||
caption: pH-test av borreprøver i mur fra forskjellige dybder
|
||||
caption: pH-test av borprøver i mur fra forskjellige dybder
|
||||
alternatives:
|
||||
- name: Få kartlagt byggets tilstand
|
||||
description: >
|
||||
|
||||
@@ -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
|
||||
Reference in new issue
Block a user