From 9aee89bd82482f0efe2491583ec273eeb9246e10 Mon Sep 17 00:00:00 2001
From: Stefan <stefan@maykinmedia.nl>
Date: Tue, 3 Dec 2024 17:08:37 +0100
Subject: [PATCH] :art: REFACTOR and CHANGE max width on footer

---
 src/sdg/scss/components/_footer.scss  | 22 +++++++++++++++-------
 src/sdg/templates/core/base_home.html |  4 ++--
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/sdg/scss/components/_footer.scss b/src/sdg/scss/components/_footer.scss
index 1a18a8f63..af2bcc75c 100644
--- a/src/sdg/scss/components/_footer.scss
+++ b/src/sdg/scss/components/_footer.scss
@@ -4,17 +4,25 @@
   background-color: #fff;
   height: 109px;
   display: flex;
-  justify-content: space-evenly;
+  justify-content: center;
   align-items: center;
   margin: 0 -120px;
 
-  .footer__left {
+  &__side {
+    width: 512px;
     display: flex;
     align-items: center;
+    
+    &--left {
+      justify-content: flex-start;
+    }
+    
+    &--right{
+      justify-content: flex-end;
+    }
   }
 
-  .footer__link {
-    margin-right: 50px;
+  &__link {
     text-decoration: none;
     color: $color_primary;
 
@@ -22,12 +30,12 @@
       color: $color_primary_lighter;
     }
 
-    &:last-child {
-      margin-right: 0;
+    &:not(:last-child) {
+      margin-right: 50px;
     }
   }
 
-  .footer__logo {
+  &__logo {
     margin-left: 8px;
     height: 42px;
   }
diff --git a/src/sdg/templates/core/base_home.html b/src/sdg/templates/core/base_home.html
index 81be3c80a..5ce9cf837 100644
--- a/src/sdg/templates/core/base_home.html
+++ b/src/sdg/templates/core/base_home.html
@@ -39,7 +39,7 @@ <h2 class="logo__subtitle logo__subtitle-medium">voor {{ org_type_cfg.name_plura
 
 {% block footer %}
     <div class="footer">
-        <div class="footer__left">
+        <div class="footer__side footer__side--left">
             Een initiatief van
             {% with logo=org_type_cfg.footer_logo %}
                 <a href="{{ org_type_cfg.url }}" target="_blank" rel="noopener" class="shine">
@@ -47,7 +47,7 @@ <h2 class="logo__subtitle logo__subtitle-medium">voor {{ org_type_cfg.name_plura
                 </a>
             {% endwith %}
         </div>
-        <div class="footer__right">
+        <div class="footer__side footer__side--right">
             <a class="footer__link" href="{{ org_type_cfg.accessibility_url }}" rel="noopener noreferrer">{% trans "Toegankelijkheid" %}</a>
             <a class="footer__link" href="{{ org_type_cfg.privacy_policy_url }}" rel="noopener noreferrer">{% trans "Privacybeleid" %}</a>
         </div>