feat: update website resources

docusaurus.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const beian = '闽ICP备2020017848号-2'
 
-const announcementBarContent = `<span>新增 <a href='/protocol-template'>Protocol 协议复现模板</a></span>`
+const announcementBarContent = `<span>更新 <a href='/website'>网址导航</a> 带你发现感兴趣的技术</span>`
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -42,6 +42,7 @@ const config = {
         src: 'img/logo.webp',
         srcDark: 'img/logo.webp',
       },
+      hideOnScroll: true,
       items: [
         {
           label: '学习',

src/components/Hero/styles.module.scss

@@ -171,6 +171,7 @@ html[data-theme='dark'] .bloghome__intro > p {
   );
   background-clip: text;
   border: 1px solid var(--ifm-color-primary);
+  box-shadow: 0 10px 50px -10px rgb(18 175 250 / 40%);
 
   &:hover {
     text-decoration: none;
@@ -181,7 +182,7 @@ html[data-theme='dark'] .bloghome__intro > p {
     opacity: 0;
     content: "";
     display: block;
-    height: 100%;
+    height: 105%;
     width: 0;
     left: 0;
     position: absolute;
@@ -190,11 +191,11 @@ html[data-theme='dark'] .bloghome__intro > p {
     transition: all 0.5s ease-in-out;
   }
 
-  &:hover::before {
-    background: var(--ifm-color-primary-light);
-    width: 100%;
-    opacity: 0.5;
-  }
+  // &:hover::before {
+  //   background: var(--ifm-color-primary-light);
+  //   width: 100%;
+  //   opacity: 0.5;
+  // }
 
   > svg {
     transition: all 0.3s ease-in-out;

src/css/custom.scss

@@ -69,9 +69,10 @@ html {
   --divider-color: #ebebeb;
   --post-shadow-color: rgb(220 220 220 / 30%);
   --post-shadow: 0 0 20px 10px var(--post-shadow-color);
-  --content-background-color: #fcfcfc;
+  --content-background-color: #f8f9fa;
   --blog-item-background-color: linear-gradient(180deg, #fff, #fcfcfc);
-  --blog-item-shadow: 0 20px 20px rgb(0 0 0 / 2.5%), 0 50px 80px rgb(0 0 0 / 9%);
+
+  --blog-item-shadow: 0 20px 20px rgb(0 0 0 / 2.5%), 0 50px 80px rgb(0 0 0 / 5%);
 
   --ifm-heading-color: #000;
 
@@ -127,8 +128,10 @@ body {
     sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji', consolas, sfmono-regular, menlo, monaco,
     'Liberation Mono', monospace;
-  /*   font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif; */
+}
+
+html, body {
+  scroll-behavior: smooth;
 }
 
 ::-webkit-scrollbar {
@@ -781,7 +784,7 @@ div[class^='announcementBar_'] {
   border-radius: 12px;
   background: var(--blog-item-background-color);
   box-shadow: var(--blog-item-shadow);
-  padding: 1em 2em;
+  padding: 1em 2em 0.75em;
 }
 
 .transition {

src/pages/website/_components/WebsiteCard/styles.module.css

@@ -10,14 +10,12 @@
 }
 
 .websiteCard:hover {
-  box-shadow: 5px 5px 20px 0 rgb(0 0 0 / 10%);
-  background-color: #f2f8fd;
+  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 20%);
   transform: translateY(-5px);
 }
 
 html[data-theme='dark'] .websiteCard:hover {
-  box-shadow: 5px 5px 20px 0 rgb(0 0 0 / 10%);
-  background-color: #12181d;
+  box-shadow: 0 10px 20px -10px rgb(255 255 255 / 20%);
   transform: translateY(-5px);
 }
 

src/pages/website/index.tsx

@@ -4,6 +4,7 @@ import Link from '@docusaurus/Link';
 import { PageMetadata } from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 import WebsiteCard from './_components/WebsiteCard';
+import BackToTopButton from '@theme/BackToTopButton';
 import { websiteData } from '@site/data/website';
 import styles from './website.module.css';
 
@@ -79,6 +80,7 @@ export default function Websites() {
             </aside>
             <main className="col col--11">
               <CategoryList />
+              <BackToTopButton />
             </main>
           </div>
         </div>

src/theme/BlogListPage/index.tsx

@@ -167,7 +167,8 @@ function BlogListPageContent(props: Props) {
       <BackToTopButton />
 
       {/* 推荐阅读 */}
-      <BlogRecommend isPaginated={isPaginated} isCardView={isCardView} />
+      {!isPaginated && isBlogOnlyMode &&  <BlogRecommend isPaginated={isPaginated} isCardView={isCardView} />}
+
 
       {/* 最新博客 */}
       <div className="container-wrapper">

src/theme/BlogPostItem/Footer/styles.module.css

@@ -3,11 +3,13 @@
 }
 
 .blogPostInfo {
+  margin-top: 0.5em;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   margin-bottom: var(--ifm-spacing-m);
   gap: 4px;
+  color: rgb(156 163 175);
 }
 
 .blogPostInfoTags {