Add Monero wallet to footer

themes/maik-blog/assets/scss/_footer.scss

@@ -18,32 +18,60 @@
 
   &__content {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: center;
     font-size: 1rem;
     color: $light-color-secondary;
 
-    @media #{$media-size-tablet} {
-      flex-direction: column;
-      margin-top: 10px;
-    }
-
-    &>*:not(:last-child)::after {
-      content: "•";
-      padding: 0 5px;
+    &__section {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 5px;
 
       @media #{$media-size-tablet} {
-        content: "";
-        padding: 0;
+        margin-top: 10px;
       }
-    }
 
-    &>*:last-child {
-      padding: 0 5px;
+      &.regular {
+        @media #{$media-size-tablet} {
+          flex-direction: column;
+        }
+        &>*:not(:last-child)::after {
+          content: "•";
+          padding: 0 5px;
 
-      @media #{$media-size-tablet} {
-        padding: 0;
+          @media #{$media-size-tablet} {
+            content: "";
+            padding: 0;
+          }
+        }
+
+        &>*:last-child {
+          padding: 0 5px;
+
+          @media #{$media-size-tablet} {
+            padding: 0;
+          }
+        }
+      }
+
+      &.donations {
+        white-space: nowrap;
+        overflow-x: scroll;
+        max-width: 600px;
+        position: relative;
+
+        @media #{$media-size-tablet} {
+          max-width: 180px;
+        }
+
+        .wallet {
+          .name {
+            font-weight: 700;
+          }
+        }
       }
     }
   }
-}
+}

themes/maik-blog/layouts/partials/footer.html

@@ -1,21 +1,26 @@
 <footer class="footer">
     <div class="footer__inner">
         <div class="footer__content">
-            <span>&copy; {{ now.Format "2006" }}</span>
-            {{- if .Site.Author.name }}
-            <span><a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a></span>
-            {{- end }}
-            {{- if .Site.Copyright }}
-            <span>All rights reserved.</span>
-            {{- end }}
-            <span><a href="/privacy/">Privacy</a></span>
-            <span>
-                {{- with (not (in (.Site.Language.Get "disableKinds") "RSS")) }}
-                <a href="{{ "posts/index.xml" | absLangURL }}" target="_blank" title="rss">
-                    {{ partial "svg.html" (dict "name" "rss") }}
-                </a>
+            <div class="footer__content__section regular">
+                <span>&copy; {{ now.Format "2006" }}</span>
+                {{- if .Site.Author.name }}
+                <span><a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a></span>
                 {{- end }}
-            </span>
+                {{- if .Site.Copyright }}
+                <span>All rights reserved.</span>
+                {{- end }}
+                <span><a href="/privacy/">Privacy</a></span>
+                <span>
+                    {{- with (not (in (.Site.Language.Get "disableKinds") "RSS")) }}
+                    <a href="{{ "posts/index.xml" | absLangURL }}" target="_blank" title="rss">
+                        {{ partial "svg.html" (dict "name" "rss") }}
+                    </a>
+                    {{- end }}
+                </span>
+            </div>
+            <div class="footer__content__section donations">
+                <span class="wallet"><span class="name">XMR:</span> <span class="address">87zSbhZgZZsW8Sfo2cHDEj8PLtaCLU4sYYEDXd5Kk9hWPg2ttqyvV2N8oTJz2kfiFc5ZyCFEkMqT37RNKcrzryTGKB7RSFi</span></span>
+            </div>
         </div>
     </div>
-</footer>
+</footer>