mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-10 13:17:13 -06:00
feat(newSite): started on mobile layout, todo contact us history
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -20,18 +20,32 @@ const AboutsUs = () => {
|
||||
<div id="AboutUs">
|
||||
<div id="AboutEvents">
|
||||
<h2>Upcoming Events</h2>
|
||||
<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>
|
||||
|
@ -35,5 +35,8 @@
|
||||
}
|
||||
|
||||
#ender a img {
|
||||
height: 3svh;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
aspect-ratio: 1;
|
||||
filter: invert();
|
||||
}
|
||||
|
@ -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 |
@ -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;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user