Files

Timmy 8e31d73376 Optimize studio-sample: shared CSS, mobile nav, SEO, a11y, working filter

- 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 <title>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>

2026-06-23 20:07:46 +08:00

2.2 KiB

Raw Permalink Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

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
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

File	Purpose
`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 working category filter (All / Branding / Web / Print / Identity)
`timeline.html`	Studio history timeline (2020 → 2026)

Development

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

Palette: #e53935 (red accent), #111111 (text/dark sections), #f7f7f7 / #ffffff (backgrounds)
Typography: system font stack (-apple-system, Segoe UI, Noto Sans TC/JP)
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

2.2 KiB Raw Permalink Blame History