reduce width on mobile devices and add padding

themes/secluded/assets/scss/_main.scss

@@ -1,5 +1,6 @@
 html {
   scroll-behavior: smooth;
+  padding: 0 30px;
 }
 body {
   font-family: Heliotrope;
@@ -172,3 +173,9 @@ input[type="text"]:focus {
     font-style: italic;
   }
 }
+
+@media (max-width: 55em) {
+  html {
+    max-width: 650px;
+  }
+}

themes/secluded/layouts/partials/footer.html

@@ -1,5 +1,5 @@
 <div class="footer">
-    <p><a class="button" href="#top">Back to the top</a></p>
+    <p><a class="button" href="#">Back to the top</a></p>
     <!--<p><a class="button" href="https://fediring.net/previous?host=secluded.site">←</a> <a class="button" href="https://fediring.net/">Fediring</a> <a class="button" href="https://fediring.net/next?host=secluded.site">→</a></p>-->
     <p class="boring_stuff">Content licensed under <a href="https://creativecommons.org/licenses/by/4.0/deed.en">CC-BY-4.0</a><br/>
         Code licensed under <a href="https://tldrlegal.com/license/mit-license">MIT</a><br/>

themes/secluded/layouts/partials/header.html

@@ -1,4 +1,4 @@
-<div class="title-wrapper" id="top">
+<div class="title-wrapper">
     <span class="title"><a href="{{ .Site.BaseURL }}">{{ $.Site.Title }}</a></span>
     <span class="menu">
         <ul>