Merge pull request #249 from ember-learn/redesign/helpers

Cleanup existing CSS helper classes

Author: pichfl

addon/styles/addon.css

@@ -1,18 +1,24 @@
+/* Reset */
 @import 'normalize.css';
 
+/* Globals */
 @import 'global.css';
 @import 'typography.css';
+
+/* Helpers */
+@import 'helpers/index.css';
+
+/* Modules */
 @import 'colors.css';
-@import 'helpers.css';
 @import 'container.css';
 @import 'layout.css';
 @import 'grid.css';
-@import 'flex.css';
 @import 'icon.css';
 @import 'background-shapes.css';
 
-@import 'components/es-header.css';
-@import 'components/es-page-header.css';
+/* Components */
 @import 'components/es-button.css';
 @import 'components/es-card.css';
 @import 'components/es-footer.css';
+@import 'components/es-header.css';
+@import 'components/es-page-header.css';

addon/styles/colors.css

@@ -17,10 +17,12 @@
 
 .bg-light {
   background-color: var(--color-gray-100);
+  color: var(--color-gray-700);
 }
 
 .bg-light-muted {
   background-color: var(--color-gray-200);
+  color: var(--color-gray-700);
 }
 
 .bg-dark {
@@ -46,7 +48,7 @@
 }
 
 .text-light {
-  color: var(--color-brand-text);
+  color: var(--color-white);
 
   & h1,
   & h2,

addon/styles/components/es-button.css

@@ -1,11 +1,18 @@
 .es-button {
   background-color: var(--color-brand);
   color: var(--color-white);
-  padding-left: 1.5em;
-  padding-right: 1.5em;
-  padding-top: 1em;
-  padding-bottom: 1em;
-  border-radius: 4px;
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-md);
+}
+
+.es-button:active {
+  background: var(--color-brand-hc-dark);
 }
 
 a.es-button {

addon/styles/components/es-footer.css

@@ -59,4 +59,9 @@
     justify-content: space-between;
     align-items: center;
   }
+
+  & .footer-contributor-logo {
+    height: 1.6875rem;
+    max-width: 4rem;
+  }
 }

addon/styles/container.css

@@ -2,6 +2,6 @@
   max-width: var(--container-width);
   margin-left: auto;
   margin-right: auto;
-  padding: var(--spacing-4) var(--grid-margin);
+  padding: var(--spacing-6) var(--grid-margin);
   box-sizing: content-box;
 }

addon/styles/global.css

@@ -1,9 +1,8 @@
 :root {
   /* Vertical rhythm is based on multiples of 8. */
 
-  --font-family-sans: "Inter var", "Inter web", -apple-system,
-    BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
-    Apple Color Emoji, Segoe UI Emoji;
+  --font-family-sans: 'Inter var', 'Inter web', -apple-system, BlinkMacSystemFont, Segoe UI,
+    Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
 
   --color-white: #fff;
   --color-gray-100: #f4f6f8;
@@ -28,21 +27,21 @@
   --color-warning: #fcffc9;
   --color-info: #e3eefc;
 
-  --font-size-xs: 0.8125rem; /* 13px, use sparsly! */
+  --font-size-sm: 0.8125rem; /* 13px, use sparsly! */
   --font-size-base: 0.9375rem; /* p = 15px */
   --font-size-md: 0.9375rem; /* h3 = 15px */
   --font-size-lg: 1.1875rem; /* h2 = 19px */
   --font-size-xl: 1.5625rem; /* h1 = 25px */
-  --font-size-display-1: 1.8754rem; /* display 1 = 30px */
-  --font-size-display-2: 0.9375rem; /* display 2 = 15px */
+  --font-size-hero-1: 1.8754rem; /* display 1 = 30px */
+  --font-size-hero-2: 0.9375rem; /* display 2 = 15px */
 
   --line-height-xs: calc(16 / 13); /* 16px */
   --line-height-base: 1.6; /* 24px */
   --line-height-md: 1.6; /* 24px */
   --line-height-lg: calc(24 / 19); /* 24px */
   --line-height-xl: 2; /* 32px */
-  --line-height-display-1: calc(32 / 30); /* 32px */
-  --line-height-display-2: 1.6; /* 24px */
+  --line-height-hero-1: calc(32 / 30); /* 32px */
+  --line-height-hero-2: 1.6; /* 24px */
 
   --font-weight-1: 200;
   --font-weight-2: 400;
@@ -69,21 +68,21 @@
   /* Vertical rhythm is based on multiples of 9. */
 
   :root {
-    --font-size-xs: 0.875rem; /* 14px, use sparsly! */
+    --font-size-sm: 0.875rem; /* 14px, use sparsly! */
     --font-size-base: 1rem; /* 16px */
     --font-size-md: 1.0625rem; /* 17px */
     --font-size-lg: 1.25rem; /* 20px */
     --font-size-xl: 2.25rem; /* 36px */
-    --font-size-display-1: 3rem; /* 48px */
-    --font-size-display-2: 1.125rem; /* 18px */
+    --font-size-hero-1: 3rem; /* 48px */
+    --font-size-hero-2: 1.125rem; /* 18px */
 
     --line-height-xs: calc(16 / 14); /* 16px */
     --line-height-base: 1.6875; /* 27px */
     --line-height-md: calc(27 / 17); /* 27px */
     --line-height-lg: 1.35; /* 27px */
     --line-height-xl: 1.25; /* 45px */
-    --line-height-display-1: 1.125; /* 54px */
-    --line-height-display-2: 1.5; /* 27px */
+    --line-height-hero-1: 1.125; /* 54px */
+    --line-height-hero-2: 1.5; /* 27px */
 
     --spacing-1: 0.5625rem; /* 9px */
     --spacing-2: 1.125rem; /* 18px */
@@ -118,6 +117,10 @@ body {
   line-height: var(--line-height-base);
 }
 
+main {
+  background-color: var(--color-gray-100);
+}
+
 a {
   color: var(--color-brand);
 }

addon/styles/grid.css

@@ -12,6 +12,7 @@
 
 .grid > * {
   grid-column: span 1;
+  align-items: stretch;
 }
 
 @media (max-width: 1007px) {