_includes/footer.njk

@@ -1,5 +1,5 @@
 <footer>
-  <div class="footer-container">
+  <div>
     {% set otherLang = page.url | locale_links | first %}
     <a href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}">
       {% if otherLang.lang == "de" %}
@@ -8,42 +8,15 @@
         English Version 🇬🇧/🇺🇸
       {% endif %}
     </a>
-    <nav id="footerNav">
+    <nav>
       {{ collections.footerNav | pageLang | eleventyNavigation | eleventyNavigationToHtml | safe }}
     </nav>
-    <span>
+  </div>
+  <div>
+    <p>
       Design:
       <a href="https://designtoasty.de" target="_blank" rel="noreferrer">Designtoasty</a>
-    </span>
+    </p>
-    <span>Made with 🧉 and 🌈 in Dresden</span>
+    <p>Made with 🧉 and 🌈 in Dresden</p>
   </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: var(--page-width);
+  max-width: 75rem;
   margin-left: auto;
   margin-right: auto;
   display: flex;

_layouts/page.njk

@@ -23,17 +23,8 @@ 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 %}