From fab60c0c891b9034726bbc3c53923d26843cd482 Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 13 Apr 2026 10:44:56 +0900 Subject: [PATCH] =?UTF-8?q?v0.1.2=20=ED=97=A4=EB=8D=94=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B0=8F=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?= =?UTF-8?q?=ED=9A=A8=EA=B3=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/built/screen.css | 267 +++++++++++++++++++++++++-------- assets/built/theme.js | 41 ++++- default.hbs | 14 +- package.json | 2 +- partials/site/sidebar-left.hbs | 63 ++++---- partials/site/topbar.hbs | 11 ++ 6 files changed, 295 insertions(+), 103 deletions(-) diff --git a/assets/built/screen.css b/assets/built/screen.css index a1de066..df29f82 100644 --- a/assets/built/screen.css +++ b/assets/built/screen.css @@ -3,21 +3,22 @@ :root { --bg: #fcfbf9; --surface: #ffffff; - --surface-muted: #f4f1ed; + --surface-muted: #f7f4ef; --surface-strong: #131313; --text: #1b1918; --text-soft: #6e6661; - --border: #e6dfd7; + --text-dim: #9a9087; + --border: #ece5dc; --accent: #f0632f; --accent-strong: #d84d1d; - --shadow: 0 10px 30px rgba(20, 16, 12, 0.05); - --radius: 16px; - --radius-sm: 12px; + --shadow: 0 8px 24px rgba(20, 16, 12, 0.035); + --radius: 18px; + --radius-sm: 14px; --sidebar-left: 240px; --sidebar-right: 320px; --content-column: 720px; --content-measure: 680px; - --topbar-height: 72px; + --topbar-height: 62px; --shell-width: calc(var(--sidebar-left) + var(--content-column) + var(--sidebar-right)); --font-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif; } @@ -29,6 +30,7 @@ body.theme-dark { --surface-strong: #f4f1ed; --text: #f3efe9; --text-soft: #ada59c; + --text-dim: #847b73; --border: #272727; --shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } @@ -70,11 +72,15 @@ input { .site-shell { display: grid; grid-template-columns: var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right); - min-height: 100vh; + min-height: calc(100vh - var(--topbar-height)); width: min(100%, var(--shell-width)); margin: 0 auto; } +.site-shell-wrap { + border-top: 1px solid var(--border); +} + .sidebar, .site-main { min-width: 0; @@ -82,6 +88,7 @@ input { .sidebar { border-right: 1px solid var(--border); + background: var(--bg); } .sidebar--right { @@ -91,9 +98,9 @@ input { .sidebar__inner { position: sticky; - top: 0; - height: 100vh; - padding: 18px 14px; + top: var(--topbar-height); + height: calc(100vh - var(--topbar-height)); + padding: 18px 16px; overflow-y: auto; } @@ -109,26 +116,31 @@ input { gap: 10px; margin-bottom: 16px; font-weight: 800; + letter-spacing: -0.02em; } .brand__mark { - width: 14px; - height: 14px; + width: 15px; + height: 15px; border: 2px solid currentColor; - border-radius: 3px; + border-radius: 4px; } .brand__logo { max-height: 32px; } +.brand--topbar { + margin-bottom: 0; +} + .menu-groups { display: grid; - gap: 6px; + gap: 2px; } .menu-group { - border-bottom: 1px solid var(--border); + border-bottom: 0; } .menu-group__trigger { @@ -136,20 +148,24 @@ input { align-items: center; justify-content: space-between; width: 100%; - padding: 13px 0; + padding: 8px 10px; border: 0; + border-radius: 14px; background: none; color: inherit; cursor: pointer; + transition: background-color 0.22s ease, color 0.22s ease; } .menu-group__content { - padding: 0 0 10px; - display: none; + height: 0; + padding: 0; + transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1); + will-change: height; } -.menu-group.is-open .menu-group__content { - display: block; +.menu-group__content > * { + padding: 4px 0 10px; } .menu-group .nav { @@ -160,7 +176,7 @@ input { .menu-group .nav li + li, .link-list li + li { - margin-top: 8px; + margin-top: 4px; } .menu-group .nav a, @@ -168,14 +184,83 @@ input { color: var(--text-soft); } +.menu-group .nav a { + display: block; + padding: 7px 14px 7px 30px; + border-radius: 12px; + transition: background-color 0.22s ease, color 0.22s ease; +} + +.menu-group .nav a:hover, +.menu-sub-link:hover { + background: var(--surface-muted); + color: var(--text); +} + .link-list { margin: 0; padding: 0; list-style: none; } +.menu-sub-link { + display: block; + padding: 7px 14px 7px 30px; + border-radius: 12px; + transition: background-color 0.22s ease, color 0.22s ease; +} + +.menu-link { + display: inline-flex; + align-items: center; + gap: 12px; + min-width: 0; +} + +.menu-link__marker { + position: relative; + flex: 0 0 auto; + width: 6px; + height: 18px; + border-radius: 999px; + background: color-mix(in srgb, var(--border) 92%, #ffffff 8%); + transform-origin: center; + transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, background-color 0.22s ease, transform 0.22s ease; +} + +.menu-link__label { + font-size: 1rem; + font-weight: 600; + letter-spacing: -0.015em; +} + +.menu-group__trigger:hover, +.menu-group__trigger[aria-expanded="true"] { + background: var(--surface-muted); +} + +.menu-group__trigger:hover .menu-link__marker, +.menu-group__trigger[aria-expanded="true"] .menu-link__marker { + width: 12px; + height: 12px; + border-radius: 999px; + background: #cfc7be; + transform: translateX(1px); +} + +.menu-group__chevron { + color: var(--text-dim); + font-size: 14px; + transition: transform 0.22s ease, color 0.22s ease; +} + +.menu-group.is-open .menu-group__chevron { + transform: rotate(180deg); + color: var(--text-soft); +} + .sidebar-card { - padding: 16px 0 0; + padding: 20px 0 0; border-top: 1px solid var(--border); } @@ -202,35 +287,37 @@ input { .category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px 12px; + gap: 8px 16px; } .category-chip { display: flex; align-items: center; gap: 8px; - padding: 8px 10px; + padding: 6px 2px; border-radius: 10px; - transition: background 0.2s ease; + transition: color 0.2s ease; + font-weight: 600; + letter-spacing: -0.01em; } .category-chip:hover, .author-list__item:hover, .recommended-list a:hover { - background: var(--surface-muted); + background: transparent; } .category-chip__dot { - width: 8px; - height: 8px; + width: 5px; + height: 19px; border-radius: 999px; background: linear-gradient(135deg, #5d66ff, #29b6f6); } .category-chip__count { margin-left: auto; - color: var(--text-soft); - font-size: 12px; + color: var(--text-dim); + font-size: 11px; } .author-list { @@ -244,6 +331,7 @@ input { gap: 10px; padding: 7px 8px; border-radius: 12px; + transition: background-color 0.22s ease; } .author-list__item strong, @@ -270,20 +358,31 @@ input { position: sticky; top: 0; z-index: 20; - display: flex; - justify-content: space-between; - gap: 16px; + display: grid; + grid-template-columns: var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right); + gap: 0; align-items: center; height: var(--topbar-height); - padding: 16px 20px; - border-bottom: 1px solid var(--border); - background: color-mix(in srgb, var(--bg) 88%, transparent); - backdrop-filter: blur(14px); + width: min(100%, var(--shell-width)); + margin: 0 auto; + background: color-mix(in srgb, var(--bg) 94%, transparent); + backdrop-filter: blur(10px); +} + +.topbar__brand, +.topbar__search { + min-width: 0; +} + +.topbar__brand { + padding: 0 16px; + border-right: 1px solid var(--border); } .topbar__search { - flex: 1; - max-width: 320px; + display: flex; + justify-content: center; + padding: 0 18px; } .search-trigger, @@ -291,17 +390,17 @@ input { display: flex; align-items: center; gap: 10px; - width: 100%; - padding: 12px 16px; + width: min(100%, 320px); + padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; - box-shadow: var(--shadow); color: var(--text-soft); } .search-trigger { cursor: pointer; + box-shadow: none; } .search-shortcut { @@ -314,8 +413,11 @@ input { .topbar__actions { display: flex; + justify-content: flex-end; align-items: center; gap: 10px; + padding: 0 16px; + border-left: 1px solid var(--border); } .button, @@ -323,13 +425,14 @@ input { display: inline-flex; justify-content: center; align-items: center; - padding: 11px 16px; + padding: 10px 16px; border: 0; border-radius: 10px; background: var(--surface-strong); color: var(--bg); font-weight: 700; cursor: pointer; + box-shadow: none; } .button--accent { @@ -355,8 +458,8 @@ input { display: inline-flex; justify-content: center; align-items: center; - width: 40px; - height: 40px; + width: 36px; + height: 36px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); @@ -364,6 +467,10 @@ input { cursor: pointer; } +.icon-button--search-mobile { + display: none; +} + .icon-button--plain { border: 0; background: transparent; @@ -455,13 +562,13 @@ input { .tab-row { display: flex; flex-wrap: wrap; - gap: 8px; + gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .tab-row__button { - padding: 10px 2px; + padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; @@ -623,7 +730,7 @@ input { .recommended-list a { display: block; - padding: 6px 8px; + padding: 6px 0; border-radius: 10px; line-height: 1.5; font-size: 0.94rem; @@ -663,7 +770,8 @@ input { .post-header { display: grid; - gap: 16px; + gap: 14px; + padding-top: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } @@ -689,7 +797,7 @@ input { .post-feature-image img { width: 100%; - border-radius: 18px; + border-radius: 14px; } .kg-content { @@ -899,6 +1007,15 @@ input { } @media (max-width: 1240px) { + .topbar { + width: 100%; + grid-template-columns: 240px minmax(0, 1fr); + } + + .topbar__actions { + border-left: 0; + } + .site-shell { width: 100%; grid-template-columns: 240px minmax(0, 1fr); @@ -910,6 +1027,38 @@ input { } @media (max-width: 960px) { + .topbar { + grid-template-columns: 1fr; + padding: 0 14px; + border-bottom: 1px solid var(--border); + } + + .topbar__brand, + .topbar__actions, + .topbar__search { + border: 0; + padding: 0; + } + + .topbar__brand { + grid-row: 1; + } + + .topbar__search { + display: none; + } + + .topbar__actions { + position: absolute; + right: 14px; + top: 50%; + transform: translateY(-50%); + } + + .icon-button--search-mobile { + display: inline-flex; + } + .site-shell { grid-template-columns: 1fr; } @@ -918,10 +1067,6 @@ input { display: none; } - .topbar { - padding-inline: 14px; - } - .content-area { padding-inline: 14px; } @@ -938,20 +1083,12 @@ input { @media (max-width: 640px) { .topbar { - gap: 10px; - } - - .topbar__search { - max-width: none; - } - - .search-trigger span:nth-child(2) { - display: none; + padding-inline: 16px; } .button--accent { - padding-inline: 12px; - font-size: 14px; + padding-inline: 14px; + font-size: 0.95rem; } .post-card { diff --git a/assets/built/theme.js b/assets/built/theme.js index a7b7928..773d580 100644 --- a/assets/built/theme.js +++ b/assets/built/theme.js @@ -19,10 +19,49 @@ }); }); + function syncAccordion(section, open) { + var button = section.querySelector("[data-accordion]"); + var content = section.querySelector("[data-accordion-content]"); + + section.classList.toggle("is-open", open); + + if (button) { + button.setAttribute("aria-expanded", open ? "true" : "false"); + } + + if (!content) { + return; + } + + if (open) { + content.style.height = content.scrollHeight + "px"; + window.setTimeout(function () { + if (section.classList.contains("is-open")) { + content.style.height = "auto"; + } + }, 260); + } else { + content.style.height = content.scrollHeight + "px"; + window.requestAnimationFrame(function () { + content.style.height = "0px"; + }); + } + } + + document.querySelectorAll(".menu-group").forEach(function (section) { + var content = section.querySelector("[data-accordion-content]"); + if (!content) { + return; + } + + content.style.overflow = "hidden"; + content.style.height = section.classList.contains("is-open") ? "auto" : "0px"; + }); + document.querySelectorAll("[data-accordion]").forEach(function (button) { button.addEventListener("click", function () { var section = button.parentElement; - section.classList.toggle("is-open"); + syncAccordion(section, !section.classList.contains("is-open")); }); }); diff --git a/default.hbs b/default.hbs index 3f49960..0711f3f 100644 --- a/default.hbs +++ b/default.hbs @@ -11,13 +11,15 @@ {{ghost_head}} -
- {{> "site/sidebar-left"}} -
- {{> "site/topbar"}} - {{{body}}} + {{> "site/topbar"}} +
+
+ {{> "site/sidebar-left"}} +
+ {{{body}}} +
+ {{> "site/sidebar-right"}}
- {{> "site/sidebar-right"}}
{{ghost_foot}} diff --git a/package.json b/package.json index 2a4d6bf..6a2febd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ghost-theme-thred-clone", - "version": "0.1.1", + "version": "0.1.2", "private": true, "description": "A Ghost theme inspired by the Thred reference layout.", "author": { diff --git a/partials/site/sidebar-left.hbs b/partials/site/sidebar-left.hbs index 97b50c4..16bdbe2 100644 --- a/partials/site/sidebar-left.hbs +++ b/partials/site/sidebar-left.hbs @@ -1,35 +1,32 @@