refactor(styles): 重构层级变量并调整样式

- 将层级变量移至 :root 选择器内 - 更新 popover、graph、footer 等组件的 z-index 使用变量 - 调整 toc 组件的滚动行为和动画效果 - 统一错误页面的样式和文案
CatCodeMe · Dec 5, 2024 · 43a22e7 · 43a22e7
1 parent 6646ad5
commit 43a22e7
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 99 deletions.
diff --git a/quartz.layout.ts b/quartz.layout.ts
@@ -27,11 +27,16 @@ const ConditionalWrapper = (component: any): any => {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
     beforeBody: [
-        Component.Banner(),
-        ConditionalWrapper(Component.Breadcrumbs),
-        ConditionalWrapper(Component.ArticleTitle),
-        ConditionalWrapper(Component.ContentMeta),
-        ConditionalWrapper(Component.TagList),
+        // Component.Banner(),
+        // ConditionalWrapper(Component.Breadcrumbs),
+        // ConditionalWrapper(Component.ArticleTitle),
+        // ConditionalWrapper(Component.ContentMeta),
+        // ConditionalWrapper(Component.TagList),
+
+        Component.Breadcrumbs(),
+        Component.ArticleTitle(),
+        Component.ContentMeta(),
+        Component.TagList(),
     ],
     left: [
         Component.PageTitle(),

diff --git a/quartz/components/FloatingButtons.tsx b/quartz/components/FloatingButtons.tsx
@@ -39,7 +39,7 @@ export default ((opts?: FloatingButtonsOptions) => {
             title="全局图谱"
             data-action="graph"
           >
-            <span class="floating-button-tooltip">全局图谱 ⌘ G</span>
+            <span class="floating-button-tooltip">全局图谱 ⌘</span>
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
               <path fill="currentColor" d="M11.983 21.462q-.978 0-1.664-.69t-.685-1.676q0-.84.534-1.49t1.332-.816v-2.478q-.39-.062-.717-.257t-.566-.491l-2.094 1.252q.064.173.095.363q.032.19.032.379q0 .985-.702 1.675t-1.68.69t-1.664-.689t-.685-1.673t.684-1.676t1.662-.693q.526 0 .983.207t.78.557l2.09-1.246q-.045-.164-.077-.347t-.032-.368q0-.183.032-.36t.095-.358l-2.088-1.213q-.323.369-.786.576q-.464.206-.997.206q-.977 0-1.662-.689T3.52 8.484t.685-1.676t1.664-.692t1.68.69t.702 1.675q0 .188-.022.377q-.022.188-.086.352l2.094 1.207q.239-.276.556-.469t.708-.254V7.196q-.798-.165-1.332-.818q-.533-.653-.533-1.493q0-.986.685-1.676t1.663-.69t1.68.69t.703 1.676q0 .84-.534 1.493t-1.332.818v2.518q.371.08.686.266q.314.186.553.462l2.138-1.219q-.063-.173-.095-.363t-.032-.38q0-.985.685-1.675t1.664-.69t1.68.69t.702 1.672t-.702 1.677t-1.683.692q-.518 0-.957-.206q-.439-.207-.762-.557l-2.144 1.219q.063.164.085.34q.023.175.023.358t-.032.352t-.076.333l2.144 1.27q.323-.35.762-.556q.44-.207.957-.207q.981 0 1.683.69q.702.688.702 1.672q0 .985-.702 1.677t-1.68.692t-1.664-.69t-.685-1.675q0-.198.032-.379t.095-.363l-2.12-1.252q-.238.296-.552.478q-.314.183-.705.264v2.485q.798.165 1.332.815t.533 1.49q0 .986-.702 1.676t-1.68.69m.007-1q.57 0 .972-.393t.403-.972q0-.58-.398-.973t-.986-.393q-.56 0-.953.403q-.393.402-.393.962t.393.963t.963.402m-6.116-3.538q.57 0 .972-.392q.403-.392.403-.972t-.398-.973t-.986-.394q-.56 0-.953.403q-.394.403-.394.963t.393.962q.394.403.963.403m12.23 0q.57 0 .973-.392t.403-.972t-.398-.973t-.987-.394q-.56 0-.953.403t-.393.963t.393.962t.963.403m-6.116-3.558q.57 0 .972-.392q.403-.392.403-.972t-.398-.973t-.986-.394q-.56 0-.953.403q-.394.403-.394.963t.394.962t.962.403M5.875 9.846q.57 0 .972-.392q.403-.392.403-.972t-.398-.973q-.398-.394-.986-.394q-.56 0-.953.403q-.394.403-.394.963t.393.962q.394.403.963.403m12.23 0q.57 0 .973-.392t.403-.972t-.398-.973q-.398-.394-.987-.394q-.56 0-.953.403t-.393.963t.393.962t.963.403M11.99 6.25q.57 0 .973-.392t.403-.972t-.399-.973q-.398-.394-.986-.394q-.56 0-.953.403t-.393.963t.393.962t.963.403" />
             </svg>

diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
@@ -1,4 +1,5 @@
 import {QuartzComponent, QuartzComponentConstructor, QuartzComponentProps} from "./types"
+import style from "./styles/footer.scss"
 import {version} from "../../package.json"
 
 interface Options {
@@ -14,47 +15,15 @@ export default ((opts?: Options) => {
     const Footer: QuartzComponent = ({fileData}: QuartzComponentProps) => {
         const year = new Date().getFullYear()
         return (
-            <footer class="footer">
-                <div class="footer-content">
-                    <p class="footer-text">
-                        Powered By <a href={quartz} class="external">Quartz {version}</a>
-                        ©{year} / <a href={ob} class="external">Obsidian</a> / 
-                        <a href={ccm} class="external">GitPage</a> | 
-                        <a href={cc} class="external">CC BY-NC-SA 4.0</a>
-                    </p>
-                    <div class="giscus"></div>
-                </div>
+            <footer>
+                <p>Powered By <a href={quartz} class="external">Quartz {version}</a>
+                    ©{year} / <a href={ob} class="external">Obsidian</a> / <a href={ccm} class="external">GitPage</a> | <a href={cc} class="external">CC BY-NC-SA 4.0</a>
+                </p>
+                <div className="giscus"></div>
             </footer>
         )
     }
 
-    Footer.css = `
-        .footer {
-            margin-top: auto;
-            padding: 2rem 0;
-            width: 100%;
-            position: relative;
-            z-index: var(--z-bottom);
-        }
-
-        .footer-content {
-            position: relative;
-            z-index: var(--z-bottom);
-            max-width: var(--container-width);
-            margin: 0 auto;
-        }
-
-        .giscus {
-            position: relative;
-            z-index: var(--z-bottom);
-        }
-
-        .footer-text {
-            position: relative;
-            z-index: var(--z-bottom);
-            text-align: center;
-            opacity: 0.7;
-        }
-    `
+    Footer.css = style
     return Footer
 }) satisfies QuartzComponentConstructor
diff --git a/quartz/components/scripts/toc.inline.ts b/quartz/components/scripts/toc.inline.ts
@@ -1,18 +1,31 @@
-const bufferPx = 150
-const observer = new IntersectionObserver((entries) => {
-  for (const entry of entries) {
-    const slug = entry.target.id
-    const tocEntryElement = document.querySelector(`a[data-for="${slug}"]`)
-    const windowHeight = entry.rootBounds?.height
-    if (windowHeight && tocEntryElement) {
-      if (entry.boundingClientRect.y < windowHeight) {
-        tocEntryElement.classList.add("in-view")
-      } else {
-        tocEntryElement.classList.remove("in-view")
+let currentObserver: IntersectionObserver | null = null
+
+function createObserver() {
+  if (currentObserver) {
+    currentObserver.disconnect()
+  }
+
+  currentObserver = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      const slug = entry.target.id
+      const tocEntryElement = document.querySelector(`a[data-for="${slug}"]`)
+      const windowHeight = entry.rootBounds?.height
+      if (windowHeight && tocEntryElement) {
+        if (entry.boundingClientRect.y < windowHeight) {
+          tocEntryElement.classList.add("in-view")
+        } else {
+          tocEntryElement.classList.remove("in-view")
+        }
       }
     }
+  })
+
+  const headers = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]")
+  if (currentObserver) {
+    const observer = currentObserver
+    headers.forEach((header) => observer.observe(header))
   }
-})
+}
 
 function toggleToc(this: HTMLElement) {
   this.classList.toggle("collapsed")
@@ -38,12 +51,42 @@ function setupToc() {
   }
 }
 
+function setupTocListeners() {
+  const tocLinks = document.querySelectorAll('#toc-content a')
+  tocLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault()
+      const targetId = link.getAttribute('data-for')
+      if (!targetId) return
+
+      const targetElement = document.getElementById(targetId)
+      if (targetElement) {
+        // 移除其他元素的动画类
+        document.querySelectorAll('.target-animation').forEach(el => {
+          el.classList.remove('target-animation')
+        })
+
+        // 滚动到目标位置，使用 block: 'start' 并设置 margin 来控制距离
+        targetElement.scrollIntoView({ 
+          behavior: 'smooth',
+          block: 'center' // 可以是 'start', 'center', 'end' 或 'nearest'
+        })
+
+        // 添加动画类
+        targetElement.classList.add('target-animation')
+
+        // 几秒后移除动画类
+        setTimeout(() => {
+          targetElement.classList.remove('target-animation')
+        }, 2000)
+      }
+    })
+  })
+}
+
 window.addEventListener("resize", setupToc)
 document.addEventListener("nav", () => {
   setupToc()
-
-  // update toc entry highlighting
-  observer.disconnect()
-  const headers = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]")
-  headers.forEach((header) => observer.observe(header))
+  createObserver()
+  setupTocListeners()
 })
