add floating-button shortcode

This shortcode adds a floating button styled like other buttons in
this theme and allows you to move to the appropriate place on the page
or another link.

assets/css/compiled/main.css

@@ -929,21 +929,14 @@ select {
   color: var(--tw-prose-code);
   font-weight: 600;
   font-size: 0.875em;
-  background-color: rgba(var(--color-neutral-50), 1);
-  padding-top: 3px;
-  padding-bottom: 3px;
-  padding-left: 5px;
-  padding-right: 5px;
 }
 
 .prose :where(code):not(:where([class~="not-prose"] *))::before {
   content: "`";
-  display: none;
 }
 
 .prose :where(code):not(:where([class~="not-prose"] *))::after {
   content: "`";
-  display: none;
 }
 
 .prose :where(a code):not(:where([class~="not-prose"] *)) {
@@ -1211,14 +1204,6 @@ select {
   border-radius: 0.12rem;
 }
 
-.prose :where(p):not(:where([class~="not-prose"] *))::before {
-  display: none;
-}
-
-.prose :where(p):not(:where([class~="not-prose"] *))::after {
-  display: none;
-}
-
 .prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
   margin-top: 0.5714286em;
   margin-bottom: 0.5714286em;
@@ -1552,11 +1537,9 @@ select {
   left: 0px;
 }
 
-.inset-0\.5 {
+.inset-x-1\/2 {
-  top: 0.125rem;
+  left: 50%;
-  right: 0.125rem;
+  right: 50%;
-  bottom: 0.125rem;
-  left: 0.125rem;
 }
 
 .inset-x-0 {
@@ -1564,26 +1547,6 @@ select {
   right: 0px;
 }
 
-.inset-x-0\.5 {
-  left: 0.125rem;
-  right: 0.125rem;
-}
-
-.inset-x-full {
-  left: 100%;
-  right: 100%;
-}
-
-.inset-x-auto {
-  left: auto;
-  right: auto;
-}
-
-.inset-x-1\/2 {
-  left: 50%;
-  right: 50%;
-}
-
 .top-\[100vh\] {
   top: 100vh;
 }
@@ -1600,14 +1563,6 @@ select {
   bottom: 1rem;
 }
 
-.right-1\/2 {
-  right: 50%;
-}
-
-.left-1\/2 {
-  left: 50%;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -1620,6 +1575,14 @@ select {
   right: 0px;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
+.right-8 {
+  right: 2rem;
+}
+
 .z-30 {
   z-index: 30;
 }
@@ -1701,6 +1664,11 @@ select {
   margin-bottom: 0.75rem;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -1845,6 +1813,14 @@ select {
   margin-bottom: 2px;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
 .block {
   display: block;
 }
@@ -1949,6 +1925,10 @@ select {
   width: 6rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-screen {
   width: 100vw;
 }
@@ -1965,14 +1945,6 @@ select {
   width: 1.5rem;
 }
 
-.w-44 {
-  width: 11rem;
-}
-
-.w-40 {
-  width: 10rem;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -2017,12 +1989,6 @@ select {
   max-width: 48rem;
 }
 
-.max-w-fit {
-  max-width: -webkit-fit-content;
-  max-width: -moz-fit-content;
-  max-width: fit-content;
-}
-
 .max-w-\[64rem\] {
   max-width: 64rem;
 }
@@ -2098,6 +2064,10 @@ select {
   flex-wrap: wrap;
 }
 
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
 .items-center {
   align-items: center;
 }
@@ -2197,11 +2167,6 @@ select {
   border-bottom-left-radius: 0.5rem;
 }
 
-.rounded-r {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-}
-
 .border {
   border-width: 1px;
 }
@@ -2257,16 +2222,16 @@ select {
   background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
 }
 
-.bg-primary-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
-}
-
 .bg-primary-700 {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-700), var(--tw-bg-opacity));
 }
 
+.bg-primary-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
+}
+
 .bg-\[\#ef4444\] {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -2299,16 +2264,6 @@ select {
   background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
 }
 
-.bg-primary-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
-}
-
-.bg-primary-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -2676,6 +2631,11 @@ select {
   color: rgb(255 51 153 / var(--tw-text-opacity));
 }
 
+.text-neutral-300 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
+}
+
 .text-\[\#fca5a5\] {
   --tw-text-opacity: 1;
   color: rgb(252 165 165 / var(--tw-text-opacity));
@@ -2691,11 +2651,6 @@ select {
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
 }
 
-.text-neutral-300 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
-}
-
 .text-primary-700 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-700), var(--tw-text-opacity));
@@ -2721,11 +2676,6 @@ select {
   color: rgba(var(--color-primary-800), var(--tw-text-opacity));
 }
 
-.text-neutral-100 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
-}
-
 .\!no-underline {
   text-decoration-line: none !important;
 }
@@ -2756,14 +2706,14 @@ select {
   opacity: 0;
 }
 
-.opacity-70 {
-  opacity: 0.7;
-}
-
 .opacity-30 {
   opacity: 0.3;
 }
 
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .mix-blend-normal {
   mix-blend-mode: normal;
 }
@@ -2772,9 +2722,9 @@ select {
   mix-blend-mode: multiply;
 }
 
-.shadow {
+.shadow-md {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -2796,12 +2746,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -3634,6 +3578,14 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
 }
 
+.hover\:\!rounded-full:hover {
+  border-radius: 9999px !important;
+}
+
+.hover\:rounded-full:hover {
+  border-radius: 9999px;
+}
+
 .hover\:border-transparent:hover {
   border-color: transparent;
 }
@@ -3668,11 +3620,6 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
 }
 
-.hover\:bg-primary-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
-}
-
 .hover\:text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@@ -4062,10 +4009,6 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-secondary-400), 1);
 }
 
-.dark .dark\:prose-invert :where(code):not(:where([class~="not-prose"] *)) {
-  background-color: rgba(var(--color-neutral-700), 1);
-}
-
 .dark .dark\:text-neutral {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral), var(--tw-text-opacity));

layouts/shortcodes/floating-button.html

@@ -2,13 +2,20 @@
 {{ $text := .Get "text" -}}
 {{ $link := .Get "link" -}}
 
-<a href="{{ $link }}" class="bg-primary-600 w-40 h-12 hover:bg-primary-900 shadow-md hover:shadow-xl hover:!rounded-full text-neutral-300 rounded-full fixed bottom-4 inset-x-1/2 text-center">
+<script>
-    <i class="hover:rounded-full">{{ $text }}</i> 
+ function floatButton() {
+     document.getElementById("floatbutt").hidden = true;
+     window.location.href = '{{ $link }}';
+ }
+</script>
+
+<button class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700 fixed bottom-4 right-8" type="button" name="floatbutt" onclick="floatButton()" id="floatbutt">
+    <i>{{ $text }}</i> 
     {{ if $icon }}
-    <span class="relative inline-block align-sub icon">
+    <span class="relative inline-block align-sub icon flex-auto">
         {{ $icon.Content | safeHTML }}
     </span>
     {{ else }}
     {{ errorf `[BLOWFISH] Shortcode "icon" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (printf "icons/%s.svg" ($.Get 0)) }}
     {{ end }}
-</a>
+</button>