add: custom fonts, register page

improve: style

.gitattributes

@@ -0,0 +1 @@
+*.woff2 filter=lfs diff=lfs merge=lfs -text

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +1,17 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="false" level="WARNING" enabled_by_default="false">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="lc-l-with-tail" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
     <inspection_tool class="GrazieInspection" enabled="false" level="GRAMMAR_ERROR" enabled_by_default="false" />
     <inspection_tool class="LanguageDetectionInspection" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">

packages/frontend/astro.config.mjs

@@ -21,4 +21,7 @@ export default defineConfig({
 		},
 		plugins: [tsconfigPaths()],
 	},
+	markdown: {
+		remarkRehype: { footnoteLabel: "脚注", footnoteBackLabel: "回到引用 1" },
+	}
 });

packages/frontend/src/components/TitleBar.astro

@@ -1,30 +1,7 @@
 ---
-import astroLogoLight from "@assets/标题-浅色.svg";
-import astroLogoDark from "@assets/标题-深色.svg";
-import DarkModeImage from "@components/DarkModeImage.svelte";
-import SearchBox from "@components/SearchBox.svelte";
 import TitleBarMobile from "@components/TitleBarMobile.svelte";
+import TitleBarDesktop from "./TitleBarDesktop.astro";
 ---
 
-<div class="hidden md:block fixed top-0 left-0 w-full h-28 bg-white/80 dark:bg-zinc-900/70 backdrop-blur-lg z-50">
-    <div class="w-[305px] ml-8 inline-flex h-full items-center">
-        <a href="/">
-            <DarkModeImage
-                lightSrc={astroLogoLight.src}
-                darkSrc={astroLogoDark.src}
-                alt="Logo"
-                className="w-[305px] h-24 inline-block"
-                client:load
-            />
-        </a>
-    </div>
-    <SearchBox client:load />
-
-    <div
-        class="inline-flex right-12 absolute gap-4 h-full text-xl dark:text-[#C6DCF2] font-medium items-center w-48 justify-end"
-    >
-        <a href="/about" class="hover:dark:text-[#B1C5DA]">关于</a>
-    </div>
-</div>
-
+<TitleBarDesktop/>
 <TitleBarMobile client:load />

packages/frontend/src/components/TitleBarDesktop.astro

@@ -0,0 +1,26 @@
+---
+import astroLogoLight from "@assets/标题-浅色.svg";
+import astroLogoDark from "@assets/标题-深色.svg";
+import DarkModeImage from "@components/DarkModeImage.svelte";
+import SearchBox from "@components/SearchBox.svelte";
+---
+
+<div class="hidden md:block relative top-0 left-0 w-full h-28 bg-white/80 dark:bg-zinc-900/70 backdrop-blur-lg z-50">
+	<div class="w-[305px] ml-8 inline-flex h-full items-center">
+		<a href="/">
+			<DarkModeImage
+					lightSrc={astroLogoLight.src}
+					darkSrc={astroLogoDark.src}
+					alt="Logo"
+					className="w-[305px] h-24 inline-block"
+					client:load
+			/>
+		</a>
+	</div>
+	<SearchBox client:load/>
+
+	<div class="inline-flex right-12 absolute gap-4 h-full
+				text-xl font-medium items-center w-48 justify-end">
+		<a href="/about">关于</a>
+	</div>
+</div>

packages/frontend/src/components/TitleBarMobile.svelte

@@ -15,7 +15,7 @@
     }
 </script>
 
