feat: index page redesign

ericcheatham · Jan 23, 2020 · 0ac8346 · 0ac8346
1 parent 79a41a3
commit 0ac8346
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 91 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -44,7 +44,6 @@ module.exports = {
     'gatsby-plugin-sharp',
     'gatsby-plugin-offline',
     'gatsby-plugin-styled-components',
-    'gatsby-plugin-styled-components',
     'gatsby-plugin-typescript',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-catch-links',

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -2,42 +2,68 @@ import React from 'react'
 import MainStyles from '~/components/MainStyles'
 import Navbar from '~/components/Navbar'
 import styled from 'styled-components'
+import Img, { FluidObject } from 'gatsby-image'
 
-export const Main = styled.main`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-  padding-top: calc(var(--responsive-padding) + var(--safe-area-inset-top));
-  padding-right: calc(var(--responsive-padding) + var(--safe-area-inset-right));
-  padding-bottom: calc(var(--responsive-padding) + var(--safe-area-inset-bottom));
-  padding-left: calc(var(--responsive-padding) + 3.75rem + var(--safe-area-inset-left));
-  @media only screen and (max-width: 1100px) {
-    padding-left: calc(var(--responsive-padding) + var(--safe-area-inset-left));
-    padding-bottom: calc(4rem + var(--responsive-padding) + var(--safe-area-inset-bottom));
+const Container = styled.div`
+  background: var(--background);
+  margin-top: calc(67vh - 1.25rem);
+  padding: 2.5rem;
+  position: relative;
+
+  @media (min-width: 750px) {
+    margin-top: 0;
+    margin-left: 45vw;
+    position: relative;
   }
-  @media only screen and (max-width: 700px) {
-    padding: calc(0.5rem + var(--responsive-padding) + var(--safe-area-inset-top));
-    padding-right: calc(var(--responsive-padding) + var(--safe-area-inset-right));
-    padding-bottom: calc(0.5rem + var(--responsive-padding) + var(--safe-area-inset-bottom));
-    padding-left: calc(var(--responsive-padding) + var(--safe-area-inset-left));
-    font-size: 21px;
-    margin-bottom: 3.5rem;
+`
+
+// TODO:  Move values to a constants file
+export const Main = styled.main`
+  background: var(--background);
+  padding-top: 1.25rem;
+  position: relative;
+  z-index: 20;
+`
+
+const Image = styled(Img)`
+  max-width: 100%;
+  bottom: 33vh;
+  left: 1.25rem;
+  right: 1.25rem;
+  top: 1.25rem;
+
+  @media (min-width: 750px) {
+    bottom: 0;
+    left: 0;
+    right: auto;
+    top: 0;
+    width: 45vw;
   }
 `
 
 const Layout: React.FunctionComponent<{
   pathname: string
-}> = ({ pathname, children }) => {
+  image?: FluidObject
+  imageTitle?: string
+  imageBackgroundColor?: string
+}> = ({ pathname, children, image, imageTitle, imageBackgroundColor }) => {
   const [isApp, setIsApp] = React.useState(false)
   React.useEffect(() => setIsApp('standalone' in window.navigator), [])
 
   return (
-    <>
+    <Container>
+      {image && (
+        <Image
+          fluid={image}
+          style={{ position: 'fixed' }}
+          backgroundColor={imageBackgroundColor ? imageBackgroundColor : false}
+          title={imageTitle}
+        />
+      )}
       <MainStyles isApp={isApp} />
       <Navbar pathname={pathname} />
       <Main>{children}</Main>
-    </>
+    </Container>
   )
 }
 

diff --git a/src/markdownPageTemplates/IndexPage/index.tsx b/src/markdownPageTemplates/IndexPage/index.tsx
@@ -1,50 +1,7 @@
 import React from 'react'
-import Img from 'gatsby-image'
 import { graphql } from 'gatsby'
 import Layout from '~/components/Layout'
-import PageWrapper from '~/components/PageWrapper'
 import MarkdownWrapper from '~/components/MarkdownWrapper'
-import styled from 'styled-components'
-
-const StyledPageWrapper = styled(PageWrapper)`
-  display: flex;
-  align-items: center;
-  max-width: 42.5em;
-
-  @media (max-width: 900px) {
-    display: block;
-  }
-
-  @media print {
-    max-width: 100%;
-  }
-`
-
-const ImageWrapper = styled.div`
-  width: 32.5%;
-  flex: none;
-  margin-right: 1.5em;
-
-  @media (max-width: 900px) {
-    float: left;
-    width: 40%;
-  }
-  @media (max-width: 550px) {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    margin: 0;
-    float: none;
-    right: 0;
-  }
-`
-
-const StyledImage = styled(Img)`
-  max-width: 100%;
-  @media (max-width: 550px) {
-    margin: -10% 0 -30%;
-  }
-`
 
 const Page: React.FunctionComponent<{
   data: any // type checked by GraphQL
@@ -60,24 +17,16 @@ const Page: React.FunctionComponent<{
   },
   location: { pathname }
 }) => (
-  <Layout pathname={pathname}>
-    <StyledPageWrapper>
-      <ImageWrapper>
-        <StyledImage
-          placeholderStyle={{}}
-          fadeIn={false}
-          className="index-me"
-          sizes={{
-            ...featuredImage.childImageSharp.sizes,
-            base64: featuredImage.childImageSharp.sqip.dataURI
-          }}
-        />
-      </ImageWrapper>
-      <div>
-        <h1>{title}</h1>
-        <MarkdownWrapper dangerouslySetInnerHTML={{ __html: html }} />
-      </div>
-    </StyledPageWrapper>
+  <Layout
+    pathname={pathname}
+    image={featuredImage.childImageSharp.fluid}
+    imageTitle="Photo of Eric Cheatham"
+    imageBackgroundColor="transparent"
+  >
+    <div>
+      <h1>{title}</h1>
+      <MarkdownWrapper dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
   </Layout>
 )
 
@@ -94,12 +43,8 @@ export const PageQuery = graphql`
         title
         featuredImage {
           childImageSharp {
-            sqip(numberOfPrimitives: 75, blur: 0, width: 400) {
-              dataURI
-              svg
-            }
-            sizes(maxWidth: 1000, quality: 75) {
-              ...GatsbyImageSharpSizes_withWebp_noBase64
+            fluid(maxWidth: 800) {
+              ...GatsbyImageSharpFluid
             }
           }
         }

diff --git a/src/pages/index/index.md b/src/pages/index/index.md
@@ -1,7 +1,7 @@
 ---
 templateKey: IndexPage
 title: Hello, World!
-featuredImage: ./me.jpg
+featuredImage: me.jpg
 style: index
 ---