diff --git a/.gitignore b/.gitignore index a547bf3..49ef0bd 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ dist-ssr # Editor directories and files .vscode/* !.vscode/extensions.json +!.vscode/settings.json .idea .DS_Store *.suo diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3c6b1b4 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,12 @@ +{ + "[javascript]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint" + }, + "[javascriptreact]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint" + }, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "eslint.validate": ["javascript"] +} diff --git a/package.json b/package.json index 5350087..7308bd7 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "preview": "vite preview" }, "dependencies": { + "date-fns": "^2.29.1", "firebase": "9.8.3", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/src/components/AppContainer/AppContainer.css b/src/components/AppContainer/AppContainer.css index 9379a30..8281f3a 100644 --- a/src/components/AppContainer/AppContainer.css +++ b/src/components/AppContainer/AppContainer.css @@ -1,5 +1,4 @@ div { width: 100vw; height: 100vh; - background-color: red; } diff --git a/src/components/EventListing/EventListing.css b/src/components/EventListing/EventListing.css new file mode 100644 index 0000000..f1a2fac --- /dev/null +++ b/src/components/EventListing/EventListing.css @@ -0,0 +1,100 @@ +.event-listing { + display: flex; + flex-direction: row; + align-items: center; + padding: 0px; + + width: 100%; + max-width: 873px; + height: 136px; + + background: #ffffff; + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12); + border-radius: 5px; + + overflow: hidden; + align-self: stretch; +} + +.event-listing__date-snippet { + width: 93px; + height: 136px; + + background: #20374a; + position: relative; + + flex: none; + align-self: stretch; + flex-grow: 0; +} + +.event-listing__date-snippet-text { + position: absolute; + left: 0%; + right: 0%; + top: 0%; + bottom: 0%; + + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 20px; + line-height: 28px; + /* or 140% */ + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + color: #ffffff; +} + +.event-listing__date-snippet-day { + font-size: 28px; +} + +.event-listing__event-content { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 10px; + gap: 10px; + + height: 100%; + + box-sizing: border-box; + + flex: 1; +} + +.event-listing__title, +.event-listing__subtitle, +.event-listing__location { + font-family: 'Lato'; + font-style: normal; + font-weight: 400; + flex: none; + flex-grow: 0; +} + +.event-listing__title { + font-size: 32px; + line-height: 38px; + color: #000000; + order: 0; +} + +.event-listing__subtitle { + font-size: 24px; + line-height: 29px; + color: #777777; + order: 1; +} + +.event-listing__location { + font-size: 24px; + line-height: 29px; + color: #4d4d4d; + order: 2; +} diff --git a/src/components/EventListing/EventListing.jsx b/src/components/EventListing/EventListing.jsx new file mode 100644 index 0000000..fc3c2f7 --- /dev/null +++ b/src/components/EventListing/EventListing.jsx @@ -0,0 +1,31 @@ +import React from "react"; +import PropTypes from "prop-types"; +import "./EventListing.css"; +import { format } from "date-fns"; + +export const EventListing = ({title, start, end, location}) => { + return ( +
+
+

+ {format(start, "LLL")} +

{format(start, "d")}

+

+
+
+

{title}

+

+ {format(start, "eee, LLL d")} to {format(end, "eee, LLL d")} +

+

{location}

