From f580a2a8f0b0d23b8cc3d22bae0ffba3920a4224 Mon Sep 17 00:00:00 2001
From: D-Sketon <2055272094@qq.com>
Date: Sun, 20 Oct 2024 20:35:35 +0800
Subject: [PATCH] feat: improve style

---
 src/components/Footer.astro         | 6 +-----
 src/components/FriendCard.astro     | 4 ++--
 src/components/Header.astro         | 2 +-
 src/components/HeaderSubTitle.astro | 2 +-
 src/components/HeaderTitle.astro    | 2 +-
 src/components/Pagination.astro     | 4 ++--
 src/components/post/Date.astro      | 4 ++--
 src/components/post/Tag.astro       | 3 ++-
 src/layouts/MarkdownLayout.astro    | 1 +
 src/styles/base.stylus              | 8 ++------
 10 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index fce0fc1..826bc8a 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -102,11 +102,7 @@ const totalmin2read = await totalReadingTime();
     opacity: 0.3;
     width: 200%;
     height: 10px;
-    background-image: linear-gradient(
-      to left,
-      rgba(255, 0, 0, 0.75) 50%,
-      transparent 0%
-    );
+    background: linear-gradient(to left, var(--red-1) 50%, transparent 0%) repeat-x 0 0 / 100px 10px;
     background-size: 100px 10px;
     background-repeat: repeat-x;
     transition: opacity 0.3s;
diff --git a/src/components/FriendCard.astro b/src/components/FriendCard.astro
index 17f7628..615cecf 100644
--- a/src/components/FriendCard.astro
+++ b/src/components/FriendCard.astro
@@ -2,11 +2,11 @@
 import { FRIEND } from "../utils/config";
 ---
 
-<div class="friend-wrap" data-aos="fade-up">
+<div class="friend-wrap">
   {
     FRIEND.map(({ name, desc, url, avatar }) => {
       return (
-        <div class="friend-item-wrap">
+        <div class="friend-item-wrap" data-aos="zoom-in">
           <a href={url} target="_blank" />
           <div class="friend-icon-wrap">
             <div class="friend-icon">
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 73b5002..52ec8ce 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -42,7 +42,7 @@ const posts = await getCollection("blog");
   {
     cover === `${BASE_URL}/images/banner.webp` ? (
       <>
-        <picture>
+        <picture style="user-select: none;">
           <source
             media="(max-width: 479px)"
             srcset={`${BASE_URL}/images/banner-600w.webp`}
diff --git a/src/components/HeaderSubTitle.astro b/src/components/HeaderSubTitle.astro
index ab5f842..48f15ae 100644
--- a/src/components/HeaderSubTitle.astro
+++ b/src/components/HeaderSubTitle.astro
@@ -7,7 +7,7 @@ type Props = {
 const { subtitle, url } = Astro.props;
 ---
 
-<h2 id="subtitle-wrap" slot="header">
+<h2 id="subtitle-wrap" slot="header" data-aos="slide-down">
   <a href={url} id="subtitle">
     {subtitle}
   </a>
diff --git a/src/components/HeaderTitle.astro b/src/components/HeaderTitle.astro
index 1db7b16..a354109 100644
--- a/src/components/HeaderTitle.astro
+++ b/src/components/HeaderTitle.astro
@@ -9,7 +9,7 @@ const { title, url } = Astro.props;
 
 <div>
   <a href={url} id="logo">
-    <h1>{title}</h1>
+    <h1 data-aos="slide-up">{title}</h1>
   </a>
 </div>
 
diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index 30a90c7..9757ccf 100644
--- a/src/components/Pagination.astro
+++ b/src/components/Pagination.astro
@@ -15,7 +15,7 @@ const lowerBound = currentPage - 2 > 0 ? currentPage - 2 : 1;
 const upperBound = currentPage + 2 < lastPage ? currentPage + 2 : lastPage;
 ---
 
-<nav id="page-nav">
+<nav id="page-nav" data-aos="fade-up">
   {
     prevUrl && (
       <a href={`${BASE_URL}${prevUrl}`} class="extend prev" rel="prev">
@@ -70,7 +70,7 @@ const upperBound = currentPage + 2 < lastPage ? currentPage + 2 : lastPage;
     text-align: center;
     color: var(--color-grey);
     overflow: hidden;
-    transition: 0.3s;
+    transition: 1s;
 
     &:hover {
       box-shadow: 0 0 10px 3px var(--color-hover-shadow);
diff --git a/src/components/post/Date.astro b/src/components/post/Date.astro
index b9ba3f4..fba8c6d 100644
--- a/src/components/post/Date.astro
+++ b/src/components/post/Date.astro
@@ -8,8 +8,8 @@ type Props = {
 const { pubDate } = Astro.props;
 ---
 
-<div class="article-date" data-aos="fade-left">
-  <span class="article-date-span">
+<div class="article-date">
+  <span class="article-date-span" data-aos="zoom-in">
     <Icon name="tabler:clock" />
     <time datetime={pubDate.toISOString()} itemprop="datePublished"
       >{pubDate.toLocaleDateString().replace(/\//g, "-")}</time
diff --git a/src/components/post/Tag.astro b/src/components/post/Tag.astro
index 3e8a6e5..42b6760 100644
--- a/src/components/post/Tag.astro
+++ b/src/components/post/Tag.astro
@@ -13,7 +13,7 @@ const { tags } = Astro.props;
   {
     tags.map((tag) => {
       return (
-        <li class="article-tag-list-item">
+        <li class="article-tag-list-item" data-aos="zoom-in">
           <Icon name="tabler:tag-filled" style="margin-right: 10px"/>
           <a
             class="article-tag-list-link"
@@ -50,5 +50,6 @@ const { tags } = Astro.props;
     display: flex;
     align-items: center;
     font-size: 12px;
+    box-shadow: 0 0 5px 3px var(--color-meta-shadow);
   }
 </style>
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
index b3e1c41..ef9e726 100644
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@@ -119,6 +119,7 @@ const {
         itemprop="blogPost"
         itemscope
         itemtype="https://schema.org/BlogPosting"
+        data-aos="fade-up"
       >
         <div class="article-inner">
           <div class="article-meta">
diff --git a/src/styles/base.stylus b/src/styles/base.stylus
index 761c6a8..fbb9ca8 100644
--- a/src/styles/base.stylus
+++ b/src/styles/base.stylus
@@ -56,12 +56,8 @@
     margin: 10px 0;
     opacity: 0.3;
     height: 2px;
-    background-image: linear-gradient(
-      to right,
-      rgba(255, 0, 0, 0.75) 50%,
-      transparent 0%
-    );
-    background-size: 20px 2px;
+    background-image: linear-gradient(to right, var(--red-0) 50%, transparent 0%);
+    background-size: 25px 2px;
     background-repeat: repeat-x;
     border: none;
     filter: drop-shadow(0px 0px 2px red);