From 08e9d0f63efe7b5cf6cb579513510b6cb9a54441 Mon Sep 17 00:00:00 2001 From: samgildea Date: Wed, 24 Mar 2021 22:48:56 -0400 Subject: [PATCH 01/47] #26 initial header structure and adding vector --- gatsby-config.js | 8 ++++ package-lock.json | 80 ++++++++++++++++++++++++++++++++ package.json | 1 + src/components/header/header.jsx | 66 ++++++++++++++++++++++++++ src/components/layout.js | 69 +++++++-------------------- src/style/global.scss | 4 ++ src/vectors/hamburger.svg | 5 ++ 7 files changed, 181 insertions(+), 52 deletions(-) create mode 100644 src/components/header/header.jsx create mode 100644 src/style/global.scss create mode 100644 src/vectors/hamburger.svg diff --git a/gatsby-config.js b/gatsby-config.js index 1f23fde..e0f06be 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -43,5 +43,13 @@ module.exports = { typePathsFilenamePrefix: "prismic-typepaths---powerhouse-site", }, }, + { + resolve: "gatsby-plugin-react-svg", + options: { + rule: { + include: /vectors/ // See below to configure properly + } + } + } ], } diff --git a/package-lock.json b/package-lock.json index a2a64b8..c8b53ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7410,6 +7410,14 @@ } } }, + "gatsby-plugin-react-svg": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-3.0.0.tgz", + "integrity": "sha512-myZl5NjVZwLLn4ovwSDM7cufa8yjaRiU5KoufJrz8FEalRroZ/hFSCCKNVna3blTwxcS0rZgISigYn9/xY7rkw==", + "requires": { + "svg-react-loader": "^0.4.4" + } + }, "gatsby-plugin-sass": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-4.0.2.tgz", @@ -12498,6 +12506,11 @@ "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==" }, + "ramda": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.21.0.tgz", + "integrity": "sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=" + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -13630,6 +13643,11 @@ "aproba": "^1.1.1" } }, + "rx": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz", + "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=" + }, "rx-lite": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz", @@ -15017,6 +15035,46 @@ "has-flag": "^3.0.0" } }, + "svg-react-loader": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/svg-react-loader/-/svg-react-loader-0.4.6.tgz", + "integrity": "sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==", + "requires": { + "css": "2.2.4", + "loader-utils": "1.1.0", + "ramda": "0.21.0", + "rx": "4.1.0", + "traverse": "0.6.6", + "xml2js": "0.4.17" + }, + "dependencies": { + "big.js": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", + "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==" + }, + "emojis-list": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", + "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" + }, + "json5": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", + "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=" + }, + "loader-utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz", + "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=", + "requires": { + "big.js": "^3.1.3", + "emojis-list": "^2.0.0", + "json5": "^0.5.0" + } + } + } + }, "svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -15370,6 +15428,11 @@ "punycode": "^2.1.1" } }, + "traverse": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", + "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" + }, "trim": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", @@ -16856,6 +16919,23 @@ "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz", "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==" }, + "xml2js": { + "version": "0.4.17", + "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz", + "integrity": "sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=", + "requires": { + "sax": ">=0.6.0", + "xmlbuilder": "^4.1.0" + } + }, + "xmlbuilder": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz", + "integrity": "sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=", + "requires": { + "lodash": "^4.0.0" + } + }, "xmlhttprequest-ssl": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", diff --git a/package.json b/package.json index 2a8a82f..2f27054 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@walltowall/gatsby-source-prismic-schemas": "^1.1.0", "gatsby": "^2.26.1", "gatsby-plugin-netlify-headers": "^1.0.1", + "gatsby-plugin-react-svg": "^3.0.0", "gatsby-plugin-sass": "^4.0.2", "gatsby-source-prismic": "^3.3.3", "node-sass": "^5.0.0", diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx new file mode 100644 index 0000000..06d743e --- /dev/null +++ b/src/components/header/header.jsx @@ -0,0 +1,66 @@ +import React from "react" +import styled from "styled-components" +import dimensions from "../../style/dimensions" +import Hamburger from "../../vectors/hamburger.svg" +const NavContainer = styled.div`` + +const Logo = styled.div` + font-weight: bold; + font-size: 24px; + padding-top: 32px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + text-align: center; + font-size: 20px; + padding-top: 24px; + + } +` + +const NavLinks = styled.div` + position: absolute; + right: 80px; + top: 40px; + display: flex; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + display: none; + } +` + +const NavLink = styled.div` + font-weight: bold; + font-size: 16px; + padding-left: 100px; +` + +const MobileIcon = styled.div` +@media (min-width: ${dimensions.maxwidthTablet}px) { + display: none; + } + + @media (max-width: ${dimensions.maxwidthTablet}px) { + left: 24px; + top: 32px; + position: absolute; + + } +` + +export default function header() { + return ( + + PowerHouse + + + + + + ABOUT + PROCESS + PRODUCTS + SOLUTIONS + + + ) +} diff --git a/src/components/layout.js b/src/components/layout.js index 4d54b27..b10dae1 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,69 +1,34 @@ + import React from "react" import styled from "styled-components" import "../style/typography.scss" - +import "../style/global.scss" import dimensions from "../style/dimensions" import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables" +import Footer from "../components/footer.js" +import Header from "../components/header/header.jsx" const LayoutContainer = styled.div` - body * { - box-sizing: border-box; - margin: 0; - } - - html, - body, - #root { - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - min-height: 100%; - } - - body { - width: 100%; - margin: 0 auto; - font-size: 16px; - line-height: 1.5; - -webkit-font-smoothing: antialiased; - - @media (max-width: ${dimensions.maxwidthMobile}px) { - font-size: 14px; - } - - * { - box-sizing: border-box; - } - } - - /* - A workaround for forcing accessibility wrappers - to have a 100% height. - Reach Router issue here: https: //github.com/reach/router/issues/63 - */ - #___gatsby, - div[role="group"][tabindex] { - height: 100%; - min-height: 100% !important; - } - - padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop}; - - margin: 0 auto; +@media (min-width: ${dimensions.maxwidthTablet}px) { + padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s +} +@media (max-width: ${dimensions.maxwidthTablet}px) { + padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile}; +} ` const LayoutBody = styled.div` - @media (max-width: ${dimensions.maxwidthTablet}px) { - padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop}; - } - - @media (max-width: ${dimensions.maxwidthMobile}px) { - padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile}; - } + // @media (min-width: ${dimensions.maxwidthTablet}px) { + // padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s + // } + // @media (max-width: ${dimensions.maxwidthTablet}px) { + // padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile}; + // } ` const Layout = ({ children }) => { return ( +
{children} ) diff --git a/src/style/global.scss b/src/style/global.scss new file mode 100644 index 0000000..3f92950 --- /dev/null +++ b/src/style/global.scss @@ -0,0 +1,4 @@ +html, body +{ + margin: 0px !important; padding: 0px !important; +} \ No newline at end of file diff --git a/src/vectors/hamburger.svg b/src/vectors/hamburger.svg new file mode 100644 index 0000000..365600c --- /dev/null +++ b/src/vectors/hamburger.svg @@ -0,0 +1,5 @@ + + + + + From c61da5e1fc8b94d3802c46e85ca2a877b903d0e7 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 26 Mar 2021 12:12:47 -0400 Subject: [PATCH 02/47] mobile header functionality --- src/components/header/header.jsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index 06d743e..549f3b7 100644 --- a/src/components/header/header.jsx +++ b/src/components/header/header.jsx @@ -1,7 +1,8 @@ -import React from "react" +import React, { useState } from "react" import styled from "styled-components" import dimensions from "../../style/dimensions" import Hamburger from "../../vectors/hamburger.svg" + const NavContainer = styled.div`` const Logo = styled.div` @@ -13,7 +14,6 @@ const Logo = styled.div` text-align: center; font-size: 20px; padding-top: 24px; - } ` @@ -35,7 +35,7 @@ const NavLink = styled.div` ` const MobileIcon = styled.div` -@media (min-width: ${dimensions.maxwidthTablet}px) { + @media (min-width: ${dimensions.maxwidthTablet}px) { display: none; } @@ -43,16 +43,17 @@ const MobileIcon = styled.div` left: 24px; top: 32px; position: absolute; - } ` -export default function header() { +export const Header = () => { + const [open, setOpen] = useState(false) + return ( PowerHouse - + setOpen(!open)} className={open ? "open" : ""}> @@ -64,3 +65,4 @@ export default function header() { ) } +export default Header From b6dca4d6b28fe0eddc1d18e7ef0984218819fd5d Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 26 Mar 2021 13:06:34 -0400 Subject: [PATCH 03/47] #26 extracting mobile styles to separate file --- src/components/header/header-styles.js | 48 +++++++++++++++++++++ src/components/header/header.jsx | 60 +++++--------------------- 2 files changed, 59 insertions(+), 49 deletions(-) create mode 100644 src/components/header/header-styles.js diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js new file mode 100644 index 0000000..76ca335 --- /dev/null +++ b/src/components/header/header-styles.js @@ -0,0 +1,48 @@ +import styled from 'styled-components' +import dimensions from "../../style/dimensions" + + +export const NavContainer = styled.div`` + +export const Logo = styled.div` + font-weight: bold; + font-size: 24px; + padding-top: 32px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + text-align: center; + font-size: 20px; + padding-top: 24px; + } +` + +export const NavLinks = styled.div` + position: absolute; + right: 80px; + top: 40px; + display: flex; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + display: none; + } +` + +export const NavLink = styled.a` + font-weight: bold; + font-size: 16px; + padding-left: 100px; + text-decoration: none; + color: #000000; +` + +export const MobileIcon = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: none; + } + + @media (max-width: ${dimensions.maxwidthTablet}px) { + left: 24px; + top: 32px; + position: absolute; + } +` \ No newline at end of file diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index 549f3b7..66beb22 100644 --- a/src/components/header/header.jsx +++ b/src/components/header/header.jsx @@ -1,50 +1,12 @@ import React, { useState } from "react" -import styled from "styled-components" -import dimensions from "../../style/dimensions" import Hamburger from "../../vectors/hamburger.svg" - -const NavContainer = styled.div`` - -const Logo = styled.div` - font-weight: bold; - font-size: 24px; - padding-top: 32px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - text-align: center; - font-size: 20px; - padding-top: 24px; - } -` - -const NavLinks = styled.div` - position: absolute; - right: 80px; - top: 40px; - display: flex; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - display: none; - } -` - -const NavLink = styled.div` - font-weight: bold; - font-size: 16px; - padding-left: 100px; -` - -const MobileIcon = styled.div` - @media (min-width: ${dimensions.maxwidthTablet}px) { - display: none; - } - - @media (max-width: ${dimensions.maxwidthTablet}px) { - left: 24px; - top: 32px; - position: absolute; - } -` +import { + NavContainer, + Logo, + MobileIcon, + NavLinks, + NavLink, +} from "./header-styles" export const Header = () => { const [open, setOpen] = useState(false) @@ -57,10 +19,10 @@ export const Header = () => { - ABOUT - PROCESS - PRODUCTS - SOLUTIONS + ABOUT + PROCESS + PRODUCTS + SOLUTIONS ) From e12de92964cc20594468e3ba8825e205e64e667c Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 26 Mar 2021 13:12:39 -0400 Subject: [PATCH 04/47] updating logo padding #26 --- src/components/header/header-styles.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js index 76ca335..2a9fa0e 100644 --- a/src/components/header/header-styles.js +++ b/src/components/header/header-styles.js @@ -8,11 +8,14 @@ export const Logo = styled.div` font-weight: bold; font-size: 24px; padding-top: 32px; + padding-left: 80px; @media (max-width: ${dimensions.maxwidthTablet}px) { text-align: center; font-size: 20px; padding-top: 24px; + padding-left: 0px; + } ` From 1736e26e68873f584cf10bf9330b405b6a195388 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 26 Mar 2021 21:33:03 -0400 Subject: [PATCH 05/47] #20 future of solar section lofi --- src/pages/index.js | 93 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 90 insertions(+), 3 deletions(-) diff --git a/src/pages/index.js b/src/pages/index.js index ca77caf..992060c 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,12 +1,99 @@ import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" +import styled from "styled-components" +import dimensions from "../style/dimensions" -export default function Home({ data }) { +const FutureSection = styled.div` + height: 100vh; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + align-items: center; + } +` + +const FutureText = styled.div`` + +const FutureImage = styled.div` + background-color: #c4c4c4; + width: 100%; + height: 450px; + margin-top: 80px; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + position: absolute; + right: 0; + width: 42vw; + height: 768px; + } +` + +const FutureHeader = styled.div` + font-size: 24px; + font-weight: bold; + @media (min-width: ${dimensions.maxwidthTablet}px) { + font-size: 48px; + } +` +const FutureSolarIcon = styled.div` + width: 64px; + height: 64px; + border-radius: 8px; + background-color: #a4a4a4; + margin-bottom: 48px; +` + +const FutureDescription = styled.div` + margin-top: 32px; + font-size: 18px; + @media (max-width: ${dimensions.maxwidthTablet}px) { + font-size: 16px; + } +` + +const FutureCTA = styled.div` + margin-top: 64px; + + a { + padding-right: 60px; + padding-left: 60px; + padding-top: 16px; + padding-bottom: 16px; + border: solid #646464 1px; + font-size: 16px; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + color: #646464; + } +` + +export default function Home({ data }) { const homepageData = data.prismicHomepage.data - return {homepageData.hero_headline} + return ( + + + + + {homepageData.section_title} + + {homepageData.section_description} + + + + + {homepageData.button_text} + + + + + + + + ) } export const query = graphql` @@ -69,4 +156,4 @@ export const query = graphql` } } } -` \ No newline at end of file +` From c2284122ecc538d6f75b5d1c0fe1c0daa1234d0d Mon Sep 17 00:00:00 2001 From: samgildea Date: Tue, 30 Mar 2021 10:42:02 -0400 Subject: [PATCH 06/47] #26 add scroll functionality to header to change background color --- src/components/header/header-styles.js | 17 +++++++++++++---- src/components/header/header.jsx | 13 ++++++++++++- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js index 2a9fa0e..3cfa814 100644 --- a/src/components/header/header-styles.js +++ b/src/components/header/header-styles.js @@ -1,8 +1,18 @@ -import styled from 'styled-components' +import styled from "styled-components" import dimensions from "../../style/dimensions" +import colors from "../../style/colors" +export const NavContainer = styled.div` + background-color: ${colors.gray_image}; + padding-bottom: 32px; + &.colorChange { + background-color: ${colors.gray_CTA}; + } -export const NavContainer = styled.div`` + position: fixed; + width: 100%; + transition: 0.5s all ease; +` export const Logo = styled.div` font-weight: bold; @@ -15,7 +25,6 @@ export const Logo = styled.div` font-size: 20px; padding-top: 24px; padding-left: 0px; - } ` @@ -48,4 +57,4 @@ export const MobileIcon = styled.div` top: 32px; position: absolute; } -` \ No newline at end of file +` diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index 66beb22..04d1ff2 100644 --- a/src/components/header/header.jsx +++ b/src/components/header/header.jsx @@ -10,9 +10,20 @@ import { export const Header = () => { const [open, setOpen] = useState(false) + const [colorChange, setColorchange] = useState(false); + const changeNavbarColor = () =>{ + if(window.scrollY >= 80){ + setColorchange(true); + } + else{ + setColorchange(false); + } + }; + window.addEventListener('scroll', changeNavbarColor); + return ( - + PowerHouse setOpen(!open)} className={open ? "open" : ""}> From 61d334e949a84466b1cb54a5fc3b9732254750ad Mon Sep 17 00:00:00 2001 From: samgildea Date: Thu, 1 Apr 2021 20:38:00 -0400 Subject: [PATCH 07/47] #28 updating window functionality to deploy --- src/components/header/header.jsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index 04d1ff2..eb25d5f 100644 --- a/src/components/header/header.jsx +++ b/src/components/header/header.jsx @@ -10,20 +10,18 @@ import { export const Header = () => { const [open, setOpen] = useState(false) - const [colorChange, setColorchange] = useState(false); - const changeNavbarColor = () =>{ - if(window.scrollY >= 80){ - setColorchange(true); - } - else{ - setColorchange(false); - } - }; - window.addEventListener('scroll', changeNavbarColor); - + const [colorChange, setColorchange] = useState(false) + const changeNavbarColor = () => { + if (typeof window !== "undefined" && window.scrollY >= 80) { + setColorchange(true) + } else { + setColorchange(false) + } + } + window.addEventListener("scroll", changeNavbarColor) return ( - + PowerHouse setOpen(!open)} className={open ? "open" : ""}> From 2847689815c6c7ae1960fd4ae61a22a4ccf66acf Mon Sep 17 00:00:00 2001 From: samgildea Date: Thu, 1 Apr 2021 20:51:03 -0400 Subject: [PATCH 08/47] #26 updating window functionality to deploy --- src/components/header/header.jsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index eb25d5f..75dcb8a 100644 --- a/src/components/header/header.jsx +++ b/src/components/header/header.jsx @@ -10,18 +10,20 @@ import { export const Header = () => { const [open, setOpen] = useState(false) - const [colorChange, setColorchange] = useState(false) - const changeNavbarColor = () => { - if (typeof window !== "undefined" && window.scrollY >= 80) { - setColorchange(true) - } else { - setColorchange(false) - } - } - window.addEventListener("scroll", changeNavbarColor) + const [colorChange, setColorchange] = useState(false); + const changeNavbarColor = () =>{ + if(typeof window !== "undefined" && window.scrollY >= 80){ + setColorchange(true); + } + else{ + setColorchange(false); + } + }; + window.addEventListener('scroll', changeNavbarColor); + return ( - + PowerHouse setOpen(!open)} className={open ? "open" : ""}> From f2b51ecf58a2486ff40e7491a1aa903b99f54916 Mon Sep 17 00:00:00 2001 From: samgildea Date: Thu, 1 Apr 2021 20:52:40 -0400 Subject: [PATCH 09/47] #26 updating addeventlistener --- src/components/header/header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index 75dcb8a..96737c7 100644 --- a/src/components/header/header.jsx +++ b/src/components/header/header.jsx @@ -19,7 +19,7 @@ export const Header = () => { setColorchange(false); } }; - window.addEventListener('scroll', changeNavbarColor); + typeof window !== "undefined" && window.addEventListener('scroll', changeNavbarColor); return ( From 46943ac3f32c25428ca40b3c247e084000f96e50 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 2 Apr 2021 12:49:44 -0400 Subject: [PATCH 10/47] #26 updating text styles --- src/components/header/header-styles.js | 3 +- src/components/header/header.jsx | 41 ++++++++++++++++---------- src/style/type-styles.js | 10 ++++++- 3 files changed, 35 insertions(+), 19 deletions(-) diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js index 3cfa814..07fcdc2 100644 --- a/src/components/header/header-styles.js +++ b/src/components/header/header-styles.js @@ -39,9 +39,8 @@ export const NavLinks = styled.div` } ` -export const NavLink = styled.a` +export const NavLink = styled.div` font-weight: bold; - font-size: 16px; padding-left: 100px; text-decoration: none; color: #000000; diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index 96737c7..759811c 100644 --- a/src/components/header/header.jsx +++ b/src/components/header/header.jsx @@ -8,32 +8,41 @@ import { NavLink, } from "./header-styles" +import { NavText } from "../../style/type-styles" + export const Header = () => { const [open, setOpen] = useState(false) - const [colorChange, setColorchange] = useState(false); - const changeNavbarColor = () =>{ - if(typeof window !== "undefined" && window.scrollY >= 80){ - setColorchange(true); - } - else{ - setColorchange(false); - } - }; - typeof window !== "undefined" && window.addEventListener('scroll', changeNavbarColor); - + const [colorChange, setColorchange] = useState(false) + const changeNavbarColor = () => { + if (typeof window !== "undefined" && window.scrollY >= 80) { + setColorchange(true) + } else { + setColorchange(false) + } + } + typeof window !== "undefined" && + window.addEventListener("scroll", changeNavbarColor) return ( - + PowerHouse setOpen(!open)} className={open ? "open" : ""}> - ABOUT - PROCESS - PRODUCTS - SOLUTIONS + + ABOUT + + + PROCESS + + + PRODUCTS + + + SOLUTIONS + ) diff --git a/src/style/type-styles.js b/src/style/type-styles.js index bc7923f..fa54ab0 100644 --- a/src/style/type-styles.js +++ b/src/style/type-styles.js @@ -5,6 +5,7 @@ const minSize = { h2: 30, h3: 20, p: 16, + nav: 16, } const devices = { @@ -20,6 +21,7 @@ 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})))`, } const H1 = styled.h1` @@ -41,4 +43,10 @@ const P = styled.p` font-size: ${fontSizes.p}; ` -export { H1, H2, H3, P } +const NavText = styled.a` + font-size: ${fontSizes.nav}; + + +` + +export { H1, H2, H3, P, NavText } From c1b7f195c2dcb48d75e0e9d6cd30f1e75fa7a857 Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 2 Apr 2021 21:50:17 -0400 Subject: [PATCH 11/47] #20 moving future of solar component to components folder --- src/components/footer/footer-styles.js | 1 + src/components/homepage/index-styles.js | 77 +++++++++++++++++++++++-- src/components/homepage/index.js | 64 +++++++++++++++----- src/components/layout.js | 7 +-- 4 files changed, 124 insertions(+), 25 deletions(-) diff --git a/src/components/footer/footer-styles.js b/src/components/footer/footer-styles.js index 369c086..4d3713a 100644 --- a/src/components/footer/footer-styles.js +++ b/src/components/footer/footer-styles.js @@ -4,6 +4,7 @@ export const FooterContainer = styled.div` background-color: #848484; width: 100%; color: #ffffff; + position: relative; ` export const FooterMainContent = styled.div` diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index 976397d..302e0ac 100644 --- a/src/components/homepage/index-styles.js +++ b/src/components/homepage/index-styles.js @@ -26,11 +26,9 @@ export const HeroTextSection = styled.div` } ` -export const HeroHeadline = styled.div` -` +export const HeroHeadline = styled.div`` -export const HeroDescription = styled.div` -` +export const HeroDescription = styled.div`` export const HeroCTA = styled.div` margin-top: 64px; @@ -45,3 +43,74 @@ export const HeroCTA = styled.div` padding-bottom: 16px; } ` + +export const FutureSection = styled.div` + height: 100vh; + position: relative; + padding-top: 64px; + + + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + align-items: center; + padding-top: 0px; + + + } +` + +export const FutureText = styled.div`` + +export const FutureImage = styled.div` + background-color: #c4c4c4; + width: 100%; + height: 450px; + margin-top: 80px; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + position: absolute; + right: 0; + width: 42vw; + height: 768px; + } +` + +export const FutureHeader = styled.div` + font-weight: bold; + @media (min-width: ${dimensions.maxwidthTablet}px) { + } +` + +export const FutureSolarIcon = styled.div` + width: 64px; + height: 64px; + border-radius: 8px; + background-color: #a4a4a4; + margin-bottom: 48px; +` + +export const FutureDescription = styled.div` + margin-top: 32px; + font-size: 18px; + @media (max-width: ${dimensions.maxwidthTablet}px) { + font-size: 16px; + } +` +export const FutureCTA = styled.div` + margin-top: 64px; + + a { + padding-right: 60px; + padding-left: 60px; + padding-top: 16px; + padding-bottom: 16px; + border: solid #646464 1px; + font-size: 16px; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + color: #646464; + } +` + +export const HomePageContainer = styled.div`` diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js index 6e23a6d..f4f774a 100644 --- a/src/components/homepage/index.js +++ b/src/components/homepage/index.js @@ -1,29 +1,61 @@ import React from "react" -import { H1, P } from "../../style/type-styles" +import { H1, P, H2 } from "../../style/type-styles" import { HeroContainer, HeroTextSection, HeroHeadline, HeroDescription, HeroCTA, + FutureSection, + FutureText, + FutureSolarIcon, + FutureHeader, + FutureDescription, + FutureCTA, + FutureImage, + HomePageContainer, } from "./index-styles" export default function HomePage({ data }) { return ( - - - -

{data.hero_headline}

- - -

{data.hero_subtext}

- - - - {data.hero_cta_text} - - - - + + + + +

{data.hero_headline}

+ + +

{data.hero_subtext}

+ + + + {data.hero_cta_text} + + + + + + + + + +

{data.section_title}

+ + +

{data.section_description}

+ + + + {data.button_text} + + + + + ) } diff --git a/src/components/layout.js b/src/components/layout.js index 35d4c32..30575e5 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -6,9 +6,7 @@ import dimensions from "../style/dimensions" import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables" import Footer from "../components/footer/footer" -const LayoutContainer = styled.div` - -` +const LayoutContainer = styled.div`` const LayoutBody = styled.div` @media (min-width: ${dimensions.maxwidthTablet}px) { padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s @@ -23,10 +21,9 @@ const Layout = ({ children }) => { return ( {children} -