updated some typography and added more styles

Author: MelSumner

addon/styles/addon.css

@@ -10,6 +10,8 @@
 @import "components/es-card.css";
 @import "components/es-footer.css";
 @import "components/es-header.css";
+@import "components/es-list.css";
 @import "components/es-navbar.css";
 @import "components/es-page-header.css";
 @import "components/es-tabs.css";
+

addon/styles/components/es-list.css

@@ -0,0 +1,18 @@
+.es-list {
+  list-style: none;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+}
+
+/* TODO not sure how to write this in the style this project is now using */
+
+/* .es-list-images {
+  & img {
+    max-width: 50%;
+    & @media screen and (min-width: 992px) {
+      max-width: 125px;
+      height: auto;
+    }
+  }
+} */

addon/styles/global.css

@@ -24,12 +24,15 @@
   --spacing-4: 16rem;
   --spacing-5: 24rem;
 }
+*, *:after {
+  box-sizing: border-box;
+}
 
 body, html {
   margin: 0;
   padding: 0;
   font-family: "Source Sans Pro", sans-serif;
-  font-size: 18px; 
+  font-size: 18px;
   line-height: 1.5;
 }
 
@@ -53,9 +56,10 @@ h6 {
 
 h1, h2 {
   min-width: 100%;
+  line-height: 1;
 }
 
-@media (max-width: 1280px) and (min-width: 421px) { 
+@media (max-width: 1280px) and (min-width: 421px) {
   /* TODO this media query is incorrect - CSS should be mobile-first */
   body,
   html {

addon/styles/helpers.css

@@ -325,3 +325,27 @@
 .margin-bottom-small, .margin-bottom-2rem {
   margin-bottom: 2rem;
 }
+
+.margin-bottom-small, .margin-bottom-narrow {
+  margin-bottom: 2rem;
+}
+
+.margin-left-small, .margin-left-narrow {
+  margin-left: 2rem;
+}
+
+
+/* if we name the modifiers the same as a word or google doc would use for page layout, it's more intuitive */
+/* TODO we can adjust these, I'm more putting these here because I need them in general */
+.padding-sides-normal {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.padding-sides-narrow {
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+}
+.padding-sides-wide {
+  padding-left: 1em;
+  padding-right: 1em;
+}

addon/styles/layout.css

@@ -6,10 +6,8 @@
 
 .row {
   display: flex;
-  margin-left: -2rem;
-  margin-right: -2rem;
-  flex-wrap: wrap;
-  margin-bottom: 4rem;
+  flex-flow: row wrap;
+  margin-bottom: 2rem;
 }
 
 .row >.col {
@@ -40,7 +38,9 @@
   width: 30.3%;
   margin: 0 2rem;
 }
-
+.one-third {
+  width: 33.3333%;
+}
 @media (max-width: 576px) {
   .row {
     flex-direction: column;
@@ -53,6 +53,9 @@
 section {
   display: flex;
   flex-flow: row wrap;
+  @media screen and (min-width: 992px) {
+    padding-top: 4em;
+  }
   & .full {
       min-width: 100%;
   }

addon/styles/typography.css

@@ -51,14 +51,10 @@
   font-style: italic;
 }
 
-.xsmall, small {
+.xsmall, small, .small {
   font-size: var(--text-preset-1);
 }
 
-.small, p { /* TODO this isn't going to work for A11y */
-  font-size: var(--text-preset-2);
-}
-
 .medium, h3 {
   font-size: var(--text-preset-3);
 }