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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 4svh 2svw;
|
padding: 4svh 2svw;
|
||||||
row-gap: 4svh;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@ -11,6 +10,11 @@
|
|||||||
font-size: larger;
|
font-size: larger;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#AboutUs p {
|
||||||
|
padding: 0svh 0svw;
|
||||||
|
margin: 1.5svh 0svw;
|
||||||
|
}
|
||||||
|
|
||||||
#AboutUs h2 {
|
#AboutUs h2 {
|
||||||
padding-bottom: 0.5svh;
|
padding-bottom: 0.5svh;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
@ -24,11 +28,26 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 2svh 2svw;
|
padding: 2svh 2svw;
|
||||||
|
max-width: 65svw;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
border: 1px solid white;
|
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 {
|
#AboutUs div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
@ -39,7 +58,7 @@
|
|||||||
|
|
||||||
#AboutUs img {
|
#AboutUs img {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
aspect-ratio: 1;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -96,3 +115,15 @@
|
|||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
border: 1px solid white;
|
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="AboutUs">
|
||||||
<div id="AboutEvents">
|
<div id="AboutEvents">
|
||||||
<h2>Upcoming Events</h2>
|
<h2>Upcoming Events</h2>
|
||||||
<h4>Baja SAE April</h4>
|
<ul>
|
||||||
<CountDownTimer
|
<li>
|
||||||
dateFinished={new Date("April 29, 2026 00:00:00")}
|
<h4>Recuitment Opens</h4>
|
||||||
messageDisplayBefore={""}
|
<CountDownTimer
|
||||||
messageDisplayAfter={<p>Wish Us Luck!</p>}
|
dateFinished={new Date("August 29, 2025 00:00:00")}
|
||||||
/>
|
messageDisplayBefore={""}
|
||||||
<h4>Baja SAE May</h4>
|
messageDisplayAfter={<p>Link to google form</p>}
|
||||||
<CountDownTimer
|
/>
|
||||||
dateFinished={new Date("May 22, 2026 00:00:00")}
|
</li>
|
||||||
messageDisplayBefore={""}
|
<li>
|
||||||
messageDisplayAfter={<p>Ready! Set! Go!</p>}
|
<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>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -35,5 +35,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#ender a img {
|
#ender a img {
|
||||||
height: 3svh;
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
filter: invert();
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,4 @@
|
|||||||
import "./Ender.css";
|
import "./Ender.css";
|
||||||
import linkedInLogo from "./InBug-White.png";
|
|
||||||
import instagramLogo from "./instagram-white-icon.png";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {null} null - requires onthing
|
* @param {null} null - requires onthing
|
||||||
@ -25,13 +23,13 @@ export default function Ender() {
|
|||||||
<div>
|
<div>
|
||||||
<a href="https://www.linkedin.com/company/schulich-off-road/">
|
<a href="https://www.linkedin.com/company/schulich-off-road/">
|
||||||
<img
|
<img
|
||||||
src={linkedInLogo}
|
src="https://www.svgrepo.com/show/521725/linkedin.svg"
|
||||||
alt="Linkedin Logo"
|
alt="Linkedin Logo"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/uofcbaja/">
|
<a href="https://www.instagram.com/uofcbaja/">
|
||||||
<img
|
<img
|
||||||
src={instagramLogo}
|
src="https://www.svgrepo.com/show/521711/instagram.svg"
|
||||||
alt="Intragram Logo"
|
alt="Intragram Logo"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
@ -45,7 +43,7 @@ export default function Ender() {
|
|||||||
</a>
|
</a>
|
||||||
<a href="https://www.facebook.com/schulich.offroad/">
|
<a href="https://www.facebook.com/schulich.offroad/">
|
||||||
<img
|
<img
|
||||||
style={{ filter: `invert()`, height: `3.25svh` }}
|
style={{ filter: `invert()` }}
|
||||||
src="https://www.svgrepo.com/show/521654/facebook.svg"
|
src="https://www.svgrepo.com/show/521654/facebook.svg"
|
||||||
alt="Facebook Logo"
|
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: clamp(200px, 100%, 55svh); */
|
||||||
/* height: 100%; */
|
/* height: 100%; */
|
||||||
/* max-width: 40%; */
|
/* max-width: 40%; */
|
||||||
height: 52svh;
|
height: 350px;
|
||||||
|
width: 350px;
|
||||||
|
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
@ -72,7 +73,7 @@
|
|||||||
border: solid 2px white;
|
border: solid 2px white;
|
||||||
|
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
max-width: 800px;
|
max-width: 80svw;
|
||||||
}
|
}
|
||||||
|
|
||||||
#HomeSponsors h2 {
|
#HomeSponsors h2 {
|
||||||
@ -111,6 +112,7 @@
|
|||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
max-width: inherit;
|
max-width: inherit;
|
||||||
max-height: 80px;
|
max-height: 80px;
|
||||||
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#HomeSponsors div div div h3 {
|
#HomeSponsors div div div h3 {
|
||||||
@ -129,17 +131,13 @@
|
|||||||
#HomeSponsorLinks a {
|
#HomeSponsorLinks a {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding: 1svh 4svw;
|
padding: 1svh 4svw;
|
||||||
/* padding-left: 5svw; */
|
|
||||||
/* padding-right: 5svw; */
|
|
||||||
margin: 0px 2svw;
|
margin: 0px 2svw;
|
||||||
width: 8svw;
|
|
||||||
text-wrap: nowrap;
|
text-wrap: nowrap;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#HomeBottomGallery {
|
#HomeBottomGallery {
|
||||||
width: 70svw;
|
width: 70svw;
|
||||||
|
|
||||||
height: 60svh;
|
height: 60svh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -147,3 +145,18 @@
|
|||||||
width: inherit;
|
width: inherit;
|
||||||
height: 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