perf: 分隔线优化

D-Sketon · Aug 4, 2024 · 05bbf4f · 05bbf4f
1 parent a331960
commit 05bbf4f
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 14 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -125,6 +125,7 @@ const posts = await getCollection("blog");
       display: block;
       object-fit: cover;
       transition: 0.3s;
+      -webkit-mask: linear-gradient(to top, transparent, #fff 50%);
       mask: linear-gradient(to top, transparent, #fff 50%);
 
       @media screen and (max-width: 959px) {

diff --git a/src/components/post/Date.astro b/src/components/post/Date.astro
@@ -29,7 +29,7 @@ const { pubDate } = Astro.props;
     background: var(--red-5);
     border-radius: 20px;
     padding: 10px 18px;
-    margin: 0 12px 1em;
+    margin: 0 12px 1em 0;
     box-shadow: 0 0 5px 3px var(--color-meta-shadow);
     transition: 0.3s;
     display: flex;

diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
@@ -26,6 +26,7 @@ const { title, tags = [] } = post;
     (tags.length ||
       (VALINE.enable && VALINE.visitor) ||
       (WALINE.enable && WALINE.pageview)) && (
+      <div class="article-footer-line"></div>
       <footer class="article-footer" slot="footer">
         <Tag tags={tags} />
         <ReadingCount url={url} title={title} />
@@ -36,13 +37,21 @@ const { title, tags = [] } = post;
 </MarkdownLayout>
 
 <style>
+  .article-footer-line {
+    margin: 10px 35px 0;
+    opacity: 0.3;
+    height: 2px;
+    background-image: linear-gradient(to right, var(--red-0) 50%, transparent 0%);
+    background-size: 25px 2px;
+    background-repeat: repeat-x;
+    filter: drop-shadow(0px 0px 2px red);
+  }
   .article-footer {
     font-size: 14px;
-    border-top: 1px solid var(--color-border);
-    margin: 0 20px 10px;
     padding-top: 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: 0 35px 20px;
   }
 </style>
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
@@ -71,17 +71,22 @@ const {
       }
 
       .hr-line {
-        margin: 10px 20px;
-        opacity: 0.5;
-        height: 3px;
+        margin: 10px 35px;
+        opacity: 0.3;
+        height: 2px;
         background-image: linear-gradient(
-          to left,
+          to right,
           var(--red-0) 50%,
           transparent 0%
         );
-        background-size: 20px 3px;
+        background-size: 25px 2px;
         background-repeat: repeat-x;
         filter: drop-shadow(0px 0px 2px red);
+        transition: opacity 0.3s;
+
+        &:hover {
+          opacity: 0.5;
+        }
       }
 
       .article {
@@ -99,7 +104,7 @@ const {
       .article-meta {
         display: flex;
         flex-direction: column;
-        padding: 20px 20px 0;
+        padding: 20px 35px 0;
       }
     </style>
     <ViewTransitions />

diff --git a/src/styles/base.stylus b/src/styles/base.stylus
@@ -54,17 +54,22 @@
 
   hr {
     margin: 10px 0;
-    opacity: 0.5;
-    height: 3px;
+    opacity: 0.3;
+    height: 2px;
     background-image: linear-gradient(
-      to left,
+      to right,
       rgba(255, 0, 0, 0.75) 50%,
       transparent 0%
     );
-    background-size: 20px 3px;
+    background-size: 20px 2px;
     background-repeat: repeat-x;
     border: none;
     filter: drop-shadow(0px 0px 2px red);
+    transition: opacity .3s;
+
+    &:hover {
+      opacity: 0.5;
+    }
   }
 
   strong {

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -20,7 +20,7 @@
   --color-wrap: #fff;
 
   --color-h2-border: #eee;
-  --color-meta-shadow: --var(--red-6);
+  --color-meta-shadow: var(--red-6);
   --color-hover-shadow: rgba(150, 150, 150, 0.1);
   --color-h2-after: rgba(255, 0, 0, 0.6);
   --color-h2-after-shadow: rgba(255, 78, 106, 0.7);