add hamburger menu and change buttons color

8 files changed, 60 insertions, 8 deletions

diff --git a/archetypes/default.md b/archetypes/default.md
index 20576c6..23f1746 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -1,4 +1,8 @@
 ---
 title: "{{ replace .Name "-" " " | title }}"
+description: ""
 images: []
+draft: true
+menu: main
+weight: 0
 ---
diff --git a/assets/css/base.css b/assets/css/base.css
index 9656a3a..b651c48 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -34,10 +34,12 @@ h4 {
 
 header {
     background-color: var(--accent);
-    border-bottom: 5px solid var(--pink);
+    border-bottom: 5px solid var(--purple);
+    display: flex;
     font-size: var(--p);
     padding: 1.15rem 1.75rem;
     position: fixed;
+    justify-content: space-between;
     top: 0;
     width: 100%;
     z-index: 999;
diff --git a/assets/css/common.css b/assets/css/common.css
index d7b33b9..e6ae59e 100644
--- a/assets/css/common.css
+++ b/assets/css/common.css
@@ -7,8 +7,8 @@
 }
 
 .btn {
-    background-color: var(--green);
-    border: 1px solid var(--green);
+    background-color: var(--pink);
+    border: 1px solid var(--pink);
     border-radius: 15px;
     color: var(--foreground);
     font-size: var(--p);
@@ -21,5 +21,5 @@
 .btn:hover,
 .btn:active {
     background-color: var(--background);
-    color: var(--green);
+    color: var(--pink);
 }
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 0bd68dc..d3e2551 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,3 +1,25 @@
+/* MENU */
+.menu__items {
+    background-color: var(--accent);
+    border-bottom: 5px solid var(--purple);
+    flex-direction: column;
+    height: 70vh;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 100%;
+    width: 100vw;
+}
+
+.menu__items__item {
+    display: block;
+    padding: 0.75rem 1.45rem;
+}
+
+.menu__toggle[open=""] {
+    color: var(--pink);
+}
+
 /* HERO */
 .hero {
     align-items: center;
@@ -24,7 +46,6 @@
 
 .cta {
     display: block;
-    line-height: 1.2;
     text-align: center;
 }
 
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index bc57237..1eb138d 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -1,6 +1,10 @@
 ---
-title: "Index"
+title: "Home"
+description: ""
 images: []
+draft: false
+menu: main
+weight: 1
 ---
 
 # Piercer  
diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
new file mode 100644
index 0000000..7824b17
--- /dev/null
+++ b/exampleSite/content/about.md
@@ -0,0 +1,8 @@
+---
+title: "About"
+description: ""
+images: []
+draft: false
+menu: main
+weight: 2
+---
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index accf151..3d7e7d4 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -13,7 +13,6 @@
     </div>
 
     <!-- Menu -->
-    <div class="header__menu">
-    </div>
+    {{ partial "menu.html" . }}
 
 </header>
\ No newline at end of file
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
new file mode 100644
index 0000000..9200c43
--- /dev/null
+++ b/layouts/partials/menu.html
@@ -0,0 +1,14 @@
+<nav class="menu">
+    <details class="menu__toggle">
+        <summary class="menu__toggle__title">Menu</summary>
+
+        <div class="menu__items">
+            {{ range $.Site.Menus.main }}
+            <a href="{{ .URL }}" class="menu__items__item" alt="{{ .Name }}">
+                {{ .Name }}
+            </a>
+            {{ end }}
+        </div>
+
+    </details>
+</nav>
\ No newline at end of file