From 0a651760089d79d5bafdfb79e5294928e9694ff9 Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 13 Apr 2026 18:31:10 +0900 Subject: [PATCH] =?UTF-8?q?v0.1.15=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B0=8F=20=EC=98=A4?= =?UTF-8?q?=EB=B2=84=20=EC=82=AC=EC=9D=B4=EB=93=9C=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 | 82 +++++++++++++++++++++++------------------ assets/built/theme.js | 58 ++++++++++++++++++++++++++++- default.hbs | 1 + package.json | 2 +- 4 files changed, 105 insertions(+), 38 deletions(-) diff --git a/assets/built/screen.css b/assets/built/screen.css index 4f500eb..5423291 100644 --- a/assets/built/screen.css +++ b/assets/built/screen.css @@ -15,8 +15,8 @@ --shadow: 0 8px 24px rgba(20, 16, 12, 0.035); --radius: 18px; --radius-sm: 14px; - --sidebar-left: 240px; - --sidebar-right: 320px; + --sidebar-left: 287px; + --sidebar-right: 287px; --content-column: 720px; --content-measure: 680px; --content-header: 720px; @@ -88,7 +88,7 @@ input { .site-shell { display: grid; - grid-template-columns: var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right); + grid-template-columns: var(--sidebar-left) minmax(0, 1fr) var(--sidebar-right); min-height: calc(100vh - var(--topbar-height)); width: min(100%, var(--shell-width)); margin: 0 auto; @@ -1362,36 +1362,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { border-bottom: 0; } -@media (max-width: 1240px) { - .topbar { - width: 100%; - grid-template-columns: 240px minmax(0, 1fr); - border-left: 0; - border-right: 0; - } - - .topbar__actions { - border-left: 0; - } - - .site-shell { - width: 100%; - grid-template-columns: 240px minmax(0, 1fr); - border-left: 0; - border-right: 0; - } - - body.left-sidebar-collapsed .site-shell { - width: min(100%, var(--content-column)); - grid-template-columns: minmax(0, 1fr); - } - - .sidebar--right { - display: none; - } -} - -@media (max-width: 960px) { +@media (max-width: 1023px) { .topbar { grid-template-columns: 1fr; padding: 0 14px; @@ -1431,13 +1402,35 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { } .site-shell { - grid-template-columns: 1fr; + width: min(100%, calc(var(--content-column) + var(--sidebar-right))); + grid-template-columns: minmax(0, 1fr) var(--sidebar-right); border-left: 0; border-right: 0; } .sidebar--left { - display: none; + position: fixed; + top: var(--topbar-height); + left: 0; + bottom: 0; + z-index: 40; + width: var(--sidebar-left); + border-right: 1px solid var(--border); + transform: translateX(-100%); + transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); + box-shadow: 0 20px 40px rgba(20, 16, 12, 0.08); + } + + body.left-sidebar-open .sidebar--left { + transform: translateX(0); + } + + .left-sidebar-backdrop { + position: fixed; + inset: var(--topbar-height) 0 0; + z-index: 35; + background: rgba(17, 17, 17, 0.22); + backdrop-filter: blur(2px); } .content-area { @@ -1477,6 +1470,25 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { } } +@media (max-width: 767px) { + .site-shell { + width: 100%; + grid-template-columns: 1fr; + } + + .sidebar--right { + display: block; + border-left: 0; + border-top: 1px solid var(--border); + } + + .sidebar__inner--right { + position: static; + height: auto; + padding-top: 18px; + } +} + @media (max-width: 640px) { .topbar { padding-inline: 16px; diff --git a/assets/built/theme.js b/assets/built/theme.js index aa6de5f..28efad6 100644 --- a/assets/built/theme.js +++ b/assets/built/theme.js @@ -66,13 +66,67 @@ }); var leftSidebarToggle = document.querySelector("[data-left-sidebar-toggle]"); + var leftSidebarBackdrop = document.querySelector("[data-left-sidebar-backdrop]"); + var tabletMedia = window.matchMedia("(max-width: 1023px)"); + + function syncLeftSidebarState() { + var isOverlay = tabletMedia.matches; + var isOpen = isOverlay ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed"); + + if (leftSidebarToggle) { + leftSidebarToggle.setAttribute("aria-expanded", isOpen ? "true" : "false"); + } + + if (leftSidebarBackdrop) { + leftSidebarBackdrop.hidden = !isOverlay || !isOpen; + } + } + + function openLeftSidebar() { + if (tabletMedia.matches) { + body.classList.add("left-sidebar-open"); + } else { + body.classList.remove("left-sidebar-collapsed"); + } + syncLeftSidebarState(); + } + + function closeLeftSidebar() { + if (tabletMedia.matches) { + body.classList.remove("left-sidebar-open"); + } else { + body.classList.add("left-sidebar-collapsed"); + } + syncLeftSidebarState(); + } + if (leftSidebarToggle) { leftSidebarToggle.addEventListener("click", function () { - var collapsed = body.classList.toggle("left-sidebar-collapsed"); - leftSidebarToggle.setAttribute("aria-expanded", collapsed ? "false" : "true"); + var isOverlay = tabletMedia.matches; + var isOpen = isOverlay ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed"); + + if (isOpen) { + closeLeftSidebar(); + } else { + openLeftSidebar(); + } }); } + if (leftSidebarBackdrop) { + leftSidebarBackdrop.addEventListener("click", function () { + closeLeftSidebar(); + }); + } + + if (tabletMedia.addEventListener) { + tabletMedia.addEventListener("change", syncLeftSidebarState); + } else if (tabletMedia.addListener) { + tabletMedia.addListener(syncLeftSidebarState); + } + + syncLeftSidebarState(); + var tabRoot = document.querySelector("[data-tabs]"); if (tabRoot) { var triggers = tabRoot.querySelectorAll("[data-tab-trigger]"); diff --git a/default.hbs b/default.hbs index 0711f3f..2e9b87f 100644 --- a/default.hbs +++ b/default.hbs @@ -12,6 +12,7 @@ {{> "site/topbar"}} +
{{> "site/sidebar-left"}} diff --git a/package.json b/package.json index 9e331ca..4dc8c37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ghost-theme-thred-clone", - "version": "0.1.14", + "version": "0.1.15", "private": true, "description": "A Ghost theme inspired by the Thred reference layout.", "keywords": [