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

@@ -1,4 +1,4 @@
-.es-button {
+.es-button { /* TODO we should have es-button-primary */
   background-color: var(--color-ember-orange);
   border-radius: 4px;
   color: var(--color-light);
@@ -44,4 +44,7 @@
     margin-left: 20px;
   }
 
-}
+}
+
+/* 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

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

addon/styles/helpers.css

@@ -7,8 +7,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;
@@ -31,3 +45,8 @@
   padding-right: 15%;
 }
 
+.padding-right-half {
+  @media screen and (min-width: 992px) {
+    padding-right: 50%;
+  }
+}