Skip to content

Commit 54894a2

Browse files
alizardguyalizardguy
committed
deploy: 8d80179 
1 parent 668e4a5 commit 54894a2

File tree

12 files changed

+138
-411
lines changed

12 files changed

+138
-411
lines changed

‎404.html‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,44 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, inital-scale=1.0">
6-
<title>Oops!</title>
7-
<meta name="description" content="Error 404: Page Not Found">
8-
<meta name="author" content="alizardguy">
9-
<link rel="stylesheet" href="/css/navbar.css">
10-
<link rel="stylesheet" href="/css/dividers.css">
11-
<link rel="stylesheet" href="/css/base.css">
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<link rel="stylesheet" href="/assets/css/header.css">
9+
<link rel="stylesheet" href="/assets/css/base.css">
1210
</head>
11+
1312
<body>
14-
<header class="header">
15-
<a href="/index" class="logo">alizardguy</a>
16-
<nav>
17-
<ul>
18-
<li><a href="/index">Home</a></li>
19-
<li><a href="/socials">Socials</a></li>
20-
<li><a href="https://blog.alizardguy.com/">Blog</a></li>
21-
</ul>
13+
14+
<header class="site-header">
15+
<nav class="site-header-frame">
16+
<a href="">alizardguy</a>
17+
18+
<input type="checkbox" id="menu-toggle" class="menu-toggle" aria-controls="main-navigation" aria-expanded="false">
19+
20+
<label for="menu-toggle">
21+
<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">
22+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
23+
</svg>
24+
</label>
25+
26+
<div id="main-navigation">
27+
<a href="">Home</a>
28+
<a href="">Blog</a>
29+
30+
<div class="dropdown-link">
31+
<a href="https://www.youtube.com/@alizardguy">YouTube</a>
32+
<a href="https://github.com/alizardguy">Github</a>
33+
</div>
34+
</div>
2235
</nav>
23-
<div class="hamburger">
24-
<button class="hamburger-button" onclick="toggleMobileMenu()">☰</button>
25-
<ul id="mobile-menu" class="mobile-menu">
26-
<li><a href="/index">Home</a></li>
27-
<li><a href="/socials">Socials</a></li>
28-
<li><a href="https://blog.alizardguy.com/">Blog</a></li>
29-
</ul>
30-
</div>
31-
<script>
32-
function toggleMobileMenu() {
33-
document.getElementById("mobile-menu").classList.toggle('open');
34-
}
35-
</script>
3636
</header>
37-
<main style="text-align: center; padding-top: 50px;">
37+
<main>
38+
<main style="text-align: center; padding-top: 50px;">
3839
<h1>Error 404</h1>
3940
<p>Page not found</p>
4041
</main>
42+
</main>
4143
</body>
4244
</html>

‎assets/css/base.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
margin: 0;
3+
}

‎assets/css/header.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
header {
2+
position: sticky;
3+
top: 0;
4+
z-index: 50;
5+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
6+
}
7+
8+
nav {
9+
max-width: 1280;
10+
margin: 0 auto;
11+
padding: 1rem 1rem;
12+
display: flex;
13+
justify-content: space-between;
14+
align-items: center;
15+
}
16+
17+
#menu-toggle {
18+
display: none;
19+
}
20+
21+
.site-header-frame
22+
{
23+
display: flex;
24+
flex-direction: row;
25+
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
26+
}
27+
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;
40+
}
41+
42+
.nav-menu a, .nav-menu .dropdown-link {
43+
padding-left: 1.5rem;
44+
}
45+
46+
#menu-toggle:checked ~ .nav-menu {
47+
max-height: 500px;
48+
opacity: 1;
49+
}
50+
}
51+
52+
.dropdown-menu {
53+
opacity: 0;
54+
visibility: hidden;
55+
transform: translateY(10px);
56+
transition: all 0.3s ease-out;
57+
/* Desktop positioning */
58+
position: absolute;
59+
}
60+
61+
.dropdown:hover .dropdown-menu {
62+
opacity: 1;
63+
visibility: visible;
64+
transform: translateY(0);
65+
}
66+
67+
@media (max-width: 1023px) {
68+
.dropdown-menu {
69+
position: static; /* Stack naturally on mobile */
70+
transform: none;
71+
padding-left: 1rem;
72+
}
73+
}

‎css/base.css‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎css/dividers.css‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎css/home.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎css/navbar.css‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎css/social.css‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)