implement hamburger-type nav menumain

1 files changed, 16 insertions, 9 deletions

diff --git a/style.css b/style.css
index 42ad66a..1a5f578 100644
--- a/style.css
+++ b/style.css
@@ -12,7 +12,7 @@ main {
     margin: 0 1rem;
 }
 body > header {
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0 0.5rem 1rem;
     color: FieldText;
     background-color: Field;
     gap: 0.5rem 1rem;
@@ -25,23 +25,30 @@ nav {
 }
 nav ul {
     list-style-type: none;
-    border-left: 1px solid FieldText;
     margin: 0;
     padding: 0;
 }
-nav ul li {
-    display: inline;
-    border-right: 1px solid FieldText;
-    padding: 0 10px;
+nav > ul > li {
+    display: inline-block;
     margin: 0;
+    vertical-align: top;
+}
+nav > ul > li > details {
+    cursor: pointer;
+    text-align: right;
+    background-color: Field;
+    padding: 0 1rem;
+}
+nav > ul > li > details > ul {
+    text-align: left;
+}
+nav > ul > li > details > ul > li {
+    padding: 0.5rem 0;
 }
 nav ul li a,
 nav ul li a:visited {
     color: FieldText;
 }
-li {
-    margin-left: 1rem;
-}
 p {
     margin: 1rem 0;
     line-height: 1.5rem;