From 1f01907f875981a5931085a15e75d8ffad218a4a Mon Sep 17 00:00:00 2001 From: gnaroshi Date: Sun, 19 Jul 2026 13:21:22 +0900 Subject: [PATCH 1/4] feat: add purposeful native motion --- src/components/LanguageSwitcher.astro | 1 + src/components/SiteHeader.astro | 1 + src/layouts/BaseLayout.astro | 10 +- src/styles/motion.css | 153 ++++++++++++++++++++++++++ src/styles/navigation.css | 46 +++++++- src/styles/tokens.css | 7 +- 6 files changed, 210 insertions(+), 8 deletions(-) create mode 100644 src/styles/motion.css diff --git a/src/components/LanguageSwitcher.astro b/src/components/LanguageSwitcher.astro index eaa0f71..7ebd0db 100644 --- a/src/components/LanguageSwitcher.astro +++ b/src/components/LanguageSwitcher.astro @@ -49,6 +49,7 @@ const noticeId = `translation-status-${mobile ? "mobile" : "desktop"}`; window.addEventListener("popstate", updateTarget); link.addEventListener("click", () => { updateTarget(); + document.getElementById("cross-document-view-transition")?.remove(); try { window.localStorage.setItem("locale", link.lang.startsWith("ko") ? "ko" : "en"); } catch {} }); } diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro index c9b9f0c..2c207af 100644 --- a/src/components/SiteHeader.astro +++ b/src/components/SiteHeader.astro @@ -26,4 +26,5 @@ const navigationSignature = getPrimaryNavigation(locale) + diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index dcbb4c3..c9f28e1 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -2,6 +2,7 @@ import "../styles/tokens.css"; import "../styles/global.css"; import "../styles/navigation.css"; +import "../styles/motion.css"; import SEO from "../components/SEO.astro"; import SiteFooter from "../components/SiteFooter.astro"; import SiteHeader from "../components/SiteHeader.astro"; @@ -39,6 +40,7 @@ interface Props { articleTags?: string[]; author?: string; minimalChrome?: boolean; + pageProgress?: boolean; } const { @@ -66,7 +68,8 @@ const { modifiedTime, articleTags, author, - minimalChrome = false + minimalChrome = false, + pageProgress = false } = Astro.props; const rssPath = getLocalePath(locale, "/rss.xml"); const contentFeedBuildInfo = getContentFeedBuildInfo(); @@ -110,6 +113,9 @@ const websiteBuildInfo = getWebsiteBuildInfo(); author={author} /> + - + {!minimalChrome && } {!minimalChrome && paperLab && } diff --git a/src/styles/motion.css b/src/styles/motion.css new file mode 100644 index 0000000..0e14d6a --- /dev/null +++ b/src/styles/motion.css @@ -0,0 +1,153 @@ +/* + * Motion explains navigation, progress, and available actions. Everything in + * this file is progressive enhancement; the site remains complete without it. + */ + +::view-transition-old(page-content) { + animation: site-page-out var(--duration-state) var(--ease-standard) both; +} + +::view-transition-new(page-content) { + animation: site-page-in var(--duration-page) var(--ease-emphasized) both; +} + +.site-main { + view-transition-name: page-content; +} + +@keyframes site-page-out { + to { + opacity: 0; + transform: translateY(-4px); + } +} + +@keyframes site-page-in { + from { + opacity: 0; + transform: translateY(6px); + } +} + +.site-header__progress { + position: absolute; + right: 0; + bottom: calc(var(--pixel-border) * -1); + left: 0; + display: none; + height: var(--pixel-border); + transform: scaleX(0); + transform-origin: left center; + background: var(--color-identity-teal); + box-shadow: 3px 0 0 var(--color-identity-orange); + pointer-events: none; +} + +body[data-page-progress="true"] .site-header__progress { + display: block; +} + +@supports (animation-timeline: scroll()) { + body[data-page-progress="true"] .site-header__progress { + animation: site-reading-progress 1ms linear both; + animation-timeline: scroll(root block); + } + + @keyframes site-reading-progress { + to { + transform: scaleX(1); + } + } +} + +.button, +[data-motion-media] img, +[data-motion-surface] { + transition: + border-color var(--duration-state) var(--ease-standard), + box-shadow var(--duration-state) var(--ease-standard), + color var(--duration-state) var(--ease-standard), + background-color var(--duration-state) var(--ease-standard), + transform var(--duration-state) var(--ease-emphasized); +} + +.button:hover { + transform: translate(-1px, -1px); +} + +.button:active { + transform: translate(0, 0); + box-shadow: none; +} + +[data-motion-media] { + isolation: isolate; +} + +[data-motion-media] img { + transform: scale(1); +} + +[data-motion-media]:where(:hover, :focus-visible) img { + transform: scale(1.018); +} + +.mobile-nav__panel:not([hidden]) { + opacity: 1; + transform: translateY(0); + transition: + opacity var(--duration-state) var(--ease-standard), + transform var(--duration-page) var(--ease-emphasized); +} + +@starting-style { + .mobile-nav__panel:not([hidden]) { + opacity: 0; + transform: translateY(-8px); + } + + .media-zoom__dialog[open] { + opacity: 0; + transform: translateY(8px) scale(.99); + } + + .media-zoom__dialog[open]::backdrop { + opacity: 0; + } +} + +.media-zoom__dialog[open] { + opacity: 1; + transform: translateY(0) scale(1); + transition: + opacity var(--duration-state) var(--ease-standard), + transform var(--duration-page) var(--ease-emphasized); +} + +.media-zoom__dialog[open]::backdrop { + opacity: 1; + transition: opacity var(--duration-state) var(--ease-standard); +} + +@media (prefers-reduced-motion: reduce) { + ::view-transition-group(*), + ::view-transition-old(*), + ::view-transition-new(*) { + animation-duration: .001ms; + } + + .site-header__progress, + .button, + [data-motion-media] img, + [data-motion-surface], + .mobile-nav__panel, + .media-zoom__dialog, + .media-zoom__dialog::backdrop { + animation: none; + transition: none; + } + + [data-motion-media]:where(:hover, :focus-visible) img { + transform: none; + } +} diff --git a/src/styles/navigation.css b/src/styles/navigation.css index a21fb31..1093c1e 100644 --- a/src/styles/navigation.css +++ b/src/styles/navigation.css @@ -25,6 +25,7 @@ color: var(--color-text); text-decoration: none; white-space: nowrap; + view-transition-name: site-brand; } .site-header__mark { @@ -64,6 +65,7 @@ .desktop-nav > span, .utility-nav > a, .utility-nav > span { + position: relative; display: inline-grid; min-height: 36px; align-items: center; @@ -74,6 +76,22 @@ white-space: nowrap; } +.desktop-nav a::after, +.desktop-nav > span::after, +.utility-nav > a::after, +.utility-nav > span::after { + position: absolute; + right: 0; + bottom: 2px; + left: 0; + height: 2px; + transform: scaleX(0); + transform-origin: center; + background: var(--color-accent); + content: ""; + transition: transform var(--duration-state) var(--ease-emphasized); +} + .desktop-nav a:hover, .desktop-nav > span[aria-current="page"], .utility-nav > a:hover, @@ -81,9 +99,14 @@ color: var(--color-accent); } -.desktop-nav a[aria-current="page"], -.utility-nav > a[aria-current="page"] { - box-shadow: inset 0 -2px 0 var(--color-accent); +.desktop-nav a:hover::after, +.utility-nav > a:hover::after { + transform: scaleX(.55); +} + +.desktop-nav > span[aria-current="page"]::after, +.utility-nav > span[aria-current="page"]::after { + transform: scaleX(1); } .language-switcher { @@ -226,13 +249,24 @@ display: flex; min-height: 52px; align-items: center; + padding-inline: var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text); font-weight: 700; text-decoration: none; } -.mobile-nav__panel nav > span[aria-current="page"] { color: var(--color-accent); } +.mobile-nav__panel a:hover, +.mobile-nav__panel a:focus-visible { + background: var(--color-surface-muted); + color: var(--color-accent); +} + +.mobile-nav__panel nav > span[aria-current="page"] { + background: var(--color-accent-soft); + color: var(--color-accent); + box-shadow: inset 3px 0 0 var(--color-identity-orange); +} body.mobile-nav-open { overflow: hidden; } .paper-lab-nav { @@ -336,4 +370,8 @@ body.mobile-nav-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .theme-toggle__icon { transition: none; } + .desktop-nav a::after, + .desktop-nav > span::after, + .utility-nav > a::after, + .utility-nav > span::after { transition: none; } } diff --git a/src/styles/tokens.css b/src/styles/tokens.css index dd4d2ce..51fa9da 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -11,7 +11,7 @@ --color-surface-quiet: var(--color-surface-muted); --color-text: #18201c; --color-text-secondary: #3f4943; - --color-text-muted: #657169; + --color-text-muted: #5f6b63; --color-border: #d5dbd4; --color-border-strong: #aab5ac; --color-accent: #126954; @@ -99,8 +99,11 @@ --shadow-md: 4px 4px 0 rgb(24 32 28 / 18%); --duration-fast: 140ms; --duration-state: 180ms; + --duration-page: 240ms; + --ease-standard: cubic-bezier(.2, .75, .25, 1); + --ease-emphasized: cubic-bezier(.2, .9, .2, 1); --project-research-accent: #486f96; - --project-application-accent: #78679a; + --project-application-accent: #725f95; --project-infrastructure-accent: #7b6a2e; --gutter: 16px; From e084266e6a259de8da8ca61191a73da6664babd1 Mon Sep 17 00:00:00 2001 From: gnaroshi Date: Sun, 19 Jul 2026 13:21:44 +0900 Subject: [PATCH 2/4] refactor: clarify editorial navigation hierarchy --- src/components/InPageAnchorBehavior.astro | 136 +++++++++++++++--- .../projects/FeaturedApplicationCard.astro | 3 +- .../projects/SupportingApplicationCard.astro | 2 +- src/data/locales/en.ts | 3 + src/data/locales/ko.ts | 3 + src/data/locales/types.ts | 1 + src/styles/home.css | 22 ++- src/styles/projects.css | 95 ++++++++++-- src/views/BlogIndexView.astro | 5 +- src/views/HomeView.astro | 4 +- src/views/ProjectsView.astro | 28 ++-- src/views/ResearchView.astro | 71 ++++++--- 12 files changed, 297 insertions(+), 76 deletions(-) diff --git a/src/components/InPageAnchorBehavior.astro b/src/components/InPageAnchorBehavior.astro index e820e8f..866d504 100644 --- a/src/components/InPageAnchorBehavior.astro +++ b/src/components/InPageAnchorBehavior.astro @@ -14,6 +14,49 @@ } } + function revealCurrentInScroller(current: HTMLElement | null): void { + const scroller = current?.closest("[data-in-page-scroller]"); + const overflows = Boolean(scroller && scroller.scrollWidth > scroller.clientWidth + 1); + scroller?.toggleAttribute("data-overflow", overflows); + if (!current || !scroller || !overflows) return; + const links = [...scroller.querySelectorAll("a[href]")]; + const index = links.indexOf(current); + const currentRect = current.getBoundingClientRect(); + const scrollerRect = scroller.getBoundingClientRect(); + const currentLeft = scroller.scrollLeft + currentRect.left - scrollerRect.left; + const centeredLeft = currentLeft - (scroller.clientWidth - currentRect.width) / 2; + const maximumLeft = scroller.scrollWidth - scroller.clientWidth; + const isBoundaryItem = index <= 0 || index === links.length - 1; + const left = index <= 0 + ? 0 + : index === links.length - 1 + ? maximumLeft + : Math.min(maximumLeft, Math.max(0, centeredLeft)); + requestAnimationFrame(() => scroller.scrollTo({ + left, + behavior: reducedMotion.matches || isBoundaryItem ? "auto" : "smooth" + })); + } + + function setNavigationCurrent(navigation: HTMLElement, locationCurrent: HTMLElement | null): void { + for (const link of navigation.querySelectorAll("[data-in-page-link]")) { + if (link === locationCurrent) link.setAttribute("aria-current", "location"); + else if (link.getAttribute("aria-current") === "location") link.removeAttribute("aria-current"); + } + + const routeCurrent = navigation.querySelector("[data-paper-nav-route-current]"); + if (routeCurrent) { + if (locationCurrent) routeCurrent.removeAttribute("aria-current"); + else routeCurrent.setAttribute("aria-current", "page"); + } + + const current = locationCurrent ?? routeCurrent; + if (navigation.dataset.visibleCurrent !== current?.getAttribute("href")) { + navigation.dataset.visibleCurrent = current?.getAttribute("href") ?? ""; + revealCurrentInScroller(current); + } + } + function updateCurrentAnchor(): void { for (const navigation of document.querySelectorAll("[data-in-page-navigation]")) { let locationCurrent: HTMLElement | null = null; @@ -22,33 +65,62 @@ const isCurrent = normalizedPath(url.pathname) === normalizedPath(window.location.pathname) && url.hash === window.location.hash; if (isCurrent && url.hash) { - link.setAttribute("aria-current", "location"); locationCurrent = link; - } else if (link.getAttribute("aria-current") === "location") { - link.removeAttribute("aria-current"); } } + setNavigationCurrent(navigation, locationCurrent); + } + } - const routeCurrent = navigation.querySelector("[data-paper-nav-route-current]"); - if (routeCurrent) { - if (locationCurrent) routeCurrent.removeAttribute("aria-current"); - else routeCurrent.setAttribute("aria-current", "page"); + function updateScrollSpy(): void { + for (const navigation of document.querySelectorAll("[data-in-page-navigation][data-scroll-spy]")) { + const links = [...navigation.querySelectorAll("[data-in-page-link]")]; + const pairs = links.flatMap((link) => { + const url = new URL(link.href, window.location.href); + const target = normalizedPath(url.pathname) === normalizedPath(window.location.pathname) + ? targetForHash(url.hash) + : null; + return target ? [{ link, target }] : []; + }); + if (pairs.length === 0) continue; + + const focusedHashPair = pairs.find((pair) => ( + `#${encodeURIComponent(pair.target.id)}` === window.location.hash + || `#${pair.target.id}` === window.location.hash + ) && document.activeElement === pair.target); + if (focusedHashPair) { + setNavigationCurrent(navigation, focusedHashPair.link); + continue; } - const current = locationCurrent ?? routeCurrent; - const scroller = current?.closest("[data-in-page-scroller]"); - const overflows = Boolean(scroller && scroller.scrollWidth > scroller.clientWidth + 1); - scroller?.toggleAttribute("data-overflow", overflows); - if (current && scroller && overflows) { - const left = current.offsetLeft - (scroller.clientWidth - current.offsetWidth) / 2; - requestAnimationFrame(() => scroller.scrollTo({ - left: Math.max(0, left), - behavior: reducedMotion.matches ? "auto" : "smooth" - })); + const headerBottom = document.querySelector(".site-header")?.getBoundingClientRect().bottom ?? 0; + const navigationBottom = navigation.getBoundingClientRect().bottom; + const activationLine = Math.max(headerBottom, navigationBottom) + 12; + let current = pairs[0]!; + let currentTop = Number.NEGATIVE_INFINITY; + for (const pair of pairs) { + const top = pair.target.getBoundingClientRect().top; + if (top <= activationLine && top > currentTop + 1) { + current = pair; + currentTop = top; + } + else break; } + const atDocumentEnd = window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2; + if (atDocumentEnd) current = pairs.at(-1)!; + setNavigationCurrent(navigation, current.link); } } + let scrollFrame = 0; + function scheduleScrollSpy(): void { + if (scrollFrame) return; + scrollFrame = requestAnimationFrame(() => { + scrollFrame = 0; + updateScrollSpy(); + }); + } + function exposeTarget(hash: string, moveFocus = true): boolean { const target = targetForHash(hash); if (!target) return false; @@ -62,10 +134,20 @@ } document.addEventListener("click", (event) => { - const link = (event.target as Element | null)?.closest("a[href*='#']"); + const link = (event.target as Element | null)?.closest("a[href]"); if (!link || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; const url = new URL(link.href, window.location.href); - if (url.origin !== window.location.origin || normalizedPath(url.pathname) !== normalizedPath(window.location.pathname) || !url.hash) return; + if (url.origin !== window.location.origin || normalizedPath(url.pathname) !== normalizedPath(window.location.pathname)) return; + if (!url.hash && window.location.hash && link.matches("[data-paper-nav-route-current]")) { + event.preventDefault(); + history.pushState(null, "", `${url.pathname}${url.search}`); + window.dispatchEvent(new Event("gnaroshi:locationchange")); + window.scrollTo({ top: 0, behavior: reducedMotion.matches ? "auto" : "smooth" }); + link.focus({ preventScroll: true }); + updateCurrentAnchor(); + return; + } + if (!url.hash) return; if (!targetForHash(url.hash)) return; event.preventDefault(); if (window.location.hash !== url.hash) { @@ -78,12 +160,22 @@ window.addEventListener("hashchange", () => exposeTarget(window.location.hash)); window.addEventListener("popstate", () => { if (window.location.hash) exposeTarget(window.location.hash); - else updateCurrentAnchor(); + else { + updateCurrentAnchor(); + scheduleScrollSpy(); + } + }); + window.addEventListener("scroll", scheduleScrollSpy, { passive: true }); + window.addEventListener("resize", () => { + updateCurrentAnchor(); + scheduleScrollSpy(); }); - window.addEventListener("resize", updateCurrentAnchor); requestAnimationFrame(() => { if (window.location.hash) exposeTarget(window.location.hash); - else updateCurrentAnchor(); + else { + updateCurrentAnchor(); + scheduleScrollSpy(); + } }); diff --git a/src/components/projects/FeaturedApplicationCard.astro b/src/components/projects/FeaturedApplicationCard.astro index c0c625b..8c0fa19 100644 --- a/src/components/projects/FeaturedApplicationCard.astro +++ b/src/components/projects/FeaturedApplicationCard.astro @@ -26,10 +26,11 @@ const { project, story, media, locale, href, stackLabel, lead = false } = Astro. class:list={["featured-app", lead && "featured-app--lead", !lead && "featured-app--paired"]} data-project-id={project.id} data-project-kind={project.kind} + data-motion-surface style={`--source-media-ratio:${media.width}/${media.height}`} >
- +
{media.caption[locale]}{media.demoDisclosure[locale]}
diff --git a/src/components/projects/SupportingApplicationCard.astro b/src/components/projects/SupportingApplicationCard.astro index c17343c..9946e84 100644 --- a/src/components/projects/SupportingApplicationCard.astro +++ b/src/components/projects/SupportingApplicationCard.astro @@ -20,7 +20,7 @@ interface Props { const { project, story, locale, href, groupLabel, stackLabel, platformsLabel } = Astro.props; --- -
+

{groupLabel}

{productStatusLabels[locale][project.productStatus]}

diff --git a/src/data/locales/en.ts b/src/data/locales/en.ts index cc2c0d8..9ceca15 100644 --- a/src/data/locales/en.ts +++ b/src/data/locales/en.ts @@ -118,6 +118,7 @@ export const enCopy = { }, researchAreas: { "practical-vla-systems": { + shortTitle: "Comparable VLA experiments", question: "What kind of experiment structure makes different VLA models comparable on common ground?", motivation: "Different VLA repositories organize models, environments, and results in different ways. That makes the same experiment difficult to run and inspect across models.", hypothesis: "I’m testing whether a shared run structure can make comparisons clearer while small adapters keep model-specific behavior visible.", @@ -125,6 +126,7 @@ export const enCopy = { relatedLabels: ["gnaroshi_vla"] }, "efficient-model-execution": { + shortTitle: "Efficient model execution", question: "How can computation be reduced without hiding changes in model behavior?", motivation: "Saving computation matters only when the resulting behavior can still be checked. Reused state and approximations need clear boundaries.", hypothesis: "I’m looking at explicit reuse and update paths that can be measured across experiments.", @@ -132,6 +134,7 @@ export const enCopy = { relatedLabels: ["Experiment setup"] }, "human-ai-research-tools": { + shortTitle: "Research judgment with AI", question: "How can AI tools support research without replacing the researcher’s judgment?", motivation: "Generated summaries and scores can save time, but they can also hide uncertainty. The original question and the researcher’s own check still need to remain visible.", hypothesis: "I’m exploring tools that help organize notes, suggest questions, and make revisiting easier without deciding what is true on the researcher’s behalf.", diff --git a/src/data/locales/ko.ts b/src/data/locales/ko.ts index 294148e..b25a7f8 100644 --- a/src/data/locales/ko.ts +++ b/src/data/locales/ko.ts @@ -119,6 +119,7 @@ export const koCopy = { }, researchAreas: { "practical-vla-systems": { + shortTitle: "비교 가능한 VLA 실험", question: "서로 다른 VLA 모델을 같은 기준에서 비교하려면 어떤 실험 구조가 필요할까?", motivation: "VLA 저장소마다 모델과 환경, 결과를 정리하는 방식이 다릅니다. 같은 실험을 여러 모델에서 실행하고 살펴보기 어려운 이유입니다.", hypothesis: "공통 실행 구조를 두고 작은 어댑터로 모델별 동작을 분리하면 비교 과정을 더 분명하게 만들 수 있는지 확인하고 있습니다.", @@ -126,6 +127,7 @@ export const koCopy = { relatedLabels: ["gnaroshi_vla"] }, "efficient-model-execution": { + shortTitle: "효율적인 모델 실행", question: "계산을 줄이면서도 모델의 동작이 달라지지 않았는지 어떻게 확인할 수 있을까?", motivation: "계산을 줄였더라도 동작이 어떻게 달라졌는지 확인할 수 있어야 합니다. 상태 재사용과 근사의 범위를 분명히 두는 일이 필요합니다.", hypothesis: "재사용하는 상태와 갱신 경로를 따로 기록하고 여러 실험에서 비교하는 방법을 살펴보고 있습니다.", @@ -133,6 +135,7 @@ export const koCopy = { relatedLabels: ["실험 환경"] }, "human-ai-research-tools": { + shortTitle: "AI 도구와 연구 판단", question: "AI 도구가 연구자의 판단을 대신하지 않으면서 어디까지 도움을 줄 수 있을까?", motivation: "요약과 점수는 시간을 줄여 주지만 모르는 부분을 가릴 수도 있습니다. 처음 던진 질문과 직접 확인한 내용이 함께 남아야 합니다.", hypothesis: "노트를 정리하고 다음 질문을 제안하며 다시 읽을 시점을 알려 주되, 무엇이 맞는지는 대신 결정하지 않는 도구를 살펴보고 있습니다.", diff --git a/src/data/locales/types.ts b/src/data/locales/types.ts index a174e15..333cfeb 100644 --- a/src/data/locales/types.ts +++ b/src/data/locales/types.ts @@ -12,6 +12,7 @@ export type LocalizedProfileCopy = { }; export type LocalizedResearchCopy = { + shortTitle: string; question: string; motivation: string; hypothesis: string; diff --git a/src/styles/home.css b/src/styles/home.css index 7c120ab..65f0e28 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -32,15 +32,23 @@ .home-section-heading { display: grid; gap: var(--space-2); } .home-section-heading h2 { font-size: var(--text-2xl); } .home-section-heading > p:not(.eyebrow) { max-width: 62ch; color: var(--color-text-secondary); line-height: 1.7; } -.home-research-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--color-border); } -.home-research-list li { border-bottom: 1px solid var(--color-border); } -.home-research-list a { display: block; padding: var(--space-4) 0; color: var(--color-text); font-weight: 700; text-decoration: none; } -.home-research-list a:hover { color: var(--color-accent); } +.home-research { border-top:0; } +.home-research-list { display:grid; gap:var(--space-2); padding:0; margin:0; list-style:none; } +.home-research-list a { position:relative; display:grid; min-height:64px; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-3); align-items:center; padding:var(--space-3) var(--space-4); background:var(--color-surface-muted); color:var(--color-text); text-decoration:none; box-shadow:inset 3px 0 0 var(--color-border-strong); } +.home-research-list a > span { color:var(--color-text-muted); font-family:var(--font-mono); font-size:var(--text-xs); } +.home-research-list a > strong { line-height:1.5; } +.home-research-list a::after { width:.5rem; height:.5rem; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); color:var(--color-text-muted); content:""; transition:transform var(--duration-state) var(--ease-emphasized); } +.home-research-list a:hover, +.home-research-list a:focus-visible { background:var(--color-accent-soft); color:var(--color-accent); box-shadow:inset 4px 0 0 var(--color-identity-orange); } +.home-research-list a:hover::after, +.home-research-list a:focus-visible::after { transform:translateX(3px) rotate(45deg); } +.home-selected { margin-inline:calc(var(--space-4) * -1); padding-inline:var(--space-4); border-top:0; background:var(--color-surface-muted); } .home-featured-project { display: grid; gap: var(--space-5); } .home-featured-project__figure { display:grid; gap:var(--space-2); min-width:0; margin:0; } .home-featured-project__media { display:block; aspect-ratio:16/10; overflow:hidden; border:var(--pixel-border) solid var(--color-border); background:var(--color-surface); box-shadow:var(--shadow-sm); } .home-featured-project__media .responsive-media { width:100%; height:100%; } .home-featured-project__media img { object-fit:contain; } +.home-featured-project__figure:focus-within .home-featured-project__media { border-color:var(--color-accent); box-shadow:var(--shadow-md); } .home-featured-project__figure figcaption { display:grid; gap:var(--space-1); color:var(--color-text-muted); font-size:var(--text-xs); line-height:1.5; } .home-featured-project__figure figcaption strong { color:var(--color-text-secondary); } .home-featured-project__copy { display: grid; gap: var(--space-4); align-content: center; } @@ -65,6 +73,12 @@ .home-notes__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); } } +@media (prefers-reduced-motion: reduce) { + .home-research-list a::after { transition:none; } + .home-research-list a:hover::after, + .home-research-list a:focus-visible::after { transform:rotate(45deg); } +} + @media (min-width: 1024px) { .identity-hero__copy { padding-inline:var(--space-8); } .home-featured-project { gap: var(--space-9); } diff --git a/src/styles/projects.css b/src/styles/projects.css index 769cab3..098fa7a 100644 --- a/src/styles/projects.css +++ b/src/styles/projects.css @@ -4,33 +4,72 @@ } .projects-overview { + position:sticky; + z-index:12; + top:var(--header-height); + min-width:0; + margin-inline:calc(var(--space-2) * -1); + padding:var(--space-2); + background:color-mix(in srgb,var(--color-bg) 94%,transparent); + box-shadow:0 10px 24px rgb(24 32 28 / 8%); + backdrop-filter:blur(12px); +} + +.projects-overview ol { + display:flex; + min-width:0; + gap:var(--space-2); + padding:0; + margin:0; + overflow-x:auto; + list-style:none; + scrollbar-color:var(--color-border-strong) transparent; + scrollbar-width:thin; +} + +.projects-overview li { display:flex; - flex-wrap:wrap; - gap:var(--space-2) var(--space-5); - padding-block:var(--space-4); - border-block:1px solid var(--color-border); + min-width:min(72vw,17rem); + flex:1 0 auto; } .projects-overview a { - display:inline-flex; - min-height:44px; + display:grid; + min-height:52px; + width:100%; + grid-template-columns:auto minmax(0,1fr); align-items:center; - border-bottom:2px solid transparent; + gap:var(--space-3); + padding:var(--space-2) var(--space-3); + background:var(--color-surface-muted); color:var(--color-text-secondary); font-size:var(--text-sm); font-weight:700; + line-height:1.35; text-decoration:none; } -.projects-overview a:hover { color:var(--color-accent); } -.projects-overview a[aria-current="location"] { border-bottom-color:var(--color-accent); color:var(--color-accent); } +.projects-overview a > span { + display:grid; + width:2rem; + height:2rem; + place-items:center; + background:var(--color-bg); + color:var(--color-text-muted); + font-family:var(--font-mono); + font-size:var(--text-xs); + box-shadow:inset 0 0 0 1px var(--color-border); +} + +.projects-overview a:hover { background:var(--color-surface-raised); color:var(--color-text); } +.projects-overview a[aria-current="location"] { background:var(--color-accent-soft); color:var(--color-accent); box-shadow:inset 4px 0 0 var(--color-identity-orange); } +.projects-overview a[aria-current="location"] > span { background:var(--color-accent); color:var(--color-bg); box-shadow:2px 2px 0 color-mix(in srgb,var(--color-identity-orange) 62%,transparent); } .project-section { display: grid; gap: var(--space-6); - padding-top: var(--space-6); - border-top: 1px solid var(--color-border); - scroll-margin-top:calc(var(--header-height) + var(--space-5)); + padding-block:var(--space-9); + scroll-margin-top:calc(var(--header-height) + 76px); } .project-section:focus { @@ -42,8 +81,14 @@ display: grid; gap: var(--space-3); max-width: 72ch; + padding-inline-start:var(--space-4); + border-inline-start:4px solid var(--project-section-key,var(--color-identity-teal)); } +.project-section--selected { --project-section-key:var(--project-research-accent); } +.project-section--featured { --project-section-key:var(--color-identity-teal); } +.project-section--supporting { --project-section-key:var(--color-identity-orange); } + .section-heading > p:not(.eyebrow) { color: var(--color-text-secondary); line-height: 1.7; @@ -95,6 +140,12 @@ box-shadow: var(--shadow-sm); } +.selected-project:focus-within .selected-project__media, +.featured-app:focus-within .featured-app__media { + border-color:var(--app-key,var(--color-accent)); + box-shadow:var(--shadow-md); +} + .selected-project__media { aspect-ratio: var(--source-media-ratio); } @@ -125,8 +176,8 @@ .featured-app__copy, .supporting-app { - padding-top: var(--space-4); - border-top: var(--pixel-border) solid var(--app-key, var(--color-border)); + padding-inline-start:var(--space-4); + box-shadow:inset 3px 0 0 var(--app-key,var(--color-border-strong)); } .selected-project__copy > p:not(.project-meta), @@ -161,7 +212,14 @@ } .supporting-app { - padding-block: var(--space-5); + padding:var(--space-5); + background:var(--color-surface-muted); +} + +.supporting-app:where(:hover, :focus-within) { + background:var(--color-surface-raised); + box-shadow:inset 4px 0 0 var(--app-key,var(--color-accent)),var(--shadow-sm); + transform:translateY(-2px); } .platform-list { @@ -174,6 +232,8 @@ } @media (min-width: 700px) and (max-width: 1099px) { + .projects-overview li { min-width:0; } + .supporting-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -212,6 +272,11 @@ } } +@media (prefers-reduced-motion: reduce) { + .projects-overview { backdrop-filter:none; } + .supporting-app:where(:hover, :focus-within) { transform:none; } +} + @media (min-width: 1100px) { .featured-app-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); diff --git a/src/views/BlogIndexView.astro b/src/views/BlogIndexView.astro index c0c9ee1..df7cd47 100644 --- a/src/views/BlogIndexView.astro +++ b/src/views/BlogIndexView.astro @@ -43,7 +43,7 @@ const tagLabels = Object.fromEntries(tags.map((tag) => [tag, getLocalizedTagLabe }} /> -
+

{translate(locale, "writing.all")}

{showArchive && {translate(locale, "writing.archive")}}
{posts.length === 0 ?

{translate(locale, "writing.noPosts")}

{translate(locale, "writing.emptyAction")}
: !showDiscovery ?
    {posts.map((post) => { const minutes = Number.parseInt(getPostReadingTime(post), 10) || 1; return
  1. {translate(locale, "writing.readingTime", { count: minutes })}{post.data.featured && {translate(locale, "writing.selected")}}

    {post.data.title}

    {post.data.description}

    {post.data.tags.map((tag) => {getLocalizedTagLabel(tag, locale)})}
    2. ; })}
: null}
@@ -54,6 +54,9 @@ const tagLabels = Object.fromEntries(tags.map((tag) => [tag, getLocalizedTagLabe From 69622f02c1aab87fbe8b869e89a3b4a9d57e0750 Mon Sep 17 00:00:00 2001 From: gnaroshi Date: Sun, 19 Jul 2026 13:22:01 +0900 Subject: [PATCH 3/4] refactor: clarify project detail flow --- src/components/projects/ProjectScenario.astro | 8 ++++--- .../projects/ProjectSectionNavigation.astro | 23 ++++++++++++------- src/styles/project-detail.css | 8 ++++--- src/views/ProjectDetailView.astro | 2 +- 4 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/components/projects/ProjectScenario.astro b/src/components/projects/ProjectScenario.astro index 0427228..ef4f074 100644 --- a/src/components/projects/ProjectScenario.astro +++ b/src/components/projects/ProjectScenario.astro @@ -19,12 +19,14 @@ const mediaByStep = new Map(media.map((asset) => [asset.stepId, asset])); {!withMedia &&

{scenario.demoDisclosure}

}
diff --git a/src/components/projects/ProjectSectionNavigation.astro b/src/components/projects/ProjectSectionNavigation.astro index c1f46ba..86d906c 100644 --- a/src/components/projects/ProjectSectionNavigation.astro +++ b/src/components/projects/ProjectSectionNavigation.astro @@ -26,15 +26,22 @@ const entries = locale === "ko" ]; --- -