fix: UI 문제 수정

Author: devbattery

_includes/head.html

@@ -17,24 +17,49 @@
 <script>
   (function () {
     var root = document.documentElement;
+    var THEME_STORAGE_KEY = "theme";
     var storedTheme = null;
     var prefersDarkMode = false;
 
-    try {
-      storedTheme = localStorage.getItem("theme");
-    } catch (error) {
-      storedTheme = null;
+    function normalizeTheme(value) {
+      return value === "dark" || value === "default" ? value : null;
     }
 
+    function readCookie(name) {
+      var escaped = name.replace(/([.$?*|{}()[\]\\/+^])/g, "\\$1");
+      var match = document.cookie.match(
+        new RegExp("(?:^|; )" + escaped + "=([^;]*)")
+      );
+      return match ? decodeURIComponent(match[1]) : null;
+    }
+
+    function readStorage(storage) {
+      if (!storage) {
+        return null;
+      }
+
+      try {
+        return storage.getItem(THEME_STORAGE_KEY);
+      } catch (error) {
+        return null;
+      }
+    }
+
+    storedTheme =
+      normalizeTheme(readStorage(window.localStorage)) ||
+      normalizeTheme(readStorage(window.sessionStorage)) ||
+      normalizeTheme(readCookie(THEME_STORAGE_KEY));
+
     if (window.matchMedia) {
       prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
     }
 
     var isDarkMode =
-      storedTheme === "dark" || (storedTheme !== "default" && prefersDarkMode);
+      storedTheme === "dark" || (storedTheme === null && prefersDarkMode);
 
     root.className = root.className.replace(/\bno-js\b/g, "") + " js ";
     root.setAttribute("data-theme", isDarkMode ? "dark" : "default");
+    root.style.colorScheme = isDarkMode ? "dark" : "light";
   })();
 </script>
 
@@ -59,6 +84,8 @@
       return;
     }
 
+    defaultTheme.media = isDarkMode ? "not all" : "all";
+    darkTheme.media = isDarkMode ? "all" : "not all";
     defaultTheme.disabled = isDarkMode;
     darkTheme.disabled = !isDarkMode;
   })();

_sass/minimal-mistakes/_sidebar-nav-modern.scss

@@ -3,8 +3,8 @@
    ========================================================================== */
 
 .nav__list--categories {
-  margin-top: 0.5rem;
-  padding: 0.9rem;
+  margin-top: 0.45rem;
+  padding: 0.82rem;
   border: 1px solid mix($border-color, $primary-color, 82%);
   border-radius: 16px;
   background:
@@ -26,13 +26,20 @@
   margin-bottom: 0.65rem;
 }
 
+.nav__list--categories label {
+  font-size: 0.84rem;
+  font-weight: bold;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+}
+
 .nav__list--categories .nav__all-posts-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 0.75rem;
-  padding: 0.6rem 0.75rem;
+  margin-bottom: 0.68rem;
+  padding: 0.56rem 0.72rem;
   border: 1px solid rgba($primary-color, 0.26);
   border-radius: 12px;
   color: $text-color;
@@ -60,6 +67,7 @@
 }
 
 .nav__list--categories .nav__all-posts-title {
+  font-size: 0.9rem;
   font-weight: bold;
   letter-spacing: 0.01em;
 }
