v0.1.16 탑바 및 아이콘 표현 수정

This commit is contained in:
2026-04-13 18:48:31 +09:00
parent 0a65176008
commit f10f9c5e37
6 changed files with 101 additions and 41 deletions

View File

@@ -189,7 +189,7 @@ body.left-sidebar-collapsed .sidebar--left {
.menu-group__content {
height: 0;
padding: 0;
padding: 2px 0 0;
transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
will-change: height;
overflow: hidden;
@@ -383,16 +383,16 @@ body.left-sidebar-collapsed .sidebar--left {
}
.category-chip__dot {
width: 5px;
position: relative;
width: 14px;
height: 19px;
border-radius: 999px;
background: var(--tag-accent, linear-gradient(135deg, #5d66ff, #29b6f6));
transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, margin 0.22s ease;
flex: 0 0 14px;
}
.category-chip__label {
flex: 1;
min-width: 0;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -407,11 +407,24 @@ body.left-sidebar-collapsed .sidebar--left {
color: var(--text);
}
.category-chip:hover .category-chip__dot {
width: 14px;
height: 14px;
.category-chip__dot::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 5px;
height: 19px;
border-radius: 999px;
background: var(--tag-accent, linear-gradient(135deg, #5d66ff, #29b6f6));
transform: translateY(-50%);
transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, left 0.22s ease;
}
.category-chip:hover .category-chip__dot::before {
left: 2px;
width: 10px;
height: 10px;
border-radius: 999px;
margin-left: 4px;
}
.author-list {
@@ -463,19 +476,25 @@ body.left-sidebar-collapsed .sidebar--left {
position: sticky;
top: 0;
z-index: 20;
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);
width: min(100%, var(--shell-width));
margin: 0 auto;
width: 100%;
background: color-mix(in srgb, var(--bg) 94%, transparent);
backdrop-filter: blur(10px);
}
.topbar__inner {
display: grid;
grid-template-columns: var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right);
gap: 0;
align-items: center;
height: 100%;
width: min(100%, var(--shell-width));
margin: 0 auto;
}
.topbar__brand,
.topbar__search {
.topbar__search,
.topbar__actions {
min-width: 0;
}
@@ -557,11 +576,17 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
box-shadow: none;
}
.search-trigger__icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.search-shortcut {
margin-left: auto;
padding: 1px 7px;
border: 1px solid var(--border);
border-radius: 8px;
border-radius: 4px;
font-size: 12px;
}
@@ -873,6 +898,19 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
letter-spacing: -0.01em;
}
.post-card__content h2 a {
display: inline-flex;
align-items: flex-start;
gap: 6px;
}
.post-card__featured-icon {
width: 14px;
height: 14px;
margin-top: 2px;
flex: 0 0 auto;
}
.post-card__content p {
margin: 0 0 8px;
color: var(--text-soft);