Merge pull request #238 from ember-learn/containers

Add outside spacing for containers on mobile
ember-learn · Oct 30, 2019 · eb267f0 · eb267f0
2 parents 6c5a466 + 1bdaffe
commit eb267f0
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 39 deletions.
diff --git a/addon/styles/components/es-header.css b/addon/styles/components/es-header.css
@@ -3,7 +3,7 @@
   justify-content: center;
   align-items: center;
   background-color: var(--color-dark);
-  padding: 1.5rem 0;
+  padding: 1rem var(--grid-margin);
 }
 
 .es-header ul,
@@ -17,22 +17,24 @@
   display: flex;
   flex-direction: column;
   font-size: 2rem;
-  max-width: var(--container-width-large);
+  max-width: var(--container-width);
   width: 100%;
 }
 
 .navbar-brand-wrapper {
+  display: block;
+  margin-right: auto;
   border-radius: 10px;
 }
 
 .navbar-brand {
   display: block;
   height: 5rem;
-  margin: 0 1.5rem 0 1rem; /* should be 0 1.5rem, but the logo needs to be slightly more left to be visually aligned */
+  margin: 0 0 0 -0.5rem;
 }
 
 .navbar-list {
-  margin: 1.5rem 0 0;
+  margin: 1.5rem -1.5rem 0;
   padding: 0;
   display: none;
   font-weight: var(--font-weight-3);
@@ -43,7 +45,6 @@
   display: block;
   text-align: left;
   font-size: inherit;
-  line-height: inherit;
   font-weight: inherit;
   border-radius: 10px;
 }
@@ -56,7 +57,8 @@
 .navbar-toggler {
   display: inline-block;
   border: 0;
-  margin: -5rem 0.5rem 0 auto;
+  margin: -5rem -0.5rem 0 auto;
+  padding: 0;
   width: 4.5rem;
   height: 5rem;
   background: transparent
@@ -74,6 +76,7 @@
 .navbar-list-item-link,
 .navbar-list-item-dropdown-toggle {
   margin: 0 0.5rem;
+  line-height: 3rem;
   padding: 1rem;
   color: #fff;
 }
@@ -152,16 +155,24 @@
 
 .navbar-end {
   display: none;
-  margin: 1rem 1.5rem;
+  margin: 1rem 0;
 }
 
-@media (min-width: 992px) {
+@media (min-width: 984px) {
+  .es-header {
+    padding: 1.5rem var(--grid-margin);
+  }
+
   .es-navbar {
     display: flex;
     flex-direction: row;
     padding: 0;
   }
 
+  .navbar-brand-wrapper {
+    margin-right: 1.5rem;
+  }
+
   .navbar-brand {
     padding: 0;
   }

diff --git a/addon/styles/global.css b/addon/styles/global.css
@@ -1,7 +1,7 @@
 :root {
   --font-family-sans: 'Inter var', 'Inter web', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
     sans-serif, Apple Color Emoji, Segoe UI Emoji;
-  --container-width-large: 128rem;
+
   --color-dark: #1c1e23;
   --color-light: #ffffff;
   --color-muted: #f4f6f8;
@@ -30,13 +30,24 @@
   --font-weight-2: 400;
   --font-weight-3: 600;
 
+  --container-width: 119rem;
+  --grid-gap: 3rem;
+  --grid-margin: 1.5rem;
+
   --spacing-1: 2rem;
   --spacing-2: 3rem;
-  --spacing-3: 7rem;
-  --spacing-4: 16rem;
+  --spacing-3: 6rem;
+  --spacing-4: 9rem;
   --spacing-5: 24rem;
 }
 
+/* 984px = 2rem + 119rem + 2rem */
+@media (min-width: 984px) {
+  :root {
+    --grid-gap: 4rem;
+  }
+}
+
 *:focus {
   outline: none;
   box-shadow: 0 0 0px 3px rgba(25, 116, 220, 0.8);
@@ -66,7 +77,8 @@ a {
   text-decoration: none;
 }
 
-a:active, .active {
+a:active,
+.active {
   color: var(--color-dark);
 }
 
@@ -104,12 +116,6 @@ strong {
 
 /* move beyond this point */
 
-.container {
-  max-width: var(--container-width-large);
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .content-section {
   padding-top: 8rem;
   padding-bottom: 8rem;

diff --git a/addon/styles/layout.css b/addon/styles/layout.css
@@ -1,7 +1,9 @@
 .container {
-  padding: var(--spacing-4) 0;
-  margin: 0 auto;
-  width: var(--max-width);
+  max-width: var(--container-width);
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--spacing-4) var(--grid-margin);
+  box-sizing: content-box;
 }
 
 .flex-row {
@@ -16,36 +18,36 @@
 
 .layout-grid {
   display: grid;
-  grid-template-columns: repeat(6,1fr);
-  grid-gap: var(--spacing-2);
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: var(--grid-gap);
 }
 
 .layout-grid > * {
-  grid-column: span 6/span 6;
+  grid-column: span 6 / span 6;
 }
 
 .col-1 {
-  grid-column: span 1/span 1;
+  grid-column: span 1 / span 1;
 }
 
 .col-2 {
-  grid-column: span 2/span 2;
+  grid-column: span 2 / span 2;
 }
 
 .col-3 {
-  grid-column: span 3/span 3;
+  grid-column: span 3 / span 3;
 }
 
 .col-4 {
-  grid-column: span 4/span 4;
+  grid-column: span 4 / span 4;
 }
 
 .col-5 {
-  grid-column: span 5/span 5;
+  grid-column: span 5 / span 5;
 }
 
 .col-6 {
-  grid-column: span 6/span 6;
+  grid-column: span 6 / span 6;
 }
 
 .offset-1 {
@@ -70,27 +72,27 @@
 
 @media (min-width: 576px) {
   .col-1-large {
-    grid-column: span 1/span 1;
+    grid-column: span 1 / span 1;
   }
 
   .col-2-large {
-    grid-column: span 2/span 2;
+    grid-column: span 2 / span 2;
   }
 
   .col-3-large {
-    grid-column: span 3/span 3;
+    grid-column: span 3 / span 3;
   }
 
   .col-4-large {
-    grid-column: span 4/span 4;
+    grid-column: span 4 / span 4;
   }
 
   .col-5-large {
-    grid-column: span 5/span 5;
+    grid-column: span 5 / span 5;
   }
 
   .col-6-large {
-    grid-column: span 6/span 6;
+    grid-column: span 6 / span 6;
   }
 
   .offset-1-large {
@@ -116,14 +118,14 @@
 
 @media (max-width: 576px) {
   .layout-grid {
-    grid-template-columns: repeat(4,1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 
   .col-5 {
-    grid-column: span 4/span 4;
+    grid-column: span 4 / span 4;
   }
 
   .col-6 {
-    grid-column: span 4/span 4;
+    grid-column: span 4 / span 4;
   }
 }