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

This commit is contained in:
2026-04-13 17:45:29 +09:00
parent 38a98bb07a
commit 07e714e5a2
6 changed files with 108 additions and 4 deletions

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