Only show the scroll to top button on desktop (when no menu button)

Author: kategengler

app/assets/styles.css

@@ -262,48 +262,6 @@ section.event {
   border: 0;
 }
 
-.scroll-to-top {
-  position: fixed;
-  bottom: 50px;
-  right: 30px;
-  z-index: 10;
-  display: block;
-  background: var(--color-gray-500);
-  border-width: 0;
-  height: 50px;
-  width: 50px;
-  border-radius: 50%;
-  transition:
-    all 0.2s linear,
-    opacity 0.3s;
-  cursor: pointer;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.scroll-to-top.is-visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.scroll-to-top:hover {
-  transform: scale(1.1);
-}
-
-.scroll-to-top::after {
-  content: "";
-  position: absolute;
-  left: 16px;
-  z-index: 11;
-  display: block;
-  width: 15px;
-  height: 15px;
-  border-top: 4px solid var(--color-gray-100);
-  border-left: 4px solid var(--color-gray-100);
-  transform: rotate(45deg);
-  top: 20px;
-}
-
 /* Ember data uses styled elements in markdown blocks that conflict with the
    default styles for blockquotes (because of ::before block that has an
    absolutely positioned quote mark).
@@ -377,6 +335,48 @@ table td {
   .content {
     margin-top: var(--spacing-4);
   }
+
+  .scroll-to-top {
+    position: fixed;
+    bottom: 50px;
+    right: 30px;
+    z-index: 10;
+    display: block;
+    background: var(--color-gray-500);
+    border-width: 0;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    transition:
+      all 0.2s linear,
+      opacity 0.3s;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .scroll-to-top.is-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .scroll-to-top:hover {
+    transform: scale(1.1);
+  }
+
+  .scroll-to-top::after {
+    content: "";
+    position: absolute;
+    left: 16px;
+    z-index: 11;
+    display: block;
+    width: 15px;
+    height: 15px;
+    border-top: 4px solid var(--color-gray-100);
+    border-left: 4px solid var(--color-gray-100);
+    transform: rotate(45deg);
+    top: 20px;
+  }
 }
 
 @media (width <= 450px) {