Re-styled footer

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'

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;
 }