#18 adding lofi about page mission section

Scout-NU · Mar 16, 2021 · 25ed6e8 · 25ed6e8
1 parent 28422d1
commit 25ed6e8
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 54 deletions.
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -1,62 +1,19 @@
 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"
 
 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;
 `
 const LayoutBody = styled.div`
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
     padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};
   }
 
-  @media (max-width: ${dimensions.maxwidthMobile}px) {
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
     padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile};
   }
 `

diff --git a/src/pages/about.js b/src/pages/about.js
@@ -1,15 +1,94 @@
 import { graphql } from "gatsby"
-
+import Layout from "../components/layout"
 import React from "react"
+import styled from "styled-components"
+import dimensions from "../style/dimensions"
+
+const IconPlaceholder = styled.div`
+  height: 50px;
+  width: 50px;
+  background-color: #9d9d9d;
+`
+
+const AboutHeaderText = styled.div`
+  font-size: 48px;
+  font-weight: bold;
+  padding-left: 20px;
+`
+
+const AboutHeader = styled.div`
+  display: flex;
+  align-items: center;
+  padding-top: 96px;
+`
+
+const MissionSection = styled.div`
+  padding-top: 21px;
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+    padding-top: 96px;
+  }
+`
+
+const MissionImage = styled.div`
+  background-color: #9d9d9d;
+  height: 405px;
+  width: 45vw;
+  left: 0;
+  margin-left: -80px;
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 100vw;
+    margin-left: -16px;
+  }
+`
+
+const MissionText = styled.div`
+  position: relative;
+  padding-top: 28px;
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    width: 35vw;
+    position: relative;
+    padding-left: 75px;
+    padding-top: 0px;
+  }
+`
+
+const MissionTextHeader = styled.div`
+  font-size: 36px;
+  font-weight: bold;
+  padding-top: 19px;
+  padding-bottom: 25px;
+`
+
+const MissionTextParagraph = styled.div`
+  font-size: 20px;
+`
 
 export default function About({ data }) {
-    const aboutData = data.prismicAboutPage.data
+  const aboutData = data.prismicAboutPage.data
+
+  return (
+    <Layout>
+      <AboutHeader>
+        <IconPlaceholder />
+        <AboutHeaderText>About</AboutHeaderText>
+      </AboutHeader>
+
+      <MissionSection>
+        <MissionImage></MissionImage>
+
+        <MissionText>
+          <IconPlaceholder />
+          <MissionTextHeader>{aboutData.mission_heading}</MissionTextHeader>
 
-    return (
-        <div>
-            <h1>{aboutData.company_background_section_heading}</h1>
-        </div>
-    )
+          <MissionTextParagraph>
+            {aboutData.mission_description}
+          </MissionTextParagraph>
+        </MissionText>
+      </MissionSection>
+    </Layout>
+  )
 }
 
 export const query = graphql`

diff --git a/src/style/global.scss b/src/style/global.scss
@@ -0,0 +1,4 @@
+html, body
+{
+    margin: 0px; padding: 0px
+}
diff --git a/src/style/variables.js b/src/style/variables.js
@@ -1,2 +1,2 @@
 export const layoutPaddingDesktop = "80px"
-export const layoutPaddingMobile = "25px"
+export const layoutPaddingMobile = "16px"