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

@@ -23,6 +23,9 @@
   --spacing-4: 4rem;
   --max-width: 80rem;
 }
+*, *:after {
+  box-sizing: border-box;
+}
 
 body, html {
   margin: 0;
@@ -32,10 +35,10 @@ body, html {
   line-height: 1.5;
 }
 
-p {
-  font-size: var(--text-preset-2);
-  margin: 0 0 0.5rem 0;
-  font-weight: 300;
+p { 
+  font-size: 1.25em;
+  font-weight: 400;
+  margin: 0.25em 0.5em;
 }
 
 h1,
@@ -50,6 +53,7 @@ h6 {
 
 h1, h2 {
   min-width: 100%;
+  line-height: 1;
 }
 
 @media (max-width: 1280px) and (min-width: 421px) { 
@@ -60,12 +64,6 @@ h1, h2 {
   }
 }
 
-@media (max-width: 520px) {
-  body,
-  html {
-    
-  }
-}
 
 /* move beyond this point */
 

addon/styles/helpers.css

@@ -2,10 +2,27 @@
   width: 100%;
 }
 
-.margin-bottom-small, .margin-bottom-2rem {
+.margin-bottom-small, .margin-bottom-narrow {
   margin-bottom: 2rem;
 }
 
-.margin-left-small {
+.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,9 +6,7 @@
 
 .row {
   display: flex;
-  margin-left: -1rem;
-  margin-right: -1rem;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   margin-bottom: 2rem;
 }
 
@@ -40,7 +38,9 @@
   width: 30.3%;
   margin: 0 1rem;
 }
-
+.one-third {
+  width: 33.3333%;
+}
 @media (max-width: 576px) {
   .row {
     flex-direction: column;
@@ -56,6 +56,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);
 }