more style updates

Author: MelSumner

addon/styles/components/es-button.css

@@ -1,18 +1,47 @@
 .es-button {
   background-color: var(--color-orange);
+  border-radius: 4px;
   color: var(--color-light);
-  font-size: var(--text-preset-2);
+  font-size: 24px; /* buttons have to have this size if they are on the orange background */
+  padding-bottom: 0.5rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  border-radius: 4px;
+  text-decoration: none;
+}
+.es-button-secondary {
+  font-size: 24px; /* should match the primary button, we can abstract a base button class later */
+  background-color: transparent;
 }
+
 .link-as-button {
+  color: inherit;
+  position: relative;
   text-decoration: none;
+  z-index: 0;
+}
+.link-as-button:after {
+  background-color: #E04E39;
+  bottom: 8%;
+  content: " ";
+  display: inline-block;
+  height: 24%;
+  left: 0;
+  position: absolute;
+  top: auto;
+  transform: scaleY(1);
+  width: 100%;
+  z-index: -1;
 }
 
 .es-button-icon {
   background-color: transparent;
   border-color: transparent;
 }
+
+.es-button + .es-button-secondary {
+  @media screen and (min-width: 992px){
+    margin-left: 20px;
+  }
+
+}

addon/styles/components/es-page-header.css

@@ -1,5 +1,5 @@
 .es-page-header {
-  padding-top: 4.5rem;
+  padding-top: 1.5rem;
   padding-bottom: 4.5rem;
   background-image: url('/images/pattern-1.svg');
   background-repeat: no-repeat;

addon/styles/global.css

@@ -51,7 +51,12 @@ h6 {
   margin: 0 0 2rem 0;
 }
 
-@media (max-width: 1280px) and (min-width: 421px) {
+h1, h2 {
+  min-width: 100%;
+}
+
+@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

@@ -321,3 +321,7 @@
 .padding-right-xlarge {
   padding-right: var(--spacing-5);
 }
+
+.margin-bottom-small, .margin-bottom-2rem {
+  margin-bottom: 2rem;
+}

addon/styles/layout.css

@@ -1,5 +1,5 @@
 .container {
-  padding: var(--spacing-4) 0;
+  padding: var(--spacing-3) 0;
   margin: 0 auto;
   width: var(--max-width);
 }
@@ -30,7 +30,12 @@
   width: 50%;
   margin: 0 2rem;
 }
-
+.half {
+  width: 50%;
+}
+.center-block {
+  margin: 0 auto;
+}
 .col-one-third {
   width: 30.3%;
   margin: 0 2rem;
@@ -45,3 +50,10 @@
   }
 }
 
+section {
+  display: flex;
+  flex-flow: row wrap;
+  & .full {
+      min-width: 100%;
+  }
+}

addon/styles/typography.css

@@ -55,7 +55,7 @@
   font-size: var(--text-preset-1);
 }
 
-.small, p {
+.small, p { /* TODO this isn't going to work for A11y */
   font-size: var(--text-preset-2);
 }
 
@@ -99,3 +99,8 @@
 .text-light {
   color: var(--color-light);
 }
+
+.text-intro {
+  font-size: 1.5em;
+  margin-bottom: 6vh;
+}