v0.1.41 theme: 홈/사이드바/추천 모달 동작 정리

Made-with: Cursor

assets/built/screen.css

@@ -100,6 +100,7 @@ menu {
     min-height: calc(100vh - var(--topbar-height));
     width: min(100%, var(--shell-width));
     margin: 0 auto;
+    align-items: start;
     transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -109,31 +110,13 @@ menu {
 }
 
 @media (min-width: 1024px) {
-    html,
-    body {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .site-shell-wrap {
-        height: calc(100vh - var(--topbar-height));
-    }
-
-    .site-shell {
-        height: 100%;
-        min-height: 0;
-    }
-
-    .site-main {
-        height: 100%;
-        min-height: 0;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-    }
-
-    .sidebar--left,
-    .sidebar--right {
-        height: 100%;
+    .sidebar.sidebar--left,
+    .sidebar.sidebar--right {
+        position: sticky;
+        top: var(--topbar-height);
+        align-self: start;
+        height: calc(100vh - var(--topbar-height)) !important;
+        max-height: calc(100vh - var(--topbar-height));
         overflow: hidden;
     }
 }
@@ -310,12 +293,22 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 6px 0 6px 16px;
+    padding: 6px 10px 6px 0;
     border-radius: 18px;
     transition: background-color 0.22s ease, color 0.22s ease, padding 0.22s ease;
     font-size: 13px;
 }
 
+.menu-group .nav a::before {
+    content: "";
+    width: 4px;
+    height: 16px;
+    border-radius: 3px;
+    background: color-mix(in srgb, var(--border) 88%, #ffffff 12%);
+    flex: 0 0 auto;
+    transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, background-color 0.22s ease, transform 0.22s ease;
+}
+
 .menu-group .nav a:hover,
 .menu-sub-link:hover {
     background: var(--surface-muted);
@@ -324,6 +317,33 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
     padding-right: 12px;
 }
 
+.menu-group .nav li:not(.nav-current) > a:hover::before {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: #cfc7be;
+    transform: translateX(1px);
+}
+
+.menu-group .nav .nav-current > a,
+.menu-group .nav a.nav-current {
+    color: var(--text);
+}
+
+.menu-group .nav .nav-current > a::before,
+.menu-group .nav a.nav-current::before {
+    background: var(--accent);
+}
+
+.menu-group .nav .nav-current > a:hover::before,
+.menu-group .nav a.nav-current:hover::before {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: var(--accent);
+    transform: translateX(1px);
+}
+
 .link-list {
     margin: 0;
     padding: 0;

assets/built/theme.js

@@ -153,28 +153,6 @@
 
     syncLeftSidebarState();
 
-    var siteMain = document.querySelector(".site-main");
-    var sidebarNodes = document.querySelectorAll(".sidebar--left, .sidebar--right");
-
-    function shouldProxySidebarWheel() {
-        return !tabletMedia.matches && !!siteMain;
-    }
-
-    sidebarNodes.forEach(function (sidebar) {
-        sidebar.addEventListener("wheel", function (event) {
-            if (!shouldProxySidebarWheel()) {
-                return;
-            }
-
-            event.preventDefault();
-            siteMain.scrollBy({
-                top: event.deltaY,
-                left: 0,
-                behavior: "auto"
-            });
-        }, { passive: false });
-    });
-
     var tabRoot = document.querySelector("[data-tabs]");
     if (tabRoot) {
         var triggers = tabRoot.querySelectorAll("[data-tab-trigger]");
@@ -371,6 +349,64 @@
 
     syncUserMenuToggles();
 
+    var recommendationsPortalTrigger = document.querySelector("[data-portal='recommendations']");
+    var recommendationsPortalTitle = recommendationsPortalTrigger ? recommendationsPortalTrigger.getAttribute("data-portal-title") : "";
+    var recommendationsPortalDescription = recommendationsPortalTrigger ? recommendationsPortalTrigger.getAttribute("data-portal-description") : "";
+
+    function getPortalDocuments() {
+        var docs = [document];
+
+        document.querySelectorAll("iframe").forEach(function (frame) {
+            try {
+                if (frame.contentDocument) {
+                    docs.push(frame.contentDocument);
+                }
+            } catch (error) {}
+        });
+
+        return docs;
+    }
+
+    function applyRecommendationsPortalCopy() {
+        if (!recommendationsPortalTitle && !recommendationsPortalDescription) {
+            return false;
+        }
+
+        var hasPatched = false;
+
+        getPortalDocuments().forEach(function (docRoot) {
+            var portalTitle = docRoot.querySelector(".gh-portal-main-title");
+            var portalDescription = docRoot.querySelector(".gh-portal-recommendations-description");
+
+            if (portalTitle && recommendationsPortalTitle) {
+                portalTitle.textContent = recommendationsPortalTitle;
+                hasPatched = true;
+            }
+
+            if (portalDescription && recommendationsPortalDescription) {
+                portalDescription.textContent = recommendationsPortalDescription;
+                hasPatched = true;
+            }
+        });
+
+        return hasPatched;
+    }
+
+    if (recommendationsPortalTrigger && (recommendationsPortalTitle || recommendationsPortalDescription)) {
+        recommendationsPortalTrigger.addEventListener("click", function () {
+            applyRecommendationsPortalCopy();
+            var attempts = 0;
+            var maxAttempts = 20;
+            var retryTimer = window.setInterval(function () {
+                attempts += 1;
+                var done = applyRecommendationsPortalCopy();
+                if (done || attempts >= maxAttempts) {
+                    window.clearInterval(retryTimer);
+                }
+            }, 100);
+        });
+    }
+
     function updateLoadMoreState(pagination, nextUrl, loading) {
         var trigger = pagination.querySelector("[data-load-more-trigger]");
         if (!trigger) {