improved margin consistency on landing page

OliverHeffernan · Oct 5, 2024 · f1235e3 · f1235e3
1 parent d666f8c
commit f1235e3
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 13 deletions.
diff --git 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
@@ -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;
-}
+    margin: 50px 0;
+}
diff --git 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
@@ -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;
+  }
+
+
 }
diff --git 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
@@ -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>