Skip to content
This repository was archived by the owner on Jul 4, 2025. It is now read-only.

Commit 88392c2

Browse files
ramonpzgramonpzg
committed
fixed responsiveness in nav bar and the menlo logo
1 parent 03683f0 commit 88392c2

3 files changed

Lines changed: 163 additions & 19 deletions

File tree

docs/public/menlo.png renamed to docs/src/assets/menlo.png

File renamed without changes.

‎docs/src/components/Navigation.astro‎

Lines changed: 158 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@ export interface Props {
44
}
55
66
const { activeTab = "home" } = Astro.props;
7-
const basePath = import.meta.env.BASE_URL || '';
7+
const basePath = import.meta.env.BASE_URL && import.meta.env.BASE_URL !== '/'
8+
? import.meta.env.BASE_URL
9+
: '';
810
---
911

1012
<nav class="floating-nav">
11-
<a href={`${basePath}/`} class={activeTab === "home" ? "active" : ""}>Home</a>
12-
<a href={`${basePath}/overview`} class={activeTab === "docs" ? "active" : ""}>Docs</a>
13-
<a href={`${basePath}/model-hub`} class={activeTab === "model-hub" ? "active" : ""}>Model Hub</a>
14-
<!-- <a href={`${basePath}/blog`} class={activeTab === "blog" ? "active" : ""}>Blog</a> -->
13+
<div class="nav-container">
14+
<a href={basePath === '' ? '/' : basePath} class={activeTab === "home" ? "active" : ""}>Home</a>
15+
<a href={`${basePath}/overview`} class={activeTab === "docs" ? "active" : ""}>Docs</a>
16+
<a href={`${basePath}/model-hub`} class={activeTab === "model-hub" ? "active" : ""}>Model Hub</a>
17+
<!-- <a href={`${basePath}/blog`} class={activeTab === "blog" ? "active" : ""}>Blog</a> -->
18+
</div>
1519
<button class="mobile-menu-toggle" aria-label="Toggle menu">
1620
<span></span>
1721
<span></span>
@@ -25,16 +29,25 @@ const basePath = import.meta.env.BASE_URL || '';
2529
top: 20px !important;
2630
left: 50% !important;
2731
transform: translateX(-50%) !important;
28-
background: rgba(0, 0, 0, 0.8) !important;
29-
padding: 1rem 2rem !important;
32+
background: rgba(0, 0, 0, 0.85) !important;
33+
padding: 0.8rem 1.5rem !important;
3034
border-radius: 50px !important;
3135
display: flex !important;
32-
gap: 2rem !important;
36+
justify-content: space-between;
37+
align-items: center;
3338
backdrop-filter: blur(10px) !important;
34-
border: 1px solid #98cbf9 !important;
39+
border: 2px solid #98cbf9 !important;
40+
box-shadow: 0 0 15px rgba(152, 203, 249, 0.5) !important;
3541
z-index: 1000 !important;
3642
width: auto !important;
3743
max-width: 90% !important;
44+
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
45+
}
46+
47+
.nav-container {
48+
display: flex;
49+
gap: 2rem;
50+
align-items: center;
3851
}
3952

4053
.floating-nav a {
@@ -43,12 +56,68 @@ const basePath = import.meta.env.BASE_URL || '';
4356
font-family: "Press Start 2P", cursive;
4457
font-size: 0.8rem;
4558
transition: all 0.3s ease;
59+
position: relative;
60+
padding: 0.3rem 0;
61+
}
62+
63+
/* Pixel animation on hover */
64+
.floating-nav a:hover:before,
65+
.floating-nav a.active:before {
66+
content: '';
67+
position: absolute;
68+
width: 100%;
69+
height: 2px;
70+
bottom: -4px;
71+
left: 0;
72+
background: transparent;
73+
box-shadow:
74+
0px 0px 0 #98cbf9,
75+
2px 0px 0 #98cbf9,
76+
4px 0px 0 #98cbf9,
77+
6px 0px 0 #98cbf9,
78+
8px 0px 0 #98cbf9,
79+
10px 0px 0 #98cbf9;
80+
animation: pixelate 0.8s steps(6) infinite;
81+
}
82+
83+
@keyframes pixelate {
84+
0% {
85+
background: transparent;
86+
box-shadow:
87+
0px 0px 0 #98cbf9,
88+
2px 0px 0 #98cbf9,
89+
4px 0px 0 #98cbf9,
90+
6px 0px 0 #98cbf9,
91+
8px 0px 0 #98cbf9,
92+
10px 0px 0 #98cbf9;
93+
}
94+
50% {
95+
background: transparent;
96+
box-shadow:
97+
2px 0px 0 #98cbf9,
98+
4px 0px 0 #98cbf9,
99+
6px 0px 0 #98cbf9,
100+
8px 0px 0 #98cbf9,
101+
10px 0px 0 #98cbf9,
102+
0px 0px 0 #98cbf9;
103+
}
104+
100% {
105+
background: transparent;
106+
box-shadow:
107+
4px 0px 0 #98cbf9,
108+
6px 0px 0 #98cbf9,
109+
8px 0px 0 #98cbf9,
110+
10px 0px 0 #98cbf9,
111+
0px 0px 0 #98cbf9,
112+
2px 0px 0 #98cbf9;
113+
}
46114
}
47115

