From 6662668ae47a4437fb9bdc95af2f7587d135f0e3 Mon Sep 17 00:00:00 2001
From: Islam <islamkwnd@gmail.com>
Date: Sun, 8 May 2022 23:01:49 +0000
Subject: [PATCH] (feat) Fixed spacing on main section

* Limited h1 margin
* Shared space between links and p to fit reqs (starting w/ grid gap)
* Applied similar method b/w links and image in mobile view

Finished porting to mobile.
---
 _sass/_molecule_utils.scss        | 22 +++++++++++++++++-----
 _sass/_organisms.scss             | 14 +++++++++++++-
 _sass/primitives/_typography.scss |  1 -
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/_sass/_molecule_utils.scss b/_sass/_molecule_utils.scss
index dfbdcd8..2e112df 100644
--- a/_sass/_molecule_utils.scss
+++ b/_sass/_molecule_utils.scss
@@ -1,10 +1,6 @@
 // Utils file for molecules. Currently merged with organisms.
 
 // ------ Layout ------
-@mixin inherit-grid {
-  display: grid;
-  gap: inherit;
-}
 @mixin grid-col-span-h {
   grid-column: 1 / -1;
 }
@@ -27,4 +23,20 @@
     }
   }
 }
-
+// -- sizing -- margin
+@mixin rem-body-margin($bottom: true, $top: true, $lr: true) {
+  // change mquery if rem changes
+  @media (min-width: ($grid-size + 20px)) {
+    @if ($top) { 
+      // Mutually exclusive
+      margin-top: 0;
+    }
+    @if ($bottom){
+      margin-bottom: 0;
+    } 
+    @if ($lr) {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}
diff --git a/_sass/_organisms.scss b/_sass/_organisms.scss
index 9f8615c..2a76b02 100644
--- a/_sass/_organisms.scss
+++ b/_sass/_organisms.scss
@@ -39,6 +39,13 @@
       'one one one one one one one  three three three three three'
       'two two two two two bla bla  three three three three three';
   }
+  & h1{
+    margin-top: 0; // Handled by padding.
+    margin-bottom: 0.64rem; // for p.
+  }
+  & p {
+    margin-bottom: 0.5 * $body-padding; // To complete spacing with links.
+  }
 }
 @mixin last-splash{
   padding-bottom: $body-padding * 2;
@@ -77,8 +84,10 @@ footer {
   @include rem-body-pad(false);
   transition: all 0.2s ease-in-out;
   height: max-content;
+  display: grid;
   @include grid-col-span-h;
-  @include inherit-grid;
+  row-gap: $body-padding; //  Min spacing.
+  column-gap: inherit;
   @include splash-area;
 }
 // select first 3 childs for style
@@ -87,6 +96,9 @@ footer {
 }
 .land_links {
   grid-area: two;
+  // Fill in rest of gap w/ image
+  margin-bottom: 2 * $body-padding;
+  @include rem-body-margin(true, false, false);
 }
 .land_image {
   grid-area: three;
diff --git a/_sass/primitives/_typography.scss b/_sass/primitives/_typography.scss
index b79fa1a..a0e7789 100644
--- a/_sass/primitives/_typography.scss
+++ b/_sass/primitives/_typography.scss
@@ -53,7 +53,6 @@ h5 {
   line-height: 1.3;
 }
 h1 {
-  margin-top: 0;
   font-size: $title;
 }