diff options
| author | eltrac <hi@eltr.ac> | 2026-03-30 17:45:24 +0800 |
|---|---|---|
| committer | eltrac <hi@eltr.ac> | 2026-03-30 17:45:24 +0800 |
| commit | a4d41717fb1fbf78107f50b1372d7bafff7c011a (patch) | |
| tree | 4e6bec745e304c544b1df8fac8c9f8121f55a89f /layouts | |
| parent | f2ebe2503a20645b8c5cef459dda3d3b139b992e (diff) | |
perf: reduce rotate-* classes and use style attr instead
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/_partials/posts/webmention-summary.html | 13 | ||||
| -rw-r--r-- | layouts/fiction/section.html | 10 |
2 files changed, 10 insertions, 13 deletions
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 }} |