fix: style and type issues with feature enhancements

- Fix presetTheme type assertion issue
- Fix content height dvh problem on large screens
- Fix tables and KaTex math formulas overflowing containers on mobile
- Update 404 page
- Update README documentation
- Increase link underline offset
- Add line number display to code blocks
- Improve scrollbar styles for TOC and code blocks

README.md

@@ -30,9 +30,9 @@ Retypeset is a static blog theme based on the [Astro](https://astro.build/) fram
 ## Features
 
 - Built with Astro and UnoCSS
-- Support for SEO, Sitemap, OpenGraph, TOC, RSS, MDX and LaTeX
+- Support for SEO, Sitemap, OpenGraph, TOC, RSS, MDX and KaTeX
 - i18n support
-- Light/Dark mode
+- Light / Dark mode
 - Elegant view transitions
 - Rich theme customization
 - Optimized typography
@@ -78,7 +78,7 @@ For other platforms, please refer to the [Astro Deployment Guides](https://docs.
 - [Redefine](https://github.com/EvanNotFound/hexo-theme-redefine)
 - [AstroPaper](https://github.com/satnaing/astro-paper)
 - [heti](https://github.com/sivan/heti)
-- [Early Summer Serif](https://github.com/GuiWonder/EarlySummerSerif)
+- [EarlySummerSerif](https://github.com/GuiWonder/EarlySummerSerif)
 
 ## Star History
 

README.zh.md

@@ -30,7 +30,7 @@ Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主
 ## 特征
 
 - 基于 Astro 与 UnoCSS 开发
-- 支持 SEO、Sitemap、OpenGraph、TOC、RSS、MDX 和 LaTeX
+- 支持 SEO、Sitemap、OpenGraph、TOC、RSS、MDX 和 KaTeX
 - i18n 多语言
 - 亮色/暗色模式
 - 优雅的过渡动画

package.json

@@ -48,7 +48,7 @@
     "lint-staged": "^15.5.0",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
-    "sharp": "^0.34.0",
+    "sharp": "^0.34.1",
     "typescript": "~5.8.3",
     "unocss": "66.1.0-beta.10",
     "unocss-preset-theme": "^0.14.1"

src/components/Widgets/Scrollbar.astro

@@ -54,7 +54,6 @@ function setupScrollbar() {
       scrollbars: {
         theme: 'scrollbar-widget',
         autoHide: 'never',
-        autoHideDelay: 500,
       },
       overflow: {
         x: 'hidden',
@@ -89,9 +88,9 @@ document.addEventListener('astro:after-swap', setupScrollbar)
 }
 
 .scrollbar-widget {
-  --os-size: 0.6rem;
-  --os-padding-perpendicular: 0.1rem;
-  --os-padding-axis: 0.2rem;
+  --os-size: 0.4rem;
+  --os-padding-perpendicular: 0;
+  --os-padding-axis: 0.05rem;
   --os-handle-border-radius: 99rem;
   --os-handle-perpendicular-size: 75%;
   --os-handle-perpendicular-size-hover: 100%;

src/layouts/Layout.astro

@@ -37,7 +37,7 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
     <div
       class="mx-auto max-w-205.848 min-h-vh w-full min-h-dvh"
       p="x-[min(7.25vw,3.731rem)] y-9"
-      lg="p-0 max-w-[min(calc(75vw-16rem),44rem)] mx-[max(5.625rem,calc(50vw-34.375rem))] my-20"
+      lg="p-0 min-h-full max-w-[min(calc(75vw-16rem),44rem)] mx-[max(5.625rem,calc(50vw-34.375rem))] my-20"
     >
       <Header />
       <Navbar />

src/pages/404.astro

@@ -5,6 +5,7 @@ import Layout from '@/layouts/Layout.astro'
 <Layout>
   <!-- Decorative Line -->
   <div class="uno-decorative-line"></div>
-  <!-- 404  -->
-  <h1 class="mt-10 text-8 font-title">404</h1>
+  <!-- Page Not Found -->
+  <h3 class="mt--1.3 text-8 text-primary font-bold leading-1.2em font-navbar lg:text-9">PAGE<br >NOT<br >FOUND</h3>
+  <p class="mt-4 text-3.6 leading-1.4em font-navbar lg:(mt-5 text-4)">It looks like the page you're looking for<br >does not exist or has been moved.</p>
 </Layout>

src/styles/heti.css

@@ -19,7 +19,7 @@
 
 /* Links */
 .heti :where(a) {
-  --at-apply: 'underline decoration-secondary/40 underline-0.075em underline-offset-0.08em lg:underline-0.1em';
+  --at-apply: 'underline decoration-secondary/40 underline-0.075em underline-offset-0.18em lg:underline-0.1em';
   --at-apply: 'font-medium transition-colors tracking-0 hover:(c-primary decoration-secondary/80) ';
 }
 
@@ -103,6 +103,16 @@ html.dark .heti pre :where(span) {
 /* Inline Code */
 .heti :where(code) {
   --at-apply: 'p-0.5 bg-secondary/5 rounded text-0.85em border border-solid border-secondary/5';
+  counter-reset: line;
+}
+.heti :where(code) span.line {
+  --at-apply: 'relative pl-8';
+}
+.heti :where(code) span.line::before {
+  --at-apply: 'text-secondary/35 w-4 absolute left-0 leading-1.95em align-bottom';
+  content: counter(line);
+  counter-increment: line;
+  direction: rtl;
 }
 
 /* Horizontal Rules */
@@ -148,8 +158,10 @@ html.dark .heti pre :where(span) {
 
 /* Tables */
 .heti :where(table) {
-  --at-apply: 'box-border table-fixed mt-3 mb-6 rounded-md break-words';
-  --at-apply: 'border border-solid border-secondary/25 border-collapse';
+  --at-apply: 'block box-border table-fixed w-full max-w-full mt-3 mb-6 overflow-x-auto break-words scrollbar-hidden';
+}
+.heti :where(table)::-webkit-scrollbar {
+  display: none;
 }
 .heti :where(th),
 .heti :where(td) {
@@ -282,6 +294,14 @@ html.dark .heti :where(u) {
   --at-apply: 'text-center text-sm mt-3 text-secondary/75';
 }
 
+/* KaTeX Mathematical */
+.heti :where(.katex-display) {
+  --at-apply: 'block max-w-full overflow-x-auto overflow-y-hidden scrollbar-hidden';
+}
+.heti :where(.katex-display)::-webkit-scrollbar {
+  display: none;
+}
+
 /* Markdown Extensions Style >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 .heti :where(details) {
   --at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';

uno.config.ts

@@ -1,4 +1,4 @@
-import type { Theme } from 'unocss/preset-uno'
+import type { Preset } from 'unocss'
 import {
   defineConfig,
   presetAttributify,
@@ -15,13 +15,13 @@ export default defineConfig({
   presets: [
     presetWind3(),
     presetAttributify(),
-    presetTheme<Theme>({
+    presetTheme({
       theme: {
         dark: {
           colors: dark,
         },
       },
-    }),
+    }) as Preset<object>,
   ],
   theme: {
     colors: light,