From 9ce81a873e6f09e790807dfe9676d22bd1f5d85c Mon Sep 17 00:00:00 2001 From: Rayhaan Jaufeerally Date: Sat, 3 Oct 2026 21:35:30 +0200 Subject: [PATCH] Docs: show the front page photograph in its own colours The blue two-colour treatment is replaced by the photograph's own colours, slightly darkened, under a neutral shade that keeps the text legible. Co-Authored-By: Claude Opus 5.5 --- docs/sass/site.scss | 26 ++++++++++++-------------- docs/static/images/README.md | 4 ++-- docs/templates/index.html | 2 -- 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/docs/sass/site.scss b/docs/sass/site.scss index 881d7bf..163bb5b 100644 --- a/docs/sass/site.scss +++ b/docs/sass/site.scss @@ -315,13 +315,12 @@ kbd { display: flex; flex-direction: column; color: #ffffff; - background: #06112e; + background: #0a0c10; overflow: hidden; } -// The photograph, printed in two colours as Swiss posters printed theirs: -// in black and white, its darks become deep navy and its lights the blue -// of the site. A shade on the left keeps the text legible. +// The photograph in its own colours, a little darker and calmer, with a +// shade on the left that keeps the text legible. .hero-photo { position: absolute; inset: 0; @@ -332,18 +331,17 @@ kbd { height: 100%; object-fit: cover; object-position: 60% 50%; - filter: grayscale(1) contrast(1.15) brightness(1.05); + filter: saturate(0.85) brightness(0.8); } } -// Above the image: the colour, then the shade. -.hero-tone, .hero-shade { position: absolute; inset: 0; } -.hero-tone { background: #1f45e0; mix-blend-mode: multiply; } .hero-shade { + position: absolute; + inset: 0; background: linear-gradient(90deg, - rgba(5, 14, 40, 0.86) 0%, - rgba(5, 14, 40, 0.62) 40%, - rgba(5, 14, 40, 0.12) 78%, - rgba(5, 14, 40, 0) 100%); + rgba(10, 12, 16, 0.92) 0%, + rgba(10, 12, 16, 0.78) 35%, + rgba(10, 12, 16, 0.35) 65%, + rgba(10, 12, 16, 0.05) 100%); } .hero-copy { position: relative; @@ -352,7 +350,7 @@ kbd { flex-direction: column; max-width: 820px; padding: 96px var(--gutter) 40px; - .eyebrow { color: #b8c7ff; } + .eyebrow { color: #c9d4ff; } } .hero-title { margin: 0 0 32px; @@ -1053,7 +1051,7 @@ kbd { .hero { min-height: 0; } .hero-copy { padding: 64px var(--gutter) 32px; } - .hero-shade { background: linear-gradient(180deg, rgba(5, 14, 40, 0.55), rgba(5, 14, 40, 0.85)); } + .hero-shade { background: linear-gradient(180deg, rgba(10, 12, 16, 0.7), rgba(10, 12, 16, 0.9)); } .hero-credit { text-align: left; } .home-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 72px; } .spec { grid-template-columns: minmax(0, 1fr); } diff --git a/docs/static/images/README.md b/docs/static/images/README.md index fce9c2a..78ca9e0 100644 --- a/docs/static/images/README.md +++ b/docs/static/images/README.md @@ -4,5 +4,5 @@ |---|---|---|---| | `hero-2400.jpg`, `hero-1200.jpg` | "Fiber to the home" by Ronald Crow, https://unsplash.com/photos/a-bunch-of-yellow-and-green-wires-and-wires-8oR7XykOjk4, resized by images.unsplash.com to 2400 and 1200 pixels wide | [Unsplash License](https://unsplash.com/license): free to use; attribution not required, given on the front page | `c2bc75367507116c005e6c28773c18c4677a8255ac9887bdfe6c33de95caec27` (2400), `17712eb5701415d8faa8f5341ef145ddd17132c7bafccac033d789051bc59fa4` (1200) | -The front page shows the photograph in two colours (see `.hero-photo` in -`sass/site.scss`); the files themselves are the original colour. +The front page shows the photograph slightly darkened, under a shade that +keeps the text legible (see `.hero-photo` in `sass/site.scss`). diff --git a/docs/templates/index.html b/docs/templates/index.html index f0831cf..a54d948 100644 --- a/docs/templates/index.html +++ b/docs/templates/index.html @@ -7,12 +7,10 @@ {% block body %}
- {#- The photograph is set in two colours by the stylesheet; see .hero-photo. #}