Implement project header component

src/components/aspect-ratio-box.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { Box } from "rebass";
+
+const AspectRatioBox = styled(Box)`
+  padding-bottom: ${props => (1 / props.ratio) * 100}%;
+  background: #e3e4e5;
+  height: 0;
+`;
+
+export default AspectRatioBox;

src/components/layout.js

@@ -5,9 +5,11 @@ import { Box } from "rebass";
 import "../style/reset.css";
 
 const theme = {
+  breakpoints: ["40em", "52em", "64em"],
   fonts: {
     sans: "system-ui, sans-serif"
   },
+  fontSizes: [12, 14, 16, 20, 24, 32, 46],
   colors: {
     grey: "#999",
     black: "#1a1a1a",
@@ -18,8 +20,12 @@ const theme = {
 const Layout = ({ children }) => (
   <ThemeProvider theme={theme}>
     <React.Fragment>
-      <Box as="header">silly header</Box>
-      <Box as="main">{children}</Box>
+      <Box as="header" px={[3, 5]}>
+        silly header
+      </Box>
+      <Box as="main" px={[3, 5]}>
+        {children}
+      </Box>
     </React.Fragment>
   </ThemeProvider>
 );

src/components/project-header.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { Box, Flex, Heading, Text } from "rebass";
+import styled, { css } from "styled-components";
+
+import AspectRatioBox from "./aspect-ratio-box";
+
+const Title = styled(Heading)`
+  color: ${props => props.theme.colors.black};
+  font-family: ${props => props.theme.fonts.sans};
+  font-weight: 600;
+  font-size: ${props => props.theme.fontSizes[5]}px;
+  margin: 0;
+
+  @media (min-width: ${props => props.theme.breakpoints[1]}) {
+    font-size: ${props => props.theme.fontSizes[6]}px;
+  }
+`;
+
+const Description = styled(Text)`
+  color: ${props => props.theme.colors.black};
+  font-family: ${props => props.theme.fonts.sans};
+  font-weight: 600;
+  font-size: ${props => props.theme.fontSizes[3]}px;
+  line-height: 1.35em;
+  margin: 0;
+
+  @media (min-width: ${props => props.theme.breakpoints[1]}) {
+    font-size: ${props => props.theme.fontSizes[4]}px;
+  }
+`;
+
+const Category = styled(Text)`
+  color: ${props => props.theme.colors.grey};
+  font-family: ${props => props.theme.fonts.sans};
+  font-size: ${props => props.theme.fontSizes[3]}px;
+  font-weight: normal;
+  margin: 0;
+`;
+
+const HeroWrap = styled(Box)`
+  ${props =>
+    props.truncated &&
+    css`
+      max-height: 200px;
+      overflow: hidden;
+    `}
+`;
+
+const Hero = ({ truncated }) => (
+  <HeroWrap mt={[4, 5]} truncated={truncated}>
+    <AspectRatioBox ratio={8 / 5} />
+  </HeroWrap>
+);
+
+const ProjectHeader = ({ project, truncated }) => (
+  <Box>
+    <Flex flexWrap="wrap">
+      <Box width={[1, 1 / 2]}>
+        <Title as="h1">{project.title}</Title>
+        <Box mt={3}>
+          <Category as="h3">Random Works</Category>
+        </Box>
+      </Box>
+      <Box width={[1, 1 / 2]}>
+        <Box mt={[3, 0]}>
+          <Description as="h2">
+            Lorem ipsum dolor amet scenester distillery tbh messenger bag DIY
+            pok pok food truck. Ramps iPhone gastropub actually freegan
+            cardigan.
+          </Description>
+        </Box>
+      </Box>
+    </Flex>
+    <Hero truncated={truncated} />
+  </Box>
+);
+
+export default ProjectHeader;

src/templates/project.js

@@ -1,7 +1,13 @@
 import React from "react";
 
 import Layout from "../components/layout";
+import ProjectHeader from "../components/project-header";
 
-const Project = ({ pageContext: project }) => <Layout>{project.title}</Layout>;
+const Project = ({ pageContext: project }) => (
+  <Layout>
+    <ProjectHeader project={project} />
+    <ProjectHeader project={project.next} truncated />
+  </Layout>
+);
 
 export default Project;