Mobile responsiveness

frontend/src/Style/LandingPage.css

@@ -9,10 +9,10 @@
         ". welcomep ." ;
 }
 
-.title { 
+.title {
     grid-area: Title;
     place-self: center;
-    font-family: Arial, Helvetica, sans-serif; 
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 .welcome-svg {
@@ -26,7 +26,7 @@
     padding-left: 3rem;
 }
 
-.welcome-p { 
+.welcome-p {
     grid-area: welcomep;
     text-align: left;
     margin: 25px 50px 100px;
@@ -35,7 +35,20 @@
 }
 
 
+li::marker {
+    color: rgb(237, 199, 31);
+}
+li {
+    color: black;
+    padding-left: 1em;
+    cursor: pointer;
+}
+
+ul {
+    list-style: '★';
+}
 
+/* Sets the marker to a "star" character */
 
 .flex2 {
 
@@ -43,46 +56,46 @@
 
 @media (orientation: portrait){
     .title {
-        font-size: xx-large;
-        padding-top: 10%;
+        font-size: 30px;
+        padding: 5px;
     }
 
     .landing-page {
         display: flex;
         flex-direction: column;
-        align-items: center;
     }
 
     .favorites {
         font-size: large;
-        padding: 0;
+        padding: 15px;
+        align-self: center;
     }
 
     .welcome-p {
-        margin: 0px;
+        margin: 15px;
         margin-bottom: 10px;
         font-size: medium;
     }
 
     .welcome-svg {
-
+        max-width: 300px;
     }
 
     .navbutton.left {
         grid-area: left;
         place-self: center;
-        position: static;
+        position: fixed;
         top: 90%;
-        left: 10%;
+        left: 3%;
         margin-right: auto;
     }
 
     .navbutton.right {
         grid-area: right;
         place-self: center;
-        position: static;
+        position: fixed;
         top: 90%;
-        right: 5%;
+        right: 3%;
         margin-left: auto;
     }
     .flex2 {
@@ -91,41 +104,32 @@
         justify-content: center;
     }
 }
-/**
-@media (orientation: portrait){
+
+@media (max-width: 900px) and (max-height: 400px) {
+    .welcome-svg {
+        max-width: 200px;
+    }
+
     .title {
-        font-size: xx-large;
+        font-size: x-large;
     }
 
     .landing-page {
-        grid-template-columns: 1fr;
-        grid-template-rows: 0.5fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 2fr 2fr 1fr;
+        grid-template-rows: 1fr 10fr;
         grid-template-areas:
-    ". Title ."
-    ". welcome-svg ."
-    ". welcome-p ."
-    ". navbuttons .";
-        justify-content: start;
-    }
-
-    .favorites {
-        padding-top: 10rem;
-        font-size: large;
+        "Title Title Title Title"
+        "left welcomesvg favorites right";
     }
 
     .welcome-p {
-        margin: 0px;
-        margin-bottom: 10px;
-        font-size: large;
+        margin-top: 25px;
+        margin-bottom: 1px;
+        font-size: small;
+        display: none;
     }
 
-    .navbutton.right {
-        grid-area: navbuttons;
-        place-self: center;
-    }
-
-    .navbutton.left {
-        grid-area: navbuttons;
+    .favorites {
+        grid-area: favorites;
     }
 }
-**/
\ No newline at end of file

frontend/src/Style/MainPage.css

@@ -6,6 +6,9 @@
     background-color: grey;
 }
 
+.navbutton {
+    cursor: pointer;
+}
 
 .navbutton.left {
     grid-area: left;
@@ -16,7 +19,7 @@
     margin-left: 10rem;
 }
 
-.navbutton button{
+.navbutton button {
     font-size: large;
     width: 5rem;
     height: 2rem;