mobile styling now updated to align with all recent changes

Author: JS-GitRepo

src/components/HomeViewHeader.tsx

@@ -12,7 +12,6 @@ interface Props {
 
 const HomeViewHeader = ({ subtitle, subEmoji, allParams }: Props) => {
   // GENERAL
-  const location = useLocation();
   const { hueRotation } = useContext(AppContext);
   const [isIntro, setIsIntro] = useState<boolean>(false);
 
@@ -54,21 +53,40 @@ const HomeViewHeader = ({ subtitle, subEmoji, allParams }: Props) => {
           <span className='material-symbols-outlined'>chevron_right</span>
         </div>
 
-        <div className='project-nav-type-cat'>
-          <NavLink
-            to={`/${allParams[0]}/${allParams[1]}/gamedev`}
-            className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
-            <animated.p style={hueRotation}>gamedev</animated.p>
-          </NavLink>
-          <NavLink
-            to={`/${allParams[0]}/${allParams[1]}/webdev`}
-            className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
-            <animated.p style={hueRotation}>webdev</animated.p>
-          </NavLink>
+        <div className='nav-ctr'>
+          <ul>
+            <li>
+              <NavLink
+                to={`/${allParams[0]}/portfolio/${allParams[2]}`}
+                className={({ isActive }) =>
+                  isActive ? "highlighted-link" : ""
+                }>
+                <animated.p style={hueRotation}>portfolio</animated.p>
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to={`/${allParams[0]}/blog/${allParams[2]}`}
+                className={({ isActive }) =>
+                  isActive ? "highlighted-link" : ""
+                }>
+                <animated.p style={hueRotation}>blog</animated.p>
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to={`/${allParams[0]}/introduction`}
+                className={({ isActive }) =>
+                  isActive ? "highlighted-link" : ""
+                }>
+                <animated.p style={hueRotation}>intro</animated.p>
+              </NavLink>
+            </li>
+          </ul>
         </div>
       </div>
 
-      <div className='nav-ctr'>
+      <div className='nav-category-ctr'>
         <ul>
           <li>
             <NavLink

src/components/styles/HomeViewFooter.css

@@ -15,7 +15,8 @@
   position: absolute;
   bottom: 5%;
   width: 75vw;
-  height: 100px;
+  max-width: 350px;
+  height: 110px;
   /* Flex */
   display: flex;
   flex-direction: column;
@@ -78,7 +79,11 @@
 
 @media only screen and (min-width: 768px) {
   .HomeViewFooter {
-    height: 80px;
+    height: 20px;
+    bottom: 10px;
+    border: none;
+    background-color: transparent;
+    backdrop-filter: none;
   }
 
   .HomeViewFooter .project-nav-ctr {

src/components/styles/HomeViewHeader.css

@@ -1,3 +1,14 @@
+/* - - - RESETS - - -*/
+.HomeViewHeader h1,
+.HomeViewHeader h2,
+.HomeViewHeader a,
+.HomeViewHeader p,
+.HomeViewHeader ul,
+.HomeViewHeader li {
+  margin: 0px;
+  padding: 0px;
+}
+
 /* - - - GENERAL - - -*/
 .HomeViewHeader {
   /* Position and Sizing */
@@ -30,41 +41,22 @@
 
 .HomeViewHeader .project-nav-ctr {
   display: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.HomeViewHeader .project-nav {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.HomeViewHeader .project-nav-type-cat {
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
-.HomeViewHeader .project-nav-type-cat a {
-  margin: 6px 6px 0px 6px;
-}
-
-.HomeViewHeader .nav-ctr {
+.HomeViewHeader .nav-category-ctr {
   display: flex;
   justify-content: center;
 }
 
-.HomeViewHeader .nav-ctr ul {
+.HomeViewHeader .nav-category-ctr ul {
   display: flex;
   justify-content: center;
   align-items: center;
   list-style: none;
   padding: 0px;
 }
 
-.HomeViewHeader .nav-ctr ul li {
+.HomeViewHeader .nav-category-ctr ul li {
   margin: 0px 10px;
 }
 
@@ -83,14 +75,34 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-evenly;
+  }
+
+  .HomeViewHeader .project-nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 5px;
   }
 
   .HomeViewHeader .nav-ctr {
-    width: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 5px;
+  }
+
+  .HomeViewHeader .nav-ctr a {
+    font-size: 20px;
+  }
+
+  .HomeViewHeader .nav-ctr ul {
+    display: flex;
+    list-style: none;
   }
 
   .HomeViewHeader .nav-ctr ul li {
     margin: 0px 10px;
+    height: 30px;
   }
 }

src/components/styles/WIPDisclaimer.css

@@ -41,8 +41,8 @@
 /* - - - - MEDIA QUERIES - - - - */
 @media only screen and (min-width: 768px) {
   .WIPDisclaimer {
-    bottom: 100px;
     padding: 10px;
     width: 80%;
+    bottom: 50px;
   }
 }