From fafcc5ea378f0517f073ba5f9a8f0236d4ed40d9 Mon Sep 17 00:00:00 2001 From: Bendik Aagaard Lynghaug Date: Tue, 22 Sep 2026 19:07:23 +0200 Subject: [PATCH] The look of tomtervel.no: wordmark, favicon and a skin over portal's stylesheet Washed-yellow page, black text, the vel's blue (#1785c2) for the question banner and buttons, light-yellow link hovers, the title at the site's slight skew. Wordmark and favicon are the site's own files. Co-Authored-By: Claude Fable 5.1 --- custom.css | 85 ++++++++++++++++++++++++++++++++++++++++++++ images/logo.svg | 7 ++++ images/wordmark.png | Bin 0 -> 3753 bytes site.yaml | 5 +++ 4 files changed, 97 insertions(+) create mode 100644 custom.css create mode 100644 images/logo.svg create mode 100644 images/wordmark.png diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..7837760 --- /dev/null +++ b/custom.css @@ -0,0 +1,85 @@ +/* Tomter Vel — the look of tomtervel.no over portal's stylesheet. + Loaded after portal's main.css (site.yaml `stylesheet`), so these + rules win. tomtervel.no is Tachyons on a washed-yellow page + (#fffceb) with black text, one blue (#1785c2, "vel-blue") for the + banner and footer, light-yellow (#fbf1a9) link hovers, and a title + banner set at a slight skew. The recolour rides portal's own custom + properties; the banner and hover do the rest. */ + +:root { + color-scheme: light; + + --accent: #1785c2; + --accent-soft: rgba(23, 133, 194, 0.14); + + --paper: #fffceb; + --ink: #111111; + --ink-dim: #4f4a3a; + --line: #e6dfbf; + + --card-bg: rgba(255, 255, 255, 0.6); + --card-bg-opaque: rgba(255, 255, 255, 0.94); + --card-shadow: rgba(23, 133, 194, 0.12); + --hero-glow: rgba(255, 252, 235, 0.9); + + --error: #ff4136; + + --sans: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; + --heading: var(--sans); +} + +body { + background: var(--paper); + color: var(--ink); +} + +h1, h2, h3 { + font-weight: 700; + letter-spacing: -0.01em; +} + +/* The page's question sits in a vel-blue banner at the same slight + skew as the title on tomtervel.no. */ +.hero-copy h1 { + display: inline-block; + background: var(--accent); + color: var(--paper); + padding: 0.35em 0.8em; + transform: skewY(1.5deg) rotate(-1.5deg); + transform-origin: top right; +} + +/* Links: bold, black, and a light-yellow wash on hover, as on the + original's nav. */ +a { + font-weight: 700; + color: var(--ink); + transition: background-color 160ms; +} +a:hover { + background-color: #fbf1a9; +} +.wordmark, .wordmark:hover { + background: none; + opacity: 1; +} +.wordmark img { + height: 2.6rem; +} + +/* Card headings in the blue; the alternatives read as the committee + cards on tomtervel.no. */ +.alt-card h2 { + color: var(--accent); +} + +/* Buttons in the blue with washed-yellow text, no gradients. */ +button, .button, input[type="submit"] { + background: var(--accent); + color: var(--paper); + border: none; + font-weight: 700; +} +button:hover, .button:hover, input[type="submit"]:hover { + background: #14699a; +} diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..f197fc2 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/wordmark.png b/images/wordmark.png new file mode 100644 index 0000000000000000000000000000000000000000..995463f4afb7f76ff57bf10a7dce98f3ff6b00ae GIT binary patch literal 3753 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 WAMVwhJ