Responsive breakpoints (#6)

* added breakpoints * mobile text sizes * example on homepage * random styling as an example * cursor pointer, alt text, unique key * large desktops max-width
Scout-NU · Apr 10, 2022 · 8e403d5 · 8e403d5
1 parent 80d191c
commit 8e403d5
Show file tree

Hide file tree

Showing 11 changed files with 197 additions and 61 deletions.
diff --git a/assets/IBMPlexMono-Bold.ttf b/assets/IBMPlexMono-Bold.ttf
diff --git a/assets/IBMPlexMono-SemiBold.ttf b/assets/IBMPlexMono-SemiBold.ttf
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import Nav from '../Nav';
+import { GlobalStyle } from './styled';
 
 const Layout = ({ children }) => (
   <>
+    <GlobalStyle />
     <Nav />
     <main>{children}</main>
   </>

diff --git a/src/components/Layout/styled.js b/src/components/Layout/styled.js
@@ -0,0 +1,10 @@
+import { createGlobalStyle } from 'styled-components';
+import { BLACK, CREAM } from '../../styles/styles';
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    color: ${CREAM};
+    background-color: ${BLACK};
+    margin: 0;
+  }
+`;
diff --git a/src/components/ProjectPreview/index.js b/src/components/ProjectPreview/index.js
@@ -1,6 +1,15 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import { Container, Overview, Content } from './styled';
+import { Container, FlexContainer, Overview, Content } from './styled';
+import {
+  H1,
+  H2,
+  P,
+  PrimaryButton,
+  ButtonText,
+  YELLOW,
+  SecondaryButton,
+} from '../../styles/styles';
 
 const ProjectPreview = ({ project }) => {
   const {
@@ -10,33 +19,41 @@ const ProjectPreview = ({ project }) => {
 
   return (
     <Container>
-      <Overview>
-        <h1>{name.text}</h1>
-        <p>{description.text}</p>
-        <Link to={`/projects/${uid}`}>Watch</Link>
-      </Overview>
-      <Content>
-        {works.map((work) => {
-          const {
-            content: {
-              document: {
-                uid,
-                data: {
-                  title,
-                  embed: { thumbnail_url },
+      <FlexContainer>
+        <Overview>
+          <H1>{name.text}</H1>
+          <P>{description.text}</P>
+          <Link to={`/projects/${uid}`}>
+            <PrimaryButton color={YELLOW}>
+              <ButtonText bold>Watch</ButtonText>
+            </PrimaryButton>
+          </Link>
+        </Overview>
+        <Content>
+          {works.map((work) => {
+            const {
+              content: {
+                document: {
+                  uid,
+                  data: {
+                    title,
+                    embed: { thumbnail_url },
+                  },
                 },
               },
-            },
-          } = work;
-          return (
-            <div>
-              <img src={thumbnail_url} />
-              <h2>{title.text}</h2>
-              <Link to={`/works/${uid}`}>Watch</Link>
-            </div>
-          );
-        })}
-      </Content>
+            } = work;
+            return (
+              <div>
+                <img alt={title.text} src={thumbnail_url} />
+                <H2>{title.text}</H2>
+                <Link to={`/works/${uid}`}>
+                  <SecondaryButton>Watch</SecondaryButton>
+                </Link>
+              </div>
+            );
+          })}
+        </Content>
+      </FlexContainer>
     </Container>
   );
 };

diff --git a/src/components/ProjectPreview/styled.js b/src/components/ProjectPreview/styled.js
@@ -1,15 +1,32 @@
 import styled from 'styled-components';
+import { min } from '../../styles/breakpoints';
+import { MarginContainer, CREAM } from '../../styles/styles';
 
 export const Container = styled.div`
+  border-top: 0.5px solid ${CREAM};
+  border-bottom: 0.5px solid ${CREAM};
+`;
+
+export const FlexContainer = styled(MarginContainer)`
   display: flex;
+  flex-direction: column;
+  ${min.desktop} {
+    flex-direction: row;
+  }
 `;
 
 export const Overview = styled.div`
   flex: 50%;
+  ${min.desktop} {
+    border-right: 0.5px solid ${CREAM};
+  }
 `;
 
 export const Content = styled.div`
   flex: 50%;
   display: flex;
   overflow-x: scroll;
+  ${min.desktop} {
+    border-left: 0.5px solid ${CREAM};
+  }
 `;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -2,6 +2,15 @@ import { graphql, useStaticQuery } from 'gatsby';
 import * as React from 'react';
 import Layout from '../components/Layout';
 import ProjectPreview from '../components/ProjectPreview';
+import {
+  ButtonText,
+  MarginContainer,
+  H1,
+  H2,
+  PrimaryButton,
+  YELLOW,
+} from '../styles/styles';
+import { SingleWorksDescription } from '../styles/index.styles';
 
 const IndexPage = () => {
   const pageQuery = useStaticQuery(graphql`
@@ -75,14 +84,27 @@ const IndexPage = () => {
 
   return (
     <Layout>
-      <h1>{mainHeading.text}</h1>
-      <h2>{blurb.text}</h2>
+      <MarginContainer>
+        <H1>{mainHeading.text}</H1>
+        <H2>{blurb.text}</H2>
+      </MarginContainer>
       {projects.map((project) => {
-        return <ProjectPreview project={project.project.document} />;
+        return (
+          <ProjectPreview
+            key={project.project.document.uid}
+            project={project.project.document}
+          />
+        );
       })}
-      <h1>{singleWorksHeading.text}</h1>
-      <p>{singleWorksDescription.text}</p>
-      <button>Watch</button>
+      <MarginContainer>
+        <H1>{singleWorksHeading.text}</H1>
+        <SingleWorksDescription>
+          {singleWorksDescription.text}
+        </SingleWorksDescription>
+        <PrimaryButton color={YELLOW}>
+          <ButtonText bold>Watch</ButtonText>
+        </PrimaryButton>
+      </MarginContainer>
     </Layout>
   );
 };

diff --git a/src/styles/breakpoints.js b/src/styles/breakpoints.js
@@ -0,0 +1,18 @@
+const breakpoints = [
+  ['tablet', 768],
+  ['desktop', 1280],
+  ['desktopLg', 1440],
+];
+
+/**
+ * min-width queries for every breakpoint.
+ *
+ * e.g. mobile: '(min-width: 320px)'
+ */
+export const min = breakpoints.reduce(
+  (acc, [name, size]) => ({
+    ...acc,
+    [name]: `@media (min-width: ${size}px)`,
+  }),
+  {}
+);
diff --git a/src/styles/index.styles.js b/src/styles/index.styles.js
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { P } from './styles';
+import { min } from './breakpoints';
+
+export const SingleWorksDescription = styled(P)`
+  ${min.tablet} {
+    width: 87.5%;
+  }
+  ${min.desktop} {
+    width: 33.33%;
+  }
+`;
diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -18,3 +18,15 @@
   font-family: 'IBM Plex Mono';
   src: url('../../assets/IBMPlexMono-Regular.ttf');
 }
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-weight: 600;
+  src: url('../../assets/IBMPlexMono-SemiBold.ttf');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-weight: 700;
+  src: url('../../assets/IBMPlexMono-Bold.ttf');
+}
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1,65 +1,77 @@
-import styled from "styled-components";
-import "./styles.css";
+import styled from 'styled-components';
+import './styles.css';
+import { min } from './breakpoints';
 
 // Colors
