From 3c000c7fbf24fbec5ccb658a6aaef23aca36257a Mon Sep 17 00:00:00 2001
From: Marvin Scham <dev@marvinscham.de>
Date: Mon, 9 May 2022 00:25:53 +0200
Subject: [PATCH] Re-styled footer

---
 config.yml |  2 +-
 custom.css | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/config.yml b/config.yml
index 2c31b4e..3a6e27b 100644
--- a/config.yml
+++ b/config.yml
@@ -13,7 +13,7 @@ message:
   icon: 'fa fa-info'
 
 header: false
-footer: '<span class="footer-el"><a href="https://marvinscham.de" target="_blank">Made with&nbsp;<i class="far fa-heart"></i> by <img src="../assets/tools/ms-sw.png" alt="MS"></a></span><span class="footer-el"><a id="keycloak-footer" href="https://auth.xn--schmkerei-37a.de/realms/schmoekerei/protocol/openid-connect/auth?client_id=homer&response_type=code&redirect_uri=https://schmökerei.de"><i class="fas fa-sign-in-alt"></i>&nbsp;Anmeldung/Registrierung</a></span>'
+footer: '<span class="footer-el"><a href="https://marvinscham.de" target="_blank">Made with&nbsp;<i class="far fa-heart"></i> by <div class="ms-img"></div></a></span><span class="footer-el"><a id="keycloak-footer" href="https://auth.xn--schmkerei-37a.de/realms/schmoekerei/protocol/openid-connect/auth?client_id=homer&response_type=code&redirect_uri=https://schmökerei.de"><i class="fas fa-sign-in-alt"></i>&nbsp;Anmeldung/Registrierung</a></span>'
 
 stylesheet:
   - 'assets/custom.css'
diff --git a/custom.css b/custom.css
index a5597d1..08d5b1b 100644
--- a/custom.css
+++ b/custom.css
@@ -140,6 +140,29 @@ body .footer .footer-el {
   text-align: right;
 }
 
+body .footer .footer-el .ms-img {
+  display: inline-block;
+  position: relative;
+  top: 2px;
+  left: 1px;
+  background-image: url(../assets/tools/ms-small-white.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+body.is-light .footer .footer-el .ms-img {
+  background-image: url(../assets/tools/ms-small.png);
+}
+
+body.is-light .footer .footer-el a {
+  color: #000 !important;
+}
+
+body.is-light .footer .footer-el a:hover {
+  text-decoration: underline;
+}
+
 body .footer .footer-el:first-child {
   text-align: left;
 }