diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/background/dark_graph.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/background/dark_graph.svg new file mode 100644 index 00000000..8cc5b6a3 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/background/dark_graph.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/background/dark_splash.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/background/dark_splash.svg new file mode 100644 index 00000000..1839eb48 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/background/dark_splash.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/background/light_graph.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/background/light_graph.svg new file mode 100644 index 00000000..97eab9b3 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/background/light_graph.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/pages/Designathons/Designathon24/components/About/About.module.scss b/src/app/pages/Designathons/Designathon24/components/About/About.module.scss index 0136fbff..c5b34465 100644 --- a/src/app/pages/Designathons/Designathon24/components/About/About.module.scss +++ b/src/app/pages/Designathons/Designathon24/components/About/About.module.scss @@ -8,10 +8,20 @@ padding: 3rem 1rem 5rem; font-size: 0.75em; - & .aboutHeading { + .heading { + position: relative; color: var(--des24-hot-pink); - font-size: 50px; + font-size: 3rem; font-weight: 700; + margin-bottom: 4rem; + + @media screen and (min-width: 640px) { + font-size: 5rem; + } + + @media screen and (min-width: 1280px) { + font-size: 6rem; + } } .airplane { @@ -73,13 +83,9 @@ .tr { position: absolute; - max-width: 200px; + max-width: 50%; top: 0px; right: 0px; - - @media screen and (min-width: 640px) { - max-width: 500px; - } } .gradient { diff --git a/src/app/pages/Designathons/Designathon24/components/About/index.jsx b/src/app/pages/Designathons/Designathon24/components/About/index.jsx index 5a10a51a..2fa46275 100644 --- a/src/app/pages/Designathons/Designathon24/components/About/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/About/index.jsx @@ -1,16 +1,21 @@ import cn from "./About.module.scss"; import clsx from "clsx"; +import Notecard from "../Notecard/Notecard"; + import airplane from "../../assets/graphics/about/airplane.svg"; import paperclip from "../../assets/graphics/about/paperclip.svg"; import tr_gradient from "../../assets/graphics/about/tr_gradient.svg"; import bl_blob_stars from "../../assets/graphics/about/bl_blob_stars.svg"; import tr_stars from "../../assets/graphics/about/tr_stars.svg"; -import Notecard from "../Notecard/Notecard"; + +import GridBackground from "../Backgrounds/GridBackground"; const About = () => { return (
+ + tr_gradient { -

About

+

About

+

@@ -48,12 +54,13 @@ const About = () => {

- + +
); }; diff --git a/src/app/pages/Designathons/Designathon24/components/Backgrounds/GridBackground.jsx b/src/app/pages/Designathons/Designathon24/components/Backgrounds/GridBackground.jsx new file mode 100644 index 00000000..a33c1bec --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Backgrounds/GridBackground.jsx @@ -0,0 +1,47 @@ +import React from "react"; + +import cn from "./GridBackground.module.scss"; +import clsx from "clsx"; + +import light_graph from "../../assets/graphics/background/light_graph.svg"; +import dark_graph from "../../assets/graphics/background/dark_graph.svg"; + +/** + * @typedef {Object} Positions + * @property {number} [top] + * @property {number} [left] + * @property {number} [right] + * @property {number} [bottom] + */ + +/** + * @param {Positions[]} positions + * @param {boolean} isLight + * @returns {JSX.Element} + */ +const GridBackground = ({ positions, isLight }) => { + return ( +
+ {positions.map((position) => { + const { top, left, right, bottom } = position; + + return ( + + ); + })} +
+ ); +}; + +export default GridBackground; diff --git a/src/app/pages/Designathons/Designathon24/components/Backgrounds/GridBackground.module.scss b/src/app/pages/Designathons/Designathon24/components/Backgrounds/GridBackground.module.scss new file mode 100644 index 00000000..70dac444 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Backgrounds/GridBackground.module.scss @@ -0,0 +1,16 @@ +.graph { + position: absolute; + object-fit: cover; + pointer-events: none; + + height: 80%; + max-height: calc(100vh - 88px); // 88px is the navbar +} + +.light { + width: 60%; +} + +.dark { + width: 40%; +} diff --git a/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss b/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss index 6373e723..72e3cd95 100644 --- a/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss +++ b/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss @@ -10,6 +10,7 @@ } .heading { + position: relative; color: var(--des24-hot-pink); font-size: 3rem; font-weight: 700; diff --git a/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx b/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx index 5d161a42..d3b314ae 100644 --- a/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx @@ -3,11 +3,17 @@ import cn from "./FAQ.module.scss"; import { useCallback, useState } from "react"; import down_carat from "../../assets/graphics/faq/down_carat.svg"; +import GridBackground from "../Backgrounds/GridBackground"; const FAQ = () => { return (
+ +

FAQ

{/*
@@ -23,7 +29,6 @@ const FAQ = () => { for more help!
*/} -
{[ { diff --git a/src/app/pages/Designathons/Designathon24/components/Polaroid/Polaroid.module.scss b/src/app/pages/Designathons/Designathon24/components/Polaroid/Polaroid.module.scss index a3e2e909..de0e8c92 100644 --- a/src/app/pages/Designathons/Designathon24/components/Polaroid/Polaroid.module.scss +++ b/src/app/pages/Designathons/Designathon24/components/Polaroid/Polaroid.module.scss @@ -5,6 +5,7 @@ transition: 0.1s ease-in; } + position: relative; height: fit-content; } @@ -39,6 +40,8 @@ .polaroidName { font-size: 1rem; font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; padding-bottom: 8px; diff --git a/src/app/pages/Designathons/Designathon24/components/Rules/Rules.jsx b/src/app/pages/Designathons/Designathon24/components/Rules/Rules.jsx index 92e0502e..c1f61f69 100644 --- a/src/app/pages/Designathons/Designathon24/components/Rules/Rules.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Rules/Rules.jsx @@ -8,6 +8,7 @@ import cream from "../../assets/graphics/rules/cream.svg"; import peach_cream from "../../assets/graphics/rules/peach_cream.svg"; import pink from "../../assets/graphics/rules/pink.svg"; import hearts from "../../assets/graphics/rules/hearts.svg"; +import GridBackground from "../Backgrounds/GridBackground"; const BACKGROUND_MAP = { 0: cream_hot_pink, @@ -21,6 +22,8 @@ const BACKGROUND_MAP = { export const Rules = () => (
+ +
{
{[ { label: "About", id: "s-about" }, - { label: "Judges & Speakers", id: "s-people" }, + { label: "Judges & Speakers", id: "s-speakers" }, { label: "Rules", id: "s-rules" }, { label: "Prizes", id: "s-prizes" }, { label: "Schedule", id: "s-schedule" }, diff --git a/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.jsx b/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.jsx index 63b353c9..70ba1299 100644 --- a/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.jsx @@ -13,10 +13,25 @@ import br_star_stripe_gradient from "../../assets/graphics/speakers/br_star_stri import JUDGES from "../../assets/data/judges.json"; import WORKSHOP_HOSTS from "../../assets/data/workshop-hosts.json"; +import GridBackground from "../Backgrounds/GridBackground"; const Speakers = () => { return (
+ +