-<div class="md:hidden fixed top-0 left-0 w-full h-16 bg-white/80 dark:bg-zinc-800/70 backdrop-blur-lg z-50">
+<div class="md:hidden relative top-0 left-0 w-full h-16 bg-white/80 dark:bg-zinc-800/70 backdrop-blur-lg z-50">
     {#if !showSearchBox}
         <button class="inline-block ml-4 mt-4 dark:text-white">
             <MenuIcon />

packages/frontend/src/components/Welcome.astro

@@ -4,7 +4,7 @@ import TitleBar from "@components/TitleBar.astro";
 
 <TitleBar/>
 
-<main class="flex flex-col items-center justify-center min-h-screen gap-8">
-    <h1 class="text-4xl font-bold text-center">正在施工中……</h1>
+<main class="flex flex-col items-center justify-center h-full flex-grow gap-8 px-4">
+    <h1 class="text-4xl font-medium text-center">正在施工中……</h1>
     <p>在搜索栏输入BV号或AV号，可以查询目前数据库收集到的信息~</p>
 </main>

packages/frontend/src/content/about.md

@@ -1,27 +1,27 @@
-# 关于「中V档案馆」
+# 关于「中 V 档案馆」
 
-「中V档案馆」是一个旨在收录与展示「中文歌声合成作品」及有关信息的网站。
+「中 V 档案馆」是一个旨在收录与展示「中文歌声合成作品」及有关信息的网站。
 
 ## 创建背景与关联工作
 
-纵观整个互联网，对于「中文歌声合成」或「中文虚拟歌手」（常简称为中V或VC）相关信息进行较为系统、全面地整理收集的主要有以下几个网站：
+纵观整个互联网，对于「中文歌声合成」或「中文虚拟歌手」（常简称为中 V 或 VC）相关信息进行较为系统、全面地整理收集的主要有以下几个网站：
 
 - [萌娘百科](https://zh.moegirl.org.cn/):
-  收录了大量中V歌曲及歌姬的信息，呈现形式为传统维基（基于[MediaWiki](https://www.mediawiki.org/)）。
+  收录了大量中 V 歌曲及歌姬的信息，呈现形式为传统维基（基于 [MediaWiki](https://www.mediawiki.org/)）。
 - [VCPedia](https://vcpedia.cn/):
-  由原萌娘百科中文歌声合成编辑团队的部分成员搭建，专属于中文歌声合成相关内容的信息集成站点[^1]，呈现形式为传统维基（基于[MediaWiki](https://www.mediawiki.org/)）。
+  由原萌娘百科中文歌声合成编辑团队的部分成员搭建，专属于中文歌声合成相关内容的信息集成站点 [^1]，呈现形式为传统维基（基于 [MediaWiki](https://www.mediawiki.org/)）。
 - [VocaDB](https://vocadb.net/): 一个围绕 Vocaloid、UTAU 和其他歌声合成器的协作数据库，其中包含艺术家、唱片、PV
-  等[^2]，其中包含大量中文歌声合成作品。
-- [天钿Daily](https://tdd.bunnyxt.com/)：一个VC相关数据交流与分享的网站。致力于VC相关数据交流，定期抓取VC相关数据，选取有意义的纬度展示。[^3]
+  等 [^2]，其中包含大量中文歌声合成作品。
+- [天钿 Daily](https://tdd.bunnyxt.com/)：一个 VC 相关数据交流与分享的网站。致力于 VC 相关数据交流，定期抓取 VC 相关数据，选取有意义的纬度展示。[^3]
 
 上述网站中，或多或少存在一些不足，例如：
 
-- 萌娘百科、VCPedia受限于传统维基，绝大多数内容依赖人工编辑。
-- VocaDB基于结构化数据库构建，由此可以依赖程序生成一些信息，但**条目收录**仍然完全依赖人工完成。
-- VocaDB主要专注于元数据展示，少有关于歌曲、作者等的描述性的文字，也缺乏描述性的背景信息。
-- 天钿Daily只展示歌曲的统计数据及历史趋势，没有关于歌曲其它信息的收集。
+- 萌娘百科、VCPedia 受限于传统维基，绝大多数内容依赖人工编辑。
+- VocaDB 基于结构化数据库构建，由此可以依赖程序生成一些信息，但 **条目收录** 仍然完全依赖人工完成。
+- VocaDB 主要专注于元数据展示，少有关于歌曲、作者等的描述性的文字，也缺乏描述性的背景信息。
+- 天钿 Daily 只展示歌曲的统计数据及历史趋势，没有关于歌曲其它信息的收集。
 
-因此，**中V档案馆**吸取前人经验，克服上述网站的不足，希望做到：
+因此，**中 V 档案馆** 吸取前人经验，克服上述网站的不足，希望做到：
 
 - 歌曲收录（指发现歌曲并创建条目）的完全自动化
 - 歌曲元信息提取的高度自动化
@@ -31,30 +31,30 @@
 
 ## 技术架构
 
-参见[CVSA文档](https://docs.projectcvsa.com/)。
+参见 [CVSA 文档](https://docs.projectcvsa.com/)。
 
 ## 开放许可
 
-受本文以[CC BY-NC-SA 4.0协议](https://creativecommons.org/licenses/by-nc-sa/4.0/)提供。
+受本文以 [CC BY-NC-SA 4.0 协议](https://creativecommons.org/licenses/by-nc-sa/4.0/) 提供。
 
 ### 数据库
 
-中V档案馆使用[PostgreSQL](https://postgresql.org)作为数据库，我们承诺定期导出数据库转储 (dump)
+中 V 档案馆使用 [PostgreSQL](https://postgresql.org) 作为数据库，我们承诺定期导出数据库转储 (dump)
 文件并公开，其内容遵从以下协议或条款：
 
-- 数据库中的事实性数据，根据适用法律，不构成受版权保护的内容。中V档案馆放弃一切可能的权利（[CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/)）。
-- 对于数据库中有原创性的内容（如贡献者编辑的描述性内容），如无例外，以[CC BY 4.0协议](https://creativecommons.org/licenses/by/4.0/)提供。
-- 对于引用、摘编或改编自萌娘百科、VCPedia的内容，以与原始协议(CC BY-NC-SA 3.0
-  CN)兼容的协议[CC BY-NC-SA 4.0协议](https://creativecommons.org/licenses/by-nc-sa/4.0/)提供，并注明原始协议 。
-  > 根据原始协议第四条第2项内容，CC BY-NC-SA 4.0协议为与原始协议具有相同授权要素的后续版本（“可适用的协议”）。
-- 中V档案馆文档使用[CC BY 4.0协议](https://creativecommons.org/licenses/by/4.0/)。
+- 数据库中的事实性数据，根据适用法律，不构成受版权保护的内容。中 V 档案馆放弃一切可能的权利（[CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/)）。
+- 对于数据库中有原创性的内容（如贡献者编辑的描述性内容），如无例外，以 [CC BY 4.0 协议](https://creativecommons.org/licenses/by/4.0/) 提供。
+- 对于引用、摘编或改编自萌娘百科、VCPedia 的内容，以与原始协议(CC BY-NC-SA 3.0
+  CN)兼容的协议 [CC BY-NC-SA 4.0 协议](https://creativecommons.org/licenses/by-nc-sa/4.0/) 提供，并注明原始协议 。
+  > 根据原始协议第四条第 2 项内容，CC BY-NC-SA 4.0 协议为与原始协议具有相同授权要素的后续版本（“可适用的协议”）。
+- 中 V 档案馆文档使用 [CC BY 4.0 协议](https://creativecommons.org/licenses/by/4.0/)。
 
 ### 软件代码
 
-用于构建中V档案馆的软件代码在[AGPL 3.0](https://www.gnu.org/licenses/agpl-3.0.html)许可证下公开，参见[LICENSE](./LICENSE)
+用于构建中 V 档案馆的软件代码在 [AGPL 3.0](https://www.gnu.org/licenses/agpl-3.0.html) 许可证下公开，参见 [LICENSE](./LICENSE)
 
-[^1]: 引用自[VCPedia](https://vcpedia.cn/%E9%A6%96%E9%A1%B5)，于[知识共享 署名-非商业性使用-相同方式共享 3.0中国大陆 (CC BY-NC-SA 3.0 CN) 许可协议](https://creativecommons.org/licenses/by-nc-sa/3.0/cn/)下提供。
+[^1]: 引用自 [VCPedia](https://vcpedia.cn/%E9%A6%96%E9%A1%B5)，于 [知识共享 署名-非商业性使用-相同方式共享 3.0中国大陆 (CC BY-NC-SA 3.0 CN) 许可协议](https://creativecommons.org/licenses/by-nc-sa/3.0/cn/) 下提供。
 
-[^2]: 翻译自[VocaDB](https://vocadb.net/)，于[CC BY 4.0协议](https://creativecommons.org/licenses/by/4.0/)下提供。
+[^2]: 翻译自 [VocaDB](https://vocadb.net/)，于 [CC BY 4.0协议](https://creativecommons.org/licenses/by/4.0/) 下提供。
 
-[^3]: 引用自[关于 - 天钿Daily](https://tdd.bunnyxt.com/about)
+[^3]: 引用自 [关于 - 天钿Daily](https://tdd.bunnyxt.com/about)

packages/frontend/src/layouts/Content.astro

@@ -0,0 +1,15 @@
+---
+import TitleBar from "@components/TitleBar.astro";
+import Layout from '@layouts/Layout.astro';
+import Footer from "./Footer.astro";
+---
+
+<Layout>
+	<TitleBar/>
+	<main class="flex flex-col items-center flex-grow gap-8 md:mt-12 relative z-0">
+		<div class="w-full lg:w-2/3 xl:w-1/2 content px-8 md:px-12 lg:px-0">
+			<slot/>
+		</div>
+	</main>
+	<Footer/>
+</Layout>

packages/frontend/src/layouts/Footer.astro

@@ -0,0 +1,10 @@
+<footer class="py-6">
+	<div class="container mx-auto text-center">
+		<ul class="flex justify-center space-x-4">
+			<li><a href="/about">关于</a></li>
+			<li><a href="#">服务</a></li>
+			<li><a href="#">隐私政策</a></li>
+			<li><a href="#">联系我们</a></li>
+		</ul>
+	</div>
+</footer>

packages/frontend/src/layouts/Header.astro

@@ -0,0 +1,3 @@
+---
+
+---

packages/frontend/src/layouts/Layout.astro

@@ -1,5 +1,7 @@
 ---
 import "../styles/global.css";
+const { title } = Astro.props;
+const pageTitle = title ? title + ' - 中V档案馆' :'中V档案馆';
 ---
 
 <!doctype html>
@@ -7,9 +9,9 @@ import "../styles/global.css";
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>中V档案馆</title>
+        <title>{pageTitle}</title>
     </head>
-    <body class="dark:bg-zinc-900 dark:text-zinc-100">
+    <body class="dark:bg-zinc-900 dark:text-zinc-100 min-h-screen flex flex-col">
         <slot />
     </body>
 </html>

packages/frontend/src/pages/LICENSE.astro

@@ -0,0 +1,12 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Content from "@layouts/Content.astro";
+---
+
+<Layout title="开源许可">
+	<Content>
+		中V档案馆运行着开源软件，它的前端、后端和其它组件的代码在
+		<a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL 3.0</a>
+		开源许可下授权。
+	</Content>
+</Layout>

packages/frontend/src/pages/about.astro

@@ -7,8 +7,8 @@ import "../styles/content.css";
 
 <Layout>
     <TitleBar/>
-    <main class="flex flex-col items-center min-h-screen gap-8 mt-36 relative z-0">
-        <div class="lg:w-1/2 content">
+    <main class="flex flex-col items-center min-h-screen gap-8 md:mt-12 relative z-0">
+        <div class="w-full lg:w-2/3 xl:w-1/2 content px-8 md:px-12 lg:px-0">
             <AboutContent/>
         </div>
     </main>

packages/frontend/src/pages/register/index.astro

@@ -0,0 +1,9 @@
+---
+import Layout from "@layouts/Layout.astro";
+---
+
+<Layout title="注册">
+	<main class="relative flex-grow pt-36">
+		<h1>欢迎</h1>
+	</main>
+</Layout>

packages/frontend/src/pages/song/[id]/info.astro

@@ -100,57 +100,57 @@ interface Snapshot {
 
 <Layout>
     <TitleBar />
-    <main class="flex flex-col items-center min-h-screen gap-8 mt-36 relative z-0">
+    <main class="flex flex-col items-center min-h-screen gap-8 mt-6 relative z-0 overflow-x-auto">
         <div class="max-w-4xl mx-auto rounded-lg p-6">
-            <h1 class="text-2xl font-bold mb-4">视频信息: <a href={`https://www.bilibili.com/video/av${aid}`} class="underline">av{aid}</a></h1>
+            <h1 class="text-2xl font-medium mb-4">视频信息: <a href={`https://www.bilibili.com/video/av${aid}`} class="underline ">av{aid}</a></h1>
 
             <div class="mb-6 p-4 rounded-lg">
-                <h2 class="text-xl font-semibold mb-8">基本信息</h2>
-                <div class="overflow-x-auto">
+                <h2 class="text-xl font-medium mb-8">基本信息</h2>
+                <div class="overflow-x-auto max-w-full">
                     <table class="table-auto w-full">
                         <tbody>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">ID</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-semibold">ID</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.id}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">AID</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-semibold">AID</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.aid}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">BVID</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-semibold">BVID</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.bvid}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">标题</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-[470]">标题</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.title}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">描述</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-[470]">描述</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.description}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">UID</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-semibold">UID</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.uid}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">标签</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-[470]">标签</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.tags}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">发布时间</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-[470]">发布时间</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.published_at ? format(new Date(videoInfo.published_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">时长 (秒)</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-[470]">时长 (秒)</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.duration}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">创建时间</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-[470]">创建时间</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.created_at ? format(new Date(videoInfo.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
                             </tr>
                             <tr>
-                                <td class="border dark:border-zinc-500 px-4 py-2 font-bold">封面</td>
+                                <td class="border dark:border-zinc-500 px-4 py-2 font-[470]">封面</td>
                                 <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.cover_url ? videoInfo.cover_url : '-'}</td>
                             </tr>
                         </tbody>
@@ -159,20 +159,20 @@ interface Snapshot {
             </div>
 
             <div class="p-4 rounded-lg">
-                <h2 class="text-xl font-semibold mb-4">播放量历史数据</h2>
+                <h2 class="text-xl font-medium mb-4">播放量历史数据</h2>
                 {snapshots && snapshots.length > 0 ? (
                     <div class="overflow-x-auto">
                         <table class="table-auto w-full">
                             <thead>
                                 <tr>
-                                    <th class="border dark:border-zinc-500 px-4 py-2">创建时间</th>
-                                    <th class="border dark:border-zinc-500 px-4 py-2">观看</th>
-                                    <th class="border dark:border-zinc-500 px-4 py-2">硬币</th>
-                                    <th class="border dark:border-zinc-500 px-4 py-2">点赞</th>
-                                    <th class="border dark:border-zinc-500 px-4 py-2">收藏</th>
-                                    <th class="border dark:border-zinc-500 px-4 py-2">分享</th>
-                                    <th class="border dark:border-zinc-500 px-4 py-2">弹幕</th>
-                                    <th class="border dark:border-zinc-500 px-4 py-2">评论</th>
+                                    <th class="border dark:border-zinc-500 px-4 py-2 font-medium">创建时间</th>
+                                    <th class="border dark:border-zinc-500 px-4 py-2 font-medium">观看</th>
+                                    <th class="border dark:border-zinc-500 px-4 py-2 font-medium">硬币</th>
+                                    <th class="border dark:border-zinc-500 px-4 py-2 font-medium">点赞</th>
+                                    <th class="border dark:border-zinc-500 px-4 py-2 font-medium">收藏</th>
+                                    <th class="border dark:border-zinc-500 px-4 py-2 font-medium">分享</th>
+                                    <th class="border dark:border-zinc-500 px-4 py-2 font-medium">弹幕</th>
+                                    <th class="border dark:border-zinc-500 px-4 py-2 font-medium">评论</th>
                                 </tr>
                             </thead>
                             <tbody>

packages/frontend/src/styles/InterFont/Inter.css

@@ -0,0 +1,450 @@
+@font-face {
+    font-family: InterVariable;
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("InterVariable.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: InterVariable;
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("InterVariable-Italic.woff2") format("woff2");
+}
+
+/* static fonts */
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url("Inter-Thin.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url("Inter-ThinItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url("Inter-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: url("Inter-ExtraLightItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url("Inter-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url("Inter-LightItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("Inter-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url("Inter-Italic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("Inter-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url("Inter-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("Inter-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url("Inter-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("Inter-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url("Inter-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url("Inter-ExtraBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: url("Inter-ExtraBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url("Inter-Black.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url("Inter-BlackItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url("InterDisplay-Thin.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url("InterDisplay-ThinItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url("InterDisplay-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: url("InterDisplay-ExtraLightItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url("InterDisplay-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url("InterDisplay-LightItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("InterDisplay-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url("InterDisplay-Italic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("InterDisplay-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url("InterDisplay-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("InterDisplay-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url("InterDisplay-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("InterDisplay-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url("InterDisplay-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url("InterDisplay-ExtraBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: url("InterDisplay-ExtraBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url("InterDisplay-Black.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url("InterDisplay-BlackItalic.woff2") format("woff2");
+}
+
+@font-feature-values InterVariable {
+    @character-variant {
+        cv01: 1;
+        cv02: 2;
+        cv03: 3;
+        cv04: 4;
+        cv05: 5;
+        cv06: 6;
+        cv07: 7;
+        cv08: 8;
+        cv09: 9;
+        cv10: 10;
+        cv11: 11;
+        cv12: 12;
+        cv13: 13;
+        alt-1: 1; /* Alternate one */
+        alt-3: 9; /* Flat-top three */
+        open-4: 2; /* Open four */
+        open-6: 3; /* Open six */
+        open-9: 4; /* Open nine */
+        lc-l-with-tail: 5; /* Lower-case L with tail */
+        simplified-u: 6; /* Simplified u */
+        alt-double-s: 7; /* Alternate German double s */
+        uc-i-with-serif: 8; /* Upper-case i with serif */
+        uc-g-with-spur: 10; /* Capital G with spur */
+        single-story-a: 11; /* Single-story a */
+        compact-lc-f: 12; /* Compact f */
+        compact-lc-t: 13; /* Compact t */
+    }
+    @styleset {
+        ss01: 1;
+        ss02: 2;
+        ss03: 3;
+        ss04: 4;
+        ss05: 5;
+        ss06: 6;
+        ss07: 7;
+        ss08: 8;
+        open-digits: 1;                /* Open digits */
+        disambiguation: 2;             /* Disambiguation (with zero) */
+        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+        round-quotes-and-commas: 3;    /* Round quotes & commas */
+        square-punctuation: 7;         /* Square punctuation */
+        square-quotes: 8;              /* Square quotes */
+        circled-characters: 5;         /* Circled characters */
+        squared-characters: 6;         /* Squared characters */
+    }
+}
+@font-feature-values Inter {
+
+    @character-variant {
+        cv01: 1;
+        cv02: 2;
+        cv03: 3;
+        cv04: 4;
+        cv05: 5;
+        cv06: 6;
+        cv07: 7;
+        cv08: 8;
+        cv09: 9;
+        cv10: 10;
+        cv11: 11;
+        cv12: 12;
+        cv13: 13;
+        alt-1: 1; /* Alternate one */
+        alt-3: 9; /* Flat-top three */
+        open-4: 2; /* Open four */
+        open-6: 3; /* Open six */
+        open-9: 4; /* Open nine */
+        lc-l-with-tail: 5; /* Lower-case L with tail */
+        simplified-u: 6; /* Simplified u */
+        alt-double-s: 7; /* Alternate German double s */
+        uc-i-with-serif: 8; /* Upper-case i with serif */
+        uc-g-with-spur: 10; /* Capital G with spur */
+        single-story-a: 11; /* Single-story a */
+        compact-lc-f: 12; /* Compact f */
+        compact-lc-t: 13; /* Compact t */
+    }
+    @styleset {
+        ss01: 1;
+        ss02: 2;
+        ss03: 3;
+        ss04: 4;
+        ss05: 5;
+        ss06: 6;
+        ss07: 7;
+        ss08: 8;
+        open-digits: 1;                /* Open digits */
+        disambiguation: 2;             /* Disambiguation (with zero) */
+        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+        round-quotes-and-commas: 3;    /* Round quotes & commas */
+        square-punctuation: 7;         /* Square punctuation */
+        square-quotes: 8;              /* Square quotes */
+        circled-characters: 5;         /* Circled characters */
+        squared-characters: 6;         /* Squared characters */
+    }
+}
+@font-feature-values InterDisplay {
+    @character-variant {
+        cv01: 1;
+        cv02: 2;
+        cv03: 3;
+        cv04: 4;
+        cv05: 5;
+        cv06: 6;
+        cv07: 7;
+        cv08: 8;
+        cv09: 9;
+        cv10: 10;
+        cv11: 11;
+        cv12: 12;
+        cv13: 13;
+        alt-1: 1; /* Alternate one */
+        alt-3: 9; /* Flat-top three */
+        open-4: 2; /* Open four */
+        open-6: 3; /* Open six */
+        open-9: 4; /* Open nine */
+        lc-l-with-tail: 5; /* Lower-case L with tail */
+        simplified-u: 6; /* Simplified u */
+        alt-double-s: 7; /* Alternate German double s */
+        uc-i-with-serif: 8; /* Upper-case i with serif */
+        uc-g-with-spur: 10; /* Capital G with spur */
+        single-story-a: 11; /* Single-story a */
+        compact-lc-f: 12; /* Compact f */
+        compact-lc-t: 13; /* Compact t */
+    }
+    @styleset {
+        ss01: 1;
+        ss02: 2;
+        ss03: 3;
+        ss04: 4;
+        ss05: 5;
+        ss06: 6;
+        ss07: 7;
+        ss08: 8;
+        open-digits: 1;                /* Open digits */
+        disambiguation: 2;             /* Disambiguation (with zero) */
+        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+        round-quotes-and-commas: 3;    /* Round quotes & commas */
+        square-punctuation: 7;         /* Square punctuation */
+        square-quotes: 8;              /* Square quotes */
+        circled-characters: 5;         /* Circled characters */
+        squared-characters: 6;         /* Squared characters */
+    }
+}

packages/frontend/src/styles/MiSans/MiSans.css

@@ -0,0 +1,88 @@
+@font-face {
+    font-family: "MiSans VF";
+    font-style: normal;
+    font-weight: 150 700;
+    font-display: swap;
+    src: url("MiSans VF.woff2") format("woff2");
+}
+
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url("MiSans-Thin.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url("MiSans-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url("MiSans-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 360;
+    font-display: swap;
+    src: url("MiSans-Normal.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("MiSans-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("MiSans-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("MiSans-Demibold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("MiSans-Semibold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url("MiSans-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url("MiSans-Heavy.woff2") format("woff2");
+}

packages/frontend/src/styles/content.css

@@ -9,7 +9,7 @@
 	h2,
 	h3,
 	h4 {
-		@apply font-bold text-gray-900 dark:text-white my-4;
+		@apply font-medium text-gray-900 dark:text-white my-4;
 	}
 
 	h1 {
@@ -33,14 +33,17 @@
 	}
 
 	a {
-		@apply text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 underline;
+		@apply text-slate-800 dark:text-sky-300 hover:underline;
 	}
 
-	ul,
-	ol {
+	ul {
 		@apply list-disc list-inside my-4;
 	}
 
+	ol {
+		@apply list-decimal list-inside my-4;
+	}
+
 	li {
 		@apply my-2;
 	}
@@ -67,7 +70,7 @@
 	}
 
 	th {
-		@apply bg-gray-200 font-bold;
+		@apply bg-gray-200 font-medium;
 	}
 	ul li p,
 	ol li p {

packages/frontend/src/styles/global.css

@@ -1,3 +1,24 @@
+@import url('InterFont/Inter.css');
+@import url('MiSans/MiSans.css');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+a {
+    @apply text-[#8f4a50] dark:text-[#ffb2b7];
+}
+
+
+:root {
+    font-family: "MiSans", "Inter", sans-serif;
+    font-weight: 400;
+}
+
+@supports (font-variation-settings: normal) {
+    :root {
+        font-family: "InterVariable", "MiSans VF", sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 330;
+    }
+}