Skip to content

Commit c376695

Browse files
D4mianWayneD4mianWayne
committed
New UI Improvements
1 parent 0e9f28c commit c376695

File tree

6 files changed

+1144
-1043
lines changed

6 files changed

+1144
-1043
lines changed

‎src/components/Footer.astro‎

Lines changed: 72 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,78 @@
22
const today = new Date();
33
---
44

5-
<footer>
6-
&copy; {today.getFullYear()} PwnFuzz Labs. All rights reserved.
7-
<div class="social-links">
8-
<a href="https://twitter.com/pwnfuzz" target="_blank">
9-
<span class="sr-only">Follow PwnFuzz on Twitter</span>
10-
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter"
11-
><path
12-
fill="currentColor"
13-
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
14-
></path></svg
15-
>
16-
</a>
17-
<a href="https://github.com/pwnfuzz" target="_blank">
18-
<span class="sr-only">Go to PwnFuzz's GitHub repo</span>
19-
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
20-
><path
21-
fill="currentColor"
22-
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
23-
></path></svg
24-
>
25-
</a>
26-
</div>
5+
<footer class="site-footer">
6+
<div class="container footer-inner">
7+
<div class="footer-brand">
8+
<span class="brand-text">PwnFuzz Labs</span>
9+
<p class="copyright">
10+
&copy; {today.getFullYear()} All rights reserved.
11+
</p>
12+
</div>
13+
14+
<div class="footer-links">
15+
<a href="https://twitter.com/pwnfuzz" target="_blank" rel="noopener noreferrer">
16+
Twitter
17+
</a>
18+
<a href="https://github.com/pwnfuzz" target="_blank" rel="noopener noreferrer">
19+
GitHub
20+
</a>
21+
<a href="/rss.xml">
22+
RSS
23+
</a>
24+
</div>
25+
</div>
2726
</footer>
27+
2828
<style>
29-
footer {
30-
padding: 2em 1em 6em 1em;
31-
background: var(--drac-bg-alt);
32-
color: var(--drac-comment);
33-
text-align: center;
34-
}
35-
.social-links {
36-
display: flex;
37-
justify-content: center;
38-
gap: 1em;
39-
margin-top: 1em;
40-
}
41-
.social-links a {
42-
text-decoration: none;
43-
color: var(--accent);
44-
}
45-
.social-links a:hover {
46-
color: var(--accent);
47-
}
29+
footer {
30+
padding: 2em 1em 6em 1em;
31+
background: transparent; /* Transparent to show global background */
32+
color: var(--fg-secondary);
33+
text-align: center;
34+
border-top: 1px solid var(--border-subtle);
35+
margin-top: 4rem;
36+
}
37+
.social-links {
38+
display: flex;
39+
justify-content: center;
40+
gap: 1em;
41+
margin-top: 1em;
42+
}
43+
.social-links a {
44+
text-decoration: none;
45+
color: var(--fg-secondary);
46+
}
47+
.social-links a:hover {
48+
color: var(--fg-primary);
49+
}
50+
51+
.copyright {
52+
margin: 0;
53+
font-size: 0.9rem;
54+
color: var(--fg-muted);
55+
}
56+
57+
.footer-links {
58+
display: flex;
59+
gap: 1.5rem;
60+
}
61+
62+
.footer-links a {
63+
color: var(--fg-secondary);
64+
font-size: 0.95rem;
65+
transition: color 0.2s ease;
66+
}
67+
68+
.footer-links a:hover {
69+
color: var(--accent-primary);
70+
}
71+
72+
@media (max-width: 600px) {
73+
.footer-inner {
74+
flex-direction: column;
75+
align-items: flex-start;
76+
gap: 2rem;
77+
}
78+
}
4879
</style>

‎src/components/Header.astro‎

