add return-to-top block

cigaradvisor/blocks/return-to-top/return-to-top.css

@@ -0,0 +1,59 @@
+#return-to-top {
+    display: block;
+    position: fixed;
+    top: 50%;
+    right: 10px;
+    z-index: 499;
+    opacity: .5;
+    transition: opacity .2s ease-in-out,visibility .2s linear;
+    cursor: pointer;
+}
+
+#return-to-top.hidden {
+    opacity: 0;
+}
+
+#return-to-top > .icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--tan);
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+
+    --icon-size: 36px;
+}
+
+#return-to-top > .icon-container > .icon {
+    margin-top: 2px;
+    filter: var(--clr-filter-white);
+}
+
+@media print, screen and (max-width: 720px) {
+    #return-to-top {
+        height: 50px;
+        width: 50px;
+        margin-top: -25px;
+    }
+
+    #return-to-top > picture {
+        display: none;
+    }
+}
+
+@media print, screen and (min-width: 720px) {
+    #return-to-top {
+        height: 170px;
+        width: 50px;
+        margin-top: -75px;
+    }
+
+    #return-to-top:hover {
+        opacity: 1;
+    }
+
+    #return-to-top > .icon-container {
+        display: none;
+    }
+}

cigaradvisor/blocks/return-to-top/return-to-top.js

@@ -0,0 +1,37 @@
+import { createOptimizedPicture, decorateIcons } from '../../scripts/aem.js';
+
+function onScroll() {
+  const link = document.getElementById('return-to-top');
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    link.classList.remove('hidden');
+  } else {
+    link.classList.add('hidden');
+  }
+}
+
+function scrollTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+export default function decorate(block) {
+  const link = document.createElement('a');
+  link.id = 'return-to-top';
+  link.classList.add('hidden');
+  link.onclick = scrollTop;
+  block.appendChild(link);
+
+  // Desktop
+  const picture = createOptimizedPicture('/cigaradvisor/blocks/return-to-top/return-to-top.webp');
+  link.appendChild(picture);
+
+  // Mobile
+  const iconContainer = document.createElement('div');
+  iconContainer.classList.add('icon-container');
+  const icon = document.createElement('span');
+  icon.classList.add('icon', 'icon-angle-up');
+  iconContainer.appendChild(icon);
+  decorateIcons(iconContainer);
+  link.appendChild(iconContainer);
+
+  window.onscroll = onScroll;
+}

cigaradvisor/styles/styles.css

@@ -37,6 +37,7 @@
   --clr-text: var(--clr-dark-gray);
 
   /* filter colors (https://codepen.io/sosuke/pen/Pjoqqp) */
+  --clr-filter-white: invert(100%);
   --clr-filter-gray: invert(18%) sepia(4%) saturate(304%) hue-rotate(277deg) brightness(98%) contrast(92%);
   --clr-filter-tan: invert(50%) sepia(27%) saturate(408%) hue-rotate(358deg) brightness(93%) contrast(91%);
   --clr-filter-subdued-gold: invert(62%) sepia(55%) saturate(302%) hue-rotate(6deg) brightness(90%) contrast(88%);