FTR

- Added more content to mission page - Adjusted content styles for headings - Made minor tweaks to product page
sk5 · Jun 13, 2019 · a746336 · a746336
1 parent 5c9fb81
commit a746336
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 22 deletions.
diff --git a/assets/css/_components.content.scss b/assets/css/_components.content.scss
@@ -125,25 +125,41 @@
         color: $white;
     }
     //
+    h2,
     h3,
     h4,
     h5 {
         margin: 1em 0 .5em 0;
         font-family: $brand-text;
+        font-weight: 900;
+        text-transform: uppercase;
     }
     //
-    h3 {
+    h2 {
         font-size: 2.25rem;
-        color: darken($red, 30%);
+        color: darken($purple, 30%);
+    }
+    //
+    h3 {
+        font-size: 2.125rem;
+        color: darken($blue, 30%);
     }
     //
     h4 {
         font-size: 2rem;
-        color: darken($red, 20%);
+        color: darken($purple, 20%);
     }
     //
-    p {
+    h5 {
+        font-size: 1.75rem;
+        color: darken($blue, 20%);
+    }
+    //
+    p,
+    ul,
+    li {
         font-size: 1.4125rem;
+        line-height: 125%;
     }
     //
     //
@@ -181,9 +197,13 @@
         // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties.
         @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
             display: grid;
-            grid-template-columns: repeat(3, 1fr);
+            grid-template-columns: auto;
             grid-template-rows: auto; // 25rem;
             grid-gap: 2rem;
+            //
+            @media screen and (min-width: 46.875em) { // 750px
+                grid-template-columns: repeat(3, 1fr);
+            }
         }
         //
         margin: 0;
@@ -215,8 +235,13 @@
         // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties.
         // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties.
         @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
-            grid-column: 2;
-            grid-row: 1;
+            grid-column: 1;
+            grid-row: 2;
+            //
+            @media screen and (min-width: 46.875em) { // 750px
+                grid-column: 2;
+                grid-row: 1;
+            }
         }
         //
         background: $blue;
@@ -227,8 +252,13 @@
         // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties.
         // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties.
         @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
-            grid-column: 3;
-            grid-row: 1;
+            grid-column: 1;
+            grid-row: 3;
+            //
+            @media screen and (min-width: 46.875em) { // 750px
+                grid-column: 3;
+                grid-row: 1;
+            }
         }
         //
         background: $green;

diff --git a/assets/css/_components.custom-page.scss b/assets/css/_components.custom-page.scss
@@ -56,5 +56,44 @@
             line-height: 125%;
             color: $black;
         }
+        //
+        h2,
+        h3,
+        h4,
+        h5 {
+            margin: 1em 0 .5em 0;
+            font-family: $brand-text;
+            font-weight: 900;
+            line-height: 1em;
+            text-transform: uppercase;
+        }
+        //
+        h2 {
+            font-size: 2.25rem;
+            color: darken($purple, 30%);
+        }
+        //
+        h3 {
+            font-size: 2.125rem;
+            color: darken($blue, 30%);
+        }
+        //
+        h4 {
+            font-size: 2rem;
+            color: darken($purple, 20%);
+        }
+        //
+        h5 {
+            font-size: 1.75rem;
+            color: darken($blue, 20%);
+        }
+        //
+        p,
+        ul,
+        li {
+            font-size: 1.4125rem;
+            line-height: 125%;
+        }
+        //
     }
 }
diff --git a/assets/css/_components.product.scss b/assets/css/_components.product.scss
@@ -286,6 +286,10 @@
         font-size: 1.25rem;
         line-height: 125%;
         color: $black;
+        //
+        p:last-of-type {
+            font-size: .875rem;
+        }
     }
     //
     &--content {

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -1326,22 +1326,36 @@ button {
   text-transform: uppercase;
   color: #fff; }
 
+.content h2,
 .content h3,
 .content h4,
 .content h5 {
   margin: 1em 0 .5em 0;
-  font-family: "Raleway", sans-serif; }
+  font-family: "Raleway", sans-serif;
+  font-weight: 900;
+  text-transform: uppercase; }
 
-.content h3 {
+.content h2 {
   font-size: 2.25rem;
-  color: #c00000; }
+  color: #bd00a2; }
+
+.content h3 {
+  font-size: 2.125rem;
+  color: #0061c0; }
 
 .content h4 {
   font-size: 2rem;
-  color: #f30000; }
+  color: #f000ce; }
 
-.content p {
-  font-size: 1.4125rem; }
+.content h5 {
+  font-size: 1.75rem;
+  color: #007af3; }
+
+.content p,
+.content ul,
+.content li {
+  font-size: 1.4125rem;
+  line-height: 125%; }
 
 .content__submission--message {
   font-family: "Roboto", sans-serif;
@@ -1367,9 +1381,12 @@ button {
   @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
     .content__charity-breakdown {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: auto;
       grid-template-rows: auto;
-      grid-gap: 2rem; } }
+      grid-gap: 2rem; }
+      @media screen and (min-width: 46.875em) {
+        .content__charity-breakdown {
+          grid-template-columns: repeat(3, 1fr); } } }
 
 .charity--example {
   padding: 4rem 2rem;
@@ -1389,15 +1406,23 @@ button {
     background: linear-gradient(30deg, #2794ff 0%, #0061c0 100%); }
     @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
       .charity--example:nth-child(2) {
-        grid-column: 2;
-        grid-row: 1; } }
+        grid-column: 1;
+        grid-row: 2; }
+        @media screen and (min-width: 46.875em) {
+          .charity--example:nth-child(2) {
+            grid-column: 2;
+            grid-row: 1; } } }
   .charity--example:nth-child(3) {
     background: #57eec7;
     background: linear-gradient(30deg, #29e9b8 0%, #109c78 100%); }
     @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
       .charity--example:nth-child(3) {
-        grid-column: 3;
-        grid-row: 1; } }
+        grid-column: 1;
+        grid-row: 3; }
+        @media screen and (min-width: 46.875em) {
+          .charity--example:nth-child(3) {
+            grid-column: 3;
+            grid-row: 1; } } }
   .charity--example strong {
     font-size: 1.75rem; }
   .charity--example span {
@@ -1636,6 +1661,8 @@ button {
     font-size: 1.25rem;
     line-height: 125%;
     color: #303030; }
+    .product--description p:last-of-type {
+      font-size: .875rem; }
   .product--content {
     height: 6rem; }
   .product__select {
@@ -2123,6 +2150,32 @@ button {
     font-size: 1.25rem;
     line-height: 125%;
     color: #303030; }
+  .custom-page h2,
+  .custom-page h3,
+  .custom-page h4,
+  .custom-page h5 {
+    margin: 1em 0 .5em 0;
+    font-family: "Raleway", sans-serif;
+    font-weight: 900;
+    line-height: 1em;
+    text-transform: uppercase; }
+  .custom-page h2 {
+    font-size: 2.25rem;
+    color: #bd00a2; }
+  .custom-page h3 {
+    font-size: 2.125rem;
+    color: #0061c0; }
+  .custom-page h4 {
+    font-size: 2rem;
+    color: #f000ce; }
+  .custom-page h5 {
+    font-size: 1.75rem;
+    color: #007af3; }
+  .custom-page p,
+  .custom-page ul,
+  .custom-page li {
+    font-size: 1.4125rem;
+    line-height: 125%; }
 
 .module__footer {
   background: #303030; }

diff --git a/assets/css/styles.min.css b/assets/css/styles.min.css