crank up the lorem ipsum

_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}}">
-      {% if otherLang.lang == "de" %}
-        Deutsche Version 🇩🇪
-      {% else %}
-        English Version 🇬🇧/🇺🇸
-      {% endif %}
-    </a>
+    <div class="languageSwitch">
+      <a href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}">
+        {% if otherLang.lang == "de" %}
+          Deutsche Version 🇩🇪
+        {% else %}
+          English Version 🇬🇧/🇺🇸
+        {% 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>

content/de/index.md

@@ -2,3 +2,22 @@
 layout: page.njk
 ---
 # Hallo Welt :)
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie tempor nisl vitae venenatis. Sed vitae leo iaculis odio ullamcorper gravida. Sed luctus cursus justo, nec dignissim magna elementum nec. Phasellus eget pretium ipsum, ut consectetur erat. Curabitur porttitor tincidunt tempor. In ac felis a erat pretium facilisis non et lorem. Sed aliquet convallis est vel ornare. Nulla a felis sollicitudin, luctus magna id, tincidunt mi. Donec vehicula varius sagittis. Maecenas semper ipsum nec mauris pretium auctor. Integer dignissim euismod elit non tempor. Morbi massa tellus, suscipit at lacinia in, eleifend sit amet eros. Nulla odio mauris, condimentum nec lorem nec, ultrices vulputate erat. Integer euismod iaculis libero, id ornare arcu hendrerit nec. Morbi tincidunt, elit molestie auctor feugiat, lectus arcu maximus eros, convallis ornare risus lectus nec orci. Etiam ac quam viverra, pulvinar elit vitae, molestie felis.
+
+## Heading 2
+
+Mauris fringilla scelerisque nunc quis mattis. Nulla facilisi. Aliquam sed nisl dolor. Aliquam eget risus arcu. Morbi mattis blandit ex. Phasellus dignissim congue hendrerit. Aliquam imperdiet velit luctus felis cursus finibus. Pellentesque egestas ex risus, ut efficitur tellus sollicitudin eu. Mauris elementum enim quam, et semper orci volutpat sit amet. Nunc feugiat tortor finibus pulvinar gravida.
+
+### Heading 3
+
+Quisque non malesuada nibh. Donec convallis neque dolor, non commodo est scelerisque ultricies. Morbi sem augue, posuere sit amet dui et, sagittis hendrerit urna. Curabitur sed ante placerat, venenatis justo sit amet, euismod dui. Donec ut est varius, tincidunt lectus eget, euismod erat. Aliquam ac arcu at nisl aliquam mattis in nec mauris. Vestibulum nisi lectus, rhoncus vel sem sed, vehicula tristique est. Cras lobortis lorem ac cursus tincidunt. Ut volutpat et quam id accumsan. 
+
+#### Heading 4
+
+Vestibulum vitae tortor vitae sapien feugiat efficitur non nec magna. Suspendisse ut mauris justo. Cras dapibus varius lacus ut tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam euismod eros ligula, a posuere lectus cursus quis. Nullam ultricies felis sed nisi blandit, sed bibendum nisi hendrerit. Nulla eleifend est tincidunt, tempor massa at, viverra ipsum. Aenean vitae ante magna. Ut diam orci, mattis sit amet mauris vel, feugiat ultricies augue. Suspendisse potenti. Quisque aliquet at lorem quis elementum. Mauris tristique mauris et augue ullamcorper lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla ut mauris at justo vulputate luctus. Etiam convallis diam vel lobortis maximus. Maecenas posuere risus risus, vel ullamcorper sem pretium et.
+
+##### Heading 5
+
+Integer vel egestas enim, id scelerisque tellus. Suspendisse et laoreet lorem, vel semper orci. Curabitur vehicula rutrum maximus. Donec eu odio dolor. Vivamus commodo fermentum ipsum, porttitor tempus arcu viverra non. Integer ut cursus nulla. Aenean hendrerit eleifend augue, at sodales orci elementum eget. Donec tincidunt molestie vestibulum. Pellentesque ultrices placerat ex, vel vestibulum ligula. Aenean at tempus ex. Donec scelerisque dolor id dolor dapibus, id convallis tellus ullamcorper. Mauris at mi mattis, molestie dolor vitae, mollis nulla. Aenean faucibus urna erat, quis feugiat orci lacinia vehicula. Cras dolor justo, auctor sed semper ac, maximus ac mi. Pellentesque tincidunt augue eu mi cursus placerat. 
+