Răsfoiți Sursa

feat(library): 导航栏左侧加 WikiPāli logo,点击回站点首页

浅色导航栏用深色字版,压在 hero 上时换白字版;窄屏下面包屑截断,菜单按钮不再被挤出屏幕。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
visuddhinanda 3 zile în urmă
părinte
comite
3d04b99ebf

+ 51 - 0
api-v13/resources/css/layout/navbar.css

@@ -37,6 +37,29 @@
     color: var(--wp-ink-muted);
 }
 
+/* ── 站点 logo(回 wikipali 首页) ── */
+.anthology-breadcrumb-bar .bc-logo {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.anthology-breadcrumb-bar .bc-logo__img {
+    display: block;
+    height: 40px;
+    width: auto;
+}
+
+/* 默认浅色导航栏用深色字版;hero 上的白字版在下面「Hero 覆盖状态」里切换 */
+.anthology-breadcrumb-bar .bc-logo__img--light {
+    display: none;
+}
+
+/* logo 之后的面包屑紧贴 logo,不被 space-between 推到中间 */
+.anthology-breadcrumb-bar .bc-logo + .breadcrumb {
+    margin-right: auto;
+}
+
 /* ── Hero 覆盖状态:breadcrumb bar 透明悬浮于 hero 之上 ── */
 .hero-wrapper:has(.hero-section) .anthology-breadcrumb-bar {
     position: absolute;
@@ -48,6 +71,14 @@
     border-bottom: none;
 }
 
+.hero-wrapper:has(.hero-section) .bc-logo__img--dark {
+    display: none;
+}
+
+.hero-wrapper:has(.hero-section) .bc-logo__img--light {
+    display: block;
+}
+
 .hero-wrapper:has(.hero-section) .bc-nav li a {
     color: white;
 }
@@ -117,3 +148,23 @@
         align-items: center;
     }
 }
+
+/* 窄屏:面包屑可收缩、超出截断,保证 logo 与右侧菜单按钮都在屏内 */
+@media (max-width: 768px) {
+    .anthology-breadcrumb-bar .bc-logo + .breadcrumb {
+        flex-shrink: 1;
+        flex-wrap: nowrap;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    /* 各项本身不压缩,只在末尾截掉,避免分隔符和文字挤在一起 */
+    .anthology-breadcrumb-bar .bc-logo + .breadcrumb .breadcrumb-item {
+        flex-shrink: 0;
+    }
+
+    .anthology-breadcrumb-bar .bc-logo__img {
+        height: 32px;
+    }
+}

+ 6 - 0
api-v13/resources/views/components/library/navbar.blade.php

@@ -2,6 +2,12 @@
     <div class="container-xl">
         <div class="bc-inner">
 
+            {{-- 站点 logo,回 wikipali 首页。浅色导航栏用深色字版;压在 hero 上时(导航透明)换白字版,见 navbar.css --}}
+            <a href="{{ url('/') }}" class="bc-logo" aria-label="WikiPāli">
+                <img src="{{ asset('assets/images/wikipali_logo_dark.svg') }}" alt="WikiPāli" class="bc-logo__img bc-logo__img--dark">
+                <img src="{{ asset('assets/images/wikipali_logo.svg') }}" alt="" aria-hidden="true" class="bc-logo__img bc-logo__img--light">
+            </a>
+
             <ol class="breadcrumb mb-0">
                 @yield('breadcrumb')
             </ol>