feat: add footer

src/lib/css/content.scss

@@ -9,7 +9,7 @@ body {
 .content {
     margin: 0 auto;
     padding: 0 var(--space-small);
-    max-width: 1100px;
+    max-width: var(--width);
 }
 
 %card {

src/lib/css/typo.scss

@@ -64,6 +64,10 @@ p {
     margin: 0 0 var(--space-medium) 0;
 }
 
+a {
+    color: var(--color-link);
+}
+
 @media ($mobile-breakpoint) {
     h1, h2, h3 {
         margin: 0 0 var(--space-medium) 0;

src/lib/css/variables.scss

@@ -13,6 +13,8 @@ $mobile-breakpoint: "max-width: 768px";
     --color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%);
     --color-on-dark: #f2a6ac;
 
+    --color-link: var(--color-primary);
+
     --space-xsmall: 5px;
     --space-small: 10px;
     --space-medium: 20px;

src/pages/index.html

@@ -21,6 +21,7 @@
             {% include "pages/index/games.html" %}
             {% include "pages/index/news.html" %}
         </div>
+        {% include "pages/index/footer.html" %}
     </body>
 </html>
 

src/pages/index/_style.scss

@@ -1,3 +1,4 @@
+@import 'footer.scss';
 @import 'games.scss';
 @import 'news.scss';
 @import 'presentation.scss';

src/pages/index/footer.html

@@ -0,0 +1,12 @@
+<div class="footer">
+    <div class="footer--content">
+        <img class="footer--logo" src="/img/footer-logo.png">
+        <div class="footer--links">
+            <a href="mailto:contact@frog-collective.org">
+                {{ gettext("Contact") }}
+            </a>
+            <img src="/img/social.png"></img>
+        </div>
+    </div>
+</div>
+

src/pages/index/footer.scss

@@ -0,0 +1,38 @@
+.footer {
+    background-image: url("/img/background-black-red.jpg");
+    color: white;
+    font-size: 0.925rem;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &--content {
+        margin: 0 auto;
+        padding: var(--space-medium) 0;
+        max-width: var(--width);
+
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+
+        @media($mobile-breakpoint) {
+            flex-direction: column;
+            justify-content: center;
+            gap: var(--space-large);
+        }
+    }
+
+    &--logo {
+        width: 100px;
+    }
+
+    &--links {
+        flex: 1 1 1px;
+        display: flex;
+        align-items: center;
+        justify-content: end;
+    }
+
+}