feat(dev): css errors fixed, and homepage set up before realizing that there was a homepage branch

This commit is contained in:
darkicewolf50 2025-04-26 14:22:56 -06:00
parent 3cb3eb9b19
commit 079c6908ef
2 changed files with 40 additions and 15 deletions

View File

@ -45,37 +45,36 @@ header div {
/* naviagation section */
/* determines spacing and total amount of page it takes up*/
nav {
width: 50%;
}
nav a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
nav a li {
background-color: #1f1f1f;
color: whitesmoke;
padding: 1rem;
font-size: larger;
/* border-left: solid 2px gray; */
/* border-left: solid 2px white; */
}
/* removes first divider */
/* can be removed if no borders from above */
#FirstNav {
nav a:first-child {
border-left: none;
}
/* #FirstNav {
} */
nav a li:hover {
/* background-color: gray; */
color: #a80029;
}
/* correct colour of links in dark mode */
.darkmode nav a li::hover {
filter: hue-rotate(180deg);
}
nav ul {
display: flex;
flex-direction: row;
@ -84,8 +83,7 @@ nav ul {
margin: 0px;
padding: 0px;
}
creates dwon downs
/* */
/* creates drop downs */
/* makes it so that the tags look the same whist having removing browser error */
.DropDownHeader {
display: inline-block;
@ -129,6 +127,10 @@ creates dwon downs
/* border-bottom: solid 1px black; */
}
:root {
--fade-starts-at: 80%;
}
#BannerHeader img {
position: absolute;
height: 100svh;
@ -139,8 +141,17 @@ creates dwon downs
background-position: center;
z-index: -2;
-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent);
mask-image: linear-gradient(to bottom, black 80%, transparent);
-webkit-mask-image: linear-gradient(
to bottom,
black var(--fade-starts-at),
transparent
);
mask-image: linear-gradient(
to bottom,
black var(--fade-starts-at),
transparent
);
}
/* used to postiion title and sub title */

14
src/Home/Home.jsx Normal file
View File

@ -0,0 +1,14 @@
import UpdateBanner from "../Header/UpdateBanner";
export default function AboutsUs() {
return (
<>
<UpdateBanner
updatedTitleText="UCalgary Baja"
updatedSubtitleText=""
updatedImgUrl="https://picsum.photos/200"
updatetdImgAlt="Lorem Picsum"
/>
</>
);
}