chore: update heti style, remove infrequently used unocss rules, streamline meta tags

README.md

@@ -89,19 +89,6 @@ Retypeset is a static blog theme based on the [Astro](https://astro.build/) fram
 
 - Do not click `Discard Changes`, or you will lose your modifications.
 
-## Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                | Action                                           |
-| :--------------------- | :----------------------------------------------- |
-| `pnpm install`         | Install dependencies                             |
-| `pnpm dev`             | Starts local dev server at `localhost:4321`      |
-| `pnpm build`           | Build your production site to `./dist/`          |
-| `pnpm preview`         | Preview your build locally, before deploying     |
-| `pnpm astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `pnpm astro -- --help` | Get help using the Astro CLI                     |
-
 ## Credits
 
 - [Typography](https://github.com/moeyua/astro-theme-typography)

README.zh.md

@@ -89,19 +89,6 @@ Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主
 
 - 不要点击 `Discard Changes`，否则会丢失你的更改。
 
-## 指令
-
-以下指令均需要在项目根目录执行：
-
-| 指令                   | 作用                                   |
-| :--------------------- | :------------------------------------- |
-| `pnpm install`         | 安装依赖                               |
-| `pnpm dev`             | 在 `localhost:4321` 启动本地开发服务器 |
-| `pnpm build`           | 构建网站至 `./dist/`                   |
-| `pnpm preview`         | 本地预览已构建的网站                   |
-| `pnpm astro ...`       | 执行 `astro add`, `astro check` 等命令 |
-| `pnpm astro -- --help` | 获取 Astro CLI 帮助信息                |
-
 ## 鸣谢
 
 - [Typography](https://github.com/moeyua/astro-theme-typography)

src/components/Widgets/TOC.astro

@@ -18,10 +18,7 @@ const filteredHeadings = headings.filter(heading =>
 ---
 
 {filteredHeadings.length > 0 && (
-  <div
+  <div class="uno-round-border mb-6 bg-secondary/5 2xl:(fixed left-0 top-43.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-transparent)">
-    class="mb-6 bg-secondary/5 2xl:(fixed left-0 top-43.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-transparent)"
-    border="~ secondary/5 rounded solid"
-  >
     <input
       type="checkbox"
       id="toc-toggle"

src/layouts/Head.astro

@@ -75,20 +75,17 @@ const pageImage = postSlug
 
 <!-- Facebook Open Graph -->
 <meta property="og:type" content={postTitle ? 'article' : 'website'} />
-<meta property="og:site_name" content={title} />
+<meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={pageTitle} />
 <meta property="og:description" content={pageDescription} />
-<meta property="og:url" content={Astro.url} />
 <meta property="og:image" content={pageImage} />
-<meta property="og:logo" content={favicon} />
 
 <!-- Twitter Card -->
 <meta name="twitter:card" content="summary_large_image" />
 {twitterID && <meta name="twitter:site" content={twitterID} />}
-{twitterID && <meta name="twitter:creator" content={twitterID} />}
+<!-- <meta name="twitter:title" content={pageTitle} />
-<meta name="twitter:title" content={pageTitle} />
 <meta name="twitter:description" content={pageDescription} />
-<meta name="twitter:image" content={pageImage} />
+<meta name="twitter:image" content={pageImage} /> -->
 
 <!-- Site Verification -->
 {google && <meta name="google-site-verification" content={google} />}

src/styles/extend.css

@@ -6,10 +6,10 @@
 
 /* Admonition */
 .admonition-title {
-  --at-apply: 'flex items-center font-semibold';
+  --at-apply: 'flex items-center mb-4 font-semibold';
 }
 .admonition-title::before {
-  --at-apply: 'inline-block aspect-square w-4 mr-2 align-text-bottom content-[""]';
+  --at-apply: 'inline-block mr-2 aspect-square w-4 align-text-bottom content-[""]';
 }
 
 /* Note */
@@ -74,8 +74,8 @@
 
 /* GitHub Card >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 .gc-container {
-  --at-apply: 'block overflow-x-auto scrollbar-hidden mt-3 mb-6 rounded border border-solid border-secondary/5';
+  --at-apply: 'block mt-3 mb-6 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5 scrollbar-hidden';
-  --at-apply: 'bg-secondary/5 px-5 py-4 transition-colors lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
+  --at-apply: 'transition-colors lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
 }
 .gc-container::-webkit-scrollbar {
   display: none;
@@ -86,7 +86,7 @@
   --at-apply: 'flex items-center gap-2.5 lg:gap-3';
 }
 .gc-owner-avatar {
-  --at-apply: 'flex-shrink-0 aspect-square w-5.5 rounded-full bg-secondary/20';
+  --at-apply: 'flex-shrink-0 w-5.5 aspect-square rounded-full bg-secondary/20';
 }
 .gc-repo-title {
   --at-apply: 'flex items-center leading-normal lg:text-lg';
@@ -95,17 +95,17 @@
   --at-apply: 'mx-1 op-40 lg:mx-1.2';
 }
 .gc-github-icon {
-  --at-apply: 'flex-shrink-0 w-5.5 ml-auto lg:w-6';
+  --at-apply: 'flex-shrink-0 ml-auto w-5.5 lg:w-6';
 }
 
 /* Repo Description */
 .gc-repo-description {
-  --at-apply: 'mt-2.45 mb-3.5 text-sm text-start lg:(text-base mt-2.8 mb-4)';
+  --at-apply: 'mt-2.45 mb-3.5 text-sm text-start lg:(mt-2.8 mb-4 text-base)';
 }
 
 /* Info Bar */
 .gc-info-bar {
-  --at-apply: 'flex items-center gap-1.75 text-xs lg:(text-sm gap-2)';
+  --at-apply: 'flex items-center gap-1.75 text-xs lg:(gap-2 text-sm)';
 }
 .gc-info-icon {
   --at-apply: 'flex-shrink-0';
@@ -128,7 +128,7 @@ details :where(summary) {
   --at-apply: 'cursor-pointer';
 }
 details[open] :where(summary) {
-  --at-apply: 'border-b border-solid border-secondary/25 mb-3 pb-3';
+  --at-apply: 'mb-3 pb-3 border-b border-solid border-secondary/25';
 } */
 
 /* details :where(summary) {

src/styles/global.css

@@ -8,8 +8,10 @@ html {
   --at-apply: 'bg-background c-secondary antialiased';
 }
 
+/* Fix flash issue on iOS */
 body {
-  --at-apply: 'ios-flash-fix';
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }
 
 /* View Transition with Theme Toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

src/styles/heti.css

@@ -15,7 +15,7 @@
 
 /* Customized Post Title */
 .heti .post-title {
-  --at-apply: 'mb-2 text-8.6 leading-12 font-bold c-primary lg:text-9';
+  --at-apply: 'mb-2 text-8.6 font-bold leading-12 c-primary lg:text-9';
 }
 
 /* KaTeX Formula Overflow Fix */
@@ -73,7 +73,7 @@
 
 /* Paragraphs */
 .heti :where(p) {
-  --at-apply: 'mt-3 mb-6 text-justify text-pretty';
+  --at-apply: 'mb-4 text-justify text-pretty';
 }
 .heti :where(p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
   --at-apply: 'text-start';
@@ -87,24 +87,23 @@
 
 /* Images */
 .heti :where(img) {
-  --at-apply: 'mx-auto cursor-zoom-in force-gpu';
+  --at-apply: 'mx-auto rounded cursor-zoom-in';
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
 .heti :where(figure) {
-  --at-apply: 'mx-auto mt-3 mb-6';
+  --at-apply: 'mx-auto mb-4';
-}
-.heti :where(figure:has(+ figure), figure:has(+ p > img:first-child)) {
-  --at-apply: 'mb-4 ';
 }
 .heti :where(figcaption) {
-  --at-apply: 'text-center text-sm mt-3 text-secondary/80';
+  --at-apply: 'mt-2 text-center text-sm text-secondary/80';
 }
 
 /* Code Blocks */
 .heti :where(pre) {
-  --at-apply: 'overflow-auto mt-3 mb-6 px-4 py-3 rounded bg-secondary/5! border border-solid border-secondary/5';
+  --at-apply: 'mb-4 px-4 py-3 overflow-auto uno-round-border bg-secondary/5!';
 }
 .heti pre :where(code) {
-  --at-apply: 'p-0 border-none bg-transparent whitespace-pre';
+  --at-apply: 'p-0 border-none bg-transparent';
 }
 html.dark .heti pre :where(span) {
   --at-apply: 'text-[var(--shiki-dark)]!';
@@ -112,7 +111,7 @@ html.dark .heti pre :where(span) {
 
 /* Inline Code */
 .heti :where(code) {
-  --at-apply: 'px-0.4em py-0.2em text-0.85em tracking-0 whitespace-pre-wrap rounded bg-secondary/5 border border-solid border-secondary/5';
+  --at-apply: 'px-0.4em py-0.2em text-0.85em tracking-0 uno-round-border bg-secondary/5';
   counter-reset: line;
 }
 .heti :where(code:is(:lang(zh), :lang(ja), :lang(ko))) {
@@ -130,7 +129,7 @@ html.dark .heti pre :where(span) {
 
 /* Blockquotes */
 .heti :where(blockquote) {
-  --at-apply: 'mt-3 mb-6 px-4 py-0.5 c-secondary/80 border-l-4 border-solid border-secondary/25';
+  --at-apply: 'mb-4 px-4 py-0.5 c-secondary/80 border-l-4 border-solid border-secondary/25';
 }
 .heti blockquote[class*="admonition-"] {
   --at-apply: 'py-1.5 c-secondary';
@@ -138,9 +137,6 @@ html.dark .heti pre :where(span) {
 .heti blockquote blockquote {
   --at-apply: 'py-0';
 }
-.heti blockquote p {
-  --at-apply: 'mb-3';
-}
 .heti blockquote > :first-child {
   --at-apply: 'mt-0';
 }
@@ -150,7 +146,7 @@ html.dark .heti pre :where(span) {
 
 /* Tables */
 .heti :where(table) {
-  --at-apply: 'mt-3 mb-6 block box-border table-fixed max-w-full overflow-x-auto scrollbar-hidden';
+  --at-apply: 'mb-4 block box-border table-fixed max-w-full overflow-x-auto scrollbar-hidden';
 }
 .heti :where(table)::-webkit-scrollbar {
   --at-apply: 'hidden';
@@ -166,7 +162,7 @@ html.dark .heti pre :where(span) {
 /* Lists */
 .heti :where(ul),
 .heti :where(ol) {
-  --at-apply: 'mt-3 mb-6 pl-2em';
+  --at-apply: 'mb-4 pl-2em';
 }
 .heti ul :where(ul),
 .heti ul :where(ol),
@@ -191,7 +187,7 @@ html.dark .heti pre :where(span) {
   --at-apply: 'list-square';
 }
 .heti :where(li) {
-  --at-apply: 'list-unset mt-0.25em';
+  --at-apply: 'mt-0.25em list-unset';
 }
 
 /* Superscript and Subscript >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@@ -208,7 +204,7 @@ html.dark .heti pre :where(span) {
 
 /* Abbreviations */
 .heti :where(abbr[title]) {
-  --at-apply: 'pb-0.25 border-b-1 border-dotted border-secondary no-underline cursor-help';
+  --at-apply: 'pb-0.25 no-underline border-b-1 border-dotted border-secondary cursor-help';
 }
 
 /* Wavy Underline */
@@ -221,8 +217,8 @@ html.dark .heti :where(u) {
 
 /* Keyboard Input */
 .heti :where(kbd) {
-  --at-apply: 'inline-block px-0.4em py-0.3em text-0.85em font-bold leading-none tracking-0 whitespace-nowrap';
+  --at-apply: 'inline-block px-0.4em py-0.3em text-0.85em font-bold leading-none tracking-0';
-  --at-apply: 'rounded border border-solid border-secondary/40 text-secondary';
+  --at-apply: 'uno-round-border border-secondary/40 text-secondary';
 }
 
 /* Highlighted Text */
@@ -250,6 +246,11 @@ html.dark .heti sup a:target {
   --at-apply: 'no-underline font-serif';
 }
 
+/* Horizontal Rules */
+.heti :where(hr) {
+  --at-apply: 'mb-4 border-t-2 border-secondary/5';
+}
+
 /* Bold */
 .heti :where(b),
 .heti :where(strong) {
@@ -261,6 +262,11 @@ html.dark .heti sup a:target {
   --at-apply: 'italic';
 }
 
+/* Cite */
+.heti :where(cite:is(:lang(zh), :lang(ja), :lang(ko))) {
+  --at-apply: 'not-italic';
+}
+
 /* Quotes */
 .heti :where(q) {
   quotes: "「" "」" "『" "』";
@@ -270,8 +276,3 @@ html.dark .heti sup a:target {
   quotes: auto;
 }
 
-/* Horizontal Rules */
-.heti :where(hr) {
-  --at-apply: 'mt-6 mb-3 border-t-2 border-secondary/5';
-}
-

uno.config.ts

@@ -51,20 +51,13 @@ export default defineConfig({
     'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/75 text-primary)',
     'uno-decorative-line': 'h-0.25 w-10 bg-secondary/25 mb-4.5 lg:(w-11 mb-6)',
     'uno-tags-wrapper': 'flex flex-wrap gap-x-3 gap-y-3.2',
+    'uno-round-border': 'rounded border border-solid border-secondary/5',
   },
   rules: [
     ['scrollbar-hidden', {
       'scrollbar-width': 'none',
       '-ms-overflow-style': 'none',
     }],
-    ['ios-flash-fix', {
-      'backface-visibility': 'hidden',
-      '-webkit-backface-visibility': 'hidden',
-    }],
-    ['force-gpu', {
-      'transform': 'translateZ(0)',
-      '-webkit-transform': 'translateZ(0)',
-    }],
   ],
   transformers: [
     transformerDirectives(),