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 0000000..995463f Binary files /dev/null and b/images/wordmark.png differ diff --git a/site.yaml b/site.yaml index e1c5866..0642dde 100644 --- a/site.yaml +++ b/site.yaml @@ -1,2 +1,7 @@ lang: no title: Tomter Vel +wordmark: https://prosjekt.klingenbergbygg.no/tomtervel/questions/raw/branch/main/images/wordmark.png +wordmark_invert: false +wordmark_height: 2.4 +stylesheet: custom.css +favicon: images/logo.svg