Ultrawide screens (#16)

Author: alexzhang1618

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

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;

src/sections/About/style.module.scss

@@ -8,5 +8,7 @@
   .content {
     position: relative;
     z-index: 100;
+    max-width: 1440px;
+    margin: 0 auto;
   }
 }

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;
   }
 }

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;

src/sections/Hero/index.tsx

@@ -41,7 +41,7 @@ const Hero: React.FC = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              Register Today!
+              Student Registration
             </a>
           </div>
         </div>

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%;

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 {