@@ -82,13 +90,13 @@
 .nav__list--categories .nav__items--category-groups {
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
+  gap: 0.58rem;
   margin-top: 0.45rem;
-  font-size: $type-size-7;
+  font-size: clamp(0.9rem, 0.86rem + 0.18vw, 0.96rem);
 }
 
 .nav__list--categories .nav__group {
-  padding: 0.5rem;
+  padding: 0.46rem;
   border: 1px solid mix($border-color, $primary-color, 88%);
   border-radius: 12px;
   background-color: rgba($primary-color, 0.04);
@@ -117,9 +125,9 @@
 
 .nav__list--categories .nav__sub-title--group {
   margin: 0;
-  padding: 0.2rem 0.3rem 0.4rem;
+  padding: 0.15rem 0.28rem 0.35rem;
   border-bottom: none;
-  font-size: $type-size-7;
+  font-size: 0.85rem;
   font-weight: bold;
   text-transform: none;
   letter-spacing: 0.01em;
@@ -137,10 +145,11 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.6rem;
-  margin: 0.18rem 0;
-  padding: 0.42rem 0.56rem;
+  margin: 0.14rem 0;
+  padding: 0.34rem 0.5rem;
   border: 1px solid transparent;
   border-radius: 10px;
+  min-height: 2rem;
   color: inherit;
   text-decoration: none;
   transition:
@@ -171,19 +180,21 @@
 }
 
 .nav__list--categories .nav__child-title {
+  font-size: 0.87rem;
+  line-height: 1.25;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .nav__list--categories .nav__child-count {
   min-width: 1.65rem;
-  height: 1.3rem;
+  height: 1.2rem;
   padding: 0 0.4rem;
   border-radius: 999px;
-  font-size: $type-size-8;
+  font-size: 0.69rem;
   font-weight: bold;
-  line-height: 1.3rem;
+  line-height: 1.2rem;
   color: mix($text-color, $primary-color, 65%);
   text-align: center;
   background-color: rgba($primary-color, 0.12);
@@ -197,14 +208,103 @@
 @include breakpoint(max-width $large - 1px) {
   .nav__list--categories {
     border-radius: 14px;
+    padding: 0.72rem;
   }
 
   .nav__list--categories label {
     width: 100%;
     border-radius: 10px;
     margin-bottom: 0.6rem;
+    font-size: 0.86rem;
     background-color: mix($background-color, $primary-color, 92%);
   }
+
+  .nav__list--categories .nav__sub-title--group {
+    font-size: 0.88rem;
+  }
+
+  .nav__list--categories .nav__child-title {
+    font-size: 0.9rem;
+  }
+}
+
+@media (min-width: 1024px) and (orientation: landscape) and (max-width: 1366px) and (max-height: 900px) {
+  .sidebar {
+    width: clamp(10.5rem, 21vw, 12.4rem);
+  }
+
+  .sidebar .author__avatar img {
+    max-width: 98px;
+  }
+
+  .sidebar .author__name {
+    font-size: 0.9rem;
+  }
+
+  .sidebar .author__bio {
+    font-size: 0.72rem;
+    margin-bottom: 0.85rem;
+  }
+
+  .nav__list--categories {
+    padding: 0.62rem;
+    border-radius: 12px;
+  }
+
+  .nav__list--categories label {
+    margin-bottom: 0.48rem;
+    padding-top: 0.42rem;
+    padding-bottom: 0.42rem;
+    font-size: 0.76rem;
+  }
+
+  .nav__list--categories .nav__all-posts-link {
+    padding: 0.44rem 0.56rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .nav__list--categories .nav__all-posts-title {
+    font-size: 0.79rem;
+  }
+
+  .nav__list--categories .nav__all-posts-count {
+    min-width: 1.86rem;
+    height: 1.28rem;
+    line-height: 1.28rem;
+    font-size: 0.65rem;
+  }
+
+  .nav__list--categories .nav__items--category-groups {
+    gap: 0.44rem;
+    font-size: 0.79rem;
+  }
+
+  .nav__list--categories .nav__group {
+    padding: 0.34rem;
+    border-radius: 10px;
+  }
+
+  .nav__list--categories .nav__sub-title--group {
+    padding: 0.08rem 0.2rem 0.22rem;
+    font-size: 0.74rem;
+  }
+
+  .nav__list--categories .nav__child-link {
+    margin: 0.1rem 0;
+    padding: 0.27rem 0.42rem;
+    min-height: 1.65rem;
+  }
+
+  .nav__list--categories .nav__child-title {
+    font-size: 0.74rem;
+  }
+
+  .nav__list--categories .nav__child-count {
+    min-width: 1.36rem;
+    height: 1.04rem;
+    line-height: 1.04rem;
+    font-size: 0.6rem;
+  }
 }
 
 @keyframes sidebar-nav-group-in {

assets/js/dark-theme.js

@@ -1,6 +1,7 @@
 (function () {
   "use strict";
 
+  var THEME_STORAGE_KEY = "theme";
   var root = document.documentElement;
   var defaultTheme = document.getElementById("theme-default-css");
   var darkTheme = document.getElementById("theme-dark-css");
@@ -10,22 +11,72 @@
     return;
   }
 
-  function readThemePreference() {
+  function normalizeTheme(value) {
+    return value === "dark" || value === "default" ? value : null;
+  }
+
+  function readCookie(name) {
+    var escaped = name.replace(/([.$?*|{}()[\]\\/+^])/g, "\\$1");
+    var match = document.cookie.match(
+      new RegExp("(?:^|; )" + escaped + "=([^;]*)")
+    );
+    return match ? decodeURIComponent(match[1]) : null;
+  }
+
+  function writeCookie(name, value, maxAgeSeconds) {
+    document.cookie =
+      name +
+      "=" +
+      encodeURIComponent(value) +
+      "; path=/; max-age=" +
+      maxAgeSeconds +
+      "; SameSite=Lax";
+  }
+
+  function readStorage(storage) {
+    if (!storage) {
+      return null;
+    }
+
     try {
-      return localStorage.getItem("theme");
+      return storage.getItem(THEME_STORAGE_KEY);
     } catch (error) {
       return null;
     }
   }
 
-  function writeThemePreference(theme) {
+  function writeStorage(storage, value) {
+    if (!storage) {
+      return;
+    }
+
     try {
-      localStorage.setItem("theme", theme);
+      storage.setItem(THEME_STORAGE_KEY, value);
     } catch (error) {
-      // Ignore private mode/storage restrictions and keep runtime-only state.
+      // Ignore storage restrictions and rely on other persistence channels.
     }
   }
 
+  function readThemePreference() {
+    return (
+      normalizeTheme(readStorage(window.localStorage)) ||
+      normalizeTheme(readStorage(window.sessionStorage)) ||
+      normalizeTheme(readCookie(THEME_STORAGE_KEY))
+    );
+  }
+
+  function writeThemePreference(theme) {
+    var normalizedTheme = normalizeTheme(theme);
+
+    if (!normalizedTheme) {
+      return;
+    }
+
+    writeStorage(window.localStorage, normalizedTheme);
+    writeStorage(window.sessionStorage, normalizedTheme);
+    writeCookie(THEME_STORAGE_KEY, normalizedTheme, 60 * 60 * 24 * 365);
+  }
+
   function getSystemDarkModePreference() {
     return (
       window.matchMedia &&
@@ -93,9 +144,12 @@
   function applyTheme(theme, persistPreference) {
     var isDarkMode = theme === "dark";
 
+    defaultTheme.media = isDarkMode ? "not all" : "all";
+    darkTheme.media = isDarkMode ? "all" : "not all";
     defaultTheme.disabled = isDarkMode;
     darkTheme.disabled = !isDarkMode;
     root.setAttribute("data-theme", theme);
+    root.style.colorScheme = isDarkMode ? "dark" : "light";
     renderToggleButton(theme);
     syncGiscusTheme(theme);
 
@@ -107,7 +161,7 @@
   var mediaQueryList = window.matchMedia
     ? window.matchMedia("(prefers-color-scheme: dark)")
     : null;
-  var initialTheme = root.getAttribute("data-theme") || getInitialTheme();
+  var initialTheme = getInitialTheme();
 
   applyTheme(initialTheme, false);
 
@@ -142,4 +196,8 @@
 
     syncGiscusTheme(root.getAttribute("data-theme") || "default");
   });
+
+  window.addEventListener("pageshow", function () {
+    applyTheme(getInitialTheme(), false);
+  });
 })();