Skip to content

Commit 3bafd36

Browse files
alizardguyalizardguy
committed
rework
1 parent 8d80179 commit 3bafd36

File tree

3 files changed

+173
-41
lines changed

3 files changed

+173
-41
lines changed

‎src/_includes/partials/site-header.html‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,32 @@
11
<header class="site-header">
22
<nav class="site-header-frame">
3-
<a href="">alizardguy</a>
3+
<a href="/index.html" class="logo">alizardguy</a>
44

55
<input type="checkbox" id="menu-toggle" class="menu-toggle" aria-controls="main-navigation" aria-expanded="false">
66

77
<label for="menu-toggle">
8-
<svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
9-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
10-
</svg>
8+
<a class="menu-toggle-button">🦎</a>
119
</label>
1210

13-
<div id="main-navigation">
14-
<a href="">Home</a>
15-
<a href="">Blog</a>
11+
<ul id="main-navigation" class="nav-menu">
12+
<li>
13+
<a href="" class="nav-link">Home</a>
14+
</li>
1615

17-
<div class="dropdown-link">
18-
<a href="https://www.youtube.com/@alizardguy">YouTube</a>
19-
<a href="https://github.com/alizardguy">Github</a>
20-
</div>
21-
</div>
16+
<li>
17+
<a href="" class="nav-link">Blog</a>
18+
</li>
19+
20+
<li class="dropdown">
21+
<a href="" class="dropdown-link">
22+
Socials
23+
</a>
24+
25+
<ul class="dropdown-menu">
26+
<li><a href="">YouTube</a></li>
27+
<li><a href="">Github</a></li>
28+
</ul>
29+
</li>
30+
</ul>
2231
</nav>
2332
</header>

‎src/assets/css/base.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
:root {
2+
--primary-color: #5180e6; /* blue-600 */
3+
--primary-hover-color: #5180e6; /* blue-700 */
4+
--text-color: #374151; /* gray-700 */
5+
--bg-color: #ffffff;
6+
}
7+
18
body {
29
margin: 0;
310
}

‎src/assets/css/header.css‎

Lines changed: 145 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,60 +14,176 @@ nav {
1414
align-items: center;
1515
}
1616

17+
.logo {
18+
text-decoration: none;
19+
color: black;
20+
font-size: large;
21+
}
22+
23+
.nav-link, .dropdown-link {
24+
display: block;
25+
padding: 0.5rem 0.75rem;
26+
color: var(--text-color);
27+
font-weight: 500;
28+
border-radius: 0.375rem;
29+
transition: color 0.3s, background-color 0.3s;
30+
text-decoration: none;
31+
}
32+
33+
.nav-link:hover, .dropdown-link:hover {
34+
color: var(--primary-color);
35+
background-color: #f3f4f6;
36+
}
37+
38+
.cta-button {
39+
display: block;
40+
width: 100%; /* Full width on mobile */
41+
padding: 0.5rem 1rem;
42+
margin-top: 0.5rem;
43+
background-color: var(--primary-color);
44+
color: white;
45+
font-weight: 600;
46+
border-radius: 0.5rem;
47+
text-align: center;
48+
border: none;
49+
cursor: pointer;
50+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
51+
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
52+
}
53+
54+
.cta-button:hover {
55+
background-color: var(--primary-hover-color);
56+
transform: scale(1.02);
57+
box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.15);
58+
}
59+
1760
#menu-toggle {
1861
display: none;
1962
}
2063

21-
.site-header-frame
64+
.menu-toggle-button
2265
{
23-
display: flex;
24-
flex-direction: row;
25-
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
66+
display: none;
2667
}
2768

