Fixed mobile view of pages on projects page

Signed-off-by: rodude123 <rodude123@gmail.com>

src/css/main.css

@@ -72,7 +72,7 @@
         display: inline-block;
         position: absolute;
         right: 75px;
-        top: -360px;
+        top: 0;
     }
 
     nav ul {
@@ -282,6 +282,12 @@
         text-align: center;
 
     }
+
+    section#allProjects #otherProj .oProjItem {
+        width: 45%;
+    }
+
+    /****** Contact Styles ******/
     
     section#contact {
       flex-direction: column;
@@ -294,7 +300,6 @@
       
     }
     
-    
     div#findMe .findMeContainer {
       flex-direction: column;
       justify-content: center;
@@ -331,9 +336,24 @@
     section#curriculumVitae .timelineItem:before {
         right: unset;
         left: unset;
-        border:none
+        border: none;
     }
 
+    section#allProjects #mainProj {
+        width: auto;
+    }
+
+    section#allProjects #otherProj {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    section#allProjects #otherProj .oProjItem {
+        width: auto;
+    }
+
+    /****** Contact Styles ******/
+
     div#findMe .socialIcons {
       flex-direction: column;
     }

src/css/projects.css

@@ -104,7 +104,7 @@ section#allProjects {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    padding: 0 2.5rem;
+    /*padding: 0 2.5rem;*/
     gap: 5em;
 }
 
@@ -119,29 +119,30 @@ section#allProjects #mainProj {
     -moz-border-radius: 10px;
     border-radius: 10px;
     padding: 1.5em 2em;
-    margin-top: 3em;
+    margin: 3em 2.5rem 0;
     width: 50%;
 }
 
-section#allProjects #otherProj .oProjItem {
-    flex-direction: column;
-    /*width: 30%;*/
-}
-
 section#allProjects #mainProj img {
     width: 100%;
     max-width: 30rem;
 }
 
 section#allProjects #otherProj {
-    /*display: flex;*/
-    /*flex-direction: row;*/
-    /*justify-content: flex-start;*/
-    /*align-items: center;*/
-    /*flex-wrap: wrap;*/
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 30%));
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: stretch;
+    flex-wrap: wrap;
     gap: 2rem;
+    border-top: 2px solid var(--grey);
+    padding: 5em 2.5rem 0;
+}
+
+section#allProjects #otherProj .oProjItem {
+    flex-direction: column;
+    width: 30%;
+    height: auto;
 }
 
 section#allProjects #otherProj img {

src/editor/css/editor.css

@@ -4,7 +4,7 @@ textarea {
     resize: none;
 }
 
-section#curriculumVitae, section#projects, section#settings {
+section#curriculumVitae, section#projects {
     margin: 0 2em;
 }
 
@@ -41,11 +41,11 @@ div.editorContainer > *, div.projectsGrid > * {
 }
 
 section#projects {
-    display: block;
+    display: none;
 }
 
-section#curriculumVitae, section#settings {
-    display: none;
+section#curriculumVitae {
+    display: block;
 }
 
 div.modifyBtnContainer {

src/editor/editor.html

@@ -11,8 +11,8 @@
     <nav class="sideNav">
         <a href="#" class="closeBtn" id="navClose">&times;</a>
         <ul>
-            <li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li>
-            <li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li>
+            <li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
+            <li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li>
             <li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li>
         </ul>
     </nav>