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.
This commit is contained in:
parent
eae2232537
commit
be049e4536
|
|
@ -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 {
|
||||
top: 0.125rem;
|
||||
right: 0.125rem;
|
||||
bottom: 0.125rem;
|
||||
left: 0.125rem;
|
||||
.inset-x-1\/2 {
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px 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);
|
||||
.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);
|
||||
}
|
||||
|
||||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<i class="hover:rounded-full">{{ $text }}</i>
|
||||
<script>
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue