minor styling tweaks to LandingPage and Header on mobile

Author: JS-GitRepo

src/components/LandingPage.tsx

@@ -3,7 +3,6 @@ import { useLocation, useNavigate } from "react-router-dom";
 import "./styles/LandingPage.css";
 import LandingPageLink from "./LandingPageLink";
 import { animated, useTransition } from "react-spring";
-import AuthContext from "../contexts/AuthContext";
 import pixelBG from "../img/pixelBG_LowRes.png";
 import pixelFadeBG from "../img/animated-14fps.png";
 import AppContext from "../contexts/AppContext";
@@ -26,12 +25,10 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
   const navigate = useNavigate();
 
   // - - - - - CONTEXT - - - - -
-  const { currentPathContext, setCurrentPathContext } = useContext(AuthContext);
   const { hueRotation, setHueDuration } = useContext(AppContext);
 
   // - - - - - BG TRANSITION - - - - -
   const [hideLP, setHideLP] = useState<string>("");
-  const [hideHV, setHideHV] = useState<string>("hide");
   const [isActivePage, setIsActivePage] = useState<boolean>(true);
   const [currBG, setCurrBG] = useState<string>(pixelBG);
 
@@ -55,7 +52,6 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
   // - - - - - useEffects - - - - -
 
   useEffect(() => {
-    setCurrentPathContext(currentPath);
     if (firstRender) {
       setFirstRender(false);
     } else if (
@@ -65,7 +61,6 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
     ) {
       setCurrBG(pixelFadeBG);
       setIsActivePage(false);
-      setHideHV("");
       setTimeout(() => setIsLanding(false), 1500);
       setParamsArray[0]("home");
       setHueDuration(AppConfig.hueAnimDuration_Slow);
@@ -75,7 +70,6 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
       navigate("/landing");
       setCurrBG(pixelBG);
       setIsActivePage(true);
-      setHideHV("hide");
       setHideLP("");
       setHueDuration(4000);
     } else if (currentPath === "/landing") {

src/components/styles/HomeViewHeader.css

@@ -54,7 +54,6 @@
 .HomeViewHeader .nav-ctr {
   display: flex;
   justify-content: center;
-  width: 120px;
 }
 
 .HomeViewHeader .nav-ctr ul {

src/components/styles/LandingPage.css

@@ -10,26 +10,6 @@
   z-index: 5;
 }
 
-.LandingPage .lp-content-ctr {
-  /* . . . Positioning . . . */
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: 100%;
-  max-height: 100%;
-  width: 100%;
-  /* . . . Fonts . . . */
-  font-family: "munro";
-  font-weight: 400;
-  font-size: 18px;
-  letter-spacing: 4px;
-  font-smooth: never;
-  z-index: 1;
-}
-
 .LandingPage .bg-img-ctr {
   height: 100%;
   max-height: 100%;
@@ -56,25 +36,44 @@
   z-index: 0;
 }
 
+.LandingPage .lp-content-ctr {
+  /* . . . Positioning . . . */
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  /* . . . Fonts . . . */
+  font-family: "munro";
+  font-weight: 400;
+  font-size: 18px;
+  letter-spacing: 4px;
+  font-smooth: never;
+  z-index: 1;
+}
+
 .LandingPage .lp-content-ctr a {
   text-decoration: none;
   color: rgb(208, 247, 239);
 }
 
 .LandingPage .lp-content-ctr .header-ctr {
   display: flex;
-  flex: 1;
+  flex: 6;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   margin-bottom: 0%;
   width: 100%;
+  height: fit-content;
   z-index: 1;
 }
 
 .LandingPage .lp-content-ctr .PersonalIntro {
   display: flex;
-  flex: 1;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
@@ -91,14 +90,21 @@
 
 .LandingPage .lp-content-ctr .nav-ctr {
   display: flex;
-  flex: 1;
+  flex: 5;
   flex-direction: row;
   justify-content: space-evenly;
   box-sizing: border-box;
   width: 100%;
   z-index: 1;
 }
 
+.LandingPage .lp-content-ctr .lp-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 90px;
+}
+
 .LandingPage .lp-content-ctr .lp-link h1,
 .LandingPage .lp-content-ctr .lp-link h2 {
   font-weight: 600;