added es-media element, TODOs and some grid css

Author: MelSumner

addon/styles/addon.css

@@ -11,6 +11,7 @@
 @import "components/es-footer.css";
 @import "components/es-header.css";
 @import "components/es-list.css";
+@import "components/es-media.css";
 @import "components/es-navbar.css";
 @import "components/es-page-header.css";
 @import "components/es-tabs.css";

addon/styles/components/es-button.css

@@ -45,3 +45,6 @@
   }
 
 }
+
+/* TODO add hover state */
+/* TODO add focus state */

addon/styles/components/es-list.css

@@ -15,4 +15,23 @@
       height: auto;
     }
   }
-} */
+} */
+
+
+
+.es-list-hero-images {
+  /* don't show it on mobile- it's not necessary for the site and it's not kind to the users' bandwidth */
+  display: none;
+
+  @media screen and (min-width: 992px) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid; 
+    grid-template-columns: 1fr 1fr 1fr; 
+    grid-template-rows: 1fr 1fr; 
+    grid-column-gap: 50px;
+    grid-row-gap: 0px;
+    max-height: 400px; /* whatever the max height of the images are */
+  }
+}

addon/styles/components/es-media.css

@@ -0,0 +1,8 @@
+/* this component has a paragraph of text on one side, and and image on the other, and alternates depending on position. */
+.es-media {
+  /* TODO think about smaller viewports and put them here */
+    @media screen and (min-width: 992px) {
+      display: flex;
+      flex-flow: row wrap;    
+  }
+}

addon/styles/global.css

@@ -37,8 +37,8 @@ body, html {
 }
 
 p {
-  font-size: 1em;
-  font-weight: normal;
+  font-size: 1.2rem;
+  font-weight: 300;
   margin: 0.25em 0.5em;
 }
 
@@ -107,5 +107,6 @@ h1, h2 {
   transform: skewY(-15deg);
   width: 30%;
   z-index:-1;
-  border-top-left-radius: 7px;
 }
+
+/* TODO this grid generator tool is really useful: https://cssgrid-generator.netlify.com/ */

addon/styles/helpers.css

@@ -331,8 +331,22 @@
 }
 
 .margin-bottom-wide {
-  margin-bottom: 5vh;
+  @media screen and (min-width:992px) {
+    margin-bottom: 5vh;
+  }
 }
+.margin-top-wide {
+  @media screen and (min-width:992px) {
+    margin-top: 5vh;
+  }
+}
+.margin-top-bottom-wide {
+  @media screen and (min-width:992px) {
+    margin-top: 5vh;
+    margin-bottom: 5vh;
+  }
+}
+
 
 .margin-left-small, .margin-left-narrow {
   margin-left: 2rem;
@@ -354,3 +368,9 @@
   padding-left: 15%;
   padding-right: 15%;
 }
+
+.padding-right-half {
+  @media screen and (min-width: 992px) {
+    padding-right: 50%;
+  }
+}