zenn/ghost.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.2 헤더 구조 및 사이드바 효과 수정

Browse Source
This commit is contained in:
zenn
2026-04-13 10:44:56 +09:00
parent 890b3c1902
commit fab60c0c89
6 changed files with 295 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
assets/built/screen.css
View File

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

41
assets/built/theme.js
View File

@@ -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"));
});
});

14
default.hbs
View File

@@ -11,13 +11,15 @@
{{ghost_head}}
</head>
<body class="{{body_class}}">
<div class="site-shell">
{{> "site/sidebar-left"}}
<div class="site-main">
{{> "site/topbar"}}
{{{body}}}
{{> "site/topbar"}}
<div class="site-shell-wrap">
<div class="site-shell">
{{> "site/sidebar-left"}}
<div class="site-main">
{{{body}}}
</div>
{{> "site/sidebar-right"}}
</div>
{{> "site/sidebar-right"}}
</div>
{{ghost_foot}}

2
package.json
View File

@@ -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": {

63
partials/site/sidebar-left.hbs
View File

@@ -1,35 +1,32 @@
<aside class="sidebar sidebar--left">
<div class="sidebar__inner">
<a class="brand" href="{{@site.url}}">
{{#if @site.logo}}
<img class="brand__logo" src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
<span class="brand__mark"></span>
<span class="brand__name">{{@site.title}}</span>
{{/if}}
</a>
<nav class="menu-groups">
<section class="menu-group is-open">
<button class="menu-group__trigger" type="button" data-accordion>
<span>Home pages</span>
<span>⌄</span>
<button class="menu-group__trigger" type="button" data-accordion aria-expanded="true">
<span class="menu-link">
<span class="menu-link__marker"></span>
<span class="menu-link__label">Home pages</span>
</span>
<span class="menu-group__chevron">⌄</span>
</button>
<div class="menu-group__content">
<div class="menu-group__content" data-accordion-content>
{{navigation}}
</div>
</section>
<section class="menu-group">
<button class="menu-group__trigger" type="button" data-accordion>
<span>Tags</span>
<span>⌄</span>
<button class="menu-group__trigger" type="button" data-accordion aria-expanded="false">
<span class="menu-link">
<span class="menu-link__marker"></span>
<span class="menu-link__label">Tags</span>
</span>
<span class="menu-group__chevron">⌄</span>
</button>
<div class="menu-group__content">
<div class="menu-group__content" data-accordion-content>
<ul class="link-list">
{{#get "tags" limit="6" include="count.posts"}}
{{#foreach tags}}
<li><a href="{{url}}">{{name}}</a></li>
<li><a class="menu-sub-link" href="{{url}}">{{name}}</a></li>
{{/foreach}}
{{/get}}
</ul>
@@ -37,15 +34,18 @@
</section>
<section class="menu-group">
<button class="menu-group__trigger" type="button" data-accordion>
<span>Authors</span>
<span>⌄</span>
<button class="menu-group__trigger" type="button" data-accordion aria-expanded="false">
<span class="menu-link">
<span class="menu-link__marker"></span>
<span class="menu-link__label">Authors</span>
</span>
<span class="menu-group__chevron">⌄</span>
</button>
<div class="menu-group__content">
<div class="menu-group__content" data-accordion-content>
<ul class="link-list">
{{#get "authors" limit="6" include="count.posts"}}
{{#foreach authors}}
<li><a href="{{url}}">{{name}}</a></li>
<li><a class="menu-sub-link" href="{{url}}">{{name}}</a></li>
{{/foreach}}
{{/get}}
</ul>
@@ -53,15 +53,18 @@
</section>
<section class="menu-group">
<button class="menu-group__trigger" type="button" data-accordion>
<span>Members</span>
<span>⌄</span>
<button class="menu-group__trigger" type="button" data-accordion aria-expanded="false">
<span class="menu-link">
<span class="menu-link__marker"></span>
<span class="menu-link__label">Members</span>
</span>
<span class="menu-group__chevron">⌄</span>
</button>
<div class="menu-group__content">
<div class="menu-group__content" data-accordion-content>
<ul class="link-list">
<li><a href="#/portal/signup">Sign up</a></li>
<li><a href="#/portal/signin">Sign in</a></li>
<li><a href="#/portal/account">Account</a></li>
<li><a class="menu-sub-link" href="#/portal/signup">Sign up</a></li>
<li><a class="menu-sub-link" href="#/portal/signin">Sign in</a></li>
<li><a class="menu-sub-link" href="#/portal/account">Account</a></li>
</ul>
</div>
</section>

11
partials/site/topbar.hbs
View File

@@ -1,4 +1,14 @@
<header class="topbar">
<div class="topbar__brand">
<a class="brand brand--topbar" href="{{@site.url}}">
{{#if @site.logo}}
<img class="brand__logo" src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
<span class="brand__mark"></span>
<span class="brand__name">{{@site.title}}</span>
{{/if}}
</a>
</div>
<div class="topbar__search">
<button class="search-trigger" type="button" data-search-open aria-label="Open search">
<span class="search-trigger__icon">⌕</span>
@@ -7,6 +17,7 @@
</button>
</div>
<div class="topbar__actions">
<button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">⌕</button>
{{#if @member}}
<a class="button button--accent" href="#/portal/account">Account</a>
{{else}}