diff --git a/.vscode/settings.json b/.vscode/settings.json
index ad1a78f..bead967 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -116,6 +116,7 @@
     "pilgi",
     "plaiceholder",
     "playform",
+    "playpause",
     "psql",
     "pswp",
     "pwsz",
diff --git a/README.md b/README.md
index 9f116c4..d77aa8e 100644
--- a/README.md
+++ b/README.md
@@ -232,12 +232,10 @@ and [Iroha Mochi](https://modi.jpn.org/font_iroha-mochi.php) with [license](lice
 
 They are the fonts that can be used in business without any charge.
 
-### Open Graph Font & Web Font License
+### Open Graph Font License
 
 The [OPPOSans 4.0](https://open.oppomobile.com/new/developmentDoc/info?id=13223)
 is used for rendering the open graph image in my weblog.
-We also use it as the main web font for articles.
-It can be used in business scenarios without any modification.
 The license file is [here](licenses/LICENSE.opposans.txt)
 
 ### Third Party Codes License
diff --git a/src/assets/scripts/yufan.me.js b/src/assets/scripts/globals.js
similarity index 98%
rename from src/assets/scripts/yufan.me.js
rename to src/assets/scripts/globals.js
index 9405dda..16ead86 100644
--- a/src/assets/scripts/yufan.me.js
+++ b/src/assets/scripts/globals.js
@@ -1,11 +1,11 @@
+import PhotoSwipeSlideshow from '@/assets/scripts/photoswipe-slideshow.js';
+import stickySidebar from '@/assets/scripts/sticky-sidebar.js';
 import Aplayer from 'aplayer/dist/APlayer.min.js';
 import { actions, isInputError } from 'astro:actions';
 import PhotoSwipe from 'photoswipe';
 import PhotoSwipeDynamicCaption from 'photoswipe-dynamic-caption-plugin';
 import PhotoSwipeVideo from 'photoswipe-video-plugin';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
-import PhotoSwipeSlideshow from './photoswipe-slideshow.js';
-import stickySidebar from './sticky-sidebar.js';
 
 // Slideshow for Album.
 for (const album of document.querySelectorAll('.post-content .album')) {
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index ef504ca..df3b568 100644
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -1,3 +1,10 @@
+@import 'bootstrap/dist/css/bootstrap.min.css';
+@import 'aplayer/dist/APlayer.min.css';
+@import '@/assets/styles/reset.css';
+@import '@/assets/styles/iconfont/iconfont.css';
+@import 'photoswipe/style.css';
+@import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css';
+
 @media (min-width: 1200px) {
   .content-wrapper {
     width: 71%;
@@ -1504,8 +1511,8 @@ textarea.form-control {
   color: rgba(255, 255, 255, 0.5) !important;
 }
 
-#recent_posts a:hover,
-#tag_cloud a:hover,
+#recent-posts a:hover,
+#tag-cloud a:hover,
 #recent-comments a:hover {
   color: var(--color-primary);
 }
@@ -3230,7 +3237,7 @@ blockquote p:last-child {
 
 .aplayer {
   max-width: 350px;
-  margin: 0 0 1.25rem;
+  margin: 1.25rem 0 1.25rem;
 }
 
 @media (max-width: 767.98px) {
diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css
index 9e239d4..ff2a26f 100644
--- a/src/assets/styles/reset.css
+++ b/src/assets/styles/reset.css
@@ -141,7 +141,7 @@ td {
 
 pre,
 code {
-  font-family: 'LXGW WenKai Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: JuliaMono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 }
 
 code {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 0330a9e..d278d5d 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,13 +1,5 @@
 ---
-// tslint:disable:ordered-imports
-import 'bootstrap/dist/css/bootstrap.min.css';
-import '@/assets/styles/iconfont/iconfont.css';
-import '@/assets/styles/reset.css';
 import '@/assets/styles/globals.css';
-import 'aplayer/dist/APlayer.min.css';
-import 'photoswipe/style.css';
-import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css';
-
 import Footer from '@/components/footer/Footer.astro';
 import Header from '@/components/header/Header.astro';
 import PageMeta from '@/components/meta/PageMeta.astro';
@@ -44,13 +36,18 @@ const showFooter = Astro.props.footer !== undefined ? Astro.props.footer : true;
       <PageMeta {title} {description} />
     </slot>
     <meta name="robots" content="index, follow" />
-    <link rel="stylesheet" type="text/css" href="https://npm.elemecdn.com/lxgw-wenkai-webfont/style.css" />
     <meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1" />
     <link rel="alternate" type="application/rss+xml" title="且听书吟" href="/feed" />
     <link rel="icon" href="/favicon.ico" sizes="32x32" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="stylesheet" type="text/css" href="https://npm.elemecdn.com/lxgw-wenkai-webfont/style.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/juliamono/0.044/juliamono.min.css"
+    />
   </head>
   <body class="home blog">
     <div class="site-layout">
@@ -70,7 +67,7 @@ const showFooter = Astro.props.footer !== undefined ? Astro.props.footer : true;
       </ul>
     </div>
     <script>
-      import '../assets/scripts/yufan.me.js';
+      import '@/assets/scripts/globals.js';
     </script>
     <SearchDialog />
   </body>