From ccc6a65c6af126fe54cc3dd8a680d8be8f344eb3 Mon Sep 17 00:00:00 2001 From: laura Date: Sun, 5 Feb 2023 00:50:02 +1100 Subject: [PATCH 1/6] somewhat fixed font scaling, updated resources and contacts icons and links, updated hamburger links, udpated sponsors homepage section, remvoed non accessible font colour --- .../src/components/aboutus/AboutUs-Styled.tsx | 32 ++--- next/src/components/aboutus/Sphere-Styled.tsx | 4 +- .../ClearLayeredGlassContainer-Styled.tsx | 28 ++-- .../eventspage/ClearLayeredGlassContainer.tsx | 2 +- next/src/components/footer/Footer.tsx | 8 +- next/src/components/navbar/HamburgerMenu.tsx | 12 +- next/src/components/resources/Carousel.tsx | 3 +- next/src/components/resources/image-data.tsx | 26 ++-- next/src/pages/MiniAboutUs.tsx | 25 ++-- next/src/pages/MiniEvents.tsx | 29 ++-- next/src/pages/MiniResources.tsx | 20 ++- next/src/pages/{Sponsors2.tsx => Support.tsx} | 40 ++---- next/src/pages/index.tsx | 136 ++++++++---------- next/src/styles/motion.tsx | 32 ++--- next/src/svgs/Circles.png | Bin 0 -> 55296 bytes next/src/svgs/Cselectives.png | Bin 0 -> 8448 bytes next/src/svgs/Jobsboard.png | Bin 0 -> 2806746 bytes next/src/svgs/Notangles.png | Bin 0 -> 277791 bytes next/src/svgs/Structs.png | Bin 0 -> 114862 bytes next/src/svgs/degree_planner.svg | 9 -- next/src/svgs/jobs_board.svg | 9 -- next/src/svgs/notangles.svg | 9 -- 22 files changed, 179 insertions(+), 245 deletions(-) rename next/src/pages/{Sponsors2.tsx => Support.tsx} (88%) create mode 100644 next/src/svgs/Circles.png create mode 100644 next/src/svgs/Cselectives.png create mode 100644 next/src/svgs/Jobsboard.png create mode 100644 next/src/svgs/Notangles.png create mode 100644 next/src/svgs/Structs.png delete mode 100644 next/src/svgs/degree_planner.svg delete mode 100644 next/src/svgs/jobs_board.svg delete mode 100644 next/src/svgs/notangles.svg diff --git a/next/src/components/aboutus/AboutUs-Styled.tsx b/next/src/components/aboutus/AboutUs-Styled.tsx index f7ae7df6..eb8c219b 100644 --- a/next/src/components/aboutus/AboutUs-Styled.tsx +++ b/next/src/components/aboutus/AboutUs-Styled.tsx @@ -5,7 +5,7 @@ import { sphereProps } from "./Sphere-Styled"; export const AboutUsPage = styled.div` position: relative; top: -50px; - height: 100vh; + width: 100%; display: flex; justify-content: center; align-items: center; @@ -25,14 +25,9 @@ export const AboutUsText = styled.div` color: var(--accent-darker-purple); font-family: 'Raleway'; font-weight: 810; - - font-size: 40px; - @media ${device.tablet} { - font-size: 3.5vw; - line-height: 1.9vw; - text-align: right; - } - + font-size: 4vmin; + line-height: 1.9vmin; + text-align: right; ` export const MainText = styled.div` @@ -41,16 +36,11 @@ export const MainText = styled.div` border-radius: 1vw; color: #FFFFFF; font-weight: 400; - font-size: 18px; padding: 20px; - line-height: 20px; - @media ${device.tablet} { - font-size: 2vw; - text-align: center; - padding: 1.4vw 2vw; - margin-top: 2.8vw; - line-height: 2.5vw; - } + font-size: 3vmin; + text-align: center; + padding: 1.4vw 2vw; + margin-top: 2.8vmin; `; export const BlueText = styled.span` @@ -62,14 +52,14 @@ export const MoreInfoText = styled.div` color: #FFFFFF; font-weight: 700; line-height: 58px; - font-size: 3.6vw; - + font-size: 3vmin; + &:hover { cursor: pointer; transform: rotate(${props => props.rotation ? -props.rotation : 0}deg) scale(1.1); } @media ${device.tablet} { - font-size: 2.3vw; + font-size: 3vmin; } `; \ No newline at end of file diff --git a/next/src/components/aboutus/Sphere-Styled.tsx b/next/src/components/aboutus/Sphere-Styled.tsx index 8b8f8d0f..e327a167 100644 --- a/next/src/components/aboutus/Sphere-Styled.tsx +++ b/next/src/components/aboutus/Sphere-Styled.tsx @@ -2,7 +2,7 @@ import styled from "styled-components"; import { device } from "../../styles/device"; export type sphereProps = { - left? : number; + left?: number; top?: number; leftMobile?: number; topMobile?: number; @@ -37,6 +37,8 @@ export const StyledSphere = styled.div` align-items: center; border-radius: 50%; + max-width: 400px; + max-height: 400px; @media ${device.tablet} { left: ${props => props.left}%; top: ${props => props.top}%; diff --git a/next/src/components/eventspage/ClearLayeredGlassContainer-Styled.tsx b/next/src/components/eventspage/ClearLayeredGlassContainer-Styled.tsx index 1ee18765..7ef60407 100644 --- a/next/src/components/eventspage/ClearLayeredGlassContainer-Styled.tsx +++ b/next/src/components/eventspage/ClearLayeredGlassContainer-Styled.tsx @@ -12,9 +12,9 @@ export type positionProps = { export const GlassContainer = styled.div` position: ${(props) => props.position}; - display: ${(props) => props.center ? "flex": ""}; - justify-content: ${(props) => props.center ? "center": ""}; - align-items: ${(props) => props.center ? "center": ""}; + display: ${(props) => props.center ? "flex" : ""}; + justify-content: ${(props) => props.center ? "center" : ""}; + align-items: ${(props) => props.center ? "center" : ""}; top: ${(props) => props.top}vw; left: ${(props) => props.left}vw; @@ -23,24 +23,14 @@ export const GlassContainer = styled.div` border-width: 0.15vw; border-style: solid; border-color: #FAFCFF; - width: 80vw; - height: 50vw; - @media ${device.laptop} { - width: 36.7vw; - height: 20vw; - } + width: 70vmin; + height: 40vmin; `; export const ImgContainer = styled.div` position: relative; - width: 77vw; - height: 60vw; - top: -4.15vw; - left: 1.5vw; - @media ${device.laptop} { - width: 36vw; - height: 17.8vw; - top: 2.15vw; - left: 1.5vw; - } + width: 77vmin; + height: 60vmin; + top: -4.15vmin; + left: 1.5vmin; ` \ No newline at end of file diff --git a/next/src/components/eventspage/ClearLayeredGlassContainer.tsx b/next/src/components/eventspage/ClearLayeredGlassContainer.tsx index 0ffea44f..2ea0eed2 100644 --- a/next/src/components/eventspage/ClearLayeredGlassContainer.tsx +++ b/next/src/components/eventspage/ClearLayeredGlassContainer.tsx @@ -8,7 +8,7 @@ export default function ClearLayeredGlass() { - + Events diff --git a/next/src/components/footer/Footer.tsx b/next/src/components/footer/Footer.tsx index 8f45caec..5bce91da 100644 --- a/next/src/components/footer/Footer.tsx +++ b/next/src/components/footer/Footer.tsx @@ -27,6 +27,8 @@ export const ImagesContainer = styled.div` const FooterComponent = styled.footer` background-color: #A09FE3; + + width: 100vw; padding: 2rem; display: flex; flex-direction: column; @@ -63,11 +65,11 @@ const Footer: React.FC<{}> = () => { CSESoc
-

