From 4907f39c1c0f8c669b575ea7ae9a2ea902c931d9 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sat, 5 Jul 2025 16:15:56 -0600 Subject: [PATCH] feat(newSite): coloring and placement redone again --- src/AboutUs/AboutUs.css | 2 +- src/AboutUs/AboutUs.js | 2 +- src/CountDown/CountDownTimer.css | 28 ++- src/CountDown/CountDownTimer.jsx | 8 +- src/Footer/Ender.css | 2 +- src/Header/Header.css | 15 +- src/Header/Header.js | 4 +- src/History/History.css | 34 ++- src/Home/Home.css | 35 +-- src/Home/Home.jsx | 42 ++-- src/MockDB/sponsorship.yml | 2 +- src/OurSponsors/OurSponsors.css | 134 ++++------- src/OurSponsors/OurSponsors.js | 379 ------------------------------- src/OurSponsors/OurSponsors.jsx | 149 ++++++++++++ src/Teams/Team.css | 85 +++++++ src/Teams/Team.jsx | 171 ++++++++++---- src/index.js | 4 + 17 files changed, 512 insertions(+), 584 deletions(-) delete mode 100644 src/OurSponsors/OurSponsors.js create mode 100644 src/OurSponsors/OurSponsors.jsx diff --git a/src/AboutUs/AboutUs.css b/src/AboutUs/AboutUs.css index 4e1ad7b..8d3463c 100644 --- a/src/AboutUs/AboutUs.css +++ b/src/AboutUs/AboutUs.css @@ -5,7 +5,7 @@ justify-content: center; align-items: center; - background-color: #1f1f1f; + background-color: var(--BajaBlack); color: white; font-size: larger; } diff --git a/src/AboutUs/AboutUs.js b/src/AboutUs/AboutUs.js index 43bc9cb..89966e6 100644 --- a/src/AboutUs/AboutUs.js +++ b/src/AboutUs/AboutUs.js @@ -24,7 +24,7 @@ const AboutsUs = () => {

  • Recuitment Opens

    Link to google form

    } /> diff --git a/src/CountDown/CountDownTimer.css b/src/CountDown/CountDownTimer.css index b861c48..e449fa2 100644 --- a/src/CountDown/CountDownTimer.css +++ b/src/CountDown/CountDownTimer.css @@ -1,16 +1,16 @@ .countDownTimer #afterTime #counter { color: white; - background-color: red; + background-color: var(--BajaRed); } .countDownTimer #counter.dangerDays { - background-color: red; + background-color: var(--BajaRed); color: white; } .countDownTimer #counter { display: flex; - flex-flow: row nowrap !important; + flex-flow: row wrap !important; padding: 0.5svh 1svw; text-align: center; background-color: whitesmoke; @@ -24,7 +24,7 @@ .countDownTimer #counter div { display: flex; - flex-flow: row nowrap !important; + flex-flow: row wrap !important; padding: 0px; column-gap: 10px; } @@ -55,7 +55,7 @@ } .countDownTimer #counter .countdownDanger { - color: #ff0000; + color: var(--BajaRed); } .countDownTimer a { @@ -64,7 +64,23 @@ } .countDownTimer { - width: 525px !important; + max-width: 525px !important; margin: 0px !important; padding: 0px !important; } + +@media only screen and (max-width: 420px) { + .countDownTimer #counter #MiddleCounter { + visibility: hidden; /* keeps space in layout */ + } + + .countDownTimer #counter #EndCounter { + visibility: visible !important; + } +} + +@media only screen and (max-width: 600px) { + .countDownTimer #counter #EndCounter { + visibility: hidden; /* keeps space in layout */ + } +} diff --git a/src/CountDown/CountDownTimer.jsx b/src/CountDown/CountDownTimer.jsx index 3ddbe31..c09c282 100644 --- a/src/CountDown/CountDownTimer.jsx +++ b/src/CountDown/CountDownTimer.jsx @@ -100,12 +100,12 @@ const ShowCounter = ({ days, hours, minutes, seconds }) => { valueAwayFrom={hours} discriptor={"Hours"} /> -

    :

    +

    :

    -

    :

    +

    :

    { const DateTimeDisplay = ({ valueAwayFrom, discriptor }) => { return (
    -

    {valueAwayFrom}

    +

    + {valueAwayFrom} +

    {discriptor}

    ); diff --git a/src/Footer/Ender.css b/src/Footer/Ender.css index 22a57de..a7db5e8 100644 --- a/src/Footer/Ender.css +++ b/src/Footer/Ender.css @@ -4,7 +4,7 @@ padding-top: 10px; padding-bottom: 10px; justify-content: center; - background-color: #a80029; + background-color: var(--BajaRed); color: white; } diff --git a/src/Header/Header.css b/src/Header/Header.css index ff8a2f1..0e6bf57 100644 --- a/src/Header/Header.css +++ b/src/Header/Header.css @@ -1,3 +1,12 @@ +:root { + /* --BajaBlack: #1f1f1f; */ + --BajaBlack: #1c1c1c; + + /* --BajaRed: rgb(100, 0, 0); */ + /* --BajaRed: #c1011c; */ + --BajaRed: #a80029; +} + header { display: flex; flex-direction: row; @@ -8,7 +17,7 @@ header { align-items: center; justify-content: space-between; - background-color: #1f1f1f; + background-color: var(--BajaBlack); /* position: absolute; */ z-index: 1; top: 0; @@ -65,7 +74,7 @@ nav a { text-decoration: none; color: inherit; cursor: pointer; - background-color: #1f1f1f; + background-color: var(--BajaBlack); color: whitesmoke; font-size: larger; @@ -79,7 +88,7 @@ nav a:first-child { } nav a li:hover { - color: #a80029; + color: var(--BajaRed); } nav ul { display: flex; diff --git a/src/Header/Header.js b/src/Header/Header.js index 6b30d3c..324c1b3 100644 --- a/src/Header/Header.js +++ b/src/Header/Header.js @@ -73,8 +73,8 @@ export default function Header() {
  • ABOUT
    • - -
  • OUR VEHICLES
    • + +
  • TEAM
  • HISTORY
    • diff --git a/src/History/History.css b/src/History/History.css index 55e7279..6aef932 100644 --- a/src/History/History.css +++ b/src/History/History.css @@ -3,7 +3,7 @@ flex-direction: column; padding: 4svh 4svw; row-gap: 4svh; - background-color: black; + background-color: var(--BajaBlack); color: white; font-size: larger; } @@ -34,6 +34,8 @@ border: 1px solid white; padding: 1svh 6svw; color: inherit; + background-color: var(--BajaRed); + font-size: larger; } #History div button:hover { @@ -56,13 +58,14 @@ } #History tr td { - width: 400px; - height: 400px; + max-width: 400px; + max-height: 400px; vertical-align: middle; justify-content: center; } #History tr td img { + aspect-ratio: 1; width: inherit; height: inherit; border-radius: 1rem; @@ -72,42 +75,36 @@ #History .HistoryCompInfo { display: block; text-align: center; - height: fit-content; - width: inherit; padding: 4svh 0svw; border: 1px solid white; border-radius: 1rem; } -:root { - --historyPaddingFromMiddle: 4svw; +#History td > div { + width: 100%; + box-sizing: border-box; } -/* #History table tr td:first-child { - padding-right: var(--historyPaddingFromMiddle); -} */ - -/* #History table tr td:nth-child(3) { - padding-left: var(--historyPaddingFromMiddle); -} */ - #History .HistoryCompInfo h2, #History .HistoryCompInfo h4 { - margin: 2svh 0svw; + width: fit-content; + margin: 2svh auto; } #History .HistoryCompInfo ul { list-style-type: none; display: flex; flex-flow: row wrap; + column-gap: 1svw; + row-gap: 1svh; padding: 0svh 2svw; margin: 0px; + /* width: 90%; */ } #History .HistoryCompInfo ul li { - padding: 0.5svh 0svw; - flex: 50%; + flex: 40%; } #History .HistoryCompInfo ul li:nth-child(odd) { @@ -142,6 +139,7 @@ border-radius: 50%; width: 20px; height: 20px; + max-width: 20px; line-height: 20px; font-size: 12px; font-weight: bold; diff --git a/src/Home/Home.css b/src/Home/Home.css index 6d51ec4..a45fc6e 100644 --- a/src/Home/Home.css +++ b/src/Home/Home.css @@ -7,7 +7,7 @@ /* padding: 0svh 15svw; */ /* width: 70svw; */ padding-top: 2svh; - background-color: #1f1f1f; + background-color: var(--BajaBlack); color: white; } @@ -37,7 +37,8 @@ text-decoration: none; text-align: center; margin-top: 2svh; - background-color: #a80029; + background-color: var(--BajaRed); + color: inherit; } .HomePageLayout a:hover { @@ -69,35 +70,37 @@ display: flex; flex-direction: column; - border-radius: 15px; - border: solid 2px white; + align-items: center; + /* border-radius: 15px; */ + /* border: solid 2px white; */ - padding: 30px; - max-width: 80svw; + padding: 8svh 0px; + margin: 0px; + width: 100%; + color: var(--BajaBlack); + background-color: white; } #HomeSponsors h2 { margin-top: 0px; + border-bottom: none; + font-size: 50px; } #HomeSponsors div { - width: inherit; -} - -#HomeSponsors div div { display: flex; flex-direction: row; flex-wrap: wrap; - width: inherit; + max-width: 100%; justify-content: center; - padding: 0px; - row-gap: 2svh; + padding: 1svh 0svw; + row-gap: 4svh; column-gap: 6svw; } -#HomeSponsors div div div { +#HomeSponsors div div { display: flex; flex-direction: column; row-gap: 0px; @@ -105,7 +108,7 @@ text-align: center; } -#HomeSponsors div div div img { +#HomeSponsors div div img { border-radius: 1rem; min-height: 0px; align-self: center; @@ -126,6 +129,7 @@ justify-content: center; padding-top: 2svh; + color: var(--BajaBlack); } #HomeSponsorLinks a { @@ -134,6 +138,7 @@ margin: 0px 2svw; text-wrap: nowrap; text-align: center; + color: white; } #HomeBottomGallery { diff --git a/src/Home/Home.jsx b/src/Home/Home.jsx index 6670dc1..8e5bdcc 100644 --- a/src/Home/Home.jsx +++ b/src/Home/Home.jsx @@ -69,30 +69,28 @@ export default function Home() { />
    -

    Sponsor Section

    +

    Current Sponsors

    -
    - Schulich logo -

    Schulich School of Engineering

    -
    -
    - -

    Morphgenix

    -
    -
    - -

    Solidworks

    -
    + Schulich logo +

    Schulich School of Engineering

    +
    +
    + +

    Morphgenix

    +
    +
    + +

    Solidworks