Relaunch peakscale.ch#27
Draft
johanngyger wants to merge 22 commits into
Draft
Conversation
Per specs/relaunch-plan.md sprints 0–5: rebuild the site on Hugo extended
with plain CSS (tokens.css + site.css from the Claude PS Design System)
and ~30 lines of vanilla JS — no Tailwind, no Alpine, no Node toolchain.
- New IA: Home, Services, Produkte (NEW), Team, Impressum, Datenschutz,
in DE (root) and EN (/en/). About and Contact merge into Team and a
prominent mailto CTA. /angebot/, /about/, /contact/, /legalnotice/,
/privacy/ kept as Hugo aliases for redirect continuity.
- New layouts: index, services/list, produkte/list, team/list, plus
partials for header, footer, mobile menu, lang switch, contact-floating,
and per-page hero visuals (compass, blocks, network, mountain, mail).
- Centralised data in data/{customers,partners,team,testimonials}.yaml
and i18n strings in i18n/{de,en}.toml.
- SEO foundation in head.html: per-page title/description, OG/Twitter
tags, canonical, hreflang, JSON-LD (Organization on every page,
WebSite on home), Plausible analytics snippet.
- Migrated existing customer logos and team photos from content/ to
static/images/. Added a read-only design-system-reference/ snapshot of
the Claude PS Design System (tokens, preview pages, JSX component
blueprints).
- Removed the predecessor SCSS pipeline, Disqus/Plausible-helper partials,
blog/portfolio/subscribe sections, contact form, and the old About,
Contact, Legalnotice, and Privacy content directories.
Sprints 6–7 (custom imagery, OG image generator, Lighthouse/Pa11y/
Playwright CI, native EN review, privacy-notice review, DNS switch)
remain open per the punch list.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Templates use the `hugo.Sites` and `hugo.Data` globals (introduced in
Hugo 0.156) to avoid the deprecation warnings on `.Site.Languages` and
`.Site.Data`. CI was still on 0.143.1 and failed to render with
"can't evaluate field Sites in type interface {}".
Bumps both workflow files to 0.161.1, adds `.hugo-version` for asdf/mise
users, and notes the version expectation in shell.nix (Nix users may
need `nix flake update` if `pkgs.hugo` lags behind).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
Replaces the topo-mountain placeholders and the SVG hero partials on the
relaunch site with the curated raster crops from Peak Scale (DEV).fig.
- Heroes: home (low-poly mountain w/ stage pills), services (compass),
produkte (modular blocks, replacing visuals/blocks-large.html), team
(connected nodes, replacing visuals/network-large.html).
- Section media: 4 lifecycle rows on home, 5 values rows on team,
challenges-glass background on home + services, produkte mid-page
banner.
- Why grid: restores the "Peak steht für technische Tiefe" featured tile
(back to 6 cards as in the HiFi) with the dark-blue topo-abstract
anchored to the bottom of the card.
Drops em-dashes from all German content (en-dash is the German
Gedankenstrich), keeping em-dashes in the English siblings via
lang-conditional templates for testimonial citations and the team
LinkedIn aria-label.
Tones the .display-xl cap from 128 px to 88 px since the original
Figma value rendered too large at desktop widths.
Adds /static/_figextract/ to .gitignore (working extracts; only the
curated images under static/images/{hero,section}/ are committed) and
documents the Sprint 6 progress in specs/relaunch-plan.md.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
johanngyger
changed the title
Decision (3 May): we do not license the Figma stock placeholders we currently ship. Instead we'll select replacement stock — or commission the in-house alpine shoot per Mathias — once the rest of Sprint 6 is closed, then license only the chosen final set. Picking imagery that actually fits the brand is the bottleneck, not the licensing step. - §16 risk row updated with the deferral and reasoning - §17 decisions: new entry #12 capturing the call - §18 punch-list item 2 sub-bullets reordered: (a) prune dead visuals/*.html partials, (b) review topo-abstract choice, (c) deferred image swap + licensing Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The brand-token SVGs in layouts/partials/visuals/ (compass, blocks, network, mountain, topo, *-large variants) are hand-coded, ~300 lines total, no external dependencies. They are candidates for the OG generator (Sprint 6 item 3), the print stylesheet (§14), and as a fallback for any raster photo that doesn't survive review. Worth keeping; the previous plan note suggesting a prune was wrong. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Treated as optimisation rather than launch-blocking. The single fallback OG (`/images/peakscale-logo-square.png`) keeps share previews working. Revisit only if a stakeholder asks. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bigger Sprint 6 polish pass touching all four main pages: - Header/footer use the proper Peak Scale logo SVG (light + dark); drops the inline brand-mark + text and the header contact CTA. - Footer collapses to 3 columns (brand + about + LinkedIn icon, menu, legal); contact mail joins the bottom row. - New `.accent` helper to colour-highlight single words inside headings; applied across pages. - Home Why grid swaps numeric meta for per-tile icons; new "challenges-glass--split" layout (heading left, stacked cards right, optional featured card). - Home Next-steps becomes a 1+2 mosaic with primary/gold/sage variants and an optional checklist on the primary card. - Produkte own-solutions cards add a "Geeignet für" fit-block; partner cards now show role + themed bullet list. - Services tightens engineering subhead and rewrites assessments/training cards; "Wie wir arbeiten" tag becomes a bulleted list. - Team page refreshes mission, how-we-work, why-cloud-native, values, community and contact copy with footnotes where useful. - data/team.yaml updates roles and focus areas; testimonials.yaml rewrites two of three quotes. - icon.html adds building, messages, lab, globe, doc, spark. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
johanngyger
changed the title
Replaces the flat greyscale logo strip with auto-scrolling boxed tiles per the Figma reference. Pure-CSS marquee (no extra JS): each customer is duplicated once so the keyframe loop is seamless, hover pauses the animation, and the edges are masked into the section background. prefers-reduced-motion falls back to a static horizontally scrollable row.
Switches the logo strip from a CSS-keyframe marquee to a transform-based slider with explicit left/right arrows. Auto-advance still runs every 3.5s, pauses on hover or keyboard focus, and is suppressed under prefers-reduced-motion. The track loops at both ends so prev from the start jumps to the last full page and vice versa.
Removes ~140 lines of CSS that no template references:
- .icon-tile, .card-meta*, .card--brand + overrides, .card--glass,
.eyebrow--pill, .eyebrow--sm
- The legacy boxed .lifecycle / .lifecycle__stage / .lifecycle__dot
strip (replaced by .lifecycle-rows)
- .mountain-stages*, .stage-list* (only the unused visuals/mountain
partial referenced these)
- .value-tile*, .partner-logos__name, .partner-logos__role
- Empty `.cat-card { /* extends .card */ }` rule
- Stale `.site-footer__social` selector in the print stylesheet
Adds four on-dark text/accent tokens to tokens.css and folds 25
hardcoded rgba/rgb instances through them:
- --text-on-dark (rgba 255,255,255,.78)
- --text-on-dark-strong (rgba 255,255,255,.85)
- --text-on-dark-soft (rgba 255,255,255,.72)
- --accent-on-dark (rgb 122,192,232)
Print stylesheet refreshed to hide testimonial nav and the new
logo-carousel arrows alongside the contact-fab.
CSS surface goes from 1540 → 1450 lines.
Cuts inline `style=""` attributes across the four main layouts from
72 down to 11 (only dynamic background-image URLs remain). The
removed inline styles were almost all rebuilding the same handful
of patterns; they are now expressed as small CSS components.
New components in site.css:
- .checklist (+ .checklist--grid-2, .checklist--md, .checklist--on-dark)
Replaces the manually-marked-up `<li><span style="color:var(--accent-sage)">✓</span>…`
pattern repeated ~12 times across produkte own/partners, services
engineering work-style tag, and services assessments output strip.
- .col-narrow / .col-narrow--md — 880 / 720 px centred columns.
- .section__footnote — small grey centred note (team how-we-work,
community).
- .numbered-step{,__num} — produkte journey row.
- .lifecycle-cards__card.is-stack — swaps the inline icon/title/desc
stack on team how-we-work and services assessments to use the
existing .lifecycle-cards__title / __desc classes.
- .own-card{,__icon,__title,__eyebrow}, .own-cards (Produkte own
solutions stack).
- .partner-cards / .partner-card__{logo,role,themes-title} (Produkte
technology partners 2x2 grid).
- .journey-banner (Produkte mid-page banner).
- .service-stack(--tight), .service-card__items, .card__eyebrow,
.tag-arbeitsweise__list, .assessment-cards, .output-block (Services
page columns and dark glass output strip).
- .heading-xl, .lead--flush, .mission-grid (Team mission row).
- .section--gold, .section__icon--gold, .pill-row--center,
.contact-cta{,__eyebrow,__title,__actions} (Team community + contact
CTA).
- .section--deep — replaces 4 ad-hoc `style="background:var(--fg-deep)"`
on the next-steps sections across all four pages.
- .training-cards margin helper.
Also removes the now-dead `.contact-block` rule from site.css and
fills in `.challenges-glass__intro .lead` so it can render
`var(--text-on-dark-strong)` without an inline override.
Both the relaunch implementation plan (previously specs/relaunch-plan.md) and the read-only Peak Scale Design System reference (previously design/design-system-reference/) move under /relaunch/ on contributor machines. /relaunch/ is now ignored — it is a local working area for plans, design references and Figma exports that are not part of the build. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Logo strip:
- Shuffles tiles in place on every page load (Fisher-Yates).
- Becomes a true infinite carousel: clones the shuffled set so the
track is twice as long, snaps the transform back by one set-width
on each transitionend, and jumps invisibly to the mirror position
before any prev that would go below zero.
- Each img now fills the full tile interior (`width: 100%; height: 100%;
object-fit: contain`) so the visible "border" around every logo
is identical regardless of the source aspect ratio. Generous
18×32 padding gives all tiles a uniform frame.
- freezeAtRendered() halts in-flight transitions on hover/focus and
before clicks so tiles don't slip out from under the cursor.
- Customer SVGs cropped to their visible content:
bfh.svg viewBox 0 0 652 652 → 160 71 322 500
eth.svg viewBox 0 0 320 320 → 3 134 314 51 (also dropped width/height attrs)
ewb.svg viewBox 24.9 0.1 117.9 58.9 → 0 0 144 59 (the old box clipped content)
postfinance.svg now has an explicit viewBox so it can scale.
Brand token rename:
- tokens.css: renames the three brand colors after the logo
(--brand → --bright-blue, --fg → --dark-blue, with --bg-white
staying the white). All call-sites in site.css and the
visuals/*.html SVG partials follow the rename.
File rename - tokens.css → base.css. The file holds design tokens + base element styles + small primitives (.btn, .pill, .card, .dot-square), so "tokens" overstated its scope. head.html and site.css updated to match. Photo-anchored accent colors - --accent-sage / -soft → --accent-green / -soft, value rgb(125, 175, 75) / rgb(228, 240, 210). Sampled from the green rope in static/images/section/platform-engineering.jpg. - --accent-gold / -soft → --accent-yellow / -soft, value rgb(232, 184, 60) / rgb(252, 238, 180). Sampled from the yellow rope on the same image and the warm sky in cloud-architecture.jpg. - The old sage/gold values were too desaturated to read alongside these images. The new pair is the complement of the brand blue (yellow at hue 44° vs dark-blue at 221°) with grass green bridging the two. Drop dead / near-duplicate tokens - --stroke-on-dark-1 (unused), --stroke-on-dark-3 (unused); --stroke-on-dark-2 renamed to --stroke-on-dark. - --text-on-dark-soft (.72α), --text-on-dark-strong (.85α): both visually indistinguishable from --text-on-dark (.78α) on dark navy. - --accent-gold-ink: ~= --accent-gold. - --status-ok, --status-err: unused. - --legacy-fg, --legacy-bg, --legacy-rope: unused. - The entire shadcn :root block (--background, --foreground, --card, --primary, --secondary, --muted, --accent, --border-shadcn, --input, --ring, --radius and their *-foreground variants): all unused. - --shadow-card: unused. Final palette: 15 named color tokens + 3 shadows, down from ~41. Comment cleanup - Header reduced to the brand-identity callout (the three colors with their tokens, plus the brand-vs-supportive distinction). All references to Figma, the design system, hi-fi / lo-fi history, shadcn and "canonical" sourcing removed across base.css. - Per-token comments reduced to short purpose markers (`body copy`, `meta`, `pale wash`, …) where they add something the name doesn't. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
Author
|
@imathu here's a first shot at our revamped website; check the link at the top. Still needs quite some work. Leave your feedback in the PR comments, and I'll pick it up. |
- Render navbar items uppercase with letter-spacing. - Drop the kicker dot from .hero__kicker to fix orphaned-dot wrap on mobile and align with the design system spec. - Unify all link-badge arrows to a new arrow-up-right icon (replaces arrow-right) and apply the variant-coloured circle treatment in the next-steps cards (gold/sage circles for the gold/sage variants); carry the same circle-arrow badge into the home hero CTA. - Rebuild the technology-partner strip as a customer-style tile grid (no carousel) with consistent horizontal-lockup wordmarks for all four partners (Sidero Labs, Clastix, SUSE, Google Cloud) and tightened viewBoxes so each logo fills its tile uniformly. Reorder to Sidero · Clastix · SUSE · GCP across the home strip and the Produkte page partner cards.
- Services: drop default <figure> margin on testimonial-side so the yellow tile aligns with the first card and the gap to the green tag matches the card rhythm - Services: lift "Technologien & Themenfelder" subhead out of the left column to span the full grid above both columns - Team: replace sticky aside + row list with a 2-col why-grid where "Unser Team" is the featured card spanning two rows and members render as cards
Renders a single hairline outline of the brand mark behind every .hero section (homepage, services, team, produkte) at 1750px, slightly right of center, ~10% opacity bright-blue. Matches the icy-blue watermark in the figma proto. Also: replace stray var(--space-5) references with 20px in the challenges-glass and fit-block rules (the token was undefined).
- Team-member cards become anchor links to LinkedIn; only cards with
links get the hover lift (`.card:has(a):hover` / `a.card:hover`)
- Replace stroked LinkedIn icon with a filled blue "in" wordmark,
sized 24px in member cards and 20px in the team CTA pill
- Move LinkedIn to the top-right, headshots scaled to 96px, focus
row spans the full card width with a filled gray bolt and
comma-separable items in title case
- Drop the trailing colon from the Schwerpunkte/Focus i18n labels
- Add trailing dots to the Products and Team hero titles for parity
with Home and Services
- English lifecycle title mirrors the DE accent treatment
("What IT teams stand to gain")
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Visual polish driven by side-by-side Figma comparison: - Uppercase home hero CTA; drop trailing periods on hero kickers and hero headlines across all pages - Borderless hero kicker pill with bright-blue text - Why-featured tile: bold first sentence in white, wave image overlay with screen blend, gradient base matching the next-steps tiles - Bump Nächste Etappe card typography and padding for stronger CTAs - Bigger card icons across home / services / produkte / team - Engineering subsection labels rendered as Title Case card titles - Services hero lifecycle step shortened to Engineering - Warmer green/yellow tint over the challenges section image - Bigger solid bright-blue testimonial carousel arrows - Team Arbeitsweise tiles trimmed to icon + label, with restored "So arbeiten wir:" eyebrow; contact eyebrow set to Kontakt DE/EN consistency: - Replace em-dashes with en-dashes in all EN content files - Strip trailing periods on Next Steps card titles in both languages - Realign EN home (customers, testimonial, lifecycle, challenges, partners, next_steps) to match the DE structure with accent spans, 4-card lifecycle, featured challenge, primary/gold/sage mosaic Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Team page (CV-based): - Add Luca Kündig, Marc Stulz, Kevin Klopfenstein - Update existing members' role and focus from their CVs - Focus tags become a single bullet-separated string instead of chips - Support members without LinkedIn (div wrapper) or photo (initials placeholder) - CTA changes to "Folge uns auf LinkedIn" / "Follow us on LinkedIn" Icons: - Split icon partial into one SVG file per icon under assets/icons/ - icon.html now reads files via resources.Get and rewrites width/height - Replace guillemet text in logo and testimonial carousel buttons with chevron SVGs - Recenter chevron polylines so the circle buttons look balanced Design system: - Adopt 7-step type scale in base.css (display, title-lg, title, body, sm, eyebrow) - Extract next-steps section into a shared partial with colour variants Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Merge four overlapping card classes (cn-rows, how-we-work, lifecycle-rows inner card, lifecycle-cards) into a single .icon-tile BEM block with --stack and --feature modifiers; light by default, flips dark inside section--dark. Normalize is-feature/is-featured/is-stack to --modifier per BEM (kept .is-active as a runtime state). Equal-height tiles via grid-auto-rows: 1fr on the shared .icon-tile-grid. Realign team-page sections: Unsere Mission, Engagement in der Community and Warum Cloud Native now use the same section__head + .icon-tile-grid shape as Unsere Arbeitsweise. Remove the cramped right-side mail card on the contact CTA. Shrink next-steps__title from display-sm to title-lg. Deduplicate photo overlay: 4 inline gradient literals replaced with a new --overlay-photo CSS variable. Prune dead code: 7 unused visuals/* partials, 4 unused icon SVGs, .hero-photo--svg, .challenges-glass__list, .mission-tags, .heading-xl, .lead--flush, .pill, .pill--active, .pill-row and friends. Co-Authored-By: Claude Opus 4.7 (1M context) <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.
🔗 Preview: https://peak-scale-relaunch-2026.peakscale.pages.dev
Rebuild peakscale.ch on the new IA, design system and content per specs/relaunch-plan.md.
/en/. Old URLs kept as Hugo aliases.tokens.css+site.css) + ~30 lines of vanilla JS. No Node toolchain.data/*.yaml, UI strings ini18n/{de,en}.toml.static/images/.Test plan
/about/→/team/,/contact/→/team/,/legalnotice/→/impressum/,/privacy/→/datenschutz/, EN equivalents)🤖 Generated with Claude Code