diff options
| author | tdro <tdro@noreply.example.com> | 2022-09-04 11:13:55 -0400 |
|---|---|---|
| committer | tdro <tdro@noreply.example.com> | 2022-09-04 11:13:55 -0400 |
| commit | 24d40c1573ffefc83f82658c9523c66d7940e2a6 (patch) | |
| tree | c13a594682450152ad81390b58d2944b5439861f | |
| parent | 62144bb9817cdb0a7a388c16efb38c4cb473bee8 (diff) | |
| download | canory-24d40c1573ffefc83f82658c9523c66d7940e2a6.tar.gz canory-24d40c1573ffefc83f82658c9523c66d7940e2a6.tar.bz2 canory-24d40c1573ffefc83f82658c9523c66d7940e2a6.zip | |
themes/default/layouts/shortcodes: Add reaction short-code
| -rw-r--r-- | assets/css/default.css | 31 | ||||
| -rw-r--r-- | themes/default/layouts/shortcodes/react.html | 29 | ||||
| -rw-r--r-- | themes/default/layouts/shortcodes/react.rss.xml | 18 |
3 files changed, 78 insertions, 0 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 9c19d03..958aa7c 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -1743,6 +1743,37 @@ twitter-tweet iframe { border: none; } +reaction-hover { + text-decoration: underline; + text-decoration-style: wavy; + cursor: pointer; + position: relative; + display: inline-block; +} + +reaction-hover:hover { + text-decoration-thickness: 0.15rem; +} + +reaction-hover:hover img { + visibility: visible; + opacity: 1; +} + +reaction-hover img { + position: absolute; + z-index: 99; + visibility: hidden; + opacity: 0; + height: 80px; + width: 80px; + object-fit: cover; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + max-width: fit-content; +} + /* ----- Attributes ----- */ [tabindex="-1"]:focus { diff --git a/themes/default/layouts/shortcodes/react.html b/themes/default/layouts/shortcodes/react.html new file mode 100644 index 0000000..7eb7920 --- /dev/null +++ b/themes/default/layouts/shortcodes/react.html @@ -0,0 +1,29 @@ +{{- $text := default "react" (.Get "text" | default (.Get 0)) -}} +{{- $source := default "" (.Get "source" | default (.Get 1)) -}} +{{- $title := default $text (.Get "title" | default (.Get 2)) -}} +{{- $alternate := default $title (.Get "alternate" | default (.Get 3)) -}} + +{{- $author := .Page.Section -}} + +{{- $image := partial "function-caches-images.html" + (dict + "Source" $source + "Fit" "100x100" + "Target" (print (partial "function-paths.html" "media") "/" $author "/") + "Copy" (print (partial "function-paths.html" "media") "/" $author "/react-" (path.Base $source)) + "AlternateCopy" (print (partial "function-paths.html" "media") "/" $author "/react-" (path.BaseName $source) ".webp") + ) +-}} + +<reaction-hover title="{{ $title }}"> + {{ $text | markdownify }} + <a href="{{ $image.Permalink }}"> + <img + width="{{ $image.Width }}" + height="{{ $image.Height }}" + title="{{ $title }}" + alt="{{ $alternate }}" + src="{{ $image.Permalink }}" + /> + </a> +</reaction-hover> diff --git a/themes/default/layouts/shortcodes/react.rss.xml b/themes/default/layouts/shortcodes/react.rss.xml new file mode 100644 index 0000000..5ed5f80 --- /dev/null +++ b/themes/default/layouts/shortcodes/react.rss.xml @@ -0,0 +1,18 @@ +{{- $text := default "react" (.Get "text" | default (.Get 0)) -}} +{{- $source := default "" (.Get "source" | default (.Get 1)) -}} +{{- $title := default $text (.Get "title" | default (.Get 2)) -}} +{{- $alternate := default $title (.Get "alternate" | default (.Get 3)) -}} + +{{- $author := .Page.Section -}} + +{{- $image := partial "function-caches-images.html" + (dict + "Source" $source + "Fit" "100x100" + "Target" (print (partial "function-paths.html" "media") "/" $author "/") + "Copy" (print (partial "function-paths.html" "media") "/" $author "/react-" (path.Base $source)) + "AlternateCopy" (print (partial "function-paths.html" "media") "/" $author "/react-" (path.BaseName $source) ".webp") + ) +-}} + +{{ $text | markdownify }} (<a title="{{ $title }}" href="{{ $image.Permalink }}">reaction</a>) |