Skip to content

Commit 8d80179

Browse files
alizardguyalizardguy
committed
huge rework progress
1 parent 2c58d25 commit 8d80179

File tree

20 files changed

+120
-297
lines changed

20 files changed

+120
-297
lines changed

‎src/404.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
---
22
title: "Oops!"
33
description: "Error 404: Page Not Found"
4-
layout: layouts/base.html
4+
layout: layouts/page.html
55
permalink: 404.html
66
---
7-
{% include "partials/navbar.html" %}
87
<main style="text-align: center; padding-top: 50px;">
98
<h1>Error 404</h1>
109
<p>Page not found</p>

‎src/_includes/assets/fonts/Poppins-Regular.ttf‎

-155 KB
Binary file not shown.

‎src/_includes/layouts/base.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
{% include "partials/basehead.html" %}
5-
<link rel="stylesheet" href="/css/base.css">
6-
</head>
3+
4+
{% include "partials/head.html" %}
5+
76
<body>
87
{{content | safe}}
98
</body>

‎src/_includes/layouts/page.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
layout: layouts/base.html
3+
---
4+
5+
{% include "partials/site-header.html" %}
6+
<main>
7+
{{content | safe}}
8+
</main>

‎src/_includes/partials/basehead.html‎

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

‎src/_includes/partials/head.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<head>
2+
<meta charset="utf-8">
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
5+
<link rel="stylesheet" href="/assets/css/header.css">
6+
<link rel="stylesheet" href="/assets/css/base.css">
7+
</head>

‎src/_includes/partials/navbar.html‎

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

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<header class="site-header">
2+
<nav class="site-header-frame">
3+
<a href="">alizardguy</a>
4+
5+
<input type="checkbox" id="menu-toggle" class="menu-toggle" aria-controls="main-navigation" aria-expanded="false">
6+
7+
<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>
11+
</label>
12+
13+
<div id="main-navigation">
14+
<a href="">Home</a>
15+
<a href="">Blog</a>
16+
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>
22+
</nav>
23+
</header>

‎src/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+
}

‎src/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+
}

0 commit comments

Comments
 (0)