Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 05:44:17 -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" updatedTitleText="UCalgary Bajaa"
updatedSubtitleText="HelloDAAAA" updatedSubtitleText="HelloDAAAA"
updatedImgUrl="https://picsum.photos/200" updatedImgUrl="https://picsum.photos/200"
updatetdImgAlt="Lorem Picsum"
/> />
// --snip-- // --snip--
``` ```
@ -26,7 +25,6 @@ export default function UpdateBanner({
updatedTitleText = "UCalgary Baja", updatedTitleText = "UCalgary Baja",
updatedSubtitleText = "Hello", updatedSubtitleText = "Hello",
updatedImgUrl = "https://picsum.photos/200", updatedImgUrl = "https://picsum.photos/200",
updatedImgAlt = "Lorem picsum",
}) { }) {
const context = useOutletContext(); const context = useOutletContext();
const updateBanner = context.setBannerInfo; const updateBanner = context.setBannerInfo;
@ -35,14 +33,7 @@ export default function UpdateBanner({
titleText: updatedTitleText, titleText: updatedTitleText,
subtitleText: updatedSubtitleText, subtitleText: updatedSubtitleText,
imgUrl: updatedImgUrl, imgUrl: updatedImgUrl,
imgAlt: updatedImgAlt,
}); });
}, [ }, [updatedTitleText, updatedSubtitleText, updatedImgUrl, updateBanner]);
updatedTitleText,
updatedSubtitleText,
updatedImgUrl,
updatedImgAlt,
updateBanner,
]);
return <></>; return <></>;
} }

74
src/Home/Home.css
View File

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