From efeb70e19f539ef6097c32079ceb947fbfcd01fa Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Mon, 24 Nov 2025 14:38:59 +0800
Subject: [PATCH] feat: enhance breadcrumb and media styles for improved layout
 and responsiveness

---
 assets/css/_core/_breadcrumb.scss | 13 +++++++++++
 assets/css/_core/_media.scss      | 38 ++++++++++++++++++++++++-------
 layouts/_partials/init/index.html |  2 +-
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/assets/css/_core/_breadcrumb.scss b/assets/css/_core/_breadcrumb.scss
index 35b055f8..302eab71 100644
--- a/assets/css/_core/_breadcrumb.scss
+++ b/assets/css/_core/_breadcrumb.scss
@@ -2,9 +2,22 @@
   padding-inline: 1rem;
   font-size: 0.75rem;
   background-color: $global-background-color;
+  display: flex;
+  gap: 0.5rem;
   @include z-index(1);
   @extend .print-d-none;
 
+  &:has(~ main[data-reverse]) {
+    flex-direction: row-reverse;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    padding-inline: 0.5rem;
+  }
+
   [data-theme='dark'] & {
     background-color: $global-background-color-dark;
   }
diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
index 6a0f5058..d3579a7a 100644
--- a/assets/css/_core/_media.scss
+++ b/assets/css/_core/_media.scss
@@ -41,16 +41,38 @@
 }
 
 @media only screen and (max-width: 1200px) and (min-width: 961px) {
-  .wrapper main {
-    // Hide empty aside and expand article when only one aside is empty
-    aside:first-child:empty:has(~ aside:not(:empty)),
-    aside:first-child:not(:empty) ~ aside#toc-auto:empty {
-      display: none;
+  .wrapper {
+    main {
+      // Hide empty aside and expand article when only one aside is empty
+      aside:first-child:empty:has(~ aside:not(:empty)),
+      aside:first-child:not(:empty) ~ aside#toc-auto:empty {
+        display: none;
+      }
+  
+      aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
+      aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
+        flex: 3;
+      }
     }
 
-    aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
-    aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
-      flex: 3;
+    // Adjust breadcrumb flex when asides are empty
+    &:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+    &:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::after {
+        display: none;
+      }
     }
   }
 }
diff --git a/layouts/_partials/init/index.html b/layouts/_partials/init/index.html
index cfc247a8..ddf330b2 100644
--- a/layouts/_partials/init/index.html
+++ b/layouts/_partials/init/index.html
@@ -1,4 +1,4 @@
-{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251121172518-6f99565f" -}}
+{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251124063901-7d530c9f" -}}
 {{- .Store.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}