diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx index cd876426..12bdbece 100644 --- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx @@ -13,9 +13,7 @@ const Splash = memo(() => {
-
- May 17th 5:00 PM - May 19th 6:00 PM -
+
May 17th - May 19th
{ Apply as Designer
+
+ + Apply as Mentor + +
+ {/*
+ + Apply as Volunteer + +
*/}
diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss index 7be4e952..22b782b5 100644 --- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss +++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss @@ -42,29 +42,39 @@ text-align: center; position: absolute; place-self: center; - bottom: 15%; + bottom: 5%; z-index: 110; + @media screen and (min-width: 851px) { + bottom: 15%; + } + .time { font-size: min(7vw, 40px); grid-column: 1/3; font-family: "Gluten", cursive; font-weight: 600; - margin: 0 2rem 24px; + margin: 0 2rem 1rem; } .wrapper { display: grid; - grid-template-columns: 1fr; - column-gap: 40px; + grid-template-columns: repeat( + 2, + 1fr + ); // TODO: Turn into 3 columns when volunteer form is ready + column-gap: 20px; row-gap: 10px; max-width: 800px; margin: 0 auto; + width: fit-content; + + @media screen and (max-width: 850px) { + grid-template-columns: repeat(1, 1fr); - @media screen and (max-width: 800px) { - grid-template-columns: 1fr; .border { padding: 4px !important; + min-width: 100%; } .app { border-radius: 16px !important; @@ -121,7 +131,6 @@ .decoration { position: absolute; - pointer-events: none; max-width: 30%;