Back to top button

assets/css/main.css

@@ -62,6 +62,7 @@ a {
 
 pre {
   padding: var(--code-padding);
+  border: 1px solid var(--code-border);
   overflow: scroll;
   border-radius: var(--code-border-radius);
   margin-top: var(--code-margin-top);
@@ -361,4 +362,14 @@ footer a {
 
 .giscus {
   margin-top: 3rem;
+}
+
+/* Back to top */
+
+.back-to-top {
+  text-align: center;
+  font-family: "Monaspace";
+  font-size: small;
+  margin-bottom: 2rem;
+  margin-top: -3rem;
 }

assets/css/vars.css

@@ -45,13 +45,15 @@
     /* Theme */
     --content: rgb(30, 30, 30);
     --background: rgb(255, 255, 255);
-    --code-background: rgb(245, 245, 245);
+    --code-background: rgb(249, 249, 249);
+    --code-border: rgb(229, 229, 229);
 }
 
 .dark {
     --content: rgb(218, 218, 218);
     --background: rgb(30, 30, 30);
     --code-background: rgb(40, 40, 40);
+    --code-border: rgb(60, 60, 60);
 }
 
 @media screen and (max-width: 1024px) {

layouts/_default/single.html

@@ -67,6 +67,14 @@
     {{ partial "comments.html" . }}
   </div>
 
+  {{ if not (.Param "hideBackToTop") }}
+  <div class="back-to-top">
+    <a href="#top">
+      back to top
+    </a>
+  </div>
+  {{ end }}
+
 </div>
 
 {{ end }}