feat: 友链卡片优化

D-Sketon · Aug 4, 2024 · a331960 · a331960
1 parent 37fd61d
commit a331960
Show file tree

Hide file tree

Showing 16 changed files with 93 additions and 81 deletions.
diff --git a/src/components/ArchiveList.astro b/src/components/ArchiveList.astro
@@ -95,7 +95,7 @@ posts.forEach((post) => {
     }
 
     &:after {
-      transition: all 0.3s ease;
+      transition: 0.3s;
       content: "";
       position: absolute;
       background: var(--color-h2-after);
@@ -145,7 +145,7 @@ posts.forEach((post) => {
       margin-left: -25px;
       box-shadow: 0 2px 12px var(--color-h2-after-shadow);
       opacity: 0.5;
-      transition: all 0.2s ease;
+      transition: 0.2s;
     }
 
     &:hover {
@@ -154,11 +154,11 @@ posts.forEach((post) => {
         height: 6px;
         border-radius: 50%;
         opacity: 1;
-        transition: all 0.2s ease;
+        transition: 0.2s;
       }
 
       .archive-article-title {
-        transition: all 0.3s ease;
+        transition: 0.3s;
         opacity: 1;
       }
     }
@@ -181,7 +181,7 @@ posts.forEach((post) => {
     text-decoration: none;
     font-weight: bold;
     color: var(--red-0);
-    transition: all 0.3s ease;
+    transition: 0.3s;
     opacity: 0.6;
     margin-left: 15px;
   }

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -82,7 +82,7 @@ const totalmin2read = await totalReadingTime();
 
     &:hover {
       .footer-line {
-        transition: opacity 0.3s ease;
+        transition: opacity 0.3s;
         opacity: 0.5;
       }
     }

diff --git a/src/components/FriendCard.astro b/src/components/FriendCard.astro
@@ -40,20 +40,20 @@ import { FRIEND } from "../utils/config";
     width: 48%;
     height: 100px;
     background: var(--color-wrap);
-    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
     border-radius: 5px;
     position: relative;
     display: flex;
     margin: 1%;
-    transition: all 0.3s ease;
+    transition: 0.3s;
 
     @media screen and (max-width: 767px) {
       width: 98%;
     }
 
     &:hover {
       transform: scale(1.015);
-      box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.1);
+      box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
     }
 
     a {
@@ -69,52 +69,64 @@ import { FRIEND } from "../utils/config";
     width: 100px;
     height: 100%;
     pointer-events: none;
+    flex-shrink: 0;
+  }
 
-    .friend-icon {
-      height: 0;
-      width: 100%;
-      padding-bottom: 100%;
-      position: relative;
+  .friend-icon {
+    height: 0;
+    width: 100%;
+    padding-bottom: 100%;
+    position: relative;
 
-      img {
-        display: block;
-        opacity: 0;
-        transition: opacity 0.2s ease;
-        position: absolute;
-        left: 15%;
-        top: 15%;
-        object-fit: cover;
-        border-radius: 50%;
-        width: 70%;
-        height: 70%;
-      }
+    img {
+      display: block;
+      opacity: 0;
+      transition: opacity 0.2s;
+      position: absolute;
+      left: 15%;
+      top: 15%;
+      object-fit: cover;
+      border-radius: 50%;
+      width: 70%;
+      height: 70%;
+    }
 
-      img.lazyloaded {
-        opacity: 1;
-        animation: blur 0.8s ease forwards;
-      }
+    img.lazyloaded {
+      opacity: 1;
+      animation: blur 0.8s forwards;
     }
   }
 
   .friend-info-wrap {
     display: flex;
     justify-content: center;
     flex-direction: column;
-    padding-left: 8px;
+    padding: 0 8px;
+    overflow: hidden;
 
     div {
-      padding: 10px 0;
+      margin: 10px 0;
     }
+  }
 
-    .friend-name {
-      color: var(--red-2);
-      font-size: 18px;
-      font-weight: bold;
-    }
+  .friend-name {
+    color: var(--red-2);
+    font-size: 18px;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+    overflow: hidden;
+  }
 
-    .friend-desc {
-      color: var(--color-grey);
-      font-size: 14px;
-    }
+  .friend-desc {
+    color: var(--color-grey);
+    font-size: 14px;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    width: 100%;
   }
 </style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -95,7 +95,7 @@ const posts = await getCollection("blog");
     overflow: hidden;
     background: var(--color-header-background);
     box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
+    transition: 0.3s;
     z-index: 200;
     &.header-nav-hidden {
       top: -80px;
@@ -124,7 +124,7 @@ const posts = await getCollection("blog");
 
       display: block;
       object-fit: cover;
-      transition: all 0.3s ease;
+      transition: 0.3s;
       mask: linear-gradient(to top, transparent, #fff 50%);
 
       @media screen and (max-width: 959px) {

diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
@@ -17,7 +17,7 @@ const { href, ...props } = Astro.props;
     padding: 0 15px;
     display: flex;
     opacity: 0.8;
-    transition: all 0.3s ease;
+    transition: 0.3s;
     line-height: 16px;
     font-size: 16px;
 
@@ -35,7 +35,7 @@ const { href, ...props } = Astro.props;
       opacity: 1;
     }
     &:hover .main-nav-icon {
-      transition: all 1s ease;
+      transition: all 1s;
       transform: rotate(360deg);
     }
   }
@@ -60,7 +60,7 @@ const { href, ...props } = Astro.props;
     padding: 20px 15px;
     background: var(--imageUrl) no-repeat center / 80%;
     transform: rotate(0deg);
-    transition: all 1s ease;
+    transition: all 1s;
     cursor: pointer;
   }
 </style>
diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
@@ -70,7 +70,7 @@ const upperBound = currentPage + 2 < lastPage ? currentPage + 2 : lastPage;
     text-align: center;
     color: var(--color-grey);
     overflow: hidden;
-    transition: all 0.3s ease;
+    transition: 0.3s;
 
     &:hover {
       box-shadow: 0 0 10px 3px var(--color-hover-shadow);
@@ -84,7 +84,7 @@ const upperBound = currentPage + 2 < lastPage ? currentPage + 2 : lastPage;
     a {
       color: var(--color-grey);
       text-decoration: none;
-      transition: background 0.2s ease;
+      transition: background 0.2s;
 
       &:hover {
         background: var(--red-2);

diff --git a/src/components/SocialList.astro b/src/components/SocialList.astro
@@ -46,7 +46,7 @@ const socialFilledList = [
       width: 2rem;
       height: 2rem;
       opacity: 0.6;
-      transition: opacity 0.3s ease;
+      transition: opacity 0.3s;
 
       &:hover {
         opacity: 1;

diff --git a/src/components/partial/VendorFont.astro b/src/components/partial/VendorFont.astro
@@ -1,6 +1,5 @@
 ---
 const fontDisplay = "&display=swap";
-const fontSubset = "&subset=latin,latin-ext";
 const fontStyles = ":400,400italic,700,700italic";
 const fontHost = "https://fonts.googleapis.com";
 
@@ -15,9 +14,15 @@ fontFamilies = [...new Set(fontFamilies)];
 fontFamilies = fontFamilies.join("|");
 ---
 
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
   rel="preload"
-  href={`${fontHost}/css?family=${fontFamilies.concat(fontDisplay, fontSubset)}`}
+  href={`${fontHost}/css?family=${fontFamilies.concat(fontDisplay)}`}
   as="style"
-  onload="this.onload=null;this.rel='stylesheet'"
+/>
+<link
+  rel="stylesheet"
+  href={`${fontHost}/css?family=${fontFamilies.concat(fontDisplay)}`}
+  media="print"
+  onload="this.media='all'"
 />
diff --git a/src/components/post/Date.astro b/src/components/post/Date.astro
@@ -31,7 +31,7 @@ const { pubDate } = Astro.props;
     padding: 10px 18px;
     margin: 0 12px 1em;
     box-shadow: 0 0 5px 3px var(--color-meta-shadow);
-    transition: all 0.3s ease;
+    transition: 0.3s;
     display: flex;
     align-items: center;
   }

diff --git a/src/components/post/Nav.astro b/src/components/post/Nav.astro
@@ -84,7 +84,7 @@ const { prev, next } = Astro.props;
     justify-content: center;
     padding-left: 20px;
     opacity: 0.8;
-    transition: opacity 0.3s ease;
+    transition: opacity 0.3s;
     height: 150px;
     min-height: 150px;
     flex-shrink: 0;

diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
@@ -93,7 +93,7 @@ const {
         background: var(--color-wrap);
         border-radius: 5px;
         overflow: hidden;
-        transition: all 0.3s ease;
+        transition: 0.3s;
       }
 
       .article-meta {

diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro
@@ -128,7 +128,7 @@ const { page } = Astro.props;
     background: var(--color-wrap);
     display: flex;
     flex-direction: row;
-    transition: all 0.3s ease;
+    transition: 0.3s;
 
     @media screen and (min-width: 768px) {
       &:hover {
@@ -139,7 +139,7 @@ const { page } = Astro.props;
         }
 
         img {
-          transition: all 0.3s ease;
+          transition: 0.3s;
           transform: scale(1.05);
         }
       }
@@ -154,7 +154,7 @@ const { page } = Astro.props;
         border-radius: 5px;
         box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
         opacity: 0;
-        transition: all 0.3s ease;
+        transition: 0.3s;
       }
     }
 
@@ -252,7 +252,7 @@ const { page } = Astro.props;
 
     img {
       display: block;
-      transition: all 0.2s ease;
+      transition: 0.2s;
       position: absolute;
       left: 0;
       top: 0;

diff --git a/src/styles/base.stylus b/src/styles/base.stylus
@@ -14,11 +14,11 @@
       position: absolute;
       bottom: -15px;
       box-sizing: unset;
-      transition: all 0.3s ease;
+      transition: 0.3s;
     }
 
     &:after {
-      transition: all 0.3s ease;
+      transition: 0.3s;
       content: "";
       position: absolute;
       background: var(--color-h2-after);
@@ -135,7 +135,7 @@
   kbd {
     font-family: "Ubuntu Mono";
     font-size: 95%;
-    transition: all 0.3s ease;
+    transition: 0.3s;
   }
 
   p {