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

v0.1.12 사이드바 토글 및 모바일 상세 수정

Browse Source
This commit is contained in:
zenn
2026-04-13 17:45:29 +09:00
parent 38a98bb07a
commit 07e714e5a2
6 changed files with 108 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
assets/built/screen.css
View File

@@ -94,6 +94,7 @@ input {
margin: 0 auto;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-shell-wrap {
@@ -124,6 +125,72 @@ input {
overflow-y: auto;
}
.sidebar-left__toolbar {
display: flex;
justify-content: flex-end;
padding-top: 12px;
}
.sidebar-left__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
background: transparent;
color: var(--text-dim);
cursor: pointer;
border-radius: 8px;
}
.sidebar-left__toggle:hover {
background: var(--surface-muted);
}
.sidebar-left__toggle-icon {
width: 18px;
height: 18px;
}
.sidebar-left__toggle-icon--close {
display: none;
}
body.left-sidebar-collapsed .site-shell,
body.left-sidebar-collapsed .topbar {
grid-template-columns: 56px minmax(0, var(--content-column)) var(--sidebar-right);
}
body.left-sidebar-collapsed .sidebar-left__toggle-icon--open {
display: none;
}
body.left-sidebar-collapsed .sidebar-left__toggle-icon--close {
display: block;
}
body.left-sidebar-collapsed .sidebar--left .menu-link__label,
body.left-sidebar-collapsed .sidebar--left .menu-group__content,
body.left-sidebar-collapsed .sidebar--left .sidebar-card,
body.left-sidebar-collapsed .sidebar--left .sidebar-footer {
opacity: 0;
pointer-events: none;
}
body.left-sidebar-collapsed .sidebar--left .menu-group__trigger {
justify-content: center;
padding-inline: 0;
}
body.left-sidebar-collapsed .sidebar--left .menu-group__chevron {
display: none;
}
body.left-sidebar-collapsed .sidebar--left .menu-link {
justify-content: center;
}
.sidebar__inner--right {
display: flex;
flex-direction: column;
@@ -182,7 +249,7 @@ input {
.menu-group__content {
height: 0;
padding: 0;
transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
will-change: height;
overflow: hidden;
}
@@ -896,7 +963,7 @@ input {
.site-intro {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 14px;
gap: 12px;
align-items: center;
padding-top: 18px;
padding-bottom: 18px;
@@ -912,7 +979,7 @@ input {
.copyright {
margin: 0;
color: var(--text-soft);
line-height: 1.55;
line-height: 1.48;
}
.social-row {
@@ -985,6 +1052,15 @@ input {
flex: 1;
}
.author-feature__body h3 {
font-size: 14px;
line-height: 1.25;
}
.author-feature__body p {
font-size: 13px;
}
.author-feature__action {
color: var(--text-dim);
font-size: 13px;
@@ -1056,6 +1132,8 @@ input {
.post-feature-image img {
width: 100%;
border-radius: 14px;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.post-body {
@@ -1299,6 +1377,11 @@ input {
border-right: 0;
}
body.left-sidebar-collapsed .site-shell,
body.left-sidebar-collapsed .topbar {
grid-template-columns: 56px minmax(0, 1fr);
}
.sidebar--right {
display: none;
}
@@ -1442,6 +1525,11 @@ input {
line-height: 1.08;
}
.post-feature-image img {
border-radius: 12px;
aspect-ratio: 4 / 3;
}
.tab-row-wrap {
gap: 10px;
}

8
assets/built/theme.js
View File

@@ -65,6 +65,14 @@
});
});
var leftSidebarToggle = document.querySelector("[data-left-sidebar-toggle]");
if (leftSidebarToggle) {
leftSidebarToggle.addEventListener("click", function () {
var collapsed = body.classList.toggle("left-sidebar-collapsed");
leftSidebarToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
});
}
var tabRoot = document.querySelector("[data-tabs]");
if (tabRoot) {
var triggers = tabRoot.querySelectorAll("[data-tab-trigger]");

1
assets/icons/left_panel_close.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

1
assets/icons/left_panel_open.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 335 B

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ghost-theme-thred-clone",
"version": "0.1.11",
"version": "0.1.12",
"private": true,
"description": "A Ghost theme inspired by the Thred reference layout.",
"keywords": [

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

@@ -1,5 +1,11 @@
<aside class="sidebar sidebar--left">
<div class="sidebar__inner">
<div class="sidebar-left__toolbar">
<button class="sidebar-left__toggle" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Collapse left sidebar">
<img class="sidebar-left__toggle-icon sidebar-left__toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
<img class="sidebar-left__toggle-icon sidebar-left__toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
</button>
</div>
<nav class="menu-groups">
<section class="menu-group is-open">
<button class="menu-group__trigger" type="button" data-accordion aria-expanded="true">