From 2207010f06025383364f4a3f05fec571ab703ece Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Wed, 12 Mar 2025 18:42:13 +0100
Subject: [PATCH] implement footer

---
 data/socialmedia.yml         |  4 ++
 i18n/de.toml                 |  3 +-
 i18n/en.toml                 |  3 +-
 layouts/partials/footer.html | 21 ++++++++++
 static/style.css             | 77 ++++++++++++++++++++++++++++++++++++
 5 files changed, 106 insertions(+), 2 deletions(-)

diff --git a/data/socialmedia.yml b/data/socialmedia.yml
index 0030823..565534c 100644
--- a/data/socialmedia.yml
+++ b/data/socialmedia.yml
@@ -1,16 +1,20 @@
 - name: Instagram
   link: https://instagram.com/michivonah
   icon: ai-instagram-fill
+  footer: True
 
 - name: LinkedIn
   link: https://in.michivonah.ch
   icon: ai-linkedin-box-fill
+  footer: True
 
 - name: GitHub
   link: https://github.com/michivonah
   icon: ai-github-fill
+  footer: True
 
 - name: Mail
   link: mailto:info@michivonah.ch
   icon: ai-envelope
+  footer: False
 
diff --git a/i18n/de.toml b/i18n/de.toml
index 3878688..3bc8a7d 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -1 +1,2 @@
-contact-me = 'Kontaktiere mich'
\ No newline at end of file
+contact-me = 'Kontaktiere mich'
+legal = 'Rechtliches'
\ No newline at end of file
diff --git a/i18n/en.toml b/i18n/en.toml
index a4e2faa..49867f6 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -1 +1,2 @@
-contact-me = 'Contact me'
\ No newline at end of file
+contact-me = 'Contact me'
+legal = 'Legal'
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 308b1d0..91e573d 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,2 +1,23 @@
+<div class="footer">
+    <div class="footer-part">
+        <p>&#169; {{ dateFormat "2006" now }}</p>
+        <a href="#" alt='{{ T "legal" }}' title='{{ T "legal" }}'>{{ T "legal" }}</a>
+        <div class="sm-icons">
+            {{ range .Site.Data.socialmedia }}
+                {{ if .footer }}
+                    <a href="{{ .link }}" alt="{{ .name }}" title="{{ .name }}"><i class="{{ .icon }}"></i></a>
+                {{ end }}
+            {{ end }}
+        </div>
+    </div>
+    <div class="footer-part">
+        <select>
+            {{ range $.Site.Home.AllTranslations }}
+                <option>{{ .Language.LanguageName }}</option>
+            {{ end }}
+        </select>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/static/style.css b/static/style.css
index bbf2efb..00e4798 100644
--- a/static/style.css
+++ b/static/style.css
@@ -544,4 +544,81 @@ nav.small img{
 
 .scroll-top i{
     stroke-width: 3px;
+}
+
+/* FOOTER */
+.footer{
+    width: 100%;
+    height: auto;
+    padding: 10px 80px 10px 40px;
+    box-sizing: border-box;
+    background: var(--primary);
+    color: var(--color);
+    font-size: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    align-items: baseline;
+    background-image: url("assets/projects/sprinkle.svg");
+    background-size: cover;
+    background-repeat: repeat-x;
+    background-position: center;
+}
+
+.footer-part, .sm-icons{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-content: center;
+    align-items: center;
+}
+
+@media screen and (max-width:490px){
+    .footer, .footer-part{
+        width: calc(100% + 20px);
+        flex-direction: column-reverse;
+    }
+
+    .sm-icons{
+        flex-direction: row;
+    }
+
+    .sm-icons i{
+        font-size: 1.4rem;
+    }
+}
+
+.footer a{
+    margin: 10px;
+    font-size: 1rem;
+    color: var(--color);
+    text-decoration: none;
+    transition: var(--baseTransition);
+}
+
+.footer a:hover{
+    color: var(--color);
+    text-decoration: none;
+}
+
+@media (pointer: fine){
+    .footer a:hover:has(i){
+        transform: scale(1.4);
+    }
+    
+    .footer a:hover:not(:has(i)){
+        transform: scale(1.1);
+    }
+}
+
+.footer select{
+    background: var(--color);
+    color: var(--primary);
+    margin: 10px 5px;
+    padding: 5px 16px;
+    border-radius: var(--baseRadius);
+    transition: var(--baseTransition);
+    border: 1px solid var(--primary);
+    outline: none;
 }
\ No newline at end of file