perf: reduce rotate-* classes and use style attr instead

4 files changed, 20 insertions, 16 deletions

diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
index ce11796c..b37cc742 100644
--- a/assets/css/utils/_utility.scss
+++ b/assets/css/utils/_utility.scss
@@ -50,3 +50,13 @@ details.no-mark summary::marker { content: "" }
   content-visibility: auto;
   contain-intrinsic-size: auto 500px;
 }
+
+/* Dynamic rotation for webmention avatars */
+.group:hover img[style*="--rotate-amount"] {
+  transform: rotate(var(--rotate-amount));
+}
+
+/* Dynamic rotation for fiction section items */
+div[style*="--rotation-deg"]:hover {
+  transform: rotate(0deg) scale(1.1) !important;
+}
diff --git a/layouts/_partials/posts/webmention-summary.html b/layouts/_partials/posts/webmention-summary.html
index 5dd6bb77..a3a7265d 100644
--- a/layouts/_partials/posts/webmention-summary.html
+++ b/layouts/_partials/posts/webmention-summary.html
@@ -18,12 +18,13 @@
           {{ $author := index (index $authors 0) "properties" }}
           {{ $photo := or (index . "extra" "proxied-photo")
                           (index $author.photo 0) }}
-      <a href="{{ index $author.url 0 }}" target="_blank" title="{{ index $author.name 0 }}" class="box-border hover:no-underline inline-block h-5 w-5 float-left -ml-1">
-          {{ $value := math.Floor (mul math.Rand 80) }}
-          {{ $rotate := cond (lt $value 40) (sub 10 $value) (sub $value 30) }}
-          <img src="{{ $photo }}" alt="Profile Picture"
-              loading="lazy"
-              class="h-5 w-5 rd-full transition-transform {{ if lt $rotate 0 }}group-hover:-rotate-{{ mul -1 $rotate }}{{ else }}group-hover:rotate-{{ $rotate }}{{ end }} hover:scale-150" />
+      <a href="{{ index $author.url 0 }}" target="_blank" title="{{ index $author.name 0 }}" class="box-border hover:no-underline inline-block h-5 w-5 float-left -ml-1 hover:scale-150 transition-transform">
+           {{ $value := math.Floor (mul math.Rand 80) }}
+           {{ $rotate := cond (lt $value 40) (sub 10 $value) (sub $value 30) }}
+           <img src="{{ $photo }}" alt="Profile Picture"
+               loading="lazy"
+               class="h-5 w-5 rd-full transition-transform"
+               style="{{ if ne $rotate 0 }}--rotate-amount: {{ $rotate }}deg;{{ end }}" />
         </a>
     {{ end }}
  <div class="text-secondary m-0 text-sm inline ml-2">
diff --git a/layouts/fiction/section.html b/layouts/fiction/section.html
index beda5ba2..9bbf122f 100644
--- a/layouts/fiction/section.html
+++ b/layouts/fiction/section.html
@@ -7,19 +7,15 @@
 
                 {{ $rotationDeg := add (math.Floor (mul (math.Rand) 7)) -4 }}
                 {{- $deg := int $rotationDeg -}}
-                {{- $rotateClass := cond (ge $deg 0)
-                    (printf "rotate-%d" $deg)
-                    (printf "-rotate-%d" (mul -1 $deg))
-                -}}
 
                 {{ $steps := slice 60 70 80 90 100 }}
                 {{ $opacity := index $steps (int (math.Floor (mul (math.Rand) 5))) }}
                 {{ $opacityClass := printf "opacity-%d" $opacity }}
 
                 <div class="xerox text-center text-2xl font-extrabold
-                    {{ $rotateClass }} {{ $opacityClass }}
-                    transition hover:opacity-100 hover:scale-110 hover:rotate-0"
-                    style="view-transition-name: post-{{ .File.UniqueID }}">
+                    {{ $opacityClass }}
+                    transition hover:opacity-100 hover:scale-110"
+                     style="view-transition-name: post-{{ .File.UniqueID }}; {{ if ne $deg 0 }}--rotation-deg: {{ $deg }}deg; transform: rotate({{ $deg }}deg);{{ end }}">
                     <a class="hover:no-underline" href="{{ .Permalink }}">《{{ .Title }}》</a>
                 </div>
                 {{- end }}
diff --git a/uno.config.js b/uno.config.js
index a627b272..61831a43 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -40,9 +40,6 @@ export default defineConfig({
     ...'absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black'.split(' '),
 
     ...range(10, i => `opacity-${i * 10}`),
-    ...rangeWithPrefixes(50, 'rotate', ['', '-', 'group-hover:', 'group-hover:-']),
-    ...rangeWithPrefixes(5, 'translate-x', ['', '-']),
-    ...rangeWithPrefixes(5, 'translate-y', ['', '-']),
     ...rangeWithPrefixes(30, 'w', ['', 'md:', 'lg:']),
     ...rangeWithPrefixes(30, 'h', ['', 'md:']),
     ...rangeWithPrefixes(30, 'right', ['', 'md:', '-', 'md:-']),