Lines changed: 132 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -5,123 +5,149 @@ const navLinks = [
55
{ href: 'https://www.pwnfuzz.com', label: 'About', external: true },
66
];
77
---
8+
89
<header class="site-header" id="siteHeader">
9-
<head>
10-
<link rel="preconnect" href="https://fonts.googleapis.com">
11-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12-
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&display=swap" rel="stylesheet">
13-
</head>
14-
<div class="header-inner">
15-
<a href="/" class="site-logo"><span class="logo-prompt">&gt;</span> <span class="logo-mono">PwnFuzz</span><span> Labs</span></a>
10+
<div class="header-inner container">
11+
<a href="/" class="site-logo">
12+
<span class="logo-text">PwnFuzz</span>
13+
<span class="logo-suffix">Labs</span>
14+
</a>
1615
<nav class="main-nav">
1716
<ul>
1817
{navLinks.map(link => (
19-
<li><a href={link.href} class={Astro.url.pathname.startsWith(link.href) && link.href !== '/' ? 'active' : (Astro.url.pathname === link.href ? 'active' : '')} target={link.external ? '_blank' : undefined} rel={link.external ? 'noopener' : undefined}>{link.label}</a></li>
18+
<li>
19+
<a
20+
href={link.href}
21+
class={Astro.url.pathname.startsWith(link.href) && link.href !== '/' ? 'active' : (Astro.url.pathname === link.href ? 'active' : '')}
22+
target={link.external ? '_blank' : undefined}
23+
rel={link.external ? 'noopener' : undefined}
24+
>
25+
{link.label}
26+
</a>
27+
</li>
2028
))}
2129
</ul>
2230
</nav>
2331
</div>
24-
<style>
25-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700&display=swap');
26-
.site-header {
27-
font-family: 'Inter', sans-serif;
28-
background: var(--drac-bg-alt);
29-
box-shadow: 0 2px 8px rgba(40,42,54,0.10);
30-
border-bottom: 2px solid var(--drac-selection);
31-
position: sticky;
32-
top: 0;
33-
z-index: 100;
34-
}
32+
</header>
33+
34+
<style>
35+
.site-header {
36+
position: sticky;
37+
top: 0;
38+
z-index: 1000;
39+
width: 100%;
40+
background: rgba(255, 255, 255, 0.7); /* Light Glassy */
41+
backdrop-filter: blur(12px);
42+
-webkit-backdrop-filter: blur(12px);
43+
border-bottom: 1px solid rgba(226, 232, 240, 0.6); /* Subtle border */
44+
transition: transform 0.3s ease;
45+
}
46+
47+
.site-header.hide {
48+
transform: translateY(-100%);
49+
}
50+
51+
.header-inner {
52+
display: flex;
53+
align-items: center;
54+
justify-content: space-between;
55+
height: 70px;
56+
}
57+
58+
.site-logo {
59+
display: flex;
60+
align-items: center;
61+
gap: 0.3rem;
62+
font-family: var(--font-mono);
63+
font-weight: 700;
64+
font-size: 1.25rem;
65+
color: var(--fg-primary);
66+
text-decoration: none;
67+
letter-spacing: -0.03em;
68+
}
69+
70+
.logo-text {
71+
color: var(--fg-primary); /* Clean dark text */
72+
}
73+
74+
.logo-suffix {
75+
color: var(--fg-muted);
76+
font-size: 0.9em;
77+
font-weight: 500;
78+
}
79+
80+
.main-nav ul {
81+
display: flex;
82+
gap: 0.5rem; /* Reduced gap for pill spacing */
83+
list-style: none;
84+
margin: 0;
85+
padding: 0;
86+
}
87+
88+
.main-nav a {
89+
color: var(--fg-secondary);
90+
font-size: 0.9rem;
91+
font-weight: 500;
92+
padding: 0.5rem 1rem;
93+
border-radius: 20px; /* Pill shape */
94+
transition: all 0.2s ease;
95+
text-decoration: none;
96+
border: none;
97+
}
98+
99+
.main-nav a:hover {
100+
color: var(--fg-primary);
101+
background: rgba(0, 0, 0, 0.05); /* Subtle hover bg */
102+
}
103+
104+
.main-nav a.active {
105+
color: var(--fg-primary);
106+
background: rgba(0, 0, 0, 0.08); /* Active pill */
107+
font-weight: 600;
108+
}
109+
110+
/* Remove old underline styles */
111+
.main-nav a.active::after {
112+
display: none;
113+
}
114+
115+
@media (max-width: 768px) {
35116
.header-inner {
36-
max-width: 1550px;
37-
margin: 0 auto;
38-
display: flex;
39-
align-items: center;
40-
justify-content: space-between;
41-
padding: 0.7rem 1.5rem;
42-
}
43-
.site-logo {
44-
font-weight: 700;
45-
font-size: 1.4rem;
46-
color: var(--drac-pink);
47-
letter-spacing: 1px;
48-
text-decoration: none;
49-
display: flex;
50-
align-items: center;
51-
gap: 0.2em;
52-
}
53-
.logo-prompt {
54-
font-family: 'JetBrains Mono', monospace;
55-
color: var(--accent);
56-
font-size: 1.3rem;
57-
font-weight: 700;
58-
margin-right: 0.1em;
59-
user-select: none;
60-
}
61-
.logo-mono {
62-
font-family: 'JetBrains Mono', monospace;
63-
font-size: 1.35rem;
64-
color: var(--drac-pink);
65-
font-weight: 700;
66-
letter-spacing: 0.5px;
67-
}
68-
.site-logo span {
69-
font-weight: 600;
70-
color: var(--drac-fg);
117+
flex-direction: column;
118+
height: auto;
119+
padding: 1rem;
120+
gap: 1rem;
71121
}
122+
72123
.main-nav ul {
73-
display: flex;
74-
gap: 2rem;
75-
list-style: none;
76-
margin: 0;
77-
padding: 0;
124+
gap: 0.5rem;
125+
flex-wrap: wrap;
126+
justify-content: center;
78127
}
79-
.main-nav a {
80-
color: var(--drac-cyan);
81-
text-decoration: none;
82-
font-weight: 600;
83-
font-size: 1rem;
84-
padding-bottom: 2px;
85-
border-bottom: 2px solid transparent;
86-
transition: border 0.2s, color 0.2s;
128+
}
129+
</style>
130+
131+
<script>
132+
let lastScroll = 0;
133+
const header = document.getElementById('siteHeader');
134+
135+
window.addEventListener('scroll', () => {
136+
const currentScroll = window.scrollY;
137+
138+
if (currentScroll <= 0) {
139+
header?.classList.remove('hide');
140+
return;
87141
}
88-
.main-nav a.active {
89-
color: var(--accent);
90-
border-bottom: 2px solid var(--accent);
142+
143+
if (currentScroll > lastScroll && currentScroll > 80) {
144+
// Scrolling down
145+
header?.classList.add('hide');
146+
} else {
147+
// Scrolling up
148+
header?.classList.remove('hide');
91149
}
92-
@media (max-width: 700px) {
93-
.header-inner {
94-
flex-direction: column;
95-
align-items: flex-start;
96-
padding: 0.7rem 1rem;
97-
}
98-
.main-nav ul {
99-
gap: 1.2rem;
100-
flex-wrap: wrap;
101-
}
102-
.site-logo {
103-
margin-bottom: 0.5rem;
104-
}
105-
}
106-
.site-header.hide-on-scroll {
107-
transform: translateY(-100%);
108-
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
109-
}
110-
.site-header {
111-
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
112-
}
113-
</style>
114-
<script is:inline>
115-
function onScroll() {
116-
const header = document.getElementById('siteHeader');
117-
if (window.scrollY === 0) {
118-
header.classList.remove('hide-on-scroll');
119-
} else {
120-
header.classList.add('hide-on-scroll');
121-
}
122-
}
123-
window.addEventListener('scroll', onScroll);
124-
// Run once on load in case not at top
125-
onScroll();
126-
</script>
127-
</header>
150+
151+
lastScroll = currentScroll;
152+
});
153+
</script>

0 commit comments

Comments
 (0)