diff options
| -rw-r--r-- | assets/css/utils/_utility.scss | 10 | ||||
| -rw-r--r-- | layouts/_partials/posts/webmention-summary.html | 13 | ||||
| -rw-r--r-- | layouts/fiction/section.html | 10 | ||||
| -rw-r--r-- | uno.config.js | 3 |
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:-']), |