From 21c225f0bdb810b0b3ac27d1ef4b265eda1f8c17 Mon Sep 17 00:00:00 2001
From: liuyib <1656081615@qq.com>
Date: Sun, 29 Mar 2020 12:09:52 +0800
Subject: [PATCH] refactor: Optimize `z-index`

---
 .../css/_common/components/header/index.styl  |  1 -
 source/css/_common/components/pages/page.styl | 23 +++++++++----------
 .../_common/components/pages/timeline.styl    |  1 -
 .../components/widgets/zoom-image.styl        |  2 +-
 source/css/_common/scaffolding/utils.styl     |  2 +-
 source/css/_variables/index.styl              |  6 ++---
 6 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/source/css/_common/components/header/index.styl b/source/css/_common/components/header/index.styl
index 02ab44c..6a1265f 100644
--- a/source/css/_common/components/header/index.styl
+++ b/source/css/_common/components/header/index.styl
@@ -239,7 +239,6 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
         position: absolute;
         bottom: 1rem;
         left: calc(50% - 1rem);
-        z-index: $z-index0;
         width: 2rem;
         height: 2rem;
         text-align: center;
diff --git a/source/css/_common/components/pages/page.styl b/source/css/_common/components/pages/page.styl
index 65ce36a..8065ac2 100644
--- a/source/css/_common/components/pages/page.styl
+++ b/source/css/_common/components/pages/page.styl
@@ -10,29 +10,28 @@
       content: '';
       position: absolute;
       top: 1em;
+      bottom: -1em;
       left: 0;
-      z-index: $z-index0;
-      border: .15rem solid $post-timeline-dot-color;
-      border-radius: 50%;
-      width: .6rem;
-      height: .6rem;
-      background-color: var(--color-gray-250);
-      transition: border-color .2s ease;
-      transform: translate(-50%, -50%);
+      border-left: .2rem dashed var(--color-gray-250);
+      transform: translateX(-50%);
     }
 
     &::after {
       content: '';
       position: absolute;
       top: 1em;
-      bottom: -1em;
       left: 0;
-      border-left: .2rem dashed var(--color-gray-250);
-      transform: translateX(-50%);
+      border: .15rem solid $post-timeline-dot-color;
+      border-radius: 50%;
+      width: .6rem;
+      height: .6rem;
+      background-color: var(--color-gray-250);
+      transition: border-color .2s ease;
+      transform: translate(-50%, -50%);
     }
 
     &:hover {
-      &::before {
+      &::after {
         border-color: $post-timeline-dot-hover-color;
       }
     }
diff --git a/source/css/_common/components/pages/timeline.styl b/source/css/_common/components/pages/timeline.styl
index 829f09a..c97ac94 100644
--- a/source/css/_common/components/pages/timeline.styl
+++ b/source/css/_common/components/pages/timeline.styl
@@ -24,7 +24,6 @@
       position: absolute;
       top: 50%;
       left: 0;
-      z-index: 1000;
       border-radius: 50%;
       width: .3rem;
       height: .3rem;
diff --git a/source/css/_common/components/widgets/zoom-image.styl b/source/css/_common/components/widgets/zoom-image.styl
index bc48944..94fcf3d 100644
--- a/source/css/_common/components/widgets/zoom-image.styl
+++ b/source/css/_common/components/widgets/zoom-image.styl
@@ -2,7 +2,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: $z-index1;
+  z-index: $z-index2;
   width: 100%;
   height: 100%;
   background-color: convert(hexo-config('zoom_image.mask_color') || '#fff');
diff --git a/source/css/_common/scaffolding/utils.styl b/source/css/_common/scaffolding/utils.styl
index c52208c..59b0c4a 100644
--- a/source/css/_common/scaffolding/utils.styl
+++ b/source/css/_common/scaffolding/utils.styl
@@ -13,7 +13,7 @@
   position: absolute;
   top: 0;
   left: 50%;
-  z-index: $z-index1;
+  z-index: $z-index2;
   font-family: sans-serif, Arial;
   font-size: $font-size-base;
   font-weight: normal;
diff --git a/source/css/_variables/index.styl b/source/css/_variables/index.styl
index df7bb00..7d113f6 100644
--- a/source/css/_variables/index.styl
+++ b/source/css/_variables/index.styl
@@ -14,9 +14,9 @@ $yellow-light  = #fff494
 // -------------------------------------------
 $z-index-2 = -2
 $z-index-1 = -1
-$z-index0  = 1000
-$z-index1  = 1001
-$z-index2  = 1002
+$z-index0  = 0
+$z-index1  = 1
+$z-index2  = 2
 
 // -------------------------------------------
 // Layout
-- 
GitLab