more page styles

_includes/footer.njk

@@ -1,5 +1,5 @@
 <footer>
-  <div>
+  <div class="footer-container">
     {% set otherLang = page.url | locale_links | first %}
     <a href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}">
       {% if otherLang.lang == "de" %}
@@ -8,15 +8,42 @@
         English Version 🇬🇧/🇺🇸
       {% endif %}
     </a>
-    <nav>
+    <nav id="footerNav">
       {{ collections.footerNav | pageLang | eleventyNavigation | eleventyNavigationToHtml | safe }}
     </nav>
-  </div>
-  <div>
-    <p>
+    <span>
       Design:
       <a href="https://designtoasty.de" target="_blank" rel="noreferrer">Designtoasty</a>
-    </p>
-    <p>Made with 🧉 and 🌈 in Dresden</p>
+    </span>
+    <span>Made with 🧉 and 🌈 in Dresden</span>
   </div>
 </footer>
+
+{% css %}
+footer {
+  border-top: 1px dotted rgba(0,0,0,.15);
+  padding: 4rem 0;
+}
+#footerNav ul {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 1em;
+}
+#footerNav li {
+  display: inline;
+}
+.footer-container {
+  max-width: var(--page-width);
+  margin-left: auto;
+  margin-right: auto;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-auto-flow: column;
+  grid-template-rows: 1fr 1fr;
+  gap: 1em;
+}
+.footer-container > :nth-last-child(-n + 2) {
+  text-align: end;
+}
+{% endcss %}

_includes/header.njk

@@ -16,7 +16,7 @@ header {
   padding: 2rem 0;
 }
 .header-container {
-  max-width: 75rem;
+  max-width: var(--page-width);
   margin-left: auto;
   margin-right: auto;
   display: flex;

_layouts/page.njk

@@ -23,8 +23,17 @@ eleventyComputed:
 </html>
 
 {% css %}
+:root {
+  --page-width: 75rem;
+}
 body {
   font-family: sans-serif;
   margin: 0;
+  font-size: 17px;
+}
+main {
+  max-width: var(--page-width);
+  margin-left: auto;
+  margin-right: auto;
 }
 {% endcss %}