diff --git a/assets/built/screen.css b/assets/built/screen.css index 5423291..6946f72 100644 --- a/assets/built/screen.css +++ b/assets/built/screen.css @@ -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); diff --git a/assets/icons/bolt.svg b/assets/icons/bolt.svg new file mode 100644 index 0000000..1b0a88f --- /dev/null +++ b/assets/icons/bolt.svg @@ -0,0 +1,10 @@ + diff --git a/assets/icons/search.svg b/assets/icons/search.svg new file mode 100644 index 0000000..9c15820 --- /dev/null +++ b/assets/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package.json b/package.json index 4dc8c37..e817ca3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ghost-theme-thred-clone", - "version": "0.1.15", + "version": "0.1.16", "private": true, "description": "A Ghost theme inspired by the Thred reference layout.", "keywords": [ diff --git a/partials/lists/post-items.hbs b/partials/lists/post-items.hbs index 48e634c..2378ff3 100644 --- a/partials/lists/post-items.hbs +++ b/partials/lists/post-items.hbs @@ -9,7 +9,14 @@ {{/if}}
{{excerpt words="22"}}
{{/if}}