From b8ee32589e5fa5337c4698db0fce7926dabcefca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 8 Jul 2021 03:47:09 +0200
Subject: [PATCH] Simplify padding rules in SDG pages

We can give the padding to the whole page instead of giving it to
individual elements.

On the minus side, now padding in the SDG pages is not the same as the
padding in the homepage, so we need to add an extra padding to the
participation feeds in only one of these cases.
---
 app/assets/stylesheets/layout.scss                      | 4 ++++
 app/assets/stylesheets/sdg/goals/index.scss             | 5 +----
 app/assets/stylesheets/sdg/goals/show.scss              | 9 ++-------
 app/assets/stylesheets/widgets/feeds/participation.scss | 1 -
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 06f415467..85778926f 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2617,6 +2617,10 @@ table {
   }
 }
 
+.home-page .feeds-participation {
+  @include grid-column-gutter;
+}
+
 .feeds-list {
 
   a {
diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss
index 96571a148..9ca2002f7 100644
--- a/app/assets/stylesheets/sdg/goals/index.scss
+++ b/app/assets/stylesheets/sdg/goals/index.scss
@@ -1,10 +1,9 @@
 .sdg-goals-index {
+  @include grid-column-gutter;
 
   .section-header {
 
     h1 {
-      @include grid-column-gutter;
-
       &::before {
         @extend %font-icon;
 
@@ -21,7 +20,6 @@
     $spacing: 1.5%;
 
     @include sdg-goal-list($spacing);
-    @include grid-column-gutter;
 
     margin-left: auto;
     margin-right: auto;
@@ -41,7 +39,6 @@
   }
 
   .sdg-phase {
-    @include grid-column-gutter;
 
     .cards-container {
       @include grid-row-nest;
diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index da2617b22..f0ddce8a6 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -1,8 +1,5 @@
 .sdg-goal-show {
-
-  > :not(.feeds-participation):not(.sdg-goal) {
-    @include grid-column-gutter;
-  }
+  @include grid-column-gutter;
 
   .sdg-goal {
 
@@ -29,7 +26,6 @@
     }
 
     h1 {
-      @include grid-column-gutter;
       align-items: center;
       display: flex;
       font-family: "Oswald" !important;
@@ -55,7 +51,7 @@
 
     @each $code, $color in $sdg-colors {
       &.sdg-goal-#{$code} > header {
-        @include full-width-background;
+        @include full-width-background($adjust-padding: true);
         background-color: $color;
 
         &::after {
@@ -65,7 +61,6 @@
     }
 
     .goal-description-content {
-      @include grid-column-gutter;
 
       .read-more {
         text-align: center;
diff --git a/app/assets/stylesheets/widgets/feeds/participation.scss b/app/assets/stylesheets/widgets/feeds/participation.scss
index 17e070a7d..3b5299dfc 100644
--- a/app/assets/stylesheets/widgets/feeds/participation.scss
+++ b/app/assets/stylesheets/widgets/feeds/participation.scss
@@ -1,6 +1,5 @@
 .feeds-participation {
   $gap: rem-calc(map-get($grid-column-gutter, medium));
-  @include grid-column-gutter;
   display: flex;
   flex-wrap: wrap;
   margin-left: -$gap;