footer styles

_includes/footer.css

@@ -1,27 +1,65 @@
 footer {
   border-top: 1px dotted rgba(0,0,0,.15);
-  padding: 4rem 0;
+  padding: 4rem 0 5.5rem;
 }
 
 #footerNav ul {
   margin: 0;
   padding: 0;
   display: flex;
-  gap: 1em;
+  gap: 1.3em;
 }
 
 #footerNav li {
   display: inline;
 }
 
+#footerNav a {
+  color: var(--color-text);
+  text-decoration: none;
+  transition: color .3s ease-out;
+}
+
+#footerNav a:hover {
+  color: var(--color-primary);
+}
+
 .footer-container {
   display: grid;
   grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
   grid-auto-flow: column;
-  grid-template-rows: 1fr 1fr;
   gap: 1em;
 }
 
 .footer-container > :nth-last-child(-n + 2) {
   text-align: end;
 }
+
+.designCredit {
+  font-size: 1rem;
+  align-self: end;
+}
+
+.designCredit a {
+  color: var(--color-text);
+  font-size: 1rem;
+  font-weight: 500;
+  text-decoration: none;
+  border-bottom: 1px dotted var(--color-text);
+}
+
+.languageSwitch a {
+  display: inline-block;
+  background: #e2e8f0;
+  color: #000;
+  border-radius: .5rem;
+  padding: 0.7em 0.9em;
+  line-height: 1;
+  text-decoration: none;
+  transition: background-color .3s ease-out;
+}
+
+.languageSwitch a:hover {
+  background: #d5dbe4;
+}

_includes/footer.njk

@@ -1,17 +1,19 @@
 <footer>
   <div class="footer-container content">
     {% set otherLang = page.url | locale_links | first %}
-    <a href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}">
+    <div class="languageSwitch">
-      {% if otherLang.lang == "de" %}
+      <a href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}">
-        Deutsche Version 🇩🇪
+        {% if otherLang.lang == "de" %}
-      {% else %}
+          Deutsche Version 🇩🇪
-        English Version 🇬🇧/🇺🇸
+        {% else %}
-      {% endif %}
+          English Version 🇬🇧/🇺🇸
-    </a>
+        {% endif %}
+      </a>
+    </div>
     <nav id="footerNav">
       {{ collections.footerNav | pageLang | eleventyNavigation | eleventyNavigationToHtml | safe }}
     </nav>
-    <span>
+    <span class="designCredit">
       Design:
       <a href="https://designtoasty.de" target="_blank" rel="noreferrer">Designtoasty</a>
     </span>