feat(newSite): started on mobile layout, todo contact us history

This commit is contained in:
2025-07-05 11:56:16 -06:00
parent 620afb0609
commit c44dd960a1
7 changed files with 86 additions and 27 deletions

View File

@ -2,7 +2,6 @@
display: flex;
flex-direction: column;
padding: 4svh 2svw;
row-gap: 4svh;
justify-content: center;
align-items: center;
@ -11,6 +10,11 @@
font-size: larger;
}
#AboutUs p {
padding: 0svh 0svw;
margin: 1.5svh 0svw;
}
#AboutUs h2 {
padding-bottom: 0.5svh;
font-size: 36px;
@ -24,11 +28,26 @@
justify-content: flex-start;
align-items: flex-start;
padding: 2svh 2svw;
max-width: 65svw;
border-radius: 1rem;
border: 1px solid white;
}
#AboutEvents ul {
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0px;
padding: 0px;
justify-content: space-evenly;
}
#AboutEvents ul li:first-child {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#AboutUs div {
display: flex;
flex-flow: row wrap;
@ -39,7 +58,7 @@
#AboutUs img {
width: 400px;
aspect-ratio: 1;
border-radius: 1rem;
}
@ -96,3 +115,15 @@
border-radius: 1rem;
border: 1px solid white;
}
@media only screen and (max-width: 800px) {
#AboutEvents {
max-width: 80svw;
}
#AboutUs img {
width: 300px;
border-radius: 1rem;
}
}

View File

@ -20,18 +20,32 @@ const AboutsUs = () => {
<div id="AboutUs">
<div id="AboutEvents">
<h2>Upcoming Events</h2>
<h4>Baja SAE April</h4>
<CountDownTimer
dateFinished={new Date("April 29, 2026 00:00:00")}
messageDisplayBefore={""}
messageDisplayAfter={<p>Wish Us Luck!</p>}
/>
<h4>Baja SAE May</h4>
<CountDownTimer
dateFinished={new Date("May 22, 2026 00:00:00")}
messageDisplayBefore={""}
messageDisplayAfter={<p>Ready! Set! Go!</p>}
/>
<ul>
<li>
<h4>Recuitment Opens</h4>
<CountDownTimer
dateFinished={new Date("August 29, 2025 00:00:00")}
messageDisplayBefore={""}
messageDisplayAfter={<p>Link to google form</p>}
/>
</li>
<li>
<h4>Baja SAE April</h4>
<CountDownTimer
dateFinished={new Date("April 29, 2026 00:00:00")}
messageDisplayBefore={""}
messageDisplayAfter={<p>Wish Us Luck!</p>}
/>
</li>
<li>
<h4>Baja SAE May</h4>
<CountDownTimer
dateFinished={new Date("May 22, 2026 00:00:00")}
messageDisplayBefore={""}
messageDisplayAfter={<p>Ready! Set! Go!</p>}
/>
</li>
</ul>
</div>
<div>
<div>

View File

@ -35,5 +35,8 @@
}
#ender a img {
height: 3svh;
height: 30px;
width: 30px;
aspect-ratio: 1;
filter: invert();
}

View File

@ -1,6 +1,4 @@
import "./Ender.css";
import linkedInLogo from "./InBug-White.png";
import instagramLogo from "./instagram-white-icon.png";
/**
* @param {null} null - requires onthing
@ -25,13 +23,13 @@ export default function Ender() {
<div>
<a href="https://www.linkedin.com/company/schulich-off-road/">
<img
src={linkedInLogo}
src="https://www.svgrepo.com/show/521725/linkedin.svg"
alt="Linkedin Logo"
/>
</a>
<a href="https://www.instagram.com/uofcbaja/">
<img
src={instagramLogo}
src="https://www.svgrepo.com/show/521711/instagram.svg"
alt="Intragram Logo"
/>
</a>
@ -45,7 +43,7 @@ export default function Ender() {
</a>
<a href="https://www.facebook.com/schulich.offroad/">
<img
style={{ filter: `invert()`, height: `3.25svh` }}
style={{ filter: `invert()` }}
src="https://www.svgrepo.com/show/521654/facebook.svg"
alt="Facebook Logo"
/>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

View File

@ -22,7 +22,8 @@
/* height: clamp(200px, 100%, 55svh); */
/* height: 100%; */
/* max-width: 40%; */
height: 52svh;
height: 350px;
width: 350px;
align-self: center;
}
@ -72,7 +73,7 @@
border: solid 2px white;
padding: 30px;
max-width: 800px;
max-width: 80svw;
}
#HomeSponsors h2 {
@ -111,6 +112,7 @@
min-width: 200px;
max-width: inherit;
max-height: 80px;
width: auto;
}
#HomeSponsors div div div h3 {
@ -129,17 +131,13 @@
#HomeSponsorLinks a {
margin-top: auto;
padding: 1svh 4svw;
/* padding-left: 5svw; */
/* padding-right: 5svw; */
margin: 0px 2svw;
width: 8svw;
text-wrap: nowrap;
text-align: center;
}
#HomeBottomGallery {
width: 70svw;
height: 60svh;
}
@ -147,3 +145,18 @@
width: inherit;
height: inherit;
}
@media only screen and (max-width: 800px) {
.HomePageLayout div {
padding: 0svh 4svw;
}
.HomePageLayout div img {
width: 275px;
height: 275px;
}
#HomeBottomGallery {
width: 80svw;
height: 60svh;
}
}