Rebrand site to the octopus/ocean visual identity - #46
Open
jpomfret wants to merge 20 commits into
Open
Conversation
Replaces the default theme look with the confirmed Brand Kit: purple octopus mark, purple/navy/light-blue/teal palette (light + dark), self-hosted Etna/Garet fonts, and a changelog-style homepage feed with a gradient hero. Fixes a real Hugo bug along the way where tag/category casing was being auto-title-cased (dbatools -> Dbatools). Adds a root LICENSE (MIT, code only) alongside the unchanged per-post CC BY-NC-SA content license, and adds a real gated cookie-consent banner so Google Analytics only loads after accepting - previously it loaded unconditionally with no consent. Disqus comments were already inert (no shortname configured) and are now explicitly disabled to match, and a leftover unused Google Fonts (Lato) request is removed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
✅ Preview is ready!
↩️ Previous: ⚡️ 🤖 Powered by surge-preview |
|||||||||||||||
Per-post cover images kept exposing their own baked-in title/badge text when cropped into the hero thumbnail, colliding with the hero's own dynamic title. Swaps that for the Brand Kit's dedicated light/dark hero frame template (tentacles + wave scene, built to hold text), dropping the per-post image lookup entirely. Content is centered and width-capped so title/excerpt length can vary per post without reaching into the corners where the tentacles curl in; excerpt is clamped to 2 lines as a height safeguard. The eyebrow label and reading-time footer were dropped from the hero to fit the available vertical space cleanly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The template's green grass wave read oddly against a clean text panel. Chroma-replaced both green tones with white on both light/dark variants. Also cleaned up a thin shadow/outline remnant left along the boundary by the color swap (the blob's soft drop-shadow layer was previously hidden under the opaque green fill) by eroding the transparency mask a few pixels before flattening, without visibly affecting the artwork's tentacle details. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Jess provided an updated version of the tentacle-frame template with a solid white panel instead of the sky/cloud/grass scene, replacing the chroma-key color-fix from the previous commit entirely - no image editing needed, this variant ships clean. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The hero's background is a fixed image, so it can't inherit the lighter --card-background tone every other card uses to read as a distinct surface. In dark mode its own navy nearly matched the page background, so the card had almost no visible edge. A thin teal border plus a soft glow gives it back that separation. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The theme only reserves the right-sidebar column (which narrows the main content with it) when a post has enough headings for a real table of contents; short posts without subheadings lost that column entirely and the whole article card stretched to fill the leftover width, making body text uncomfortably wide. Caps .main-article at the same width normal (with-sidebar) posts already get (measured at ~780px), so reading width is now consistent regardless of whether a post has subheadings. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This reverts commit 592dc58.
Swap the dark-mode hero frame for the new sky-blue-panel variant, then fix the resulting contrast issues: hero date tag and category pills were relying on translucent teal that blended into the new panel, so both switch to solid fills (purple / navy) that hold ~6-7:1 contrast. Also brightened category/tag pills sitewide in dark mode (teal-bright instead of base teal) and gave the sidebar octopus plate a matching sky-blue background instead of stark white. Category tiles on the archives page previously showed a flat color square since taxonomy term pages have no cover image of their own; they now pull the cover image from the latest post in that category. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Documents the commands, the Hugo Module/no-vendor setup, where the rebrand's visual customization lives, and the deliberate config decisions (license split, Disqus, capitalizeListTitles) made during this branch's work. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- powershell -> PowerShell everywhere (categories and tags) - t-sql-tuesday / tsqltuesday / tsql2sday consolidated to a single tsql2sday term, used consistently as both category and tag - remaining hyphenated categories/tags (sql-server, data-compression, availability-groups, etc.) converted to camelCase, deduping any post where the old and new spelling both existed in one list Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The hero artwork is a fixed 16:9 image; forcing background-size:cover on the narrow, portrait-ish box mobile produces scales it up until the sides crop deep into the frame, losing the rounded card shape and tentacles entirely. Below the md breakpoint, fit to width (contain) instead so nothing crops, with a background-color matching the art's own corner tone so any letterboxed strip reads as more artwork rather than a mismatched gap. Cover is kept from md upward, where the hero is wide enough relative to its height that the crop stays minor. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The previous fix (background-size:contain) stopped the artwork from cropping, but it also shrank the pale panel along with the art while the title/excerpt kept their full desktop size, so text spilled past the shrunken panel's edges. Revert to cover (which scales the fixed 16:9 art to exactly fill the box, so the box's own proportions - not the image - decide how much gets cropped), and instead bound the box's height so it stays closer to the art's own ratio on mobile: - hero title is font-size 2.2rem (was 3rem) and clamped to 3 lines, so a long post title can no longer stretch the box tall and narrow - mobile min-height reduced from 420px to 320px to match Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Diagnosed by forcing the hero to phone widths in devtools rather than relying on the browser window resize (unreliable in this environment): the previous fix bounded content height, but the meta/pill row still spanned the full 420px content width, which at mobile's shorter, more-cropped hero visibly collided with the top-right tentacle decoration. Capping the content column at 280px below md keeps the date/category pills and title clear of the artwork's corners. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The baked-in-title social-share card treatment was abandoned; regenerate cover.jpg as a clean 1200x630 crop of the source Unsplash clouds photo (no overlaid title/subtitle/pills). Cover doubles as the OG/Twitter share image, so the social preview reverts to the plain photo too. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…a11y - Add a global :focus-visible brand ring and restore the search field's focus outline (theme stripped it with outline:0 and left everything else on the near-invisible UA default). WCAG 2.4.7. - Retint inline code so it passes WCAG AA in light mode (theme default was grey-on-grey ~3:1); now 13.6:1 light / 7.4:1 dark. Code blocks keep their syntax highlighting. - Give social icon links aria-label (override of the v3.29.0 sidebar/left.html partial) and proper-cased names in menus. They had title-based names already, so this is hardening for touch/keyboard. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Social icon links grow from 24x23 to a 32x44 hit area (WCAG 2.5.8, and far easier to tap on mobile); still one row in the sidebar. - Avatar alt was the theme default "Avatar"; use the site title instead. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The homepage hero renders on the fixed Brand Kit octopus/wave frame-card PNG (per-theme, pale center panel), not a purple-to-navy gradient, and the separate wave-divider component was removed since the frame's own artwork carries the waves. Reconcile the Overview, Colors, Named Rules, Components, and Do's/Don'ts to match the shipped implementation. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Dark --body-background goes from --brand-navy (#10265d) to a near-black navy #0b1a3a. Same brand hue, lower lightness: the saturated navy stops reading as a "bold" full-strength field and the #17306a cards, sidebar rows, and hero frame now clearly read as elevated above the ground. --brand-navy itself is unchanged, so chips/accents/hero panel are unaffected. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
dbatools->Dbatools); now preserves real-world casing sitewide.LICENSE(MIT, code only) - the per-post CC BY-NC-SA content license is unchanged.PRODUCT.mdandDESIGN.mdadded, recording durable product truth and the shipped design system for future work.Test plan
dbatools, notDbatools)🤖 Generated with Claude Code