48116
.floating-nav a:hover,
49117
.floating-nav a.active {
50118
color: #ffffff;
51119
text-shadow: 0 0 10px #98cbf9;
120+
transform: translateY(-2px);
52121
}
53122

54123
.mobile-menu-toggle {
@@ -58,33 +127,50 @@ const basePath = import.meta.env.BASE_URL || '';
58127
cursor: pointer;
59128
flex-direction: column;
60129
justify-content: space-between;
61-
height: 24px;
130+
height: 20px;
131+
width: 25px;
62132
padding: 0;
133+
transition: all 0.3s ease;
63134
}
64135

65136
.mobile-menu-toggle span {
66137
display: block;
67138
height: 3px;
68139
width: 25px;
69140
background-color: #98cbf9;
70-
border-radius: 3px;
141+
border-radius: 1px;
142+
transition: all 0.3s ease;
71143
}
72144

145+
/* Medium screen adjustments */
73146
@media (max-width: 768px) {
74147
.floating-nav {
75-
padding: 0.8rem 1.5rem;
76-
justify-content: space-between;
77-
width: 90%;
148+
padding: 0.7rem 1.2rem !important;
149+
}
150+
151+
.nav-container {
152+
gap: 1.2rem;
78153
}
79154

80155
.floating-nav a {
81-
font-size: 0.6rem;
156+
font-size: 0.7rem;
82157
}
83158
}
84159

160+
/* Mobile view */
85161
@media (max-width: 580px) {
86-
.floating-nav a:not(.active) {
162+
.floating-nav {
163+
border-radius: 30px !important;
164+
width: auto !important;
165+
padding: 0.8rem 1.2rem !important;
166+
}
167+
168+
.nav-container {
87169
display: none;
170+
flex-direction: column;
171+
align-items: center;
172+
gap: 0.8rem;
173+
width: 100%;
88174
}
89175

90176
.mobile-menu-toggle {
@@ -95,11 +181,50 @@ const basePath = import.meta.env.BASE_URL || '';
95181
flex-direction: column;
96182
align-items: center;
97183
gap: 1rem;
98-
border-radius: 15px;
184+
border-radius: 20px !important;
185+
padding: 1rem !important;
186+
background: rgba(0, 0, 0, 0.95) !important;
187+
}
188+
189+
.floating-nav.open .nav-container {
190+
display: flex;
191+
margin-top: 0.8rem;
192+
}
193+
194+
.floating-nav.open .mobile-menu-toggle span:nth-child(1) {
195+
transform: translateY(8px) rotate(45deg);
99196
}
100197

198+
.floating-nav.open .mobile-menu-toggle span:nth-child(2) {
199+
opacity: 0;
200+
}
201+
202+
.floating-nav.open .mobile-menu-toggle span:nth-child(3) {
203+
transform: translateY(-8px) rotate(-45deg);
204+
}
205+
206+
/* Pixel animation for active links */
101207
.floating-nav.open a {
102-
display: block;
208+
opacity: 0;
209+
transform: translateY(10px);
210+
animation: pixelFadeIn 0.3s forwards;
211+
animation-delay: calc(var(--index) * 0.1s);
212+
}
213+
214+
.floating-nav.open a:nth-child(1) { --index: 1; }
215+
.floating-nav.open a:nth-child(2) { --index: 2; }
216+
.floating-nav.open a:nth-child(3) { --index: 3; }
217+
.floating-nav.open a:nth-child(4) { --index: 4; }
218+
219+
@keyframes pixelFadeIn {
220+
0% {
221+
opacity: 0;
222+
transform: translateY(10px);
223+
}
224+
100% {
225+
opacity: 1;
226+
transform: translateY(0);
227+
}
103228
}
104229
}
105230
</style>
@@ -112,6 +237,21 @@ const basePath = import.meta.env.BASE_URL || '';
112237
if (menuToggle && nav) {
113238
menuToggle.addEventListener('click', () => {
114239
nav.classList.toggle('open');
240+
if (nav.classList.contains('open')) {
241+
(nav as HTMLElement).style.boxShadow = '0 0 20px rgba(152, 203, 249, 0.8)';
242+
setTimeout(() => {
243+
(nav as HTMLElement).style.boxShadow = '0 0 15px rgba(152, 203, 249, 0.5)';
244+
}, 300);
245+
}
246+
});
247+
248+
document.addEventListener('click', (event) => {
249+
const target = event.target as Node;
250+
if (nav.classList.contains('open') &&
251+
!nav.contains(target) &&
252+
target !== menuToggle) {
253+
nav.classList.remove('open');
254+
}
115255
});
116256
}
117257
});

‎docs/src/components/Welcome.astro‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import "@fontsource/press-start-2p";
33
import "@fontsource/vt323";
44
import Navigation from "./Navigation.astro";
5+
import { Image } from 'astro:assets';
6+
import menloLogo from '../assets/menlo.png';
57
---
68

79
<div class="container">
@@ -54,7 +56,9 @@ import Navigation from "./Navigation.astro";
5456
</a>
5557
<a href="https://menlo.ai" class="card">
5658
<div class="card-content">
57-
<div class="pixel-icon"><img src="/menlo.png" alt="Menlo" width="23%" height="23%" /></div>
59+
<div class="pixel-icon">
60+
<Image src={menloLogo} alt="Menlo" width={50} height={50} />
61+
</div>
5862
<h3>Menlo Labs</h3>
5963
<p>Our Parent</p>
6064
</div>

0 commit comments

Comments
 (0)