From 2e157c83f10cb2f419e0fb8e735349ff027c74a1 Mon Sep 17 00:00:00 2001 From: Darryl Yeo Date: Sun, 20 Oct 2019 01:34:09 +0000 Subject: [PATCH 1/3] feature(src/): add global css and font family --- gatsby-browser.js | 1 + src/css/global.css | 5 +++++ 2 files changed, 6 insertions(+) create mode 100644 gatsby-browser.js create mode 100644 src/css/global.css diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 0000000..608d97e --- /dev/null +++ b/gatsby-browser.js @@ -0,0 +1 @@ +import './src/css/global.css'; \ No newline at end of file diff --git a/src/css/global.css b/src/css/global.css new file mode 100644 index 0000000..dcc0b9d --- /dev/null +++ b/src/css/global.css @@ -0,0 +1,5 @@ +@import 'https://fonts.googleapis.com/css?family=Proxima+Nova'; + +:root { + font-family: "Proxima Nova", sans-serif; +} \ No newline at end of file From 597a2f4950329893ccb1b1c960be1065bb5f4b90 Mon Sep 17 00:00:00 2001 From: Darryl Yeo Date: Sun, 20 Oct 2019 03:06:20 +0000 Subject: [PATCH 2/3] feature(src/components/, css/): add global font styles and Schedule component --- src/components/sections/schedule/Schedule.jsx | 121 ++++++++++++++++++ src/css/global.css | 5 +- src/pages/index.jsx | 9 +- 3 files changed, 132 insertions(+), 3 deletions(-) create mode 100644 src/components/sections/schedule/Schedule.jsx diff --git a/src/components/sections/schedule/Schedule.jsx b/src/components/sections/schedule/Schedule.jsx new file mode 100644 index 0000000..9b9e7b9 --- /dev/null +++ b/src/components/sections/schedule/Schedule.jsx @@ -0,0 +1,121 @@ +import React from 'react'; +import styled from 'styled-components'; + +const schedule = { + "Friday 1/10": [{ + event: "Attendee Check-in", + location: "MAC Lobby", + time: "4:00pm" + }, { + event: "Dinner", + location: "MAC", + time: "5:30pm" + }, { + event: "Opening Ceremony", + location: "Spanos Theater", + time: "6:00pm" + }], + "Saturday 1/11": [{ + event: "Breakfast", + location: "MAC", + time: "8:00am" + }], + "Sunday 1/12": [{ + event: "Breakfast", + location: "MAC", + time: "8:00am" + }] +// Dinner MAC +// Opening Ceremony Spanos Theater +// Hacking Begins MAC Workshop 1 Phillips Hall Workshop 2 Phillips Hall Workshop 3 Phillips Hall Late Night Snack MAC +} + +export const ScheduleSection = () => ( + + Schedule + + {Object.entries(schedule).map(([day, events]) => ( +
+ {day} + {events.map(Event)} +
+ ))} + + +); + +const Heading2 = styled.h2` + font-size: 2em; + font-weight: 900; + margin-bottom: 1.5rem; +`; + +const Heading3 = styled.h3` + font-size: 1.43em; + font-weight: 900; + margin-bottom: 1rem; +`; + +const Event = (({event, location, time}) => ( + +
+ {event} + {time} +
+
+ {location} +
+ +)); + +const ScheduleSectionStyle = styled.section` + display: flex; + flex-direction: column; +`; + +const Schedule = styled.div` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + grid-gap: 3rem; +`; + +/*const Schedule = styled.div` + display: flex; + margin: -1rem; + flex-wrap: wrap; + + & > * { + padding: 1rem; + flex: 1 10rem; + + display: flex; + flex-direction: column; + } +`;*/ + +const EventStyleWrapper = styled.div` + display: flex; + flex-direction: column; + + > * { + display: flex; + justify-content: space-between; + } + + > * + * { + margin-bottom: 0.5rem; + } +`; + +const EventName = styled.span` + font-weight: 700; +`; + +const EventTime = styled.span` + font-weight: 700; + opacity: 0.5; +`; + +const EventLocation = styled.span` + +`; \ No newline at end of file diff --git a/src/css/global.css b/src/css/global.css index dcc0b9d..5a04424 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -1,5 +1,8 @@ -@import 'https://fonts.googleapis.com/css?family=Proxima+Nova'; +@import 'https://fonts.googleapis.com/css?family=Proxima+Nova:300,400,500,600,900'; +* { + margin: 0; +} :root { font-family: "Proxima Nova", sans-serif; } \ No newline at end of file diff --git a/src/pages/index.jsx b/src/pages/index.jsx index abb28a0..c531617 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,14 +1,19 @@ import React from 'react'; import styled from 'styled-components'; +import { ScheduleSection } from '../components/sections/schedule/Schedule'; + const IndexPage = () => ( -

Hello World

+ + {/* + +