Apply brand identity (Cloudlandscape visual kit)#7
Conversation
trotro
commented
Mar 5, 2026
trotro
commented
- Add CSS design tokens: sky-deep, sky-mid, aurora, horizon, mist, slate, cloud-white
- Switch body font to Cormorant Garamond (display) + DM Mono (mono)
- Add Google Fonts preconnect + stylesheet link in base.html
- Add inline SVG favicon (dark cloud icon, aurora stroke)
- Replace nav text logo with SVG wordmark logo
- Dark theme throughout: #0B1D2E background, #EEF4F9 text
- Aurora (#7EC8C8) accent on CTAs, links, badges, focus rings
- Restyle all components: cards, buttons, badges, filters, comparison bar
- Maintain WCAG/RGAA compliance: prefers-reduced-motion, focus-visible
- Add CSS design tokens: sky-deep, sky-mid, aurora, horizon, mist, slate, cloud-white - Switch body font to Cormorant Garamond (display) + DM Mono (mono) - Add Google Fonts preconnect + stylesheet link in base.html - Add inline SVG favicon (dark cloud icon, aurora stroke) - Replace nav text logo with SVG wordmark logo - Dark theme throughout: #0B1D2E background, #EEF4F9 text - Aurora (#7EC8C8) accent on CTAs, links, badges, focus rings - Restyle all components: cards, buttons, badges, filters, comparison bar - Maintain WCAG/RGAA compliance: prefers-reduced-motion, focus-visible Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Applies the “Cloudlandscape” visual identity across the Zola site (dark theme + design tokens + typography), updates templates for more semantic markup, and extends local/CI accessibility tooling.
Changes:
- Introduces CSS design tokens, new typography (Cormorant Garamond + DM Mono), and dark theme restyling across components.
- Updates templates to use semantic lists for provider/service grids and replaces the nav “Home” text with an SVG wordmark + inline SVG favicon.
- Updates local
misetasks and the GitHub Actions accessibility workflow to run axe-core-based accessibility checks.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
templates/section.html |
Switches provider listing container/items to <ul>/<li> semantics. |
templates/page.html |
Switches services listing to <ul>/<li> semantics. |
templates/base.html |
Adds Google Fonts links, inline SVG favicon, and SVG wordmark logo in nav. |
static/style.css |
Adds design tokens + dark theme styling; updates focus styling and component visuals. |
static/compare.html |
Adjusts comparison page styling to match dark theme tokens/colors. |
mise.toml |
Adds bun + local tasks for serve/stop/a11y/test orchestration. |
cloudlandscape-brand.html |
Adds a standalone brand kit reference page. |
.gitignore |
Ignores Node/bun-related artifacts. |
.github/workflows/accessibility.yml |
Migrates a11y job from Node to bun and changes serving strategy for axe runs. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if nc -z localhost {{vars.port}} == 0; then | ||
| echo "zola is already serving" | ||
| else | ||
| zola serve --port {{vars.port}} & |
There was a problem hiding this comment.
The nc check is not valid bash: if nc -z localhost {{vars.port}} == 0; then passes extra args (== 0) to nc and won't correctly test the exit status. Use if nc -z localhost {{vars.port}}; then (or explicitly test $?) to make the serve/stop logic work reliably.
| .filter-checkbox:checked + label, | ||
| .filter-group label:has(input:checked) { | ||
| font-weight: 600; | ||
| font-weight: 400; | ||
| color: var(--aurora); | ||
| } |
There was a problem hiding this comment.
.filter-checkbox:checked + label will never match with the current markup (the <input> is nested inside the <label> in templates/section.html). Right now the checked styling depends on label:has(input:checked), which reduces browser compatibility. Either adjust the HTML to input + label (or input with for=) so the sibling selector works, or remove the dead selector and provide a non-:has() fallback.
| /* Focus Indicators */ | ||
| a:focus, | ||
| button:focus, | ||
| input:focus, | ||
| select:focus, | ||
| textarea:focus { | ||
| outline: 2px solid #3498db; | ||
| outline-offset: 2px; | ||
| :focus-visible { | ||
| outline: 3px solid var(--aurora); | ||
| outline-offset: 4px; | ||
| } |
There was a problem hiding this comment.
Focus styling is now only applied via :focus-visible. In browsers/environments that don't support :focus-visible, keyboard users may get no focus indicator (accessibility regression). Add a :focus fallback (optionally paired with :focus:not(:focus-visible) to avoid double outlines) to preserve visible focus everywhere.
| .provider-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | ||
| gap: 1.5rem; | ||
| margin-top: 2rem; | ||
| } |
There was a problem hiding this comment.
templates/section.html now renders the provider cards as <ul class="provider-grid"><li ...>, but .provider-grid doesn't reset list markers. Without list-style: none (and usually padding-left: 0), browsers will render bullets/markers for each card.
| .services-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); | ||
| gap: 1rem; | ||
| } |
There was a problem hiding this comment.
templates/page.html now uses <ul class="services-grid"> with <li class="service-card">, but .services-grid doesn't disable list markers. Add list-style: none (and padding-left: 0) so bullets/markers don't appear in the services grid.
