FTR

- Subtle style changes - Added new SVG pattern
sk5 · Jun 3, 2019 · fb92260 · fb92260
1 parent 670fa21
commit fb92260
Show file tree

Hide file tree

Showing 8 changed files with 1,480 additions and 15 deletions.
diff --git a/assets/css/_components.header.scss b/assets/css/_components.header.scss
@@ -96,7 +96,7 @@
     //
     &__link {
         //display: inline-block;
-        width: 20rem;
+        width: 24rem;
         //height: 9.375rem;
         //box-shadow: -1rem 0 0 $white, -1.0625rem 0 0 $orange, -1.1875rem 0 0 $white, -1.25rem 0 0 $red, -1.375rem 0 0 $white, -1.4375rem  0 0 $purple;
     }

diff --git a/assets/css/_components.navigation.scss b/assets/css/_components.navigation.scss
@@ -15,7 +15,7 @@
     // 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: 25% auto 25%;
         grid-template-rows: auto; // 25rem;
         grid-gap: 0;
     }

diff --git a/assets/css/_components.product.scss b/assets/css/_components.product.scss
@@ -8,7 +8,7 @@
         // 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: 60% 40%;
+            grid-template-columns: 65% 35%;
             grid-template-rows: auto; // 25rem;
             grid-gap: 0;
         }
@@ -79,7 +79,7 @@
     &--title {
         margin: 0;
         font-family: $brand-text;
-        font-size: 2rem;
+        font-size: 2.5rem;
         font-weight: 900;
         line-height: .875em;
         text-transform: uppercase;

diff --git a/assets/css/_components.products-listing.scss b/assets/css/_components.products-listing.scss
@@ -163,7 +163,7 @@
             left: -20vw;
             height: 27rem;
             background: $black;
-            background-image: url(../images/polygon-background.svg), linear-gradient(30deg, $yellow 0%, $orange 33%, $red 66%, $purple 100%);
+            background-image: url("https://cdn.jsdelivr.net/gh/sk5/[email protected]/assets/images/polygon-background.svg"), linear-gradient(30deg, $yellow 0%, $orange 33%, $red 66%, $purple 100%);
             background-size: cover;
         }
         //

diff --git a/assets/css/_components.similar-products.scss b/assets/css/_components.similar-products.scss
@@ -6,6 +6,7 @@
     &s--wrapper {
         position: relative;
         padding: 3rem 0;
+        overflow: hidden;
         width: 80vw;
         max-width: 100rem;
         //
@@ -18,11 +19,25 @@
             left: -20vw;
             height: 100%;
             min-height: 20rem;
-            background: $red;
-            background-image: url(../images/polygon-background.svg), linear-gradient(30deg, $yellow 0%, $orange 33%, $red 66%, $purple 100%);
+            background: linear-gradient(30deg, $yellow 0%, $orange 33%, $red 66%, $purple 100%);
             background-size: cover;
         }
         //
+        &:after {
+            content: "";
+            position: absolute;
+            z-index: -1;
+            top: -20vw;
+            right: -20vw;
+            left: -20vw;
+            transform: rotate(45deg);
+            height: 200%;
+            min-height: 20rem;
+            background: $red;
+            background-image: url("https://cdn.jsdelivr.net/gh/sk5/[email protected]/assets/images/RUN-pattern.svg");
+            background-size: 50%;
+        }
+        //
         .product-list-item {
             overflow: hidden;
             width: 12rem;
@@ -73,6 +88,11 @@
         }
     }
     //
+    &s--content {
+        width: 80vw;
+        max-width: 100rem;
+    }
+    //
     &s--title {
         margin: 0 0 1em 0;
         font-family: $brand-text;

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -426,7 +426,7 @@ body {
         grid-column: 2;
         grid-row: 1; } }
   .header__link {
-    width: 20rem; }
+    width: 24rem; }
 
 .main {
   padding: 0;
@@ -629,7 +629,7 @@ button {
   left: -20vw;
   height: 27rem;
   background: #303030;
-  background-image: url(../images/polygon-background.svg), linear-gradient(30deg, #dbfc35 0%, #ffa357 33%, #ff5a5a 66%, #ff57e7 100%);
+  background-image: url("https://cdn.jsdelivr.net/gh/sk5/[email protected]/assets/images/polygon-background.svg"), linear-gradient(30deg, #dbfc35 0%, #ffa357 33%, #ff5a5a 66%, #ff57e7 100%);
   background-size: cover; }
 
 .feature__list--wrapper:after {
@@ -723,7 +723,7 @@ button {
 @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
   .navigation {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 25% auto 25%;
     grid-template-rows: auto;
     grid-gap: 0; } }
 
@@ -1018,7 +1018,7 @@ button {
     @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
       .product__page {
         display: grid;
-        grid-template-columns: 60% 40%;
+        grid-template-columns: 65% 35%;
         grid-template-rows: auto;
         grid-gap: 0; } }
     @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
@@ -1066,7 +1066,7 @@ button {
   .product--title {
     margin: 0;
     font-family: "Raleway", sans-serif;
-    font-size: 2rem;
+    font-size: 2.5rem;
     font-weight: 900;
     line-height: .875em;
     text-transform: uppercase;
@@ -1250,6 +1250,7 @@ button {
 .similar__products--wrapper {
   position: relative;
   padding: 3rem 0;
+  overflow: hidden;
   width: 80vw;
   max-width: 100rem; }
   .similar__products--wrapper:before {
@@ -1261,9 +1262,21 @@ button {
     left: -20vw;
     height: 100%;
     min-height: 20rem;
-    background: #ff5a5a;
-    background-image: url(../images/polygon-background.svg), linear-gradient(30deg, #dbfc35 0%, #ffa357 33%, #ff5a5a 66%, #ff57e7 100%);
+    background: linear-gradient(30deg, #dbfc35 0%, #ffa357 33%, #ff5a5a 66%, #ff57e7 100%);
     background-size: cover; }
+  .similar__products--wrapper:after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: -20vw;
+    right: -20vw;
+    left: -20vw;
+    transform: rotate(45deg);
+    height: 200%;
+    min-height: 20rem;
+    background: #ff5a5a;
+    background-image: url("https://cdn.jsdelivr.net/gh/sk5/[email protected]/assets/images/RUN-pattern.svg");
+    background-size: 50%; }
   .similar__products--wrapper .product-list-item {
     overflow: hidden;
     width: 12rem;
@@ -1296,6 +1309,10 @@ button {
     display: none;
     visibility: hidden; }
 
+.similar__products--content {
+  width: 80vw;
+  max-width: 100rem; }
+
 .similar__products--title {
   margin: 0 0 1em 0;
   font-family: "Raleway", sans-serif;

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