make screens more mobile compatible

layouts/default.vue

@@ -66,7 +66,8 @@ footer {
 
     footer {
         display: block;
-        width: 80%;
+        max-width: 80%;
+        min-width: 50%;
         align-items: center;
         text-align: center;
         margin: 5rem 1rem 1rem 1rem;

pages/about.vue

@@ -27,4 +27,16 @@ p {
     margin-bottom: 1rem;
     line-height: 1.5;
 }
+
+@media (max-width: 768px) {
+    .aboutpage {
+        margin: 1rem;
+    }
+    h1{
+        font-size: 1.5rem;
+    }
+    p{
+        font-size: 1rem;
+    }
+}
 </style>

pages/index.vue

@@ -82,6 +82,7 @@
 
 .section {
   margin-bottom: 2rem;
+  max-width: 100%;
 }
 
 h1 {
@@ -114,7 +115,9 @@ li {
 
 .biglogo {
   display: block;
-  max-width: 500px;
+  max-width: 450px;
+  max-width: 90%;
+  min-width: 10px;
   margin: auto;
 }
 
@@ -154,7 +157,8 @@ button:hover {
     font-size: 1.5rem;
   }
 
-  p {
+  p,
+  li {
     font-size: 1rem;
   }
 }