feat(contact, header): fixed header link hover and made header able to match inital main color

src/Contact/Contact.css

@@ -44,13 +44,16 @@
 
 #Contact div:nth-child(1) div:last-child {
 	flex-direction: column;
+	margin: 0px;
 	margin-left: auto;
 	margin-right: 16svw;
+	font-size: 30px;
 }
 
 #Contact div:nth-child(1) div:last-child h1 {
 	margin: 0px;
 	font-size: 40px;
+	width: inherit;
 }
 
 #Contact div:nth-child(1) img {

src/Contact/Contact.jsx

@@ -8,7 +8,8 @@ export default function Contact() {
 				updatedTitleText=""
 				updatedSubtitleText=""
 				updatedImgUrl=""
-				updatetdImgAlt="Lorem Picsum"
+				updatedImgAlt="Lorem Picsum"
+				updatedHeaderBackgroundColour="black"
 			/>
 			<div>
 				<div>

src/Header/Header.css

@@ -1,19 +1,22 @@
 header {
 	display: flex;
 	flex-direction: row;
-	margin: 1%;
-	margin-top: 1svh;
-	padding-right: 0.5svw;
+	/* margin: 1%;
+	margin-top: 1svh; */
+	margin: 1svh 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;
+
+	color: whitesmoke;
 }
 
 header a {
@@ -30,6 +33,8 @@ header div button {
 	background-color: inherit;
 	border: solid 2px gray;
 	border-radius: 1rem;
+
+	margin-right: 0.5svw;
 }
 
 header div button img {
@@ -65,25 +70,20 @@ nav a {
 	text-decoration: none;
 	color: inherit;
 	cursor: pointer;
-	background-color: #1f1f1f;
-	color: whitesmoke;
+	/* background-color: #1f1f1f; */
+	/* color: whitesmoke; */
 
 	font-size: larger;
 
 	/* border-left: solid 2px white; */
 }
-/* removes first divider */
-/* can be removed if no borders from above */
-nav a:first-child {
-	border-left: none;
-}
 
-nav a li:hover {
+nav a:hover {
 	color: #a80029;
 }
 
 /* correct colour of links in dark mode */
-.darkmode nav a li::hover {
+.darkmode nav a:hover {
 	filter: hue-rotate(180deg);
 }
 

src/Header/Header.js

@@ -18,6 +18,7 @@ export default function Header() {
 		subtitleText: "Hello",
 		imgUrl: "https://picsum.photos/200",
 		headerPostion: "absolute",
+		headerBackgroundColour: "white",
 	});
 
 	/**
@@ -57,6 +58,10 @@ export default function Header() {
 						bannerInfo.titleText === "" && bannerInfo.imgUrl === ""
 							? "relative"
 							: "absolute",
+					outline:
+						bannerInfo.titleText === "" && bannerInfo.imgUrl === ""
+							? `1.25svh solid ${bannerInfo.headerBackgroundColour}`
+							: "",
 				}}>
 				<Link to={"/"}>
 					<img

src/Header/UpdateBanner.jsx

@@ -27,6 +27,7 @@ export default function UpdateBanner({
 	updatedSubtitleText = "Hello",
 	updatedImgUrl = "https://picsum.photos/200",
 	updatedImgAlt = "Lorem picsum",
+	updatedHeaderBackgroundColour = "white",
 }) {
 	const context = useOutletContext();
 	const updateBanner = context.setBannerInfo;
@@ -35,7 +36,14 @@ export default function UpdateBanner({
 			titleText: updatedTitleText,
 			subtitleText: updatedSubtitleText,
 			imgUrl: updatedImgUrl,
+			headerBackgroundColour: updatedHeaderBackgroundColour,
 		});
-	}, [updatedTitleText, updatedSubtitleText, updatedImgUrl, updateBanner]);
+	}, [
+		updatedTitleText,
+		updatedSubtitleText,
+		updatedImgUrl,
+		updateBanner,
+		updatedHeaderBackgroundColour,
+	]);
 	return <></>;
 }