+
+
+ ); +}; + +EventListing.propTypes = { + title: PropTypes.string.isRequired, + start: PropTypes.instanceOf(Date).isRequired, + end: PropTypes.instanceOf(Date).isRequired, + location: PropTypes.string.isRequired, +}; \ No newline at end of file diff --git a/src/components/EventListing/index.jsx b/src/components/EventListing/index.jsx new file mode 100644 index 0000000..9dd072d --- /dev/null +++ b/src/components/EventListing/index.jsx @@ -0,0 +1 @@ +export { PageContainer } from "./PageContainer"; diff --git a/src/components/PageContainer/PageContainer.css b/src/components/PageContainer/PageContainer.css index 81ebd24..77914e7 100644 --- a/src/components/PageContainer/PageContainer.css +++ b/src/components/PageContainer/PageContainer.css @@ -1,5 +1,8 @@ -div { +.page-container { width: 100%; height: 100%; - background-color: blue; + padding: 10px; + /* border-box makes it so that padding does not affect the width + of the element */ + box-sizing: border-box; } diff --git a/src/components/PageContainer/PageContainer.jsx b/src/components/PageContainer/PageContainer.jsx index 88b9d02..4007c95 100644 --- a/src/components/PageContainer/PageContainer.jsx +++ b/src/components/PageContainer/PageContainer.jsx @@ -3,9 +3,9 @@ import PropTypes from "prop-types"; import "./PageContainer.css"; export const PageContainer = ({children}) => { - return (
{children}
); + return (
{children}
); }; PageContainer.propTypes = { - children: PropTypes.any + children: PropTypes.node }; diff --git a/src/main.css b/src/main.css index fb4fbd9..eb0507a 100644 --- a/src/main.css +++ b/src/main.css @@ -1,8 +1,147 @@ -body { +/* + Google fonts script for 'Inter - Bold 700' and 'Lato - Regular 400' + */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Lato&display=swap'); + +/* http://meyerweb.com/eric/tools/css/reset/ + v5.0.1 | 20191019 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +menu, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +main, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { margin: 0; padding: 0; - font-size: 16px; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section { + display: block; +} +/* HTML5 hidden-attribute fix for newer browsers */ +*[hidden] { + display: none; +} +body { + line-height: 1; +} +menu, +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; diff --git a/src/pages/LandingPage/AboutSection.css b/src/pages/LandingPage/AboutSection.css index 50aba13..e69de29 100644 --- a/src/pages/LandingPage/AboutSection.css +++ b/src/pages/LandingPage/AboutSection.css @@ -1,12 +0,0 @@ -body { - margin: 0; - padding: 0; - - font-size: 16px; - - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/pages/LandingPage/ContactSection.css b/src/pages/LandingPage/ContactSection.css index 50aba13..e69de29 100644 --- a/src/pages/LandingPage/ContactSection.css +++ b/src/pages/LandingPage/ContactSection.css @@ -1,12 +0,0 @@ -body { - margin: 0; - padding: 0; - - font-size: 16px; - - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/pages/LandingPage/EventsSection.css b/src/pages/LandingPage/EventsSection.css new file mode 100644 index 0000000..04cfa24 --- /dev/null +++ b/src/pages/LandingPage/EventsSection.css @@ -0,0 +1,17 @@ +.events { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 32px 0px; + gap: 27px; +} + +.events__heading { + font-family: 'Lato'; + font-style: normal; + font-weight: 400; + font-size: 50px; + line-height: 60px; + + color: #000000; +} diff --git a/src/pages/LandingPage/EventsSection.jsx b/src/pages/LandingPage/EventsSection.jsx new file mode 100644 index 0000000..a2cf2ed --- /dev/null +++ b/src/pages/LandingPage/EventsSection.jsx @@ -0,0 +1,41 @@ +import React from "react"; +import { EventListing } from "../../components/EventListing/EventListing"; +import "./EventsSection.css"; + +const EVENTS = [ + { + title: "Hawkhacks 2022", + start: "2022-08-13T10:00:00.000Z", + end: "2022-08-15T18:00:00.000Z", + location: "Online", + }, + { + title: "CCubed Conference 2022", + start: "2022-08-13T10:00:00.000Z", + end: "2022-08-15T18:00:00.000Z", + location: "Online", + }, + { + title: "League of Legends Tournament", + start: "2022-08-13T10:00:00.000Z", + end: "2022-08-15T18:00:00.000Z", + location: "Online", + }, +]; + +export const EventsSection = () => { + return ( +
+

Past Events

+ {EVENTS.map((ev, idx) => + + )} +
+ ); +}; diff --git a/src/pages/LandingPage/HeroSection.css b/src/pages/LandingPage/HeroSection.css index 50aba13..e69de29 100644 --- a/src/pages/LandingPage/HeroSection.css +++ b/src/pages/LandingPage/HeroSection.css @@ -1,12 +0,0 @@ -body { - margin: 0; - padding: 0; - - font-size: 16px; - - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/pages/LandingPage/LandingPage.css b/src/pages/LandingPage/LandingPage.css index 50aba13..e69de29 100644 --- a/src/pages/LandingPage/LandingPage.css +++ b/src/pages/LandingPage/LandingPage.css @@ -1,12 +0,0 @@ -body { - margin: 0; - padding: 0; - - font-size: 16px; - - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/pages/LandingPage/LandingPage.jsx b/src/pages/LandingPage/LandingPage.jsx index dffa9c2..b2bc359 100644 --- a/src/pages/LandingPage/LandingPage.jsx +++ b/src/pages/LandingPage/LandingPage.jsx @@ -2,7 +2,7 @@ import React from "react"; import "./LandingPage.css"; import { PageContainer } from "@components"; -import { HeroSection, AboutSection, ContactSection } from "@pages/LandingPage"; +import { HeroSection, AboutSection, ContactSection, EventsSection } from "@pages/LandingPage"; export const LandingPage = () => { return ( @@ -10,6 +10,7 @@ export const LandingPage = () => { + ); }; diff --git a/src/pages/LandingPage/index.jsx b/src/pages/LandingPage/index.jsx index 078a617..01c4729 100644 --- a/src/pages/LandingPage/index.jsx +++ b/src/pages/LandingPage/index.jsx @@ -3,3 +3,4 @@ export { LandingPage } from "./LandingPage"; export { HeroSection } from "./HeroSection"; export { AboutSection } from "./AboutSection"; export { ContactSection } from "./ContactSection"; +export { EventsSection } from "./EventsSection"; diff --git a/yarn.lock b/yarn.lock index dd54d7a..c817c60 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1056,6 +1056,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2" integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA== +date-fns@^2.29.1: + version "2.29.1" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.1.tgz#9667c2615525e552b5135a3116b95b1961456e60" + integrity sha512-dlLD5rKaKxpFdnjrs+5azHDFOPEu4ANy/LTh04A1DTzMM7qoajmKCBc8pkKRFT41CNzw+4gQh79X5C+Jq27HAw== + debug@^4.1.0, debug@^4.1.1, debug@^4.3.2: version "4.3.4" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"