feat: responsive

app/components/Navbar.php

@@ -39,7 +39,7 @@
                 <?php endif;?>
                 <?php endif;?>
             </ul>
-            <form  method="POST"
+            <form method="POST"
                     action="/../user/logout"  >
                     <input class="section" type="submit" value="Log Out"> </input>
             </form>

app/public/styles/home/home.css

@@ -30,35 +30,6 @@
     gap: 0.25rem;
 }
 
-
-/* 
-select {
-    outline: 0;
-    background: #fff;
-    color: var(--teal);
-    border: 2px solid var(--teal);
-    padding: 4px;
-    border-radius: 4px;
-}
-
-.search {
-    color: black;
-    font-family: var(--poppins);
-    font-weight: 500;
-    background: transparent;
-    border-radius: 2px solid var(--teal) !important;
-}
-
-.button {
-    border-radius: 100px;
-    background: var(--teal);
-    padding: 1rem;
-    display: flex;
-}
-
-
-*/
-
 select,
 .search {
     outline: 0;
@@ -180,4 +151,29 @@ select,
     background: #919EAB;
     border-radius: 5.25px;
     opacity: 0.50;
+}
+
+@media screen and (max-width: 768px) {
+    .book-container {
+        width: 40%;
+    }
+    .topbar-container{
+        flex-direction: column;
+        width: 40%;
+    }
+    .selection{
+        flex-direction: column;
+        align-items: center;
+        gap:0.5rem;
+    }
+    .profile-button{
+        display: none;
+    }
+    .booklist-container{
+        flex-direction: row;
+    }
+    .button-container{
+        flex-direction: column;
+        gap:0.25rem;
+    }
 }
\ No newline at end of file

app/public/styles/template/navbar.css

@@ -16,7 +16,7 @@
 nav {
     margin: 0;
     font-family: var(--poppins);
-    font-size: 1rem;
+    font-size: 1.5vw;
     color: #212529;
     -webkit-text-size-adjust: 100%;
     -webkit-tap-highlight-color: transparent;
@@ -32,7 +32,9 @@ nav {
     background: #118A7E;
     transition: all 0.5s ease;
 }
-
+input{
+    font-size: 1.5vw;
+}
 .sidebar .top {
     text-align: center;
     line-height: auto;

app/public/styles/user/auth.css

@@ -89,7 +89,8 @@ p b{
     text-align: center;
 }
 
-/* 
-#profile-pic {
-    display: none;
-} */
+@media screen and (max-width: 768px) {
+    img {
+        max-width: 250px;
+    }
+}