feat: change code font to JuliaMono.

.vscode/settings.json

@@ -116,6 +116,7 @@
     "pilgi",
     "plaiceholder",
     "playform",
+    "playpause",
     "psql",
     "pswp",
     "pwsz",

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

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')) {

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,
+#recent-posts a:hover,
-#tag_cloud 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) {

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 {

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>