From fe62a0927b17c7d6108139b29d44d8f24bd05ea1 Mon Sep 17 00:00:00 2001 From: Brendan Chen Date: Sat, 5 Jul 2025 20:59:48 -0400 Subject: [PATCH] Add navigation bar and styling to main website --- _includes/navigation.html | 20 +++++++ _layouts/default.html | 11 +--- assets/global.css | 14 +++-- assets/navigation.css | 113 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 145 insertions(+), 13 deletions(-) create mode 100644 _includes/navigation.html create mode 100644 assets/navigation.css 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%; + } +}