#37 Updated styling for Hero section, typography, and minor details o…

…f other sections.
Scout-NU · Apr 21, 2021 · 11b319b · 11b319b
1 parent db32bfe
commit 11b319b
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 118 deletions.
diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
@@ -2,31 +2,50 @@ import styled from "styled-components"
 import dimensions from "../../style/dimensions"
 import {
   layoutPaddingDesktop,
-  layoutPaddingMobile,
 } from "../../style/variables"
 
 export const SingularProductContainer = styled.div``
 
 export const HeroSection = styled.div`
-  padding-top: 60px;
+  padding-top: 130px;
 
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     display: flex;
-    padding-top: 45px;
+    padding-top: 114px;
   }
 `
 
-export const ImageContainer = styled.div``
-
-export const MainImage = styled.div`
-  width: 47vw;
-  height: 432px;
-  background-color: #C4C4C4;
+export const ImageContainer = styled.div`
+  display: flex;
+    flex-wrap: wrap;
+    img {
+      width: 4vw;
+      height: 56px;
+      margin-right: 18px;
+      margin-top: 44px;
+
+      @media (max-width: ${dimensions.maxwidthTablet}px) {
+        width: 3vw;
+        height: 39px;
+        margin-right: 12px;
+        margin-top: 32px;
+      }
+
+      &.main-image {
+        width: 47vw;
+        height: 432px;
+        flex: 100%;
+        
+        @media (max-width: ${dimensions.maxwidthTablet}px) {
+          width: 100%;
+          height: 225px;
+        }
+      }
+    }
 
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    width: 100%;
-    height: 225px;
-  }
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      justify-content: center;
+    }
 `
 
 export const SmallImageContainer = styled.div`
@@ -37,21 +56,6 @@ export const SmallImageContainer = styled.div`
   }
 `
 
-export const SmallImage = styled.div`
-  width: 4vw;
-  height: 56px;
-  margin-right: 18px;
-  margin-top: 44px;
-  background-color: #C4C4C4;
-
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-      width: 3vw;
-      height: 39px;
-      margin-right: 12px;
-      margin-top: 32px;
-  }
-`
-
 export const TextContainer = styled.div`
   padding-left: 67px;
 
@@ -61,30 +65,10 @@ export const TextContainer = styled.div`
 `
 
 export const ProductType = styled.div`
-  text-transform: uppercase;
   padding-top: 49px;
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding-top: 63px;
-  }
-`
-
-export const ProductName = styled.div`
-  font-weight: bold;
-  font-size: calc(50px + (50 - 32) * ((100vw - 300px) / (1440 - 300)));
-  padding-top: 27px;
-
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    
-  }
-`
-
-export const ProductDescription = styled.div`
-  font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300)));
-  padding-top: 32px;
-
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding-top: 24px;
+    padding-top: 26px;
   }
 `
 
@@ -133,21 +117,28 @@ export const ImageHighlightSection = styled.div`
 export const ImageHighlightHeading = styled.div`
   padding-top: 147px;
   margin-left: 4vw;
+
   @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding-top: 43px;
+    position: absolute;
+    top: 910px;
+    margin-left: 0px;
   }
 `
 
-export const ImageHighlightGroupContainer = styled.div``
+export const ImageHighlightGroupContainer = styled.div`
+
+`
 
 export const ImageHighlightGroup = styled.div`
   &.second-section {
     position: absolute;
     right: 0;
     top: 200px;
-  }
-  @media (min-width: ${dimensions.maxwidthTablet}px) {
-    // display: flex;
+
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      position: relative;
+      top: 0px;
+    }
   }
 `
 
@@ -156,19 +147,39 @@ export const HighlightedImage = styled.div`
     img {
       margin-left: -${layoutPaddingDesktop};
       margin-top: 60px;
+
+      @media (max-width: ${dimensions.maxwidthTablet}px) {
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+
+  img {
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 25px;
     }
   }
 `
 
 export const ImageHighlightDescription = styled.div`
   font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300)));
   width: 35vw;
+
   &.second-section {
     padding-top: 88px;
+
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      margin-top: 310px;
+    }
   }
+
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     width: 100%;
-    padding-top: 32px;
   }
 `
 
@@ -180,6 +191,17 @@ export const ThirdSection = styled.div`
     margin-top: 97px;
     margin-right: -${layoutPaddingDesktop}; 
     justify-content: space-between;
+
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      display: block;
+      width: 100%;
+      margin-top: 25px;
+
+      img {
+        position: absolute;
+        top: 800px;
+      }
+    }
   }
 `
 
@@ -192,14 +214,6 @@ export const FeatureIcon = styled.div`
   height: 45px;
 `
 
-export const FeatureSpecHeading = styled.div`
-  font-size: calc(40px + (40 - 32) * ((100vw - 300px) / (1440 - 300)));
-  font-weight: bold;
-  padding-top: 20px;
-`
-
-export const FeatureSpecFeatures = styled.div``
-
 export const Feature = styled.div`
   padding-top: 90px;
 
@@ -209,8 +223,6 @@ export const Feature = styled.div`
 `
 
 export const FeatureName = styled.div`
-  text-transform: uppercase;
-  font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300)));
   width: 20vw;
   padding-right: 2vw;
 

diff --git a/src/schemas/product.json b/src/schemas/product.json
@@ -106,11 +106,10 @@
                 "label" : "Feature Name"
               }
             },
-            "feature_description" : {
-              "type" : "StructuredText",
-              "config" : {
-                "multi" : "paragraph",
-                "label" : "feature description"
+            "feature_description": {
+              "type": "Text",
+              "config": {
+                "label": "Feature Description"
               }
             }
           },

diff --git a/src/style/type-styles.js b/src/style/type-styles.js
@@ -4,6 +4,7 @@ const minSize = {
   h1: 50,
   h2: 30,
   h3: 20,
+  sub1: 16,
   p: 16,
   nav: 16,
 }
@@ -20,6 +21,7 @@ const fontSizes = {
   h1: `calc(${minSize.h1}px + (64 - ${minSize.h1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   h2: `calc(${minSize.h2}px + (48 - ${minSize.h2}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   h3: `calc(${minSize.h3}px + (32 - ${minSize.h3}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+  sub1: `calc(${minSize.sub1}px + (20 - ${minSize.sub1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   p: `calc(${minSize.p}px + (24 - ${minSize.p}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   NavText: `calc(${minSize.nav}px + (24 - ${minSize.nav}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
 }
@@ -39,14 +41,19 @@ const H3 = styled.h3`
   font-weight: bold;
 `
 
+const Sub1 = styled.h4 `
+  font-size: ${fontSizes.sub1};
+  text-transform: uppercase;
+  font-weight: normal;
+  //margin-top: 0px;
+`
+
 const P = styled.p`
   font-size: ${fontSizes.p};
 `
 
 const NavText = styled.a`
   font-size: ${fontSizes.nav};
-
-
 `
 
-export { H1, H2, H3, P, NavText }
+export { H1, H2, H3, Sub1, P, NavText }