timmy/42_104
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Timmy
2026-06-23 20:07:46 +08:00
parent 39f099aacf
commit 8e31d73376
6 changed files with 1057 additions and 1654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
caddy/www/studio-sample/works.html
View File

@@ -3,322 +3,24 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#e53935">
<meta name="description" content="Studio Sample 作品集 — 品牌識別、網頁設計與印刷編輯的代表作品，可依類別篩選瀏覽。">
<meta property="og:type" content="website">
<meta property="og:locale" content="zh_TW">
<meta property="og:site_name" content="Studio Sample">
<meta property="og:title" content="Works — Studio Sample">
<meta property="og:description" content="近年完成的代表作品 — 品牌、網頁、印刷，每一個都從頭到尾親手完成。">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='8' fill='%23e53935'/><text x='32' y='45' font-family='Arial,sans-serif' font-size='42' font-weight='bold' fill='white' text-anchor='middle'>S</text></svg>">
<link rel="stylesheet" href="style.css">
<title>Works — Studio Sample</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
"Noto Sans TC", system-ui, sans-serif;
background-color: #ffffff;
color: #333333;
line-height: 1.6;
}
/* ─── NAV ─────────────────────────────────────────────── */
nav {
position: sticky;
top: 0;
z-index: 100;
background: #ffffff;
border-bottom: 1px solid #eeeeee;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 clamp(16px, 5vw, 64px);
height: 56px;
}
.nav-logo {
font-size: 18px;
font-weight: 800;
letter-spacing: 0.12em;
color: #e53935;
text-transform: uppercase;
text-decoration: none;
}
.nav-links {
display: flex;
gap: clamp(16px, 3vw, 40px);
list-style: none;
}
.nav-links a {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555555;
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: #e53935; }
/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header {
padding: clamp(48px, 7vw, 88px) clamp(24px, 8vw, 96px) clamp(32px, 4vw, 48px);
background: #f7f7f7;
border-bottom: 1px solid #eeeeee;
}
.page-header-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #e53935;
margin-bottom: 12px;
}
.page-header-title {
font-size: clamp(32px, 5vw, 64px);
font-weight: 800;
letter-spacing: -0.02em;
color: #111111;
line-height: 1.1;
margin-bottom: 16px;
}
.page-header-lead {
font-size: clamp(14px, 1.5vw, 17px);
color: #666666;
max-width: 38em;
}
/* ─── FILTER BAR ──────────────────────────────────────── */
.filter-bar {
padding: 20px clamp(24px, 8vw, 96px);
border-bottom: 1px solid #eeeeee;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-btn {
padding: 6px 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid #dddddd;
background: transparent;
color: #666666;
cursor: pointer;
transition: all 0.2s;
}
.filter-btn:hover,
.filter-btn.active {
border-color: #e53935;
color: #e53935;
}
/* ─── WORKS GRID ──────────────────────────────────────── */
.works-section {
padding: clamp(40px, 6vw, 72px) clamp(24px, 8vw, 96px);
}
.works-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 32px;
}
.work-card {
background: #ffffff;
border: 1px solid #eeeeee;
overflow: hidden;
transition: box-shadow 0.2s;
}
.work-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.work-thumb {
width: 100%;
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 900;
letter-spacing: -0.02em;
}
.work-thumb.red { background: #fde8e8; color: #e53935; }
.work-thumb.dark { background: #222222; color: #444444; }
.work-thumb.gray { background: #e8e8e8; color: #bbbbbb; }
.work-thumb.cream { background: #f5f0e8; color: #c8b89a; }
.work-thumb.navy { background: #1a2640; color: #2e4070; }
.work-thumb.sage { background: #e4ece4; color: #8aaa8a; }
.work-thumb.black { background: #111111; color: #333333; }
.work-thumb.blush { background: #fde8f0; color: #e07898; }
.work-body {
padding: 24px 28px;
}
.work-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.work-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #e53935;
}
.work-year {
font-size: 11px;
color: #aaaaaa;
letter-spacing: 0.05em;
}
.work-title {
font-size: clamp(16px, 1.7vw, 20px);
font-weight: 800;
color: #111111;
margin-bottom: 8px;
line-height: 1.3;
}
.work-desc {
font-size: 13px;
color: #777777;
line-height: 1.7;
margin-bottom: 16px;
}
.work-scope {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.scope-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
padding: 3px 10px;
border: 1px solid #eeeeee;
color: #888888;
}
/* ─── FEATURED (wide) ─────────────────────────────────── */
.work-card.featured {
grid-column: span 2;
}
.work-card.featured .work-thumb {
aspect-ratio: 21/9;
}
@media (max-width: 720px) {
.work-card.featured { grid-column: span 1; }
.work-card.featured .work-thumb { aspect-ratio: 16/9; }
}
/* ─── CTA STRIP ───────────────────────────────────────── */
.cta-strip {
background: #111111;
padding: clamp(40px, 6vw, 72px) clamp(24px, 8vw, 96px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.cta-strip-text h2 {
font-size: clamp(22px, 3vw, 36px);
font-weight: 800;
color: #ffffff;
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.cta-strip-text p {
font-size: clamp(13px, 1.3vw, 15px);
color: #888888;
}
.btn {
display: inline-block;
padding: 14px 32px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #e53935;
transition: background 0.2s, color 0.2s;
}
.btn-primary { background: #e53935; color: #ffffff; }
.btn-primary:hover { background: #c62828; border-color: #c62828; }
/* ─── FOOTER ──────────────────────────────────────────── */
footer {
background: #111111;
padding: 32px clamp(24px, 8vw, 96px);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
border-top: 1px solid #1e1e1e;
}
.footer-logo {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.12em;
color: #e53935;
text-transform: uppercase;
}
.footer-nav {
display: flex;
gap: clamp(16px, 3vw, 32px);
list-style: none;
}
.footer-nav a {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555555;
text-decoration: none;
transition: color 0.2s;
}
.footer-nav a:hover { color: #e53935; }
.footer-copy {
font-size: 12px;
color: #555555;
letter-spacing: 0.05em;
}
</style>
</head>
<body>
<!-- ─── NAV ─────────────────────────────────────────────── -->
<nav>
<a class="nav-logo" href="index.html">Studio Sample</a>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<label class="nav-burger" for="nav-toggle" aria-label="開啟選單">☰</label>
<ul class="nav-links">
<li><a href="services.html">Services</a></li>
<li><a href="works.html" class="active">Works</a></li>
@@ -340,11 +42,11 @@
<!-- ─── FILTER BAR ─────────────────────────────────────────── -->
<div class="filter-bar">
<button class="filter-btn active">All</button>
<button class="filter-btn">Branding</button>
<button class="filter-btn">Web</button>
<button class="filter-btn">Print</button>
<button class="filter-btn">Identity</button>
<button class="filter-btn active" data-cat="all">All</button>
<button class="filter-btn" data-cat="branding">Branding</button>
<button class="filter-btn" data-cat="web">Web</button>
<button class="filter-btn" data-cat="print">Print</button>
<button class="filter-btn" data-cat="identity">Identity</button>
</div>
<!-- ─── WORKS ─────────────────────────────────────────────── -->
@@ -352,7 +54,7 @@
<div class="works-grid">
<!-- Featured -->
<div class="work-card featured">
<div class="work-card featured" data-cat="web">
<div class="work-thumb dark">ARCH</div>
<div class="work-body">
<div class="work-meta">
@@ -374,7 +76,7 @@
</div>
<!-- Card 2 -->
<div class="work-card">
<div class="work-card" data-cat="branding identity">
<div class="work-thumb red">BRAND</div>
<div class="work-body">
<div class="work-meta">
@@ -394,7 +96,7 @@
</div>
<!-- Card 3 -->
<div class="work-card">
<div class="work-card" data-cat="print">
<div class="work-thumb gray">PRINT</div>
<div class="work-body">
<div class="work-meta">
@@ -414,14 +116,14 @@
</div>
<!-- Card 4 -->
<div class="work-card">
<div class="work-card" data-cat="print identity">
<div class="work-thumb cream">MENU</div>
<div class="work-body">
<div class="work-meta">
<p class="work-tag">Print / Identity</p>
<p class="work-year">2025</p>
</div>
<h3 class="work-title">Koto Bistro — Menu & Collateral</h3>
<h3 class="work-title">Koto Bistro — Menu &amp; Collateral</h3>
<p class="work-desc">
京都一家法式和食餐廳的菜單、名片與包裝設計。以奶油色基底搭配極細襯線字體，呈現細膩的高級感。
</p>
@@ -434,7 +136,7 @@
</div>
<!-- Card 5 -->
<div class="work-card">
<div class="work-card" data-cat="web">
<div class="work-thumb navy">CORP</div>
<div class="work-body">
<div class="work-meta">
@@ -454,7 +156,7 @@
</div>
<!-- Card 6 -->
<div class="work-card">
<div class="work-card" data-cat="branding">
<div class="work-thumb sage">HERB</div>
<div class="work-body">
<div class="work-meta">
@@ -474,7 +176,7 @@
</div>
<!-- Card 7 -->
<div class="work-card">
<div class="work-card" data-cat="identity print">
<div class="work-thumb black">TYPE</div>
<div class="work-body">
<div class="work-meta">
@@ -494,7 +196,7 @@
</div>
<!-- Card 8 -->
<div class="work-card">
<div class="work-card" data-cat="web">
<div class="work-thumb blush">SHOP</div>
<div class="work-body">
<div class="work-meta">
@@ -531,19 +233,25 @@
<ul class="footer-nav">
<li><a href="services.html">Services</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
<div class="footer-copy">© 2026 Studio Sample. All rights reserved.</div>
</footer>
<script>
// Simple filter interaction (no framework needed)
// 依類別篩選作品（無框架）。卡片以 data-cat 標記，可同時屬於多個類別。
const btns = document.querySelectorAll('.filter-btn');
const cards = document.querySelectorAll('.work-card');
btns.forEach(btn => {
btn.addEventListener('click', () => {
btns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const cat = btn.dataset.cat;
cards.forEach(card => {
const show = cat === 'all' || card.dataset.cat.split(' ').includes(cat);
card.style.display = show ? '' : 'none';
});
});
});
</script>