improve footer

JeuJeus · Oct 6, 2023 · e9be8cd · e9be8cd
1 parent 6a89992
commit e9be8cd
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 11 deletions.
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -85,14 +85,21 @@
 		</main>
 
 		<footer>
-		    <a href="https://jeujeus.de" target="_blank">Website</a>
-
-            {%- for entry in collections.all | eleventyNavigation %}
-                {% if entry.key == "Imprint" or entry.key == "About Me" %}
-                    <li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
-                {% endif %}
-            {%- endfor %}
-            </ul>
+            <div>
+                <a href="/" class="home-link"><img class="jeujeus-logo" src="/img/logo.webp" height="50" alt="JeuJeus Logo" /></a>
+                <b>blog.jeujeus.de</b>
+            </div>
+            <div>
+                <li class="nav-item"><a href="https://jeujeus.de" target="_blank">Website</a></li>
+                <li class="nav-item"><a href="/about">About Me</a></li>
+                <li class="nav-item"><a href="/imprint">Imprint</a></li>
+            </div>
+            <div>
+                <li class="nav-item"><a href="https://github.com/JeuJeus" rel="noreferrer" target="_blank">GitHub</a></li>
+                <li class="nav-item"><a href="https://linkedin.com/in/juliusfigge" rel="noreferrer" target="_blank">LinkedIn</a></li>
+                <li class="nav-item"><a href="https://soundcloud.com/jeujeus" rel="noreferrer" target="_blank">SoundCloud</a></li>
+                <li class="nav-item"><a href="https://youtube.com/@JeuJeus" rel="noreferrer" target="_blank">YouTube</a></li>
+            </div>
 		</footer>
 	</body>
 </html>
diff --git a/public/css/index.css b/public/css/index.css
@@ -75,12 +75,48 @@ body {
 
 footer {
     flex-shrink: 0;
-    padding: 1rem;
+    padding-top: 2em;
+    padding-bottom: 2em;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
 }
 
+
+footer > div {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+@media (max-width: 576px) {
+
+    footer {
+        padding-top: 1em;
+        flex-direction: column;
+        justify-content: center;
+        flex-wrap: nowrap;
+        align-content: center;
+        align-items: center;
+    }
+
+    footer > div {
+        margin-bottom: 1em;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center;
+    }
+
+    footer > div:last-child {
+        margin-bottom: 0;
+    }
+}
+
 /* https://www.a11yproject.com/posts/how-to-hide-content/ */
 .visually-hidden {
     clip: rect(0 0 0 0);
@@ -344,10 +380,10 @@ img {
     color: var(--text-color);
 }
 
-#results>div {
+#results > div {
     margin-top: 1em;
 }
 
-#results>div:first-of-type {
+#results > div:first-of-type {
     margin-top: 0 !important;
 }