28-
@media (max-width: 1023px) {
29-
.nav-menu {
30-
flex-direction: column;
31-
position: absolute;
32-
top: 100%;
33-
left: 0;
34-
width: 100%;
35-
background-color: white;
36-
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
37-
max-height: 0;
38-
overflow: hidden;
39-
opacity: 0;
69+
.nav-menu {
70+
display: flex;
71+
align-items: center;
72+
list-style: none;
73+
padding: 0;
74+
margin: 0;
4075
}
4176

42-
.nav-menu a, .nav-menu .dropdown-link {
43-
padding-left: 1.5rem;
44-
}
77+
.nav-menu > li {
78+
margin-left: 2rem;
79+
}
80+
81+
.menu-label {
82+
display: none;
83+
}
4584

46-
#menu-toggle:checked ~ .nav-menu {
47-
max-height: 500px;
48-
opacity: 1;
49-
}
85+
/* dropdown stuff */
86+
.dropdown {
87+
position: relative;
5088
}
5189

5290
.dropdown-menu {
91+
list-style: none;
92+
padding: 0;
93+
margin: 0;
5394
opacity: 0;
5495
visibility: hidden;
5596
transform: translateY(10px);
5697
transition: all 0.3s ease-out;
57-
/* Desktop positioning */
58-
position: absolute;
98+
position: absolute; /* Desktop positioning */
99+
top: 100%;
100+
margin-top: 0.75rem;
101+
width: 160px;
102+
background-color: var(--bg-color);
103+
border-radius: 0.5rem;
104+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
105+
overflow: hidden;
106+
border: 1px solid #e5e7eb;
107+
}
108+
109+
.dropdown-menu a {
110+
padding: 0.5rem 1rem;
111+
font-size: 0.875rem; /* text-sm */
112+
color: var(--text-color);
113+
text-decoration: none;
114+
transition: background-color 0.15s, color 0.15s;
115+
}
116+
117+
.dropdown-menu a:hover {
118+
background-color: #eff6ff; /* blue-50 */
119+
color: var(--primary-color);
59120
}
60121

61-
.dropdown:hover .dropdown-menu {
122+
.dropdown:hover .dropdown-menu,
123+
.dropdown:focus-within .dropdown-menu {
62124
opacity: 1;
63125
visibility: visible;
64126
transform: translateY(0);
65127
}
66128

129+
/* ---------------------------------- */
130+
/* Mobile Breakpoint (Max Width 1023px) */
131+
/* ---------------------------------- */
67132
@media (max-width: 1023px) {
133+
.menu-label {
134+
display: block;
135+
padding: 0.5rem;
136+
border-radius: 0.5rem;
137+
cursor: pointer;
138+
transition: background-color 0.2s;
139+
}
140+
.menu-label:hover {
141+
background-color: #f3f4f6;
142+
}
143+
144+
.menu-toggle-button
145+
{
146+
display: flex;
147+
}
148+
149+
150+
.nav-menu {
151+
flex-direction: column;
152+
align-items: flex-start;
153+
position: absolute;
154+
top: 100%;
155+
left: 0;
156+
width: 100%;
157+
background-color: var(--bg-color);
158+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
159+
max-height: 0;
160+
overflow: hidden;
161+
opacity: 0;
162+
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
163+
}
164+
.nav-menu > li {
165+
width: 100%;
166+
margin-left: 0;
167+
border-top: 1px solid #f3f4f6;
168+
}
169+
.nav-menu .nav-link, .nav-menu .dropdown-link {
170+
padding: 0.75rem 1.5rem;
171+
width: 100%;
172+
border-radius: 0;
173+
}
174+
175+
#menu-toggle:checked ~ .nav-menu {
176+
max-height: 500px;
177+
opacity: 1;
178+
}
179+
68180
.dropdown-menu {
69-
position: static; /* Stack naturally on mobile */
70-
transform: none;
71-
padding-left: 1rem;
181+
position: static;
182+
width: 100%;
183+
margin: 0;
184+
box-shadow: none;
185+
border: none;
186+
border-radius: 0;
187+
background-color: #f9fafb;
72188
}
73189
}

0 commit comments

Comments
 (0)