Merge pull request #16 from stiefeljackal/tweak/layout

tweak(layout): adjust main layout structure and style

Author: ProbablePrime

public/stylesheets/style.css

@@ -2,6 +2,23 @@
   --background-body: #11151d;
 }
 
+html, body {
+  display: flex;
+  height: 100vh;
+  margin: 0;
+}
+
+html {
+  justify-content: center;
+}
+
+body {
+  flex-direction: column;
+  box-sizing: border-box;
+  max-width: 820px;
+  padding: 20px 10px;
+}
+
 .subheading {
   font-size: 1rem;
 }
@@ -17,6 +34,12 @@
   font-family: "Poppins", sans-serif;
 }
 
+.go-page-content {
+  flex: 1;
+}
+
+.go-page-footer {
+  width: 100%;
 .infobox {
   list-style-type: disc;
   padding-inline-start: 40px;

views/layout.pug

@@ -13,13 +13,13 @@ html(lang="en")
         block head
         style.
             @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-    header.center
-        img(src='/images/resonite.png' alt='Resonite')
     body
-        block content
-            h1 Placeholder
-footer
-    p.center
-        span Copyright © 
-        a(href="https://yellowdogman.com/imprint.html") Yellow Dog Man Studios s.r.o.
+        header.go-page-header.center
+            img(src='/images/resonite.png' alt='Resonite')
+        main.go-page-content
+            block content
+                h1 Placeholder
+        footer.go-page-footer
+            p.center
+                span Copyright © 
+                a(href="https://yellowdogman.com/imprint.html") Yellow Dog Man Studios s.r.o.