-export const YELLOW = "#ECF955";
-export const GREEN = "#058855";
-export const PINK = "#E8A8CA";
-export const RED = "#DF4E20";
-export const BLUE = "#3C60DD";
-export const BLACK = "#170E07";
-export const CREAM = "#FFFAF2";
+export const YELLOW = '#ECF955';
+export const GREEN = '#058855';
+export const PINK = '#E8A8CA';
+export const RED = '#DF4E20';
+export const BLUE = '#3C60DD';
+export const BLACK = '#170E07';
+export const CREAM = '#FFFAF2';
 
 export const fonts = {
-  cubano: "Cubano",
-  epilogue: "Epilogue",
-  IBMPlexMono: "IBM Plex Mono",
+  cubano: 'Cubano',
+  epilogue: 'Epilogue',
+  IBMPlexMono: 'IBM Plex Mono',
 };
 
 export const H1 = styled.h1`
   font-family: ${fonts.cubano};
-  text-transform: lowercase;
-  font-size: 4.5rem;
-  line-height: 4.875rem;
-  font-style: semi-bold;
+  font-size: 3.25rem;
+  line-height: 3.625rem;
+  ${min.tablet} {
+    font-size: 4.5rem;
+    line-height: 4.875rem;
+  }
 `;
 
 export const H2 = styled.h2`
-  font-family: ${fonts.epilogue};
-  font-size: 3.2rem;
-  font-style: normal;
+  font-family: ${fonts.IBMPlexMono};
+  font-weight: 700;
+  font-size: 1.4375rem;
+  line-height: 1.875rem;
+  ${min.tablet} {
+    font-size: 1.875rem;
+    line-height: 2.125rem;
+  }
 `;
 
-export const H3 = styled.h2`
-  font-family: ${fonts.epilogue};
-  font-size: 3.2rem;
-  font-style: bold;
+export const H3 = styled.h3`
+  font-family: ${fonts.IBMPlexMono};
+  font-weight: ${(props) => (props.bold ? '600' : '400')};
+  font-size: 1.125rem;
+  line-height: 1.375rem;
 `;
 
 export const P = styled.p`
   font-family: ${fonts.epilogue};
   font-size: 1rem;
-  font-style: normal;
+  line-height: 1.375rem;
 `;
 
 export const PrimaryButton = styled.button`
-  font-family: ${fonts.epilogue};
-  padding-left: 5px;
-  padding-right: 5px;
+  padding: 0.5rem 1.5rem;
   transform: skew(15deg);
-  color: ${CREAM};
+  color: ${(props) => (props.color === YELLOW ? BLACK : CREAM)};
   border-radius: 2px;
   border: 2px solid ${(props) => (props.color ? props.color : BLUE)};
   background-color: ${(props) => (props.color ? props.color : BLUE)};
+  cursor: pointer;
   &:hover {
     background-color: transparent;
     color: ${(props) => (props.color ? props.color : BLUE)};
   }
 `;
 
 //offsets the skew from transforming the button
-export const ButtonText = styled.p`
+export const ButtonText = styled(H3)`
   transform: skew(-15deg);
+  text-transform: lowercase;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  cursor: pointer;
 `;
 
 export const SecondaryButton = styled.button`
@@ -70,9 +82,23 @@ export const SecondaryButton = styled.button`
   text-decoration: underline 2px
     ${(props) => (props.color ? props.color : BLUE)};
   border: 0px;
+  cursor: pointer;
   &:hover {
     background-color: transparent;
     text-decoration: underline 4px
       ${(props) => (props.color ? props.color : BLUE)};
   }
 `;
+
+export const MarginContainer = styled.div`
+  margin: 0 1.5rem;
+
+  ${min.tablet} {
+    margin: 0 3rem;
+  }
+
+  ${min.desktopLg} {
+    max-width: 1344px;
+    margin: auto;
+  }
+`;