diff --git a/_includes/navigation.html b/_includes/navigation.html
new file mode 100644
index 0000000..3edbcd9
--- /dev/null
+++ b/_includes/navigation.html
@@ -0,0 +1,20 @@
+
diff --git a/_layouts/default.html b/_layouts/default.html
index 68dacdb..5ebb77b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -16,14 +16,9 @@
{{ page.title }}
- {% if page.isIndexPage != 1 %}
-
- {% endif %}
-
+
+ {% include navigation.html %}
+
{{ content }}
diff --git a/assets/global.css b/assets/global.css
index b202b33..0a004d7 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url('navigation.css');
body {
background-color: white;
font-family: 'Inter', sans-serif;
@@ -7,16 +8,17 @@ body {
display: flex;
flex-direction: column;
align-items: center;
+ margin: 16px;
}
-nav {
+header {
+ display: flex;
max-width: 720px;
width: 100%;
+ position: relative;
+ z-index: 1001;
}
-.nav-home-icon {
- max-width: 64px;
-}
main {
max-width: 720px;
@@ -35,8 +37,10 @@ a {
color: unset;
}
+
+
@media screen and (min-width: 720px) {
- nav {
+ main {
padding-top: 32px;
}
}
diff --git a/assets/navigation.css b/assets/navigation.css
new file mode 100644
index 0000000..e3d6453
--- /dev/null
+++ b/assets/navigation.css
@@ -0,0 +1,113 @@
+/* Navigation Styles */
+.navbar {
+ max-width: 720px;
+ width: 100%;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ height: 64px;
+}
+
+.nav-logo {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: black;
+}
+
+.nav-logo-icon {
+ height: 48px;
+ width: 48px;
+}
+
+.nav-menu {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ gap: 32px;
+}
+
+.nav-item {
+ display: flex;
+}
+
+.nav-link {
+ text-decoration: none;
+ color: black;
+}
+
+.nav-link:hover {
+ color: #666;
+}
+
+/* Hamburger Menu */
+.hamburger-toggle {
+ display: none;
+}
+
+.hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ width: 64px;
+ height: 64px;
+ justify-content: center;
+ align-items: center;
+ background-color: black;
+ gap: 4px;
+}
+
+.hamburger-line {
+ width: 20px;
+ height: 2px;
+ background-color: white;
+}
+
+.menu-overlay {
+ position: fixed;
+ top: 80px;
+ left: 0;
+ width: 100%;
+ height: calc(100% - 80px);
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+ opacity: 0;
+ visibility: hidden;
+ cursor: pointer;
+}
+
+/* Mobile Navigation */
+@media screen and (max-width: 768px) {
+ .hamburger {
+ display: flex;
+ }
+
+ .nav-menu {
+ position: fixed;
+ left: -100%;
+ top: 80px;
+ flex-direction: column;
+ background-color: white;
+ width: 100%;
+ box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+ z-index: 1000;
+ gap: 0;
+ }
+
+ .hamburger-toggle:checked ~ .nav-menu {
+ left: 0;
+ }
+
+ .hamburger-toggle:checked ~ .menu-overlay {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ .nav-menu .nav-link {
+ padding: 16px;
+ width: 100%;
+ }
+}