diff --git a/assets/built/screen.css b/assets/built/screen.css
index 809ab63..fbec81d 100644
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
@@ -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;
}
diff --git a/assets/built/theme.js b/assets/built/theme.js
index 773d580..aa6de5f 100644
--- a/assets/built/theme.js
+++ b/assets/built/theme.js
@@ -65,6 +65,14 @@
});
});
+ var leftSidebarToggle = document.querySelector("[data-left-sidebar-toggle]");
+ if (leftSidebarToggle) {
+ leftSidebarToggle.addEventListener("click", function () {
+ var collapsed = body.classList.toggle("left-sidebar-collapsed");
+ leftSidebarToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+ });
+ }
+
var tabRoot = document.querySelector("[data-tabs]");
if (tabRoot) {
var triggers = tabRoot.querySelectorAll("[data-tab-trigger]");
diff --git a/assets/icons/left_panel_close.svg b/assets/icons/left_panel_close.svg
new file mode 100644
index 0000000..1d7992b
--- /dev/null
+++ b/assets/icons/left_panel_close.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/icons/left_panel_open.svg b/assets/icons/left_panel_open.svg
new file mode 100644
index 0000000..5db45bc
--- /dev/null
+++ b/assets/icons/left_panel_open.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/package.json b/package.json
index 4acb18b..8b12cc2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ghost-theme-thred-clone",
- "version": "0.1.11",
+ "version": "0.1.12",
"private": true,
"description": "A Ghost theme inspired by the Thred reference layout.",
"keywords": [
diff --git a/partials/site/sidebar-left.hbs b/partials/site/sidebar-left.hbs
index 7c9d365..167de9a 100644
--- a/partials/site/sidebar-left.hbs
+++ b/partials/site/sidebar-left.hbs
@@ -1,5 +1,11 @@