mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-16 05:44:17 -06:00
feat(about): finsihed, minor teaking required and real images
This commit is contained in:
parent
75c05cf265
commit
5de7d7ef04
@ -3,6 +3,12 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#About img {
|
||||
border-radius: 0.5rem;
|
||||
/* aspect-ratio: 1 /1;
|
||||
object-fit: contain; */
|
||||
}
|
||||
|
||||
#About h3 {
|
||||
font-size: 100px;
|
||||
margin: 0px;
|
||||
@ -149,6 +155,11 @@
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
#leadership img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#leadership h4 {
|
||||
font-size: 40px;
|
||||
margin: 0px;
|
||||
@ -182,14 +193,52 @@
|
||||
flex-flow: row wrap;
|
||||
column-gap: 2svw;
|
||||
row-gap: 2svh;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#leadership div div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
column-gap: 0svh;
|
||||
max-width: 20svw;
|
||||
}
|
||||
|
||||
#leadership div div p {
|
||||
max-width: 20svw;
|
||||
margin: 0px;
|
||||
/* this is horrible DO NOT DO */
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
#about-team > div:nth-child(1) {
|
||||
flex-wrap: nowrap;
|
||||
max-width: 60svw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
column-gap: 2svw;
|
||||
}
|
||||
|
||||
#about-team h4 {
|
||||
font-size: large;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
#about-team div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
column-gap: 2svw;
|
||||
row-gap: 2svh;
|
||||
}
|
||||
|
||||
#about-team div div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(128, 128, 128, 0.6);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5svh 0.5svw;
|
||||
}
|
||||
|
||||
#about-team div div p {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@ -318,7 +318,7 @@ export default function AboutsUs() {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="about-team">
|
||||
<div>
|
||||
<h4>Meet the Rest of the Team</h4>
|
||||
<p>
|
||||
|
||||
@ -4,10 +4,16 @@ header {
|
||||
margin: 1%;
|
||||
margin-top: 1svh;
|
||||
padding-right: 0.5svw;
|
||||
/* width: 100%; */
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #1f1f1f;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
header a {
|
||||
@ -121,29 +127,15 @@ nav a li:hover {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
/* bebug border, use margin to advantage, may cause error later */
|
||||
/* border-bottom: solid 1px black; */
|
||||
}
|
||||
|
||||
:root {
|
||||
--fade-starts-at-bottom: 80%;
|
||||
--fade-starts-at-top: 96%;
|
||||
--banner-text-pos-left: 15svw;
|
||||
--banner-text-background: white;
|
||||
}
|
||||
|
||||
#BannerHeader img {
|
||||
position: absolute;
|
||||
height: 100svh;
|
||||
width: inherit;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
z-index: -2;
|
||||
|
||||
-webkit-mask-image: linear-gradient(
|
||||
/* -webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
black var(--fade-starts-at-bottom),
|
||||
transparent
|
||||
@ -152,12 +144,44 @@ nav a li:hover {
|
||||
to bottom,
|
||||
black var(--fade-starts-at-bottom),
|
||||
transparent
|
||||
);
|
||||
); */
|
||||
}
|
||||
|
||||
#BannerHeader::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) var(--fade-starts-at-bottom, 70%),
|
||||
whitesmoke 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:root {
|
||||
--fade-starts-at-bottom: 90%;
|
||||
--fade-starts-at-top: 96%;
|
||||
--banner-text-pos-left: 15svw;
|
||||
--banner-text-background: white;
|
||||
}
|
||||
|
||||
/* #BannerHeader img {
|
||||
position: relative;
|
||||
height: 100svh;
|
||||
width: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
z-index: -2;
|
||||
} */
|
||||
|
||||
/* used to postiion title and sub title */
|
||||
#BannerHeader div {
|
||||
margin-top: 15%;
|
||||
margin-top: 25%;
|
||||
}
|
||||
|
||||
#BannerHeader h1 {
|
||||
|
||||
@ -3,7 +3,7 @@ import lightDark from "./light-dark.webp";
|
||||
import { Outlet, Link } from "react-router-dom";
|
||||
import "./Header.css";
|
||||
import Ender from "../Footer/Ender";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
/**
|
||||
* @param {null} nothing - Takes in nothing
|
||||
@ -17,11 +17,6 @@ export default function Header() {
|
||||
titleText: "UCalgary Baja",
|
||||
subtitleText: "Hello",
|
||||
imgUrl: "https://picsum.photos/200",
|
||||
imgAlt: "Lorem picsum",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
HeaderBannerHeight();
|
||||
});
|
||||
|
||||
/**
|
||||
@ -53,36 +48,6 @@ export default function Header() {
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {null} nothing - This takes in nothing
|
||||
* @returns {null} nothing - This returns nothing
|
||||
* @description This makes it so that the banner will always be 100% of the page at the top
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
*/
|
||||
const HeaderBannerHeight = () => {
|
||||
if (bannerInfo.titleText === "" && bannerInfo.imgUrl === "") {
|
||||
// return early to avoid error when no banner is desired
|
||||
return;
|
||||
}
|
||||
const headerTop = document.getElementsByTagName("header")[0];
|
||||
const headerTopStyle = getComputedStyle(headerTop);
|
||||
const headerTopInnerHeight = headerTop.offsetHeight;
|
||||
// 2 is used to align bottom of div with img
|
||||
const headerTopMarginTop = parseFloat(headerTopStyle.marginTop) * 2;
|
||||
const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom);
|
||||
|
||||
const headerTopTotalHeight =
|
||||
headerTopInnerHeight + headerTopMarginHeight + headerTopMarginTop;
|
||||
|
||||
const HomeBannerTop = document.getElementById("BannerHeader");
|
||||
|
||||
// 1svh is to gget the div close enough to the image
|
||||
HomeBannerTop.style.setProperty(
|
||||
"height",
|
||||
`calc(100svh + -${headerTopTotalHeight}px)`
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
@ -161,17 +126,16 @@ export default function Header() {
|
||||
{bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? (
|
||||
<></>
|
||||
) : (
|
||||
<div id="BannerHeader">
|
||||
<img
|
||||
id="BannerBackgound"
|
||||
src={bannerInfo.imgUrl}
|
||||
alt={bannerInfo.imgAlt}
|
||||
/>
|
||||
<>
|
||||
<div
|
||||
id="BannerHeader"
|
||||
style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>
|
||||
<div>
|
||||
<h1>{bannerInfo.titleText}</h1>
|
||||
<h2>{bannerInfo.subtitleText}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Outlet context={{ bannerInfo, setBannerInfo }} />
|
||||
|
||||
@ -35,14 +35,7 @@ export default function UpdateBanner({
|
||||
titleText: updatedTitleText,
|
||||
subtitleText: updatedSubtitleText,
|
||||
imgUrl: updatedImgUrl,
|
||||
imgAlt: updatedImgAlt,
|
||||
});
|
||||
}, [
|
||||
updatedTitleText,
|
||||
updatedSubtitleText,
|
||||
updatedImgUrl,
|
||||
updatedImgAlt,
|
||||
updateBanner,
|
||||
]);
|
||||
}, [updatedTitleText, updatedSubtitleText, updatedImgUrl, updateBanner]);
|
||||
return <></>;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user