STYLE: expand member spacing and adopt dynamic gallery grid

hyeondo-jang · hyeondo-jang · commit 8567e5fae97a · 2026-03-25T00:08:19.000+09:00
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -1,6 +1,10 @@
-# CLAUDE.md — Lee Optimization Group Homepage
+# CLAUDE.md
 
-This is a static HTML/CSS academic lab website for the **Lee Optimization Group (LOG)** at POSTECH.
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Overview
+
+This is a static HTML/CSS academic lab website for the **Lee Optimization Group (LOG)** at POSTECH, deployed via GitHub Pages at `opt.postech.ac.kr`. There is no build step — edit HTML files directly and push to deploy.
 
 ## Pages
 
@@ -14,6 +18,18 @@ This is a static HTML/CSS academic lab website for the **Lee Optimization Group
 | `contact.html` | Contact info |
 | `gallery.html` | Lab photos |
 
+## Architecture
+
+**CSS is inline per-page** — each HTML file contains a full `<style>` block in `<head>`. There is no shared stylesheet. When making a visual change that must apply site-wide (e.g., changing a font size or color), you must update every page's `<style>` block individually.
+
+**Asset directories:**
+- `logo/` — sponsor and collaborator logos (PNG/SVG); referenced in `index.html` and `research.html`
+- `research_focus/` — thumbnail images for research area cards in `research.html`
+- `stories/` — gallery photos for `gallery.html` (year-prefixed filenames, e.g., `25_iclr.jpeg`)
+- `group_profile/` — member headshots for `group.html` (filename = person's name slug)
+
+**Scratch files** (not published pages, do not modify unless explicitly asked): `index_v1.html`, `design_demo.html`, `font_compare.html`
+
 ## Design Conventions (must be preserved)
 
 - **Background**: `#FAF8F5` (warm off-white)
@@ -47,6 +63,8 @@ When adding or modifying any page, verify all of the following:
 - [ ] **Lab name font size is fixed at `2.3em`** — do not use `clamp()` with a viewport unit for `.lab-name`, and do not override it in media queries
 - [ ] **Body text is unified at `0.93em`** across all pages — `p`, `.intro`, and equivalent paragraph elements must use `0.93em`, matching `index.html`
 - [ ] **Logo card containers use `flex-wrap: wrap`** so logos reflow to multiple rows on narrow screens instead of shrinking — do not set `flex-wrap: nowrap` or force images to scale down inside logo cards (`.sponsor-logos`, `.collab-logos`)
+- [ ] **Members grid keeps fixed avatar size** — member photos must not shrink on small screens; reduce the number of columns instead (`4 → 3 → 2 → 1`) and keep visible spacing between cards
+- [ ] **Gallery page uses dynamic grid** — `.gallery-grid` should use `repeat(auto-fit, minmax(..., 1fr))` with consistent `gap`, so tile count adapts smoothly to viewport width
 
 ### Content
 - [ ] External links open in a new tab (`target="_blank"`) and have `rel="noopener"`
diff --git a/gallery.html b/gallery.html
@@ -103,8 +103,8 @@
         /* Gallery grid */
         .gallery-grid {
             display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 4px;
+            grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
+            gap: 8px;
         }
 
         .gallery-item {
diff --git a/group.html b/group.html
@@ -131,7 +131,7 @@
             display: grid;
             grid-template-columns: repeat(4, 140px);
             justify-content: center;
-            gap: 28px 28px;
+            gap: 34px 34px;
         }
 
         .member-item {

Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,7 @@`
`131`	`131`	`display: grid;`
`132`	`132`	`grid-template-columns: repeat(4, 140px);`
`133`	`133`	`justify-content: center;`
`134`		`- gap: 28px 28px;`
	`134`	`+ gap: 34px 34px;`
`135`	`135`	`}`
`136`	`136`
`137`	`137`	`.member-item {`