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

v0.1.15 반응형 레이아웃 및 오버 사이드 수정

Browse Source
This commit is contained in:
zenn
2026-04-13 18:31:10 +09:00
parent a2439a60bc
commit 0a65176008
4 changed files with 105 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
assets/built/screen.css
View File

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