theme: add footer on mobile layout

theme/default/copyright.hbs

@@ -0,0 +1,5 @@
+<section class="copyright">
+    Copyright © {{ cur_year }} {{ blog.title }}<br />
+    Powered by <a href="https://github.com/PeterCxy/paprika" target="_blank">paprika</a><br />
+    Hosted on <a href="https://workers.cloudflare.com/" target="_blank">Cloudflare Workers</a>
+</section>

theme/default/foot.hbs

@@ -0,0 +1,7 @@
+{{> modal.hbs }}
+<!-- Footer is only needed on mobile -->
+<!-- On desktop, put everything to sidebar -->
+<div class="footer">
+    {{> copyright.hbs }}
+</div>
+<script src="/static/script.js?ver={{ build_num }}"></script>

theme/default/home.hbs

@@ -25,7 +25,6 @@
                 </div>
             </div>
         </div>
-        {{> modal.hbs }}
-        <script src="/static/script.js?ver={{ build_num }}"></script>
+        {{> foot.hbs }}
     </body>
 </html>

theme/default/post.hbs

@@ -16,7 +16,6 @@
             <!-- We don't handle this in backend -->
             </div>
         </div>
-        {{> modal.hbs }}
-        <script src="/static/script.js?ver={{ build_num }}"></script>
+        {{> foot.hbs }}
     </body>
 </html>

theme/default/sidebar.hbs

@@ -12,9 +12,5 @@
             {{ /each }}
         </ul>
     </section>
-    <section class="copyright">
-        Copyright © {{ cur_year }} {{ blog.title }}<br />
-        Powered by <a href="https://github.com/PeterCxy/paprika" target="_blank">paprika</a><br />
-        Hosted on <a href="https://workers.cloudflare.com/" target="_blank">Cloudflare Workers</a>
-    </section>
+    {{> copyright.hbs }}
 </div>

theme/default/static/style.css

@@ -141,6 +141,11 @@ blockquote {
     margin-left: 0;
 }
 
+/* Footer -- Not needed on desktop */
+.footer {
+    display: none;
+}
+
 /* Sidebar */
 .sidebar {
     float: left;
@@ -226,7 +231,7 @@ blockquote {
     color: #f06292;
 }
 
-.sidebar .copyright {
+.copyright {
     font-size: 0.6em;
     color: rgb(200, 200, 200);
 }
@@ -451,6 +456,13 @@ blockquote {
     .with-divider.with-divider-center-mobile::after {
         margin-left: calc(50% - 20px) !important;
     }
+
+    /* We need footer on mobile */
+    .footer {
+        display: block;
+        text-align: center;
+        width: 100%;
+    }
 }
 
 /* Modal <https://www.w3schools.com/howto/howto_css_modal_images.asp> */