feat: move share buttons

assets/ananke/css/custom.css

@@ -26,7 +26,8 @@
 
 
 .share-buttons {
-    position: fixed;
+    position: sticky;
+    width: 50px;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
@@ -49,11 +50,6 @@
     background-color: #555;
 }
 
-.icon svg {
-    height: 50px;
-    width: 50px
-}
-
 .facebook-share { background-color: #3b5998; }
 .pinterest-share { background-color: #bd081c; }
-.x-share { background-color: #333; }
+.x-share { background-color: #000000; }

layouts/_default/single.html

@@ -14,7 +14,6 @@
           */}}
         {{ .CurrentSection.Title }}
       </aside>
-      {{ partial "social-share.html" . }}
       <h1 class="f1 athelas mt3 mb1">
         {{- .Title -}}
       </h1>
@@ -62,6 +61,7 @@
     </div>
 
     <aside class="w-30-l mt6-l">
+      {{ partial "social-share.html" . }}
       {{- partial "menu-contextual.html" . -}}
     </aside>
 

layouts/partials/social-share.html

@@ -24,12 +24,13 @@
       </a>
     {{ end }}
   </div>  */}}
-  <div id="sharing" class="share-buttons" class="mt3 ananke-socials">
+  <div id="sharing" class="ananke-socials share-buttons">
+    <span class="i">Share!<span>
     {{ 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 }}">
+      <a href="{{ $href }}" class="share-btn ananke-social-link {{ .name }}-share no-underline" title="Share on {{ .label }}" aria-label="share on {{ .label }}">
       {{ with .icon }}
-        <span class="icon"> {{ . }}</span>
+        <span class="icon">{{ . }}</span>
       {{ end }}
       </a>
     {{ end }}