Header Nav Component

components/headerNav/index.tsx

@@ -0,0 +1,80 @@
+import { ComponentWrapper } from '../../styles/containers'
+import { colors } from '../../styles/colors'
+import { breakpoints } from "../../styles/breakpoints";
+import Link from 'next/link'
+import styled from 'styled-components'
+
+const HeaderWrapper = styled(ComponentWrapper)`
+  height: 3.9375vw;
+  min-height: 45px;
+  max-height: 7vh;
+  width: 94vw;
+  margin: auto;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const ListContainer = styled.ul`
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  justify-content: flex-end;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+`;
+const ListItem = styled.li`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: ${colors.fadedPrimaryBlue};
+    cursor: pointer
+  }
+`;
+const Anchor = styled.a`
+  display: flex;
+  color: ${colors.primaryBlue};
+  text-align: center;
+  padding: 0 20px;
+  ${breakpoints("padding", "", [
+  { 1200: "0 16px" },
+  { 800: "0 14px" },
+  { 600: "0 12px" },
+  { 450: "0 10px" }
+])};
+  font-size: 1rem;
+  text-decoration: none;
+`;
+const Logo = styled.img`
+  height: 2.8125vw;
+  margin-top: 0.46875vw;
+  ${breakpoints("height", "px", [
+  { 1200: 35 },
+  { 800: 30 },
+])};
+  ${breakpoints("margin-top", "px", [
+  { 1200: 5 },
+  { 800: 7.5 },
+])};
+  object-fit: contain;
+
+  &:hover {
+    cursor: pointer
+  }
+  `;
+
+const HeaderNav = () => {
+  return (
+    <HeaderWrapper>
+      <div style={{ justifySelf: "flex-start", alignItems: "center", justifyContent: "center" }}><Link href="/"><Logo src="/cimun-logo.png" /></Link></div>
+      <ListContainer>
+        <ListItem><Link href="/"><Anchor>Home</Anchor></Link></ListItem>
+      </ListContainer>
+    </HeaderWrapper>
+  )
+}
+
+export default HeaderNav;

components/jumbotron/index.tsx

@@ -4,7 +4,7 @@ import styles from './Jumbotron.module.css'
 
 const Jumbotron = () => {
   return (
-    <ComponentWrapper height="48.375vw" minHeight="40.5vw" maxHeight="86vh" justify="flex-end" style={{
+    <ComponentWrapper height="48.375vw" minHeight="40.5vw" maxHeight="86vh" justify="flex-end" margins="0" style={{
       backgroundImage: "url(/jumbotron-bg.svg)", backgroundPosition: 'bottom', backgroundSize: 'cover',
       backgroundRepeat: 'no-repeat'
     }}>

pages/about/index.tsx

@@ -0,0 +1,24 @@
+import { Display } from '../../styles/typography'
+import { Wrapper, ComponentWrapper } from '../../styles/containers'
+import HeaderNav from '../../components/headerNav'
+
+const About = () => {
+  return (
+    <Wrapper>
+      <HeaderNav />
+      <ComponentWrapper height="48.375vw" minHeight="40.5vw" maxHeight="86vh" justify="flex-end" margins="0" style={{
+        backgroundImage: "url(/jumbotron-bg.svg)", backgroundPosition: 'bottom', backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat'
+      }}>
+        <Display margins="0 0 0 -3vw">
+          About
+        </Display>
+        <Display self="flex-end" margins="0 3vw -3vw 0">
+          CIMUN
+        </Display>
+      </ComponentWrapper>
+    </Wrapper>
+  )
+}
+
+export default About;

pages/conference/index.tsx

@@ -0,0 +1,24 @@
+import { Display } from '../../styles/typography'
+import { Wrapper, ComponentWrapper } from '../../styles/containers'
+import HeaderNav from '../../components/headerNav'
+
+const Conference = () => {
+  return (
+    <Wrapper>
+      <HeaderNav />
+      <ComponentWrapper height="48.375vw" minHeight="40.5vw" maxHeight="86vh" justify="flex-end" margins="0" style={{
+        backgroundImage: "url(/jumbotron-bg.svg)", backgroundPosition: 'bottom', backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat'
+      }}>
+        <Display margins="0 0 0 -3vw">
+          CIMUN
+        </Display>
+        <Display self="flex-end" margins="0 3vw -3vw 0" size="16vw">
+          Conference
+        </Display>
+      </ComponentWrapper>
+    </Wrapper>
+  )
+}
+
+export default Conference;

pages/index.tsx

@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import Image from 'next/image'
+import HeaderNav from '../components/headerNav'
 import Jumbotron from '../components/jumbotron'
 import styles from '../styles/Home.module.css'
 import { Wrapper, ComponentWrapper } from '../styles/containers'
@@ -9,15 +10,17 @@ export default function Home() {
   return (
     <Wrapper>
       <Head>
-        <title>Create Next App</title>
+        <title>CIMUN XVIII</title>
         <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
         <link rel="preconnect" href="https://fonts.gstatic.com" />
         <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@900&display=swap" rel="stylesheet" />
         <link href="https://fonts.googleapis.com/css2?family=Alegreya:wght@600&display=swap" rel="stylesheet" />
         <link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500&family=Alegreya:wght@600&display=swap" rel="stylesheet" />
         <link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500&family=Alegreya:wght@600&family=Source+Sans+Pro&display=swap" rel="stylesheet" />
       </Head>
+      <HeaderNav />
       <Jumbotron />
       <ComponentWrapper>
         <Header self="center">

styles/breakpoints.js

@@ -0,0 +1,22 @@
+import { css } from "styled-components";
+
+export const breakpoints = (
+  cssProp = "padding", // the CSS property to apply to the breakpoints
+  cssPropUnits = "px", // the units of the CSS property (can set equal to "" and apply units to values directly)
+  values = [], // array of objects, e.g. [{ 800: 60 }, ...] <-- 800 (key) = screen breakpoint, 60 (value) = CSS prop breakpoint
+  mediaQueryType = "max-width" // media query breakpoint type, i.e.: max-width, min-width, max-height, min-height
+) => {
+  const breakpointProps = values.reduce((mediaQueries, value) => {
+    const [screenBreakpoint, cssPropBreakpoint] = [
+      Object.keys(value)[0],
+      Object.values(value)[0],
+    ];
+    return (mediaQueries += `
+    @media screen and (${mediaQueryType}: ${screenBreakpoint}px) {
+      ${cssProp}: ${cssPropBreakpoint}${cssPropUnits};
+    }
+    `);
+  }, "");
+
+  return css([breakpointProps]);
+};

styles/colors.ts

@@ -1,7 +1,8 @@
 export const colors = {
-  primaryBlue: '134C72',
-  accentBlue: '009EDB',
-  ltGray: 'E0E0E2',
-  dkGray: '4F4E4F',
-  accentRed: 'CC393E',
+  primaryBlue: '#134C72',
+  fadedPrimaryBlue: '#134C7210',
+  accentBlue: '#009EDB',
+  ltGray: '#E0E0E2',
+  dkGray: '#4F4E4F',
+  accentRed: '#CC393E',
 };

styles/containers.ts

@@ -1,6 +1,8 @@
 import { colors } from "./colors";
 import styled from 'styled-components'
 
+/* responsive full screen height:width ratio = 9/16 = .5625  */
+
 interface ContainerType {
   color?: string; ///Passing Optional Props
   margins?: string;
@@ -52,7 +54,3 @@ export const ComponentWrapper = styled.div<ContainerType>`
   align-items: ${(props: ContainerType) =>
       props.align ? props.align : "center"};
 `;
-
-// max-height: 86vh;
-//   min-height: 40.5vw;
-//   height: 48.375vw; /* height:width ratio = 9/16 = .5625  */

yarn.lock

@@ -9825,6 +9825,11 @@ typescript-plugin-styled-components@^1.6.0:
   resolved "https://registry.yarnpkg.com/typescript-plugin-styled-components/-/typescript-plugin-styled-components-1.6.0.tgz#6ee1d2b079490ad101055112fda1974d761f2e96"
   integrity sha512-cUCbOuY0iNr1JjPYC5MqCiABrfv2ouLift+7gi4vS0gBPQySUT006wHCjwzynMfU5LGMQaZqpssAgzRRjt30Ng==
 
+typescript@3.9.3:
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.3.tgz#d3ac8883a97c26139e42df5e93eeece33d610b8a"
+  integrity sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==
+
 typescript@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"