feat: add scrolling share buttons

This commit is contained in:
sixpointcube 2024-06-20 13:56:53 -04:00
parent 9eab2e631d
commit 64c3c2cb16
2 changed files with 49 additions and 3 deletions

View File

@ -22,4 +22,38 @@
.jump-button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.5);
}
}
.share-buttons {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
flex-direction: column;
z-index: 1000;
}
.share-btn {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
margin: 5px 0;
text-decoration: none;
transition: background-color 0.3s;
}
.share-btn:hover {
background-color: #555;
}
.icon svg {
height: 50px;
width: 50px
}
.facebook-share { background-color: #3b5998; }
.pinterest-share { background-color: #bd081c; }
.x-share { background-color: #333; }

View File

@ -14,7 +14,7 @@
{{ $services := where (partialCached "func/socials/Get" "socials/Get") "share" true }}
{{ if not ($.Param "disable_share") }}
<div id="sharing" class="mt3 ananke-socials">
{{/* <div id="sharing" class="mt3 ananke-socials">
{{ range $service := $services }}
{{ $href := index $hrefs .name }}
<a href="{{ $href }}" class="ananke-social-link {{ .name }} no-underline" aria-label="share on {{ .label }}">
@ -23,5 +23,17 @@
{{ end }}
</a>
{{ end }}
</div> */}}
<div id="sharing" class="share-buttons" class="mt3 ananke-socials">
{{ range $service := $services }}
{{ $href := index $hrefs .name }}
<a href="{{ $href }}" class="share-btn ananke-social-link {{ .name }}-share no-underline" aria-label="share on {{ .label }}">
{{ with .icon }}
<span class="icon"> {{ . }}</span>
{{ end }}
</a>
{{ end }}
</div>
{{ end }}
{{ end }}