refactor: replace _fictions.scss with unocss

Former-commit-id: 07f6e08a2c841111456c30c00abf437f2ca6ac62

8 files changed, 60 insertions, 57 deletions

diff --git a/assets/css/components/_fictions.scss b/assets/css/components/_fictions.scss
deleted file mode 100644
index 58c15ba0..00000000
--- a/assets/css/components/_fictions.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-#fiction-section {
-    .fiction-welcome {
-        margin: 2rem 0;
-    }
-
-    .fiction-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-        gap: 2rem;
-
-        .fiction-item {
-            text-align: center;
-            margin: 0;
-            filter: url(#x);
-            font-size: 1.5rem;
-            font-weight: 900;
-
-            // Apply slight random rotation using nth-child
-            @for $i from 1 through 10 {
-              &:nth-child(#{$i}) {
-                transform: rotate(#{random(7) - 4}deg);
-                opacity: #{(random(5) + 5) / 10};
-              }
-            }
-        }
-    }
-}
-
-.fiction-page {
-    .fiction-header {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-}
-
-.fiction-page-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index 56cc1976..c16fc056 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -10,7 +10,6 @@
 @import "components/postlist";
 @import "components/shortcodes";
 @import "components/card";
-@import "components/fictions";
 @import "components/library";
 @import "components/footer";
 @import "components/global-search";
diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
index d2110714..53cd3642 100644
--- a/assets/css/utils/_utility.scss
+++ b/assets/css/utils/_utility.scss
@@ -52,3 +52,11 @@ figure {
 .font-mono {
     font-family: var(--mono-font-family);
 }
+
+.font-secondary {
+    color: var(--secondary-text-color);
+}
+
+.xerox {
+    filter: url(#x);
+}
diff --git a/layouts/_markup/render-heading.html b/layouts/_markup/render-heading.html
new file mode 100644
index 00000000..b93a9aad
--- /dev/null
+++ b/layouts/_markup/render-heading.html
@@ -0,0 +1,5 @@
+{{ $size := index (dict "1" "text-4xl" "2" "text-2xl" "3" "text-xl" "4" "text-lg" "5" "text-base" "6" "text-sm") (printf "%d" .Level) }}
+<h{{ .Level }} id="{{ .Anchor }}"
+  class="{{ if eq .Level 2 }}font-extrabold{{ else }}font-bold{{ end }} my-5 {{ $size }}{{ with .Attributes.class }} {{ . }}{{ end }}">
+  {{- .Text -}}
+</h{{ .Level }}>
diff --git a/layouts/_partials/components/post-page-header.html b/layouts/_partials/components/post-page-header.html
index 4363b74c..fffe4f3b 100644
--- a/layouts/_partials/components/post-page-header.html
+++ b/layouts/_partials/components/post-page-header.html
@@ -1,5 +1,5 @@
 <header id="post-page-header"
-    class="{{ with .Params.banner }}with-banner{{ end }} {{ if eq .Section "fictions" }}fiction-page-header{{ end }}">
+    class="{{ with .Params.banner }}with-banner{{ end }} {{ if eq .Section "fictions" }} flex justify-center {{ end }}">
     {{ if eq .Section "fictions" }}
         {{ partial "components/logo" (dict "src" "/img/potted-skeleton.svg" "link" "fictions") }}
     {{ else }}
diff --git a/layouts/fictions/page.html b/layouts/fictions/page.html
index d0817e9c..5654ffbb 100644
--- a/layouts/fictions/page.html
+++ b/layouts/fictions/page.html
@@ -1,17 +1,14 @@
 {{ define "main" }}
     {{ partial "components/post-page-header.html" . }}
-    <article
-        class="post fiction-page {{ .Site.Language.LanguageName }}"
-        id="article"
-    >
+    <article>
       <!-- Post Header -->
       <header
         style="view-transition-name: post-{{ .File.UniqueID }}"
-        class="post-header fiction-header"
+        class="text-center"
       >
         {{ partial "posts/banner" . }}
-        <h1 class="post-title" data-pagefind-meta="title">{{ .Title }}</h1>
-        <div class="post-meta">{{ partial "components/date" . }}</div>
+        <h1 class="xerox text-4xl font-900" data-pagefind-meta="title">{{ .Title }}</h1>
+        <div class="font-secondary">{{ partial "components/date" . }}</div>
       </header>
 
       <!-- Post Content -->
diff --git a/layouts/fictions/section.html b/layouts/fictions/section.html
index 1ce0be54..f97268cd 100644
--- a/layouts/fictions/section.html
+++ b/layouts/fictions/section.html
@@ -2,13 +2,21 @@
     <article class="fiction-list-page">
         {{ partial "header.html" . }}
         <div id="fiction-section">
-            <div class="fiction-welcome markdown-body">
+            <div class="my-[2rem] markdown-body">
             {{ with .Content }}{{ . }}{{ end }}
             </div>
-            <div class="fiction-list">
+            <div class="flex flex-wrap justify-around gap-[2rem]">
                 {{- $fictions := .Site.GetPage "section" "fictions" }}
                 {{- range $fictions.Pages }}
-                <div class="fiction-item" style="view-transition-name: post-{{ .File.UniqueID }}">
+
+                {{ $rotationDeg := add (math.Floor (mul (math.Rand) 7)) -4 }}  {{/* -4 to +4 */}}
+                {{ $opacity := add (div (math.Floor (mul (math.Rand) 5)) 10) 0.6 }}  {{/* 0.6 to 1.0 */}}
+
+                {{ $rotateClass := printf "rotate-[%.1fdeg]" $rotationDeg }}
+                {{ $opacityClass := printf "opacity-[%.1f]" $opacity }}
+
+                <div class="xerox text-center text-2xl font-extrabold {{ $rotateClass }} {{ $opacityClass }}"
+                    style="view-transition-name: post-{{ .File.UniqueID }}">
                     <a href="{{ .Permalink }}">《{{ .Title }}》</a>
                 </div>
                 {{- end }}
diff --git a/uno.config.js b/uno.config.js
index 9d1a0e66..b4ac2e97 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -1,9 +1,37 @@
-import presetWind4 from '@unocss/preset-wind4'
-import { defineConfig } from 'unocss'
+import { defineConfig, presetWind3, presetAttributify } from 'unocss'
 
 export default defineConfig({
+  safelist: [
+      'text-sm',
+      'text-md',
+      'text-lg',
+      'text-xl',
+      'text-2xl',
+      'text-3xl',
+      'text-4xl',
+      'text-5xl',
+
+      // rotate -4 to +4 deg
+      'rotate-[-3.0deg]',
+      'rotate-[-2.0deg]',
+      'rotate-[-1.0deg]',
+      'rotate-[0.0deg]',
+      'rotate-[1.0deg]',
+      'rotate-[2.0deg]',
+      'rotate-[3.0deg]',
+
+      // opacity from 0.6 to 1.0
+      'opacity-[0.6]',
+      'opacity-[0.7]',
+      'opacity-[0.8]',
+      'opacity-[0.9]',
+      'opacity-[1.0]',
+    ],
   content: {
     filesystem: ['./**/*.{html,md,js}'],
   },
-  presets: [presetWind4()],
+  presets: [
+    presetAttributify(),
+    presetWind3(),
+  ],
 })