feat: improve style

D-Sketon · Oct 20, 2024 · f580a2a · f580a2a
1 parent 0410198
commit f580a2a
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);