diff --git a/quartz/components/styles/footer.scss b/quartz/components/styles/footer.scss
@@ -3,4 +3,11 @@ footer {
     text-decoration: none; /* 去除链接默认的下划线 */
     border-bottom: 1px dashed ; /* 设置底部边框为 1 像素宽的虚线，颜色为黑色 */
   }
+
+  p {
+    text-align: center;
+    opacity: 0.7;
+    //position: relative;
+    //z-index: var(--z-content) + 1;
+  }
 }
diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss
@@ -35,17 +35,16 @@
     }
 
     & > #graph-container {
-      //position: absolute;
-      //width: 70vw;
-      //z-index: var(--z-overlay) !important;
+
       background: var(--light);
       box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
     }
   }
 
   & > #global-graph-outer {
     position: fixed;
-    z-index: 9999;
+    // z-index: 9999;
+    z-index: var(--z-overlay);
     left: 0;
     top: 0;
     width: 100vw;

diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
@@ -15,7 +15,7 @@
 }
 
 .popover {
-  z-index: 999;
+  z-index: var(--z-popover);
   position: absolute;
   overflow: visible;
   padding: 1rem;

diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
@@ -68,3 +68,42 @@ button#toc {
     }
   }
 }
+
+// 修改标题高亮动画样式
+@keyframes target-fade {
+  0% {
+    background-color: var(--highlight);
+    transform: scale(1.02);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 0.5rem 0.5rem 0.5rem 0;
+    border-radius: 4px;
+  }
+  70% {
+    background-color: var(--highlight);
+    transform: scale(1.02);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 0.5rem 0.5rem 0.5rem 0;
+    border-radius: 4px;
+  }
+  100% {
+    background-color: transparent;
+    transform: scale(1);
+    box-shadow: none;
+    padding: 0.5rem 0.5rem 0.5rem 0;
+    border-radius: 4px;
+  }
+}
+
+.target-animation {
+  animation: target-fade 2s cubic-bezier(0.4, 0, 0.2, 1);
+  //margin: -0.5rem;  // 补偿 padding，防止布局跳动
+}
+
+// 为所有标题添加滚动边距和过渡效果
+h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
+  scroll-margin-top: 100px;
+  transition: all 0.3s ease;
+  padding: 0.5rem 0.5rem 0.5rem 0;
+  // margin: -0.5rem;
+  border-radius: 4px;
+}
diff --git a/quartz/i18n/locales/zh-CN.ts b/quartz/i18n/locales/zh-CN.ts
@@ -71,8 +71,8 @@ export default {
       lastFewNotes: ({ count }) => `最近的${count}条笔记`,
     },
     error: {
-      title: "无法找到",
-      notFound: "私有笔记或笔记不存在。",
+      title: "404 - ◕‿◕ 但你找到了一只猫！",
+      notFound: "私有笔记或笔记不存在",
       home: "返回首页",
     },
     folderContent: {

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
@@ -2,6 +2,18 @@
 @use "./syntax.scss";
 @use "./callouts.scss";
 
+:root{
+  --z-bottom: -1;        // 改为负值
+  --z-content: 10;      // 正文里的内容
+  --z-sidebar: 50;      // 侧边栏
+  --z-nav: 100;         // 导航
+  --z-graph: 500;       // 图谱
+  --z-popover: 1000;    // 弹出层
+  --z-overlay: 2000;    // 遮罩层
+  --z-modal: 3000;      // 模态框
+  --z-404: 9999;        // 404页面
+}
+
 html {
   scroll-behavior: smooth;
   text-size-adjust: none;

diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
@@ -34,14 +34,7 @@
    --code-language-text: #3b4c68;
 
    --border-radius: 4px;
-   --z-bottom: -1;        // 改为负值
-   --z-content: 10;      // 普通内容
-   --z-nav: 100;         // 导航
-   --z-graph: 500;       // 图谱
-   --z-popover: 1000;    // 弹出层
-   --z-overlay: 2000;    // 遮罩层
-   --z-modal: 3000;      // 模态框
-   --z-404: 9999;        // 404页面
+
 }
 
 
@@ -170,7 +163,7 @@ body[data-topbar-has-content="0"] {
    margin: 2rem auto 0;
 }
 
-//文章主内容区样式
+
 article:has(p:not(:empty)) {
    border: dashed 1px var(--gray);
    border-radius: var(--border-radius);
@@ -232,7 +225,7 @@ table {
 
       .popover {
          position: fixed; // 改用固定定位
-         z-index: 999; // 确保显示在最上层
+         z-index: var(--z-content) + 1; // 确保显示在最上层
       }
    }
 }
@@ -357,7 +350,7 @@ code {
 //关系图谱
 .graph>#global-graph-outer>#global-graph-container {
    width: 70vw;
-   z-index: 1000;
+   z-index: var(--z-graph) !important;
 }
 
 .graph>.graph-outer {
@@ -650,20 +643,6 @@ article.page-transition {
 }
 
 
-
-// footer 相关样式
-footer.footer {
-  position: relative;
-  isolation: isolate;  // 创建新的层叠上下文
-  z-index: var(--z-bottom);
-
-  // 所有子元素强制使用相同的层级
-  * {
-    position: relative;
-    z-index: var(--z-bottom);
-  }
-}
-
 // 图谱样式
 .graph {
   #global-graph-container {