From a331960a60d0ce4ae11e5083eb3c8b7b8f9836bc Mon Sep 17 00:00:00 2001
From: D-Sketon <2055272094@qq.com>
Date: Sun, 4 Aug 2024 20:51:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=8B=E9=93=BE=E5=8D=A1=E7=89=87?=
=?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/ArchiveList.astro | 10 +--
src/components/Footer.astro | 2 +-
src/components/FriendCard.astro | 82 ++++++++++++++-----------
src/components/Header.astro | 4 +-
src/components/HeaderLink.astro | 6 +-
src/components/Pagination.astro | 4 +-
src/components/SocialList.astro | 2 +-
src/components/partial/VendorFont.astro | 11 +++-
src/components/post/Date.astro | 2 +-
src/components/post/Nav.astro | 2 +-
src/layouts/MarkdownLayout.astro | 2 +-
src/pages/[...page].astro | 8 +--
src/styles/base.stylus | 6 +-
src/styles/global.css | 25 +++-----
src/styles/markdown.stylus | 6 +-
src/styles/search.stylus | 2 +-
16 files changed, 93 insertions(+), 81 deletions(-)
diff --git a/src/components/ArchiveList.astro b/src/components/ArchiveList.astro
index 2645fa4..18bed30 100644
--- 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
index dc06c4a..b3f0832 100644
--- 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
index 9d04407..17f7628 100644
--- a/src/components/FriendCard.astro
+++ b/src/components/FriendCard.astro
@@ -40,12 +40,12 @@ 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%;
@@ -53,7 +53,7 @@ import { FRIEND } from "../utils/config";
&: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,30 +69,31 @@ 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;
}
}
@@ -100,21 +101,32 @@ import { FRIEND } from "../utils/config";
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%;
}
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 0867f83..172055f 100644
--- 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
index 1abf9a4..2cde49a 100644
--- 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;
}
diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index 3b89123..30a90c7 100644
--- 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
index b63c583..1f9639e 100644
--- 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
index bf1a5d6..e8e3607 100644
--- 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("|");
---
+
+
diff --git a/src/components/post/Date.astro b/src/components/post/Date.astro
index f538f21..aacd842 100644
--- 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
index 74eee12..a5f110a 100644
--- 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
index 97bf272..f8abb27 100644
--- 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
index 4de5abf..8d3c204 100644
--- 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
index 0244137..fd3d476 100644
--- 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 {
diff --git a/src/styles/global.css b/src/styles/global.css
index 2e6d0d8..22bbb58 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -13,13 +13,10 @@
--color-grey: #999;
--color-border: var(--red-3);
--color-link: var(--red-1);
- --color-dark-link: darken(#ff5252, 20%);
--color-background: #eee;
--color-code-background: #f5f5f5;
- --color-sidebar-text: #777;
--color-header-background: rgba(255, 255, 255, 0.9);
--color-footer-background: #fff;
- --color-mobile-nav-background: #fff;
--color-wrap: #fff;
--color-h2-border: #eee;
@@ -44,13 +41,10 @@
--color-grey: #999;
--color-border: var(--red-5);
--color-link: var(--red-1);
- --color-dark-link: darken(#ff5252, 20%);
--color-background: #21252b;
--color-code-background: rgba(232, 232, 232, 0.2);
- --color-sidebar-text: #777;
--color-header-background: #222222;
--color-footer-background: #21252b;
- --color-mobile-nav-background: #21252b;
--color-wrap: #272b30;
--color-h2-border: #47474a;
@@ -131,12 +125,6 @@ td {
font-size: 100%;
}
-body {
- color: #000;
- background: #fff;
- line-height: 1;
-}
-
ol,
ul {
list-style: none;
@@ -188,12 +176,19 @@ button::-moz-focus-inner {
}
body {
+ color: #000;
background: var(--color-background);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
- font-family: Mulish, -apple-system, "PingFang SC", "Microsoft YaHei",
- sans-serif;
- transition: all 0.3s ease;
+ font-family: Mulish, Noto Serif SC, Noto Serif JP, -apple-system, PingFang SC,
+ Microsoft YaHei, sans-serif;
+ transition: 0.3s;
+ line-height: 1;
+}
+
+::selection {
+ background: var(--red-1);
+ color: #fff;
}
.popoverlay {
diff --git a/src/styles/markdown.stylus b/src/styles/markdown.stylus
index 7d003c4..9651e54 100644
--- a/src/styles/markdown.stylus
+++ b/src/styles/markdown.stylus
@@ -40,7 +40,7 @@
}
li:hover::marker {
- transition: color 0.2s ease;
+ transition: color 0.2s;
color: var(--red-1);
}
@@ -50,7 +50,7 @@
height: auto;
display: block;
margin: auto;
- transition: all 0.3s ease;
+ transition: 0.3s;
}
iframe {
@@ -79,7 +79,7 @@
border-left: 6px var(--red-4) solid;
margin: 1.8em 0;
border-radius: 5px;
- transition: all 0.3s ease;
+ transition: 0.3s;
padding: 1px 10px;
footer {
diff --git a/src/styles/search.stylus b/src/styles/search.stylus
index f3d1256..18c9cf5 100644
--- a/src/styles/search.stylus
+++ b/src/styles/search.stylus
@@ -99,7 +99,7 @@ hr {
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:before {