added section background shape

Author: MelSumner

addon/styles/global.css

@@ -36,12 +36,10 @@ body, html {
   line-height: 1.5;
 }
 
-
 p {
-  font-size: var(--text-preset-2);
-  line-height: 1.6;
-  margin: 0 0 1rem 0;
-  font-weight: 300;
+  font-size: 1em;
+  font-weight: normal;
+  margin: 0.25em 0.5em;
 }
 
 h1,
@@ -89,3 +87,24 @@ h1, h2 {
   padding-bottom: 8rem;
   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

@@ -330,6 +330,10 @@
   margin-bottom: 2rem;
 }
 
+.margin-bottom-wide {
+  margin-bottom: 5vh;
+}
+
 .margin-left-small, .margin-left-narrow {
   margin-left: 2rem;
 }
@@ -346,6 +350,7 @@
   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;