mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-15 13:24:17 -06:00
Merge branch 'dev' into homePage
This commit is contained in:
commit
7397e4edcc
@ -33,7 +33,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Schulich Off-Road</title>
|
||||
<title>UCalgary Baja</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@ -31,3 +31,7 @@
|
||||
list-style-type: none;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
#ender a img {
|
||||
height: 7svh;
|
||||
}
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
import "./Ender.css";
|
||||
import linkedInLogo from "./InBug-White.png";
|
||||
import instagramLogo from "./instagram-white-icon.png";
|
||||
import emailLogo from "./email-white.png";
|
||||
import authors from "./humans.txt";
|
||||
/**
|
||||
* @param {null} null - requires onthing
|
||||
* @returns {JSX.Element} Page - HTML tags and JS functionality
|
||||
@ -6,23 +10,55 @@ import "./Ender.css";
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
* @todo add who helped developed the site and finalize css
|
||||
*/
|
||||
const Ender = () => {
|
||||
export default function Ender() {
|
||||
const date = new Date();
|
||||
|
||||
return (
|
||||
<footer id="ender">
|
||||
<div>
|
||||
<p>© 2023 by Schulich Off-Road </p>
|
||||
<p>© {date.getFullYear()} UCalgary Baja </p>
|
||||
<p
|
||||
onClick={() => window.open("https://www.morphgenix.com/", "_blank")}
|
||||
id="pointerCursor">
|
||||
Partnered with Morphgenix
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://www.linkedin.com/company/schulich-off-road/">
|
||||
<img
|
||||
src={linkedInLogo}
|
||||
alt="Linkedin Logo"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/uofcbaja/">
|
||||
<img
|
||||
src={instagramLogo}
|
||||
alt="Intragram Logo"
|
||||
/>
|
||||
</a>
|
||||
<a href={authors}>
|
||||
<img
|
||||
src="https://humanstxt.org/img/oficial-logos/humanstxt-transparent-1ink.png"
|
||||
alt="humans txt"
|
||||
/>
|
||||
</a>
|
||||
<a href="mailto:uofcbaja@gmail.com?subject=Lets start something great">
|
||||
<img
|
||||
src={emailLogo}
|
||||
alt="email us logo"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.facebook.com/schulich.offroad/">
|
||||
<img
|
||||
src="https://img.icons8.com/ios-filled/50/FFFFFF/facebook--v1.png"
|
||||
alt="Facebook Logo"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<ul className="hidden">
|
||||
<li>Developed by:</li>
|
||||
<li>Brock</li>
|
||||
</ul>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Ender;
|
||||
}
|
||||
|
||||
BIN
src/Footer/InBug-White.png
Normal file
BIN
src/Footer/InBug-White.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/Footer/email-white.png
Normal file
BIN
src/Footer/email-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
27
src/Footer/humans.txt
Normal file
27
src/Footer/humans.txt
Normal file
@ -0,0 +1,27 @@
|
||||
/* TEAM */
|
||||
Lead:Brock
|
||||
Contact: hello [at] humanstxt.org
|
||||
Github: darkicewolf50
|
||||
|
||||
UI developer: Maria Macias
|
||||
Twitter: @maria_ux
|
||||
|
||||
One eyed illustrator: Carlos Mañas
|
||||
Twitter: @oneeyedman
|
||||
|
||||
Standard Man: Abel Cabans
|
||||
Twitter: @abelcabans
|
||||
|
||||
Web designer: Abel Sutilo
|
||||
Twitter: @abelsutilo
|
||||
From:Sevilla, Andalucia, Spain
|
||||
|
||||
/* THANKS */
|
||||
|
||||
|
||||
|
||||
/* SITE */
|
||||
Last update:2025/02/04
|
||||
Language: English
|
||||
Doctype:HTML5
|
||||
IDE: VSCode
|
||||
BIN
src/Footer/instagram-white-icon.png
Normal file
BIN
src/Footer/instagram-white-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@ -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: antiquewhite;
|
||||
background-color: #1f1f1f;
|
||||
/* position: absolute; */
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
header a {
|
||||
@ -38,37 +44,43 @@ header div {
|
||||
|
||||
#logo {
|
||||
height: 10svh;
|
||||
/* width: 10svw; */
|
||||
padding: 0.15rem;
|
||||
margin-left: 3svw;
|
||||
}
|
||||
|
||||
/* naviagation section */
|
||||
|
||||
/* determines spacing and total amount of page it takes up*/
|
||||
nav {
|
||||
width: 50%;
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
column-gap: 2svw;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
background-color: #1f1f1f;
|
||||
color: whitesmoke;
|
||||
|
||||
nav a li {
|
||||
background-color: white;
|
||||
padding: 0.5rem;
|
||||
/* border-left: solid 2px gray; */
|
||||
font-size: larger;
|
||||
|
||||
/* border-left: solid 2px white; */
|
||||
}
|
||||
/* removes first divider */
|
||||
/* can be removed if no borders from above */
|
||||
#FirstNav {
|
||||
nav a:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
nav a li:hover {
|
||||
background-color: gray;
|
||||
color: #a80029;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -79,8 +91,13 @@ nav ul {
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
creates dwon downs
|
||||
/* */
|
||||
|
||||
/* correct colour of links in dark mode */
|
||||
.darkmode nav a li::hover {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
/* creates drop downs */
|
||||
/* makes it so that the tags look the same whist having removing browser error */
|
||||
.DropDownHeader {
|
||||
display: inline-block;
|
||||
@ -120,12 +137,49 @@ creates dwon downs
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
/* bebug border, use margin to advantage, may cause error later */
|
||||
/* border-bottom: solid 1px black; */
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
/* -webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
black var(--fade-starts-at-bottom),
|
||||
transparent
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
black var(--fade-starts-at-bottom),
|
||||
transparent
|
||||
); */
|
||||
}
|
||||
|
||||
#BannerHeader img {
|
||||
#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-background: rgba(31, 31, 31, 0.8);
|
||||
--banner-text-padding: 2svh 2svw;
|
||||
--banner-text-rounding: 1rem;
|
||||
}
|
||||
|
||||
/* #BannerHeader img {
|
||||
position: relative;
|
||||
height: 100svh;
|
||||
width: inherit;
|
||||
top: 0;
|
||||
@ -133,36 +187,41 @@ creates dwon downs
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
z-index: -2;
|
||||
} */
|
||||
|
||||
/* used to postiion title and sub title */
|
||||
#BannerHeader div {
|
||||
margin-top: 15%;
|
||||
margin-top: 40svh;
|
||||
padding-left: 60svw;
|
||||
}
|
||||
|
||||
#BannerHeader h1 {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
margin: 0px;
|
||||
|
||||
margin-left: 3svw;
|
||||
|
||||
font-size: xx-large;
|
||||
font-size: 80px; /* todo make larger */
|
||||
font-weight: normal;
|
||||
|
||||
background-color: white;
|
||||
color: white;
|
||||
background-color: var(--banner-text-background);
|
||||
padding: var(--banner-text-padding);
|
||||
border-radius: var(--banner-text-rounding);
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
#BannerHeader h2 {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
|
||||
margin-left: 3svw;
|
||||
|
||||
font-size: xx-large;
|
||||
font-weight: normal;
|
||||
|
||||
background-color: white;
|
||||
color: white;
|
||||
background-color: var(--banner-text-background);
|
||||
padding: var(--banner-text-padding);
|
||||
border-radius: var(--banner-text-rounding);
|
||||
}
|
||||
|
||||
/* for dark mode */
|
||||
|
||||
@ -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,7 @@ export default function Header() {
|
||||
titleText: "UCalgary Baja",
|
||||
subtitleText: "Hello",
|
||||
imgUrl: "https://picsum.photos/200",
|
||||
imgAlt: "Lorem picsum",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
HeaderBannerHeight();
|
||||
headerPostion: "absolute",
|
||||
});
|
||||
|
||||
/**
|
||||
@ -53,36 +49,15 @@ 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.height = `calc(100svh + -${headerTopTotalHeight}px)`;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<header
|
||||
style={{
|
||||
position:
|
||||
bannerInfo.titleText === "" && bannerInfo.imgUrl === ""
|
||||
? "relative"
|
||||
: "absolute",
|
||||
}}>
|
||||
<Link to={"/"}>
|
||||
<img
|
||||
id="logo"
|
||||
@ -93,19 +68,19 @@ export default function Header() {
|
||||
<nav>
|
||||
<ul>
|
||||
<Link to={"/"}>
|
||||
<li id="FirstNav">Home</li>
|
||||
<li id="FirstNav">HOME</li>
|
||||
</Link>
|
||||
<Link to={"/About"}>
|
||||
<li>ABOUT</li>
|
||||
</Link>
|
||||
<Link to={"/Vehicles"}>
|
||||
<li>OUR VEHICLES</li>
|
||||
</Link>
|
||||
<Link to={"/"}>
|
||||
<li>About</li>
|
||||
</Link>
|
||||
<Link to={"/Teams"}>
|
||||
<li>Team</li>
|
||||
</Link>
|
||||
<Link to={"/"}>
|
||||
<li>History</li>
|
||||
<li>HISTORY</li>
|
||||
</Link>
|
||||
<Link to={"/OurSponsors"}>
|
||||
<li>Sponsors</li>
|
||||
<li>SPONSORS</li>
|
||||
</Link>
|
||||
{/* <Link to={"/OurSponsors"}>
|
||||
<li>Become a Sponsor</li>
|
||||
@ -141,7 +116,7 @@ export default function Header() {
|
||||
</ul>
|
||||
</li> */}
|
||||
<Link to={"/"}>
|
||||
<li>Contact Us</li>
|
||||
<li>CONTACT US</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -158,17 +133,16 @@ export default function Header() {
|
||||
{bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? (
|
||||
<></>
|
||||
) : (
|
||||
<div id="BannerHeader">
|
||||
<img
|
||||
id="BannerBackgound"
|
||||
src={bannerInfo.imgUrl}
|
||||
alt={bannerInfo.imgAlt}
|
||||
/>
|
||||
<div>
|
||||
<h1>{bannerInfo.titleText}</h1>
|
||||
<h2>{bannerInfo.subtitleText}</h2>
|
||||
<>
|
||||
<div
|
||||
id="BannerHeader"
|
||||
style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>
|
||||
<div>
|
||||
<h1>{bannerInfo.titleText}</h1>
|
||||
<h2>{bannerInfo.subtitleText}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Outlet context={{ bannerInfo, setBannerInfo }} />
|
||||
|
||||
@ -13,9 +13,9 @@ export default function Home() {
|
||||
<>
|
||||
<UpdateBanner
|
||||
updatedTitleText="UCalgary Baja"
|
||||
updatedSubtitleText="Catchphase goes here"
|
||||
updatedImgUrl="https://picsum.photos/200"
|
||||
updatetdImgAlt="cool shot of driver in car, replace later"
|
||||
updatedSubtitleText=""
|
||||
updatedImgUrl="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1748720160/Home_Baja_2025_soty4k.jpg"
|
||||
updatetdImgAlt="Lorem Picsum"
|
||||
/>
|
||||
<div className="HomePageLayout">
|
||||
<div>
|
||||
|
||||
@ -12,6 +12,7 @@ import Gallery from "./Gallery/Gallery";
|
||||
import "./index.css";
|
||||
import MockPage from "./MockDB/MockPage";
|
||||
import Home from "./Home/Home";
|
||||
import Home from "./Home/Home";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user