🎨 REFACTOR and CHANGE max width on footer

maykinmedia · Dec 10, 2024 · 9aee89b · 9aee89b
1 parent d5712d0
commit 9aee89b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/sdg/scss/components/_footer.scss b/src/sdg/scss/components/_footer.scss
@@ -4,30 +4,38 @@
   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;
 
     &:hover {
       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
@@ -39,15 +39,15 @@ <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">
                     <img class="footer__logo" src="{% static logo %}"/>
                 </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>