From 78db15fe70a52d738604cb20fd9c5bb25c7f9b74 Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Thu, 22 Jun 2023 20:17:56 -0700 Subject: [PATCH 1/4] Update README --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index c87e042..87384ee 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +# SPACE Career Fair Website + +[space.acmucsd.com](https://space.acmucsd.com) + This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). ## Getting Started From 112f6af7d244206b974838e13e6238c62df8014c Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Tue, 27 Jun 2023 16:41:44 -0700 Subject: [PATCH 2/4] Add support for ultrawide screens --- .../CompaniesGrid/style.module.scss | 4 +- src/sections/About/style.module.scss | 2 + src/sections/Companies/style.module.scss | 4 +- src/sections/FAQ/style.module.scss | 7 +- src/sections/Hero/style.module.scss | 4 +- src/styles/reset.scss | 72 +++++++++---------- 6 files changed, 51 insertions(+), 42 deletions(-) diff --git a/src/components/CompaniesGrid/style.module.scss b/src/components/CompaniesGrid/style.module.scss index 517e483..ddfbf93 100644 --- a/src/components/CompaniesGrid/style.module.scss +++ b/src/components/CompaniesGrid/style.module.scss @@ -1,7 +1,9 @@ -@use "src/styles/vars.scss" as vars; +@use 'src/styles/vars.scss' as vars; .container { display: grid; + max-width: 1440px; + margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin-top: 4rem; row-gap: 1.7rem; diff --git a/src/sections/About/style.module.scss b/src/sections/About/style.module.scss index 5375142..6b2d784 100644 --- a/src/sections/About/style.module.scss +++ b/src/sections/About/style.module.scss @@ -8,5 +8,7 @@ .content { position: relative; z-index: 100; + max-width: 1440px; + margin: 0 auto; } } diff --git a/src/sections/Companies/style.module.scss b/src/sections/Companies/style.module.scss index 8c28127..2972c87 100644 --- a/src/sections/Companies/style.module.scss +++ b/src/sections/Companies/style.module.scss @@ -1,4 +1,4 @@ -@use "src/styles/vars.scss" as vars; +@use 'src/styles/vars.scss' as vars; .container { background: linear-gradient(180deg, vars.$pink 30%, vars.$blue 160%); @@ -11,5 +11,7 @@ font-weight: 600; color: vars.$white; text-align: center; + max-width: 1440px; + margin: 0 auto; } } diff --git a/src/sections/FAQ/style.module.scss b/src/sections/FAQ/style.module.scss index 7a0d6b3..1f9b039 100644 --- a/src/sections/FAQ/style.module.scss +++ b/src/sections/FAQ/style.module.scss @@ -1,5 +1,5 @@ -@use "src/styles/vars.scss" as vars; -@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap"); +@use 'src/styles/vars.scss' as vars; +@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap'); .background { background-image: linear-gradient(180deg, vars.$blue 15%, vars.$pink 100%); @@ -8,8 +8,9 @@ } .faqContainer { + max-width: 1440px; + margin: 0 auto; color: white; - margin: auto; width: 65%; padding-top: 10px; padding-bottom: 50px; diff --git a/src/sections/Hero/style.module.scss b/src/sections/Hero/style.module.scss index 1bcb939..158ee64 100644 --- a/src/sections/Hero/style.module.scss +++ b/src/sections/Hero/style.module.scss @@ -1,4 +1,4 @@ -@use "src/styles/vars.scss" as vars; +@use 'src/styles/vars.scss' as vars; .heroContainer { background-image: linear-gradient(180deg, vars.$blue 15%, vars.$pink 98%); @@ -7,6 +7,7 @@ .heroTitle { position: absolute; + width: 100%; top: 18%; z-index: 1; } @@ -40,6 +41,7 @@ margin-top: 11vw; padding: 0 2rem; z-index: 2; + text-shadow: 0 0 4px vars.$black; .heroSubtitle { line-height: 100%; diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 53d68ae..4d87ac5 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -1,7 +1,7 @@ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; - font: 112.5%/1.45em "DM Sans", sans-serif; + font: 112.5%/1.45em 'DM Sans', sans-serif; box-sizing: border-box; overflow-y: scroll; scroll-behavior: smooth; @@ -16,14 +16,14 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: hsla(0, 0%, 0%, 0.8); - font-family: "DM Sans", sans-serif; + font-family: 'DM Sans', sans-serif; font-weight: normal; word-wrap: break-word; font-kerning: normal; - -moz-font-feature-settings: "kern", "liga", "clig", "calt"; - -ms-font-feature-settings: "kern", "liga", "clig", "calt"; - -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; - font-feature-settings: "kern", "liga", "clig", "calt"; + -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; + font-feature-settings: 'kern', 'liga', 'clig', 'calt'; } article, aside, @@ -87,7 +87,7 @@ h1 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "DM Sans", sans-serif; + font-family: 'DM Sans', sans-serif; font-weight: bold; text-rendering: optimizeLegibility; font-size: 2.25rem; @@ -179,22 +179,22 @@ button, select { text-transform: none; } -[type="reset"], -[type="submit"], +[type='reset'], +[type='submit'], button, -html [type="button"] { +html [type='button'] { -webkit-appearance: button; } -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring, +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } @@ -221,21 +221,21 @@ legend { textarea { overflow: auto; } -[type="checkbox"], -[type="radio"] { +[type='checkbox'], +[type='radio'] { box-sizing: border-box; padding: 0; } -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { height: auto; } -[type="search"] { +[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-input-placeholder { @@ -265,7 +265,7 @@ h2 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "DM Sans", sans-serif; + font-family: 'DM Sans', sans-serif; font-weight: bold; text-rendering: optimizeLegibility; font-size: 1.62671rem; @@ -281,7 +281,7 @@ h3 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "DM Sans", sans-serif; + font-family: 'DM Sans', sans-serif; font-weight: bold; text-rendering: optimizeLegibility; font-size: 1.38316rem; @@ -297,7 +297,7 @@ h4 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "DM Sans", sans-serif; + font-family: 'DM Sans', sans-serif; font-weight: bold; text-rendering: optimizeLegibility; font-size: 1rem; @@ -313,7 +313,7 @@ h5 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "DM Sans", sans-serif; + font-family: 'DM Sans', sans-serif; font-weight: bold; text-rendering: optimizeLegibility; font-size: 0.85028rem; @@ -329,7 +329,7 @@ h6 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "DM Sans", sans-serif; + font-family: 'DM Sans', sans-serif; font-weight: bold; text-rendering: optimizeLegibility; font-size: 0.78405rem; @@ -546,10 +546,10 @@ td, th { text-align: left; border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); - font-feature-settings: "tnum"; - -moz-font-feature-settings: "tnum"; - -ms-font-feature-settings: "tnum"; - -webkit-font-feature-settings: "tnum"; + font-feature-settings: 'tnum'; + -moz-font-feature-settings: 'tnum'; + -ms-font-feature-settings: 'tnum'; + -webkit-font-feature-settings: 'tnum'; padding-left: 0.96667rem; padding-right: 0.96667rem; padding-top: 0.725rem; @@ -567,8 +567,8 @@ tt, code { background-color: hsla(0, 0%, 0%, 0.04); border-radius: 3px; - font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono", - "Liberation Mono", Menlo, Courier, monospace; + font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono', 'Liberation Mono', Menlo, Courier, + monospace; padding: 0; padding-top: 0.2em; padding-bottom: 0.2em; @@ -582,13 +582,13 @@ code:after, tt:before, tt:after { letter-spacing: -0.2em; - content: " "; + content: ' '; } pre code:before, pre code:after, pre tt:before, pre tt:after { - content: ""; + content: ''; } @media only screen and (max-width: 480px) { html { From 7f34ef006de3d552db94a0bcbdce953d347c0377 Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Tue, 27 Jun 2023 20:28:01 -0700 Subject: [PATCH 3/4] Update button to say Student Registration --- src/sections/Hero/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Hero/index.tsx b/src/sections/Hero/index.tsx index 54aa373..2a96561 100644 --- a/src/sections/Hero/index.tsx +++ b/src/sections/Hero/index.tsx @@ -41,7 +41,7 @@ const Hero: React.FC = () => { target="_blank" rel="noopener noreferrer" > - Register Today! + Student Registration From 9b0ce42a2b80acc13ee72eaebf6a06bcf6ce488e Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Wed, 28 Jun 2023 19:38:28 -0700 Subject: [PATCH 4/4] Add company button --- src/sections/Hero/index.tsx | 11 ++++++++++- src/sections/Hero/style.module.scss | 16 +++++----------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/sections/Hero/index.tsx b/src/sections/Hero/index.tsx index 2a96561..fd12efa 100644 --- a/src/sections/Hero/index.tsx +++ b/src/sections/Hero/index.tsx @@ -35,13 +35,22 @@ const Hero: React.FC = () => {
Price Center West Ballroom
October 17th, 2023 (10am to 4pm)
+
Register Today!
- Student Registration + Students + + + Companies
diff --git a/src/sections/Hero/style.module.scss b/src/sections/Hero/style.module.scss index 158ee64..2301b50 100644 --- a/src/sections/Hero/style.module.scss +++ b/src/sections/Hero/style.module.scss @@ -8,7 +8,7 @@ .heroTitle { position: absolute; width: 100%; - top: 18%; + top: 15%; z-index: 1; } @@ -38,19 +38,11 @@ position: absolute; height: 100vh; width: 100vw; - margin-top: 11vw; + margin-top: 14vw; padding: 0 2rem; z-index: 2; text-shadow: 0 0 4px vars.$black; - .heroSubtitle { - line-height: 100%; - margin-top: 6rem; - color: vars.$white; - font-size: 40px; - font-weight: bolder; - } - .heroInfo { color: vars.$white; font-size: 20px; @@ -58,7 +50,7 @@ .heroSubtitle { line-height: 100%; - margin-top: 5vw; + margin-top: max(2rem, 2vw); color: vars.$white; font-size: 40px; font-weight: bolder; @@ -80,6 +72,8 @@ border-radius: 9.86667px; display: inline-block; margin-top: 1rem; + margin-left: 0.5rem; + margin-right: 0.5rem; font-size: 1.5rem; transition: 0.3s ease;