added section background shape

Author: MelSumner

addon/styles/global.css

@@ -36,8 +36,8 @@ body, html {
 }
 
 p { 
-  font-size: 1.25em;
-  font-weight: 400;
+  font-size: 1em;
+  font-weight: normal;
   margin: 0.25em 0.5em;
 }
 
@@ -94,4 +94,25 @@ h1, h2 {
   padding-top: 4.5rem;
   padding-bottom: 4.5rem;
   border: 1px solid #CCC;
+}
+
+/* the weird shit for the backgrounds */
+.section-bg-wrapper {
+  position: relative;
+  height: 750px;
+  width: 100%;
+  margin-bottom: -650px;
+}
+.section-bg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 30%;
+  height: 100%;
+  background-image: linear-gradient(#e04e39, #e04e39);
+  transform: skewY(-15deg);
+  transform-origin: bottom right;
+  z-index:-1;
+  border-top-left-radius: 7px;
 }

addon/styles/helpers.css

@@ -6,6 +6,10 @@
   margin-bottom: 2rem;
 }
 
+.margin-bottom-wide {
+  margin-bottom: 5vh;
+}
+
 .margin-left-small, .margin-left-narrow {
   margin-left: 2rem;
 }
@@ -22,7 +26,8 @@
   padding-right: 0.25em;
 }
 .padding-sides-wide {
-  padding-left: 1em;
-  padding-right: 1em;
+  /* TODO ADD MEDIA QUERIES */
+  padding-left: 15%;
+  padding-right: 15%;
 }
 

addon/styles/layout.css

@@ -41,6 +41,12 @@
 .one-third {
   width: 33.3333%;
 }
+.two-thirds {
+  width: 66.6666%;
+}
+.three-fourths {
+  width: 75%;
+}
 @media (max-width: 576px) {
   .row {
     flex-direction: column;