From 8e31d7337680a9154b87c3465acf2d05f302da2e Mon Sep 17 00:00:00 2001 From: Timmy Date: Tue, 23 Jun 2026 20:07:46 +0800 Subject: [PATCH] Optimize studio-sample: shared CSS, mobile nav, SEO, a11y, working filter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Extract duplicated per-page CSS into one shared style.css - Add CSS-only hamburger menu for ≤720px (was overflowing) - Add meta description / Open Graph / favicon to all pages - Unify footers, fix dead links, distinct s - :focus-visible outlines, aria-hidden on decorative text, contrast bumps - Make works.html category filter actually filter (data-cat) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --- caddy/www/studio-sample/CLAUDE.md | 20 +- caddy/www/studio-sample/index.html | 597 +--------------- caddy/www/studio-sample/services.html | 428 +----------- caddy/www/studio-sample/style.css | 969 ++++++++++++++++++++++++++ caddy/www/studio-sample/timeline.html | 339 +-------- caddy/www/studio-sample/works.html | 358 +--------- 6 files changed, 1057 insertions(+), 1654 deletions(-) create mode 100644 caddy/www/studio-sample/style.css diff --git a/caddy/www/studio-sample/CLAUDE.md b/caddy/www/studio-sample/CLAUDE.md index f93c6ea..b68ccb1 100644 --- a/caddy/www/studio-sample/CLAUDE.md +++ b/caddy/www/studio-sample/CLAUDE.md @@ -4,14 +4,15 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co ## Project Overview -Static portfolio website for **Studio Sample**, a Tokyo-based design and front-end studio. Three HTML files with embedded CSS and minimal vanilla JavaScript — intentionally zero frameworks, zero build tooling. +Static portfolio website for **Studio Sample**, a Tokyo-based design and front-end studio. Four HTML pages sharing one stylesheet, with minimal vanilla JavaScript — intentionally zero frameworks, zero build tooling. ## Architecture - **Pure static HTML/CSS/JS** — no package manager, no bundler, no preprocessor -- All styles are embedded in each HTML file's `<style>` tag (no external stylesheets) -- Responsive design via CSS Grid, Flexbox, and `clamp()` for fluid typography -- The only JavaScript is a filter button toggle on `works.html` (~10 lines, lines 539–548) +- **One shared stylesheet `style.css`** linked by all four pages (no inline `<style>` blocks). Edit it once → every page updates. Cross-page conflicts are resolved by parent scoping (`#works .works-grid` vs `.works-section .works-grid`) and modifier classes (`.cta-strip.red`). +- Responsive via CSS Grid, Flexbox, and `clamp()` for fluid typography +- Mobile nav (≤720px) is a **CSS-only checkbox-hack hamburger** (`#nav-toggle` + `.nav-burger` label) — no JS +- The only JavaScript is the category filter on `works.html` (in-page `<script>`): cards carry `data-cat` (space-separated, can be multiple), buttons carry `data-cat`, and clicking toggles `display` ### Pages @@ -19,17 +20,20 @@ Static portfolio website for **Studio Sample**, a Tokyo-based design and front-e |---|---| | `index.html` | Homepage: hero, features, works preview, process, about, news, contact form | | `services.html` | Services, pricing tiers (¥150K / ¥380K / custom), FAQ | -| `works.html` | Portfolio grid with category filter (All / Branding / Web / Print / Identity) | +| `works.html` | Portfolio grid with working category filter (All / Branding / Web / Print / Identity) | +| `timeline.html` | Studio history timeline (2020 → 2026) | ## Development -Open any `.html` file directly in a browser — no build step or local server required. For live reload, any static file server works (e.g. `python3 -m http.server`). +Open any `.html` directly in a browser — no build step. Served live by the parent Caddy server at `/studio-sample/`. Browser caches `style.css` aggressively; hard-reload after CSS edits. There are no tests, linters, or CI pipelines. ## Style Conventions -- Color palette: `#e53935` (red accent), `#111111` (primary text), `#f7f7f7` / `#ffffff` (backgrounds) +- Palette: `#e53935` (red accent), `#111111` (text/dark sections), `#f7f7f7` / `#ffffff` (backgrounds) - Typography: system font stack (`-apple-system`, `Segoe UI`, `Noto Sans TC/JP`) -- Responsive breakpoints follow a mobile-first pattern; `clamp()` handles fluid type scaling +- Mobile-first, `clamp()` for fluid type +- Keyboard focus styling via `:focus-visible` (red outline); decorative elements (`.hero-bg-text`) are `aria-hidden` - Content is bilingual Traditional Chinese + English throughout +- SEO: each page has `<meta name="description">` + Open Graph tags + an inline-SVG data-URI favicon diff --git a/caddy/www/studio-sample/index.html b/caddy/www/studio-sample/index.html index 4ada352..fd47418 100644 --- a/caddy/www/studio-sample/index.html +++ b/caddy/www/studio-sample/index.html @@ -3,587 +3,24 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>STUDIO SAMPLE - + + + + + + + + + + Studio Sample — Design & Front-End Studio