Made site more mobile compatible

Fixed some mobile css issues
Moved Navbar to bottom on mobile

src/components/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import "./css/App.css";
 import Navigation from './Navigation';
 import Home from './Home';
 import Github from './Github';

src/components/Social.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import './css/Social.css';
-import Card from './subcomponents/Card';
 import Theater from './subcomponents/Theater';
 
 
@@ -20,11 +18,11 @@ class Social extends React.Component {
         />
         <div className="links">
           <a href="https://github.com/RaspberryProgramming" target="_blank" rel="noreferrer">
-            <img src="/img/github.webp"/>
+            <img src="/img/github.webp" alt="Github"/>
           </a>
 
           <a href="https://www.linkedin.com/in/camerin-figueroa-2662bb157/" target="_blank" rel="noreferrer">
-            <img src="/img/linkedin.webp"/>
+            <img src="/img/linkedin.webp" alt="linked in"/>
           </a>
         </div>
       </div>

src/components/css/About.css

@@ -1,6 +1,8 @@
 .About {
     background-color: #3F3F4A;
-    color: #AA9AA0
+    color: #AA9AA0;
+    padding-bottom: 5.5rem;
+
 }
 
 .About .title {

src/components/css/App.css

@@ -0,0 +1,10 @@
+.App {
+    display:flex;
+    flex-direction: column;
+}
+
+@media only screen and (max-width: 600px) {
+    .App {
+        flex-direction: column-reverse;
+    }
+}

src/components/css/Card.css

@@ -1,8 +1,8 @@
 .card {
     display: flex;
     flex-direction: row;
-    padding: 50px;
-    width: 75vw;
+    padding: 10px;
+    width: 85vw;
     margin-left: auto;
     margin-right: auto;
 }

src/components/css/Github.css

@@ -59,10 +59,13 @@
     display: flex;
     flex-direction: row;
     padding: 10px;
+    width: 100%;
+    flex-wrap: wrap;
 }
 
 .repo .language {
     padding: 5px;
+    margin: 2px;
     margin-left: 5px;
     border-radius: 10px;
     background-color: #AAAAAA;

src/components/css/Navigation.css

@@ -1,11 +1,11 @@
 .Navigation {
-
-    height: 63px;
+    z-index:9;
+    position: relative;
+    height: 4rem;
+    width: 100vw;
     display: flex;
     flex-direction: row;
     background-color: #3F3F4A;
-    border-color: gray;
-    border-bottom-style: solid;
     margin:0;
     padding:0;
 }
@@ -25,7 +25,9 @@
     text-align:center;
     font-size: 16px;
     padding: 5px;
-    height: 60px;
+    padding-right: 10px;
+    padding-left: 10px;
+    height: 4rem;
     border: none;
     color: #CFC0C0 !important;
 
@@ -33,7 +35,7 @@
 
 .Navigation a:hover, .Navigation button:hover {
     background-color: #2F2F32;
-    height: 90px;
+    height: 5rem;
     transition: background-color 300ms ease-out, height 300ms ease-out;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
@@ -50,3 +52,24 @@
     height: 24px;
     width: 24px;
 }
+
+@media only screen and (max-width: 600px) {
+    .Navigation {
+        position: fixed;
+        bottom:0;
+        left:0;
+        height: 5.5rem;
+    }
+
+    .Navigation a, .Navigation button {
+        height: 5.5rem;
+    }
+
+    .Navigation a:hover, .Navigation button:hover {
+        background-color: #2F2F32;
+        height:5.5rem;
+        transition: background-color 300ms ease-out;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+    }
+}

src/components/css/Social.css

@@ -2,6 +2,9 @@
     background-color: #3D3C3F;
     min-height: 100vh;
     color: #AA9AA0;
+    width:100vw;
+    display:flex;
+    flex-direction:column;
 }
 
 .Social .links {
@@ -9,16 +12,16 @@
     flex-direction:row;
     align-content:center;
     justify-content:center;
-    align-items:start;
+    align-items: flex-start;
     width:75vw;
     margin-left: auto;
     margin-right: auto;
 }
 
 .Social .links img {
-    height: 10vh;
+    width: 10rem;
 }
 
 .Social .links * {
-    margin: 25px;
+    margin: 10px;
 }