wip: styling the navbar - badly

1 files changed, 60 insertions, 1 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index 7835f2e..923d397 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -2,6 +2,8 @@
     /* --link-colour: rgb(64, 21, 92); */
     --link-colour: darkslategray;
     --dark-gray: #4c4c4c;
+    border: solid darkgray;
+    border-radius: 3px;
 }
 
 * {
@@ -9,8 +11,65 @@
     margin: 0;
     padding: 0;
     font-size: 16px;
-    font-family: "Noto Sans", Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
 }
+
+/* 
+  Extra small devices (phones, 600px and down) 
+*/
+@media only screen and (max-width: 600px) {
+  nav {
+    flex-direction: column;
+  }
+  nav ul {
+    flex-direction: column;
+    padding-top: 0.5rem;
+    padding-left: 10px;
+  }
+  nav li {
+    padding: 0.5rem 0;
+  }
+} 
+
+
+nav ul {
+    border: solid darkgray;
+    border-radius: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    list-style: none;
+    background-color: white;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    padding-left: 1rem;
+    font: Helvetica;
+    color: black;
+    text-align: center;
+}
+
+nav a {
+    text-decoration: none;
+    color: #0d47a1;
+    font-size: 1.3rem;
+    font-style: bold;
+}
+
+nav ul li:hover {
+    background-color: lightgray;
+}
+
+.empty-basket {
+    background-color: white;
+    padding: 3px 20px;
+    margin: 1.1rem 1.1rem;
+
+}
+
 .section-title {
     position: relative;
     width: max-content;