From ce8264c1ce6efff3f08b1ab3d0fd055cdaccd999 Mon Sep 17 00:00:00 2001 From: Viviana Date: Tue, 27 Apr 2021 21:35:35 -0400 Subject: [PATCH] #31 Updated styling of featured section on product page to match styling of Hi-fi wireframes. --- .../product_page/product-page-styles.js | 61 ++++--------------- src/components/product_page/product-page.js | 27 ++++---- src/pages/about.js | 12 +++- src/pages/product_page.js | 4 ++ src/style/type-styles.js | 21 ++++++- 5 files changed, 59 insertions(+), 66 deletions(-) diff --git a/src/components/product_page/product-page-styles.js b/src/components/product_page/product-page-styles.js index ed0be1b..89b8a7e 100644 --- a/src/components/product_page/product-page-styles.js +++ b/src/components/product_page/product-page-styles.js @@ -1,14 +1,9 @@ import styled from "styled-components" import dimensions from "../../style/dimensions" -export const ProductPageHeading = styled.div` - font-size: calc(90px + (90 - 32) * ((100vw - 300px) / (1440 - 300))); - font-weight: bold; -` - export const FeaturedProductSection = styled.div` width: 100%; - padding-top: 40px; + margin-top: 40px; @media (min-width: ${dimensions.maxwidthTablet}px) { width: 86vw; @@ -17,47 +12,23 @@ export const FeaturedProductSection = styled.div` ` export const FeaturedProductImage = styled.div` - width: 47vw; - height: 432px; - background-color: #C4C4C4; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - width: 100%; - height: 225px; + img { + width: 47vw; + margin-left: -80px; + @media (max-width: ${dimensions.maxwidthTablet}px) { + width: 100%; + margin-left: 0px; + } } ` export const FeaturedProductText = styled.div` - padding-left: 5vw; - padding-top: 52px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - padding-left: 0vw; - padding-top: 26px; - } -` - -export const FeaturedProductHeading = styled.div` - font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300))); - text-transform: uppercase; -` - -export const FeaturedProductName = styled.div` - font-size: calc(40px + (40 - 24) * ((100vw - 300px) / (1440 - 300))); - font-weight: bold; - padding-top: 17px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - padding-top: 8px; - } -` - -export const FeaturedProductDescription = styled.div` - font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300))); - padding-top: 32px; + margin-left: 5vw; + margin-top: 52px; @media (max-width: ${dimensions.maxwidthTablet}px) { - padding-top: 15px; + margin-left: 0vw; + margin-top: 26px; } ` @@ -69,11 +40,6 @@ export const ModelScope = styled.div` } ` -export const ModelScopeHeading = styled.div` - font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300))); - text-transform: uppercase; -` - export const ProductsGroup = styled.div` @media (min-width: ${dimensions.maxwidthTablet}px) { display: flex; @@ -100,8 +66,6 @@ export const ProductImage = styled.div` ` export const ProductName = styled.div` - font-size: calc(30px + (30 - 24) * ((100vw - 300px) / (1440 - 300))); - font-weight: bold; padding-top: 49px; @media (max-width: ${dimensions.maxwidthTablet}px) { @@ -110,7 +74,6 @@ export const ProductName = styled.div` ` export const ProductDescription = styled.div` - font-size: 15px; padding-top: 15px; @media (max-width: ${dimensions.maxwidthTablet}px) { diff --git a/src/components/product_page/product-page.js b/src/components/product_page/product-page.js index b2b71d1..6bf717f 100644 --- a/src/components/product_page/product-page.js +++ b/src/components/product_page/product-page.js @@ -1,14 +1,10 @@ import React from "react" +import { H1, H2, H3, Body, Sub1 } from "../../style/type-styles" import { - ProductPageHeading, FeaturedProductSection, FeaturedProductImage, FeaturedProductText, - FeaturedProductHeading, - FeaturedProductName, - FeaturedProductDescription, ModelScope, - ModelScopeHeading, ProductsGroup, Product, ProductImage, @@ -19,13 +15,15 @@ import { export default function ProductSection({ data }) { return (
- {data.product_page_main_heading} +

{data.product_page_main_heading}

- + + {data.featured_product_image.alt}/ + - {data.featured_product_heading} - {data.featured_product_name} - {data.featured_product_description} + {data.featured_product_heading} +

{data.featured_product_name}

+ {data.featured_product_description} @@ -33,14 +31,17 @@ export default function ProductSection({ data }) { {data.model_scope.map(scope => { return ( - {scope.model_scope_heading} + {scope.model_scope_heading} {data.products.map(product => { return ( - {product.product_title} - {product.product_description} + + {product.product_title} + +

+ {product.product_description} ) })} diff --git a/src/pages/about.js b/src/pages/about.js index f500a48..3d352e5 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -23,7 +23,9 @@ export const query = graphql` company_background_section_heading company_comparison_section_heading company_team_heading - cta_button_destination + cta_button_destination { + url + } cta_button_text industry_context_explanation { explanation_description @@ -37,10 +39,14 @@ export const query = graphql` product_feature { product_feature_name } - products_navigation_button_destination + products_navigation_button_destination { + url + } products_navigation_button_text team_member_information { - contact_button_destination + contact_button_destination { + url + } contact_button_text team_member_description team_member_title diff --git a/src/pages/product_page.js b/src/pages/product_page.js index b6f1d02..a129e4a 100644 --- a/src/pages/product_page.js +++ b/src/pages/product_page.js @@ -19,6 +19,10 @@ export const query = graphql` data { featured_product_description featured_product_heading + featured_product_image { + alt + url + } featured_product_name learn_more_button_text learn_more_button_text_destination diff --git a/src/style/type-styles.js b/src/style/type-styles.js index bc7923f..84f983c 100644 --- a/src/style/type-styles.js +++ b/src/style/type-styles.js @@ -4,7 +4,10 @@ const minSize = { h1: 50, h2: 30, h3: 20, + nav: 16, + sub1: 25, p: 16, + body: 14, } const devices = { @@ -20,6 +23,9 @@ const fontSizes = { 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})))`, 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})))`, + Sub1: `calc(${minSize.sub1}px + (36 - ${minSize.sub1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, + body: `calc(${minSize.body}px + (18 - ${minSize.body}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, } const H1 = styled.h1` @@ -41,4 +47,17 @@ const P = styled.p` font-size: ${fontSizes.p}; ` -export { H1, H2, H3, P } +const NavText = styled.div` + font-size: ${fontSizes.nav}; +` + +const Sub1 = styled.div` + font-size: ${fontSizes.Sub1}; + text-transform: uppercase; +` + +const Body = styled.div` + font-size: ${fontSizes.body}; +` + +export { H1, H2, H3, P, NavText, Sub1, Body }