post: font

OverflowCat · Jan 18, 2025 · 4af33cf · 4af33cf
1 parent 8a2d96c
commit 4af33cf
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -39,7 +39,6 @@
     "@fontsource/ibm-plex-sans": "^5.1.1",
     "@fontsource/ibm-plex-sans-kr": "^5.1.1",
     "@fontsource/noto-sans-mongolian": "^5.1.2",
-    "@ibm/plex-sans-sc": "^1.1.0",
     "@iconify-json/clarity": "^1.2.2",
     "@iconify-json/codicon": "^1.2.8",
     "@iconify-json/entypo-social": "^1.2.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
@@ -45,7 +45,7 @@ export type Props = {
     margin: auto;
     inline-size: 1024px;
     max-inline-size: calc(100dvi - 2em);
-    min-inline-size: 380px;
+    min-inline-size: 320px;
     overflow: hidden;
   }
   .resizable {

diff --git a/src/layouts/Neobrutalism.astro b/src/layouts/Neobrutalism.astro
@@ -57,7 +57,7 @@ const renderer = ("renderer" in Astro.locals) ? Astro.locals.renderer : "html";
   }
 
   article#post {
-    font-size: 1.35rem;
+    font-size: 1.32rem;
     p, li {
       font-weight: 500;
     }
@@ -84,7 +84,7 @@ const renderer = ("renderer" in Astro.locals) ? Astro.locals.renderer : "html";
     margin: auto;
     inline-size: 1024px;
     max-inline-size: calc(100dvi - 2em);
-    min-inline-size: 380px;
+    min-inline-size: 320px;
     overflow: hidden;
   }
 

diff --git a/src/posts/neo-uglysearch.mdx b/src/posts/neo-uglysearch.mdx
@@ -75,7 +75,11 @@ categories:
 
 设计风格是新粗野主义。我最早见到用这种的是 [Glitch](https://glitch.com/)，一开始就是很粗糙的，后来迭代了一版看着更干净细腻的。
 
-具体是用了 [Neobrutalism components](https://neobrutalism.dev/) 的组件，是在 shadcn/ui 上套了一层，组件其实很少。Marquee 还不错，营造出一种信息的流动感。它的 ~pallette~ theme 同时只有一种色调，只是深浅变化；颜色看起来也相对没有那么<a href="https://zhuanlan.zhihu.com/p/663396871">挖抓</a>。（符合我描述的是类似本页面的这种，如果你在 RSS 阅读器里看到这的话建议打开原网页。颜色是从 [Izzy Muerte 的](https://izzys.casa/2024/04/i-had-to-redesign-this-site-again/) 抄来的。伊以一篇很长、很多[抓马](https://en.wiktionary.org/wiki/%E6%8A%93%E9%A6%AC#Chinese)的抨击 C++ 社区的[文章](https://izzys.casa/2024/11/on-safe-cxx/) 而被我所知。）
+具体是用了 [Neobrutalism components](https://neobrutalism.dev/) 的组件，是在 shadcn/ui
+上套了一层，组件其实很少。Marquee 还不错，营造出一种信息的流动感。它的 ~palette~ theme
+同时只有一种色调，只是深浅变化；颜色看起来也相对没有那么<a href="https://zhuanlan.zhihu.com/p/663396871">挖抓</a>。（符合我描述的是类似本页面的这种，如果你在 RSS 阅读器里看到这的话建议打开原网页。颜色是从
+[Izzy Muerte 的](https://izzys.casa/2024/04/i-had-to-redesign-this-site-again/) 抄来的。伊以一篇很长、很多[抓马](https://en.wiktionary.org/wiki/%E6%8A%93%E9%A6%AC#Chinese)的抨击
+C++ 社区的[文章](https://izzys.casa/2024/11/on-safe-cxx/) 而被我所知。）
 
 ## 站内搜索
 
@@ -114,6 +118,10 @@ query 中含有 ``(`` 且以 ``)`` 结尾的，括号中的内容会被当作高
 编缉模式。这里用的是 [React CodeMirror](https://uiwjs.github.io/react-codemirror)，没什么问题。加载了 
 SQL 的语法高亮和补全，不过 MeiliSearch 的查询语法不是 SQL，所以有些关键字或函数没有高亮、补全也正常。
 
+## 字体
+
+字体使用了 IBM Plex 系列，觉得风格很搭。中文部分（`@ibm/plex-sans-sc`）装了后 Next.js 哐哐报错，没想到 noExternal 之类的，加之字体本身就太大，所以将其 CSS 替换成 jsdelivr 上对应的资源，有 [`plex-sans-sc-cdn`](https://www.npmjs.com/package/plex-sans-sc-cdn)。
+
 ## 统计数据
 
 都是后端的，在首页最下方能看到。目前新文章是每日更新的，一天的 delay 感觉可以接受。