brendan/brendan-ch.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add navigation bar and styling to main website

Browse Source
This commit is contained in:
Brendan Chen
2025-07-05 20:59:48 -04:00
parent d6273f0299
commit fe62a0927b
4 changed files with 145 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
_includes/navigation.html Normal file
View File

@@ -0,0 +1,20 @@
<nav class="navbar">
<a href="/" class="nav-logo">
<img src="/assets/web-app-manifest-512x512.png" alt="Interchange home" class="nav-logo-icon">
</a>
<input type="checkbox" id="hamburger-toggle" class="hamburger-toggle">
<label for="hamburger-toggle" class="hamburger">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</label>
<label for="hamburger-toggle" class="menu-overlay"></label>
<ul class="nav-menu">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/projects" class="nav-link">Projects</a>
</li>
</ul>
</nav>

11
_layouts/default.html
View File

@@ -16,14 +16,9 @@
<title>{{ page.title }}</title> <title>{{ page.title }}</title>
</head> </head>
<body> <body>
{% if page.isIndexPage != 1 %} <header>
<nav> {% include navigation.html %}
<a href="/" title="Home"> </header>
back to home
</a>
</nav>
{% endif %}
<main> <main>
{{ content }} {{ content }}
</main> </main>

14
assets/global.css
View File

@@ -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('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 { body {
background-color: white; background-color: white;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
@@ -7,16 +8,17 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 16px;
} }
nav { header {
display: flex;
max-width: 720px; max-width: 720px;
width: 100%; width: 100%;
position: relative;
z-index: 1001;
} }
.nav-home-icon {
max-width: 64px;
}
main { main {
max-width: 720px; max-width: 720px;
@@ -35,8 +37,10 @@ a {
color: unset; color: unset;
} }
@media screen and (min-width: 720px) { @media screen and (min-width: 720px) {
nav { main {
padding-top: 32px; padding-top: 32px;
} }
} }

113
assets/navigation.css Normal file
View File

@@ -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%;
}
}