+

B03 CSE Building K17, UNSW
csesoc@csesoc.org.au -

+

CSESoc Discord @@ -87,7 +89,7 @@ const Footer: React.FC<{}> = () => {

© 2022 — CSESoc UNSW -

+
); diff --git a/next/src/components/navbar/HamburgerMenu.tsx b/next/src/components/navbar/HamburgerMenu.tsx index 906567bb..642b3199 100644 --- a/next/src/components/navbar/HamburgerMenu.tsx +++ b/next/src/components/navbar/HamburgerMenu.tsx @@ -24,12 +24,12 @@ const HamburgerMenu = (props: HamburgerMenuProps) => { ) : <>} - Future Students - About Us - Contact - Events - Resources - Sponsors + Future Students + About Us + History + Events + Resources + Sponsors diff --git a/next/src/components/resources/Carousel.tsx b/next/src/components/resources/Carousel.tsx index e3892036..15ff4296 100644 --- a/next/src/components/resources/Carousel.tsx +++ b/next/src/components/resources/Carousel.tsx @@ -3,6 +3,7 @@ import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { wrap } from "popmotion"; import images from "./image-data"; +import { device } from "../../styles/device"; const variants = { enter: (direction: number) => { @@ -57,7 +58,7 @@ const Example = () => { x: { type: "spring", stiffness: 300, damping: 30 }, opacity: { duration: 0.2 } }} - style={{ width: "30%", position: "absolute", cursor: "pointer"}} + style={{ width: "25%", position: "absolute", cursor: "pointer" }} /> diff --git a/next/src/components/resources/image-data.tsx b/next/src/components/resources/image-data.tsx index b8a147ff..cffc909e 100644 --- a/next/src/components/resources/image-data.tsx +++ b/next/src/components/resources/image-data.tsx @@ -1,21 +1,31 @@ -import degree_planner from "../../svgs/degree_planner.svg" -import jobs_board from "../../svgs/jobs_board.svg" -import notangles from "../../svgs/notangles.svg" +import circles from "../../svgs/Circles.png" +import jobsboard from "../../svgs/Jobsboard.png" +import notangles from "../../svgs/Notangles.png" +import structs from "../../svgs/Structs.png" +import cselectives from "../../svgs/Cselectives.png" + const images = [ { - url: degree_planner.src, - link: "https://circles.csesoc.app/degree-wizard" + url: circles.src, + link: "https://circles.csesoc.app/" }, { - url: jobs_board.src, + url: jobsboard.src, link: "https://jobsboard.csesoc.unsw.edu.au/" }, { url: notangles.src, link: "https://notangles.csesoc.app/" - } - + }, + { + url: structs.src, + link: "https://structs.sh/" + }, + { + url: cselectives.src, + link: "https://cselectives.csesoc.app/" + }, ]; export default images; \ No newline at end of file diff --git a/next/src/pages/MiniAboutUs.tsx b/next/src/pages/MiniAboutUs.tsx index 6674d320..c0fee29e 100644 --- a/next/src/pages/MiniAboutUs.tsx +++ b/next/src/pages/MiniAboutUs.tsx @@ -1,6 +1,7 @@ import Sphere from '../components/aboutus/ReusableSpheres'; import * as PageStyle from '../components/aboutus/AboutUs-Styled'; import { Fragment } from 'react'; +import { device } from '../styles/device'; const args1 = { left: 11, @@ -65,13 +66,13 @@ const SphereArgs = [args1, args2, args3, args4]; const CreateSpheres = SphereArgs.map((arg, index) => { return ( - - - - {arg.text} - - - + + + + {arg.text} + + + ) }) @@ -83,14 +84,10 @@ const AboutUs = () => ( About Us - We are one of the biggest and most active societies at - UNSW - , catering to over - 3500 CSE students - spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering. - + We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering. + - {CreateSpheres} + {(device.mobileL || device.mobileM || device.mobileS) ? undefined : CreateSpheres} ) diff --git a/next/src/pages/MiniEvents.tsx b/next/src/pages/MiniEvents.tsx index ce1b35fb..75ede615 100644 --- a/next/src/pages/MiniEvents.tsx +++ b/next/src/pages/MiniEvents.tsx @@ -9,12 +9,13 @@ const Container = styled.div` flex-direction: column; justify-content: center; align-items: center; - gap: 100px; + gap: 10vmin; + @media ${device.laptop} { flex-direction: row; justify-content: space-evenly; align-items: center; - margin: 30vh 10vw; + margin: 50vmin 15vmin 10vmin 15vmin; } z-index: 100; ` @@ -22,7 +23,7 @@ const Container = styled.div` const ColumnContainer = styled.div` display: flex; flex-direction: column; - width: 60vw; + width: 60%; @media ${device.laptop} { padding: 30px; } @@ -33,24 +34,18 @@ const HeadingText = styled.div` font-family: 'Raleway'; font-weight: 800; font-size: 40px; - @media ${device.laptop} { - font-size: 3.5vw; - line-height: 0vw; - text-align: left; - margin-top: 2vw; - } + font-size: 4vmin; + line-height: 3vmin; + text-align: center; ` const BodyText = styled.div` color: var(--accent-darker-purple); - font-weight: 200; - font-size: 20px; - @media ${device.tablet} { - font-size: 1.9vw; - line-height: 2.5vw; - margin-top: 3vw; - } - + font-weight: 400; + font-size: 3vmin; + text-align: center; + padding: 20px; + margin-top: 2.8vmin; @media ${device.laptop} { color: white; } diff --git a/next/src/pages/MiniResources.tsx b/next/src/pages/MiniResources.tsx index 92b2bb7b..3d2eb548 100644 --- a/next/src/pages/MiniResources.tsx +++ b/next/src/pages/MiniResources.tsx @@ -18,6 +18,7 @@ const Container = styled.div` flex-direction: column; align-items: center; margin: 30vh 0; + width: 100%; @media ${device.laptop} { height: 100vh; @@ -27,11 +28,8 @@ const Heading = styled.div` color: var(--accent-darker-purple); font-family: 'Raleway'; font-weight: 800; - font-size: 30px; + font-size: 4vmin; text-align: center; - @media ${device.tablet} { - font-size: 3.5vw; - } ` const HeadingContainer = styled.div` @@ -42,11 +40,11 @@ const HeadingContainer = styled.div` const BodyContainer = styled.div` display:flex; padding: 10vh 20vw; - + width: 50%; justify-content: center; align-items: center; flex-direction: column; - gap: 20vw; + gap: 20vmin; @media ${device.laptop} { flex-direction: row; } @@ -80,7 +78,7 @@ const ImgContainer = styled.div` const imgs = [YT, FB, DC, SPOT] const urls = ["https://www.youtube.com/c/CSESocUNSW", "https://www.facebook.com/csesoc/", "https://bit.ly/CSESocDiscord", "https://open.spotify.com/show/2h9OxTkeKNznIfNqMMYcxj"] -export default function Resources({}: Props) { +export default function Resources({ }: Props) { return ( @@ -96,12 +94,12 @@ export default function Resources({}: Props) { {imgs.map((src) => ( - - + + - + ))} - + diff --git a/next/src/pages/Sponsors2.tsx b/next/src/pages/Support.tsx similarity index 88% rename from next/src/pages/Sponsors2.tsx rename to next/src/pages/Support.tsx index a035f8f1..3b694c97 100644 --- a/next/src/pages/Sponsors2.tsx +++ b/next/src/pages/Support.tsx @@ -56,11 +56,11 @@ const SponsorCol = styled.div` max-height: 100%; max-width: 100%; border-radius: 0.5rem; - padding: 1vw; + padding: 1vmin; @media ${device.tablet} { flex-basis: calc(50% - 40px); flex-direction: column; - padding: 8vh 0; + padding: 8vmin 0; } @@ -84,7 +84,7 @@ const H3 = styled.div` font-weight: 800; font-size: 20px; @media ${device.tablet} { - font-size: 2vw; + font-size: 3.5vmin; } `; @@ -127,19 +127,15 @@ const HeadingContainer = styled.div` ` const Heading = styled.div` - color: #A09FE3; + color: var(--accent-darker-purple); font-family: 'Raleway'; font-weight: 800; - font-size: 30px; - padding: 5vh 0; - @media ${device.tablet} { - font-size: 2.8vw; - } + font-size: 4vmin; `; -export default function Sponsors2() { +export default function Support() { const [navbarOpen, setNavbarOpen] = useState(false); @@ -150,9 +146,6 @@ export default function Sponsors2() { return (
- - - Support CSESoc @@ -161,7 +154,7 @@ export default function Sponsors2() { - +

Our Sponsors

@@ -185,15 +178,15 @@ export default function Sponsors2() { + src={`/assets/sponsors_white/imc.svg`} + width={60} + height={50} + objectFit="contain" + /> - + - - - - -
); diff --git a/next/src/pages/index.tsx b/next/src/pages/index.tsx index 17900eaf..2d618cd1 100644 --- a/next/src/pages/index.tsx +++ b/next/src/pages/index.tsx @@ -11,7 +11,6 @@ import HamburgerMenu from "../components/navbar/HamburgerMenu"; import HPCurve from "../svgs/HPCurve" import TopRect from "../svgs/TopRect.svg" import BottomRect from "../svgs/BottomRect.svg" -import Otter from '../svgs/otter.png' // local import Navbar from "../components/navbar/Navbar"; @@ -19,12 +18,11 @@ import Homepage from "./MiniHomepage"; import Events from "./MiniEvents"; import AboutUs from "./MiniAboutUs"; import Resources from "./MiniResources"; -import Support from "./MiniSupport"; +import Support from "./Support"; import Footer from "../components/footer/Footer"; -import { device } from '../styles/device' -import { SectionFadeInFromLeft, SectionFadeInFromRight, Spin } from "../styles/motion" -import Sponsors from "./Sponsors"; +import { size as deviceSize, device } from '../styles/device' +import { SectionFadeInFromLeft, SectionFadeInFromRight } from "../styles/motion" import ExecDescription from "./ExecDescription"; type CurveContainerProps = { @@ -32,7 +30,7 @@ type CurveContainerProps = { }; const PageContainer = styled.div` - max-width: 100vw; + max-width: 2560px; min-height: 100vh; display: flex; flex-direction: column; @@ -40,6 +38,9 @@ const PageContainer = styled.div` const CurveContainer = styled.div` position: absolute; + display: flex; + flex-direction: column; + align-items: flex-end; top: ${props => props.offset}px; right: 0; z-index: -1; @@ -54,6 +55,7 @@ const PurpleBlock = styled.div` width: 100vw; height: 135vh; position: relative; + right: 0; top: -10px; `; @@ -66,13 +68,6 @@ const Background = styled.div<{ offset?: number }>` const RefLink = styled.div`` -const LoaderContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -` - const Index: NextPage = () => { @@ -80,7 +75,6 @@ const Index: NextPage = () => { const [height, setHeight] = useState(); const [loaded, setLoaded] = useState(false); const [navbarOpen, setNavbarOpen] = useState(false); - const [fakeLoading, setFakeLoading] = useState(true); const handleToggle: NavbarOpenHandler = () => { setNavbarOpen(!navbarOpen); @@ -102,72 +96,64 @@ const Index: NextPage = () => { setWidth(window?.innerWidth) }, [width]) - setTimeout(() => { - setFakeLoading(false); - }, 2000) - - if (fakeLoading) { - return ( - - - - - - - - ) - } - return ( - - - CSESoc - - - + <> {!navbarOpen && } {navbarOpen && } - {(loaded && height && width) && ( - <> - - - {/* */} - - - - - -
- -
- - - - - - - - - - - - - - - - - - - - - -