From f1235e3d2ef7bfaee0f157911ac88010f7e3bde2 Mon Sep 17 00:00:00 2001
From: OliverHeffernan <oliverheffernan@icloud.com>
Date: Sat, 5 Oct 2024 13:34:44 +1300
Subject: [PATCH] improved margin consistency on landing page

---
 landingPage/css/featureContainer.css     | 22 ++++++++++++++++++++--
 landingPage/css/featuresSection.css      | 12 +++++-------
 landingPage/css/landingSpread.css        |  6 ++++--
 landingPage/css/style.css                | 18 ++++++++++++++++++
 landingPage/imports/featuresSection.html |  2 +-
 landingPage/imports/landingSpread.html   |  2 +-
 6 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/landingPage/css/featureContainer.css b/landingPage/css/featureContainer.css
index 74359c0..a264f44 100644
--- a/landingPage/css/featureContainer.css
+++ b/landingPage/css/featureContainer.css
@@ -8,17 +8,35 @@
     box-sizing: border-box;
     flex: 1 1 200px;
 } */
+/* @media (min-width: 1101px) {
+    featureContainer {
+        width: 250px;
+        margin: 25px;
+    }
+}
+
+@media (max-width: 1100px) {
+    featureContainer {
+        width: calc(100vw - 40px);
+    }
+} */
 
 featureContainer {
     background-color: #151d29;
     padding: 15px;
     border-radius: 12px;
-    width: min(250px, calc(100% - 40px));
-    margin: 25px;
+    /* width: min(250px, calc(100% - 40px)); */
+    /* margin-top: 25px;
+    margin-bottom: 25px; */
     text-align: left;
     color: white;
     text-decoration: none;
     transition: all 0.4s;
+
+    flex: 1 1 calc(33.333% - 10px);
+    box-sizing: border-box;
+
+    min-width: 250px;
 }
 
 featureContainer h2 {
diff --git a/landingPage/css/featuresSection.css b/landingPage/css/featuresSection.css
index c6fe1e7..261ba78 100644
--- a/landingPage/css/featuresSection.css
+++ b/landingPage/css/featuresSection.css
@@ -1,14 +1,12 @@
-#featuresSection {
-    padding: 20px;
-}
-
 #featureWrap {
     background: none;
-    width: 100%;
+    /* width: 100%; */
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
+    gap: 10px;
 }
 #featuresSection h1 {
     text-align: center;
-}
\ No newline at end of file
+    margin: 50px 0;
+}
diff --git a/landingPage/css/landingSpread.css b/landingPage/css/landingSpread.css
index fe09521..7205be4 100644
--- a/landingPage/css/landingSpread.css
+++ b/landingPage/css/landingSpread.css
@@ -1,8 +1,9 @@
 #landingSpread {
-    width: calc(100vw - 60px);
+    /* width: calc(100vw - 60px); */
     background-color: #151d29;
     display: flex;
-    margin: 20px;
+    /* margin: 20px; */
+    margin-top: 20px;
     border-radius: 20px;
     text-decoration: none;
 }
@@ -45,6 +46,7 @@
 
     #landingSpread #rightSide {
         width: calc(100% - 40px);
+        margin-left: 20px;
     }
 }
 
diff --git a/landingPage/css/style.css b/landingPage/css/style.css
index a0f9a3c..bb8a9f5 100644
--- a/landingPage/css/style.css
+++ b/landingPage/css/style.css
@@ -9,4 +9,22 @@
 body {
   background-color: #0C1118;
   overflow-x: hidden;
+}
+
+@media (min-width: 1101px) {
+  .consistentMargin {
+    width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media (max-width: 1100px) {
+  .consistentMargin {
+    width: calc(100% - 40px);
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+
+
 }
\ No newline at end of file
diff --git a/landingPage/imports/featuresSection.html b/landingPage/imports/featuresSection.html
index f0298f8..213b884 100644
--- a/landingPage/imports/featuresSection.html
+++ b/landingPage/imports/featuresSection.html
@@ -1,5 +1,5 @@
 <block class="featuresSection">
-    <div id="featuresSection">
+    <div id="featuresSection" class="consistentMargin">
         <h1>Features</h1>
         <div id="featureWrap">
             <featureContainer 
diff --git a/landingPage/imports/landingSpread.html b/landingPage/imports/landingSpread.html
index 9020c34..6383b85 100644
--- a/landingPage/imports/landingSpread.html
+++ b/landingPage/imports/landingSpread.html
@@ -1,5 +1,5 @@
 <block class="landingSpread">
-    <a id="landingSpread" href="https://oliverheffernan.github.io/vue-calculator/dist/" target="_blank">
+    <a id="landingSpread" class="consistentMargin" href="https://oliverheffernan.github.io/vue-calculator/dist/" target="_blank">
         <div id="leftSide">
             <h1>Calc</h1>
             <p id="first">Short for Calculator</p>