Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-15 05:14:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(homepage): redid css for slightly better mobile layout

Browse Source
This commit is contained in:
darkicewolf50 2025-06-14 12:14:11 -06:00
parent 7085ee1e98
commit 272225eb99
2 changed files with 34 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Header/UpdateBanner.jsx
View File

@ -16,7 +16,6 @@ import { useOutletContext } from "react-router-dom";
updatedTitleText="UCalgary Bajaa"
updatedSubtitleText="HelloDAAAA"
updatedImgUrl="https://picsum.photos/200"
updatetdImgAlt="Lorem Picsum"
/>
// --snip--
```
@ -26,7 +25,6 @@ export default function UpdateBanner({
updatedTitleText = "UCalgary Baja",
updatedSubtitleText = "Hello",
updatedImgUrl = "https://picsum.photos/200",
updatedImgAlt = "Lorem picsum",
}) {
const context = useOutletContext();
const updateBanner = context.setBannerInfo;
@ -35,14 +33,7 @@ export default function UpdateBanner({
titleText: updatedTitleText,
subtitleText: updatedSubtitleText,
imgUrl: updatedImgUrl,
imgAlt: updatedImgAlt,
});
}, [
updatedTitleText,
updatedSubtitleText,
updatedImgUrl,
updatedImgAlt,
updateBanner,
]);
}, [updatedTitleText, updatedSubtitleText, updatedImgUrl, updateBanner]);
return <></>;
}

74
src/Home/Home.css
View File

@ -1,7 +1,10 @@
.HomePageLayout {
margin-left: auto;
margin-right: auto;
padding: 0svh 15svw;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 4svh;
padding: 4svh 0px;
/* padding: 0svh 15svw; */
/* width: 70svw; */
padding-top: 2svh;
background-color: #1f1f1f;
@ -10,27 +13,22 @@
.HomePageLayout div {
display: flex;
padding-top: 2.5svh;
padding-bottom: 2.5svh;
column-gap: 4svw;
padding: 0svh 1svw;
}
.HomePageLayout img {
/* height: 5svh;
width: 5svw; */
/* flex-grow: 1; */
.HomePageLayout div img {
border-radius: 1rem;
width: 50%;
height: 55svh;
margin-top: auto;
/* margin: auto 0px; */
/* height: clamp(200px, 100%, 55svh); */
/* height: 100%; */
/* max-width: 40%; */
height: 52svh;
align-self: center;
}
.HomePageLayout a {
/* text-decoration: none; */
color: inherit;
/* border: solid 2px white; */
border-radius: 1rem;
padding: 10px;
margin: 0svh 8svw;
@ -47,12 +45,8 @@
.HomePageLayout h2 {
border-bottom: solid 3px white;
/* padding-left: 2svw; */
padding-bottom: 0.5svh;
font-size: 36px;
/* margin-left: 2svw; */
/* margin-right: 2svw; */
/* margin: 0px; */
margin-bottom: 2svh;
}
@ -65,16 +59,9 @@
.HomePageLayout div div {
display: flex;
flex-direction: column;
width: 50%;
/* justify-content: space-between; */
padding: 0px;
}
#HomeBottomGallery {
flex-grow: 0;
width: inherit;
height: 40svh;
/* width: 50%; */
max-width: 700px;
padding: 0px 1svw;
}
#HomeSponsors {
@ -85,7 +72,7 @@
border: solid 2px white;
padding: 30px;
margin-top: 4svh;
max-width: 800px;
}
#HomeSponsors h2 {
@ -113,24 +100,23 @@
display: flex;
flex-direction: column;
row-gap: 0px;
/* justify-content: center; */
align-items: center;
text-align: center;
}
#HomeSponsors div div div img {
width: 13svw;
height: 13svh;
border-radius: 1rem;
min-height: 0px;
align-self: center;
min-width: 200px;
max-width: inherit;
max-height: 80px;
}
#HomeSponsors div div div h3 {
margin: 1svh 0svw;
}
.HomePageLayout > div:nth-child(4) > img {
height: 40svh;
}
#HomeSponsorLinks {
display: flex;
flex-direction: row;
@ -151,7 +137,13 @@
text-align: center;
}
#HomeBottomGallery img {
width: 100%;
height: 100%;
#HomeBottomGallery {
width: 70svw;
height: 60svh;
}
#HomeBottomGallery img {
width: inherit;
height: inherit;
}