Skip to content

Commit 895770d

Browse files
harriiinniiclaude
harriiinnii
and
claude
committed
Fix UI hover states, CSS bugs, and responsive class architecture
- Fix duplicate font-size in .prose h4 (1rem then 0.75rem — dead code) - Move responsive utility classes (hidden-mobile, mobile-only, docs-sidebar, docs-toc, mobile-nav-trigger) from per-component <style> tags into globals.css so they are not re-injected on every render - Add card-link, btn-primary, btn-secondary, btn-ghost, footer-link CSS classes to give interactive elements consistent hover feedback - Add missing transition rule for .hvr-nav (was causing instant color jumps) - Apply new classes across home page, footer, docs index, about, and payloads index Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
1 parent 5e9c1f9 commit 895770d

8 files changed

Lines changed: 70 additions & 40 deletions

File tree

‎src/app/about/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export default function AboutPage() {
7171
href={r.href}
7272
target="_blank"
7373
rel="noopener noreferrer"
74+
className="card-link"
7475
style={{
7576
display: "flex",
7677
alignItems: "center",
@@ -80,7 +81,6 @@ export default function AboutPage() {
8081
border: "1px solid var(--color-line)",
8182
borderRadius: "7px",
8283
textDecoration: "none",
83-
transition: "border-color 0.15s",
8484
}}
8585
>
8686
<GithubIcon size={20} style={{ color: "var(--color-ink-secondary)", flexShrink: 0 }} />

‎src/app/docs/page.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export default function DocsIndexPage() {
3939
href={SITE_CONFIG.upstreamRepo}
4040
target="_blank"
4141
rel="noopener noreferrer"
42+
className="btn-secondary"
4243
style={{
4344
display: "inline-flex",
4445
alignItems: "center",
@@ -58,6 +59,7 @@ export default function DocsIndexPage() {
5859
href={SITE_CONFIG.forkRepo}
5960
target="_blank"
6061
rel="noopener noreferrer"
62+
className="btn-secondary"
6163
style={{
6264
display: "inline-flex",
6365
alignItems: "center",
@@ -75,6 +77,7 @@ export default function DocsIndexPage() {
7577
</a>
7678
<Link
7779
href="/contributing"
80+
className="btn-secondary"
7881
style={{
7982
display: "inline-flex",
8083
alignItems: "center",
@@ -122,6 +125,7 @@ export default function DocsIndexPage() {
122125
<Link
123126
key={page.slug}
124127
href={`/docs/${page.slug}`}
128+
className="card-link"
125129
style={{
126130
display: "flex",
127131
alignItems: "center",
@@ -131,7 +135,6 @@ export default function DocsIndexPage() {
131135
border: "1px solid var(--color-line)",
132136
borderRadius: "7px",
133137
textDecoration: "none",
134-
transition: "border-color 0.15s",
135138
}}
136139
>
137140
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>

‎src/app/globals.css‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ body {
9393
.prose h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; margin: 0 0 1.5rem; color: var(--color-ink); letter-spacing: -0.02em; }
9494
.prose h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 2.5rem 0 1rem; color: var(--color-ink); letter-spacing: -0.01em; padding-top: 0.5rem; border-top: 1px solid var(--color-line); }
9595
.prose h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin: 2rem 0 0.75rem; color: var(--color-ink); }
96-
.prose h4 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--color-ink-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; }
96+
.prose h4 { font-size: 0.75rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--color-ink-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
9797
.prose p { margin: 0 0 1.25rem; }
9898
.prose strong { color: var(--color-ink); font-weight: 600; }
9999
.prose em { font-style: italic; }
@@ -208,6 +208,20 @@ body {
208208
color: var(--color-ink-muted);
209209
}
210210

211+
/* ─── Responsive utilities (shared across components) ───────────────────── */
212+
@media (min-width: 768px) {
213+
.mobile-only { display: none !important; }
214+
.docs-sidebar { display: block !important; }
215+
.mobile-nav-trigger { display: none !important; }
216+
}
217+
@media (max-width: 767px) {
218+
.hidden-mobile { display: none !important; }
219+
.docs-sidebar { display: none !important; }
220+
}
221+
@media (max-width: 1024px) {
222+
.docs-toc { display: none !important; }
223+
}
224+
211225
/* ─── Hover helpers (for use in Server Components) ──────────────────────── */
212226
.hvr-border:hover { border-color: var(--color-line-strong) !important; }
213227
.hvr-bg-raised:hover { background-color: var(--color-surface-raised) !important; }
@@ -223,6 +237,31 @@ body {
223237
}
224238
a.hvr-text-ink, button.hvr-text-ink { transition: color 0.15s; }
225239
a.hvr-border, div.hvr-border { transition: border-color 0.15s; }
240+
a.hvr-nav, button.hvr-nav { transition: color 0.15s, background-color 0.15s; }
241+
242+
/* ─── Interactive card links ─────────────────────────────────────────────── */
243+
.card-link { transition: border-color 0.15s, background-color 0.15s; }
244+
.card-link:hover {
245+
border-color: var(--color-line-strong) !important;
246+
background-color: var(--color-surface-raised) !important;
247+
}
248+
249+
/* ─── Buttons ────────────────────────────────────────────────────────────── */
250+
.btn-primary { transition: background-color 0.15s; }
251+
.btn-primary:hover { background-color: var(--color-accent-hover) !important; }
252+
253+
.btn-secondary { transition: border-color 0.15s, color 0.15s; }
254+
.btn-secondary:hover {
255+
border-color: var(--color-line-strong) !important;
256+
color: var(--color-ink) !important;
257+
}
258+
259+
.btn-ghost { transition: color 0.15s; }
260+
.btn-ghost:hover { color: var(--color-ink) !important; }
261+
262+
/* ─── Footer / generic text links ───────────────────────────────────────── */
263+
.footer-link { transition: color 0.15s; }
264+
.footer-link:hover { color: var(--color-ink-secondary) !important; }
226265

227266
/* ─── Utilities ──────────────────────────────────────────────────────────── */
228267
.link-external::after {

‎src/app/page.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ export default function HomePage() {
130130
<div style={{ display: "flex", gap: "0.75rem", flexWrap: "wrap" }}>
131131
<Link
132132
href="/docs/getting-started"
133+
className="btn-primary"
133134
style={{
134135
display: "inline-flex",
135136
alignItems: "center",
@@ -141,14 +142,14 @@ export default function HomePage() {
141142
textDecoration: "none",
142143
fontSize: "0.9375rem",
143144
fontWeight: 600,
144-
transition: "background-color 0.15s",
145145
}}
146146
>
147147
<BookOpen size={16} aria-hidden />
148148
Browse Documentation
149149
</Link>
150150
<Link
151151
href="/payloads"
152+
className="btn-secondary"
152153
style={{
153154
display: "inline-flex",
154155
alignItems: "center",
@@ -161,7 +162,6 @@ export default function HomePage() {
161162
textDecoration: "none",
162163
fontSize: "0.9375rem",
163164
fontWeight: 500,
164-
transition: "border-color 0.15s, color 0.15s",
165165
}}
166166
>
167167
<Code2 size={16} aria-hidden />
@@ -171,6 +171,7 @@ export default function HomePage() {
171171
href={SITE_CONFIG.upstreamRepo}
172172
target="_blank"
173173
rel="noopener noreferrer"
174+
className="btn-ghost"
174175
style={{
175176
display: "inline-flex",
176177
alignItems: "center",
@@ -183,7 +184,6 @@ export default function HomePage() {
183184
textDecoration: "none",
184185
fontSize: "0.9375rem",
185186
fontWeight: 400,
186-
transition: "color 0.15s",
187187
}}
188188
>
189189
<GithubIcon size={16} aria-hidden />
@@ -495,15 +495,16 @@ function CategoryGroup({
495495
<li key={item.slug}>
496496
<Link
497497
href={`/payloads/${item.slug}`}
498+
className="hvr-nav"
498499
style={{
499500
display: "flex",
500501
alignItems: "center",
501502
justifyContent: "space-between",
502503
padding: "0.375rem 1rem",
504+
borderRadius: "4px",
503505
fontSize: "0.8125rem",
504506
color: "var(--color-ink-secondary)",
505507
textDecoration: "none",
506-
transition: "color 0.15s, background-color 0.15s",
507508
}}
508509
>
509510
{item.title}
@@ -534,6 +535,7 @@ function RepoCard({
534535
href={href}
535536
target="_blank"
536537
rel="noopener noreferrer"
538+
className="card-link"
537539
style={{
538540
display: "flex",
539541
alignItems: "center",
@@ -543,7 +545,6 @@ function RepoCard({
543545
border: "1px solid var(--color-line)",
544546
borderRadius: "8px",
545547
textDecoration: "none",
546-
transition: "border-color 0.15s",
547548
}}
548549
>
549550
<GithubIcon size={22} style={{ color: "var(--color-ink-secondary)", flexShrink: 0 }} aria-hidden />

‎src/app/payloads/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export default function PayloadsIndexPage() {
9393
<Link
9494
key={item.slug}
9595
href={`/payloads/${item.slug}`}
96+
className="card-link"
9697
style={{
9798
display: "flex",
9899
alignItems: "center",
@@ -102,7 +103,6 @@ export default function PayloadsIndexPage() {
102103
border: "1px solid var(--color-line)",
103104
borderRadius: "6px",
104105
textDecoration: "none",
105-
transition: "border-color 0.15s, background-color 0.15s",
106106
}}
107107
>
108108
<div>

‎src/components/layout/DocsLayout.tsx‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -47,19 +47,6 @@ export function DocsLayout({ children, toc, navSections, wide }: DocsLayoutProps
4747
{toc}
4848
</aside>
4949
)}
50-
51-
<style>{`
52-
@media (max-width: 1024px) {
53-
.docs-toc { display: none !important; }
54-
}
55-
@media (min-width: 768px) {
56-
.docs-sidebar { display: block !important; }
57-
.mobile-nav-trigger { display: none !important; }
58-
}
59-
@media (max-width: 767px) {
60-
.docs-sidebar { display: none !important; }
61-
}
62-
`}</style>
6350
</div>
6451
);
6552
}

‎src/components/layout/Footer.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,13 @@ export function Footer() {
6565
href={SITE_CONFIG.upstreamRepo}
6666
target="_blank"
6767
rel="noopener noreferrer"
68+
className="footer-link"
6869
style={{
6970
display: "flex",
7071
alignItems: "center",
7172
gap: "0.375rem",
7273
fontSize: "0.8125rem",
73-
color: "var(--color-ink-secondary)",
74+
color: "var(--color-ink-muted)",
7475
textDecoration: "none",
7576
}}
7677
>
@@ -82,12 +83,13 @@ export function Footer() {
8283
href={SITE_CONFIG.forkRepo}
8384
target="_blank"
8485
rel="noopener noreferrer"
86+
className="footer-link"
8587
style={{
8688
display: "flex",
8789
alignItems: "center",
8890
gap: "0.375rem",
8991
fontSize: "0.8125rem",
90-
color: "var(--color-ink-secondary)",
92+
color: "var(--color-ink-muted)",
9193
textDecoration: "none",
9294
}}
9395
>
@@ -123,9 +125,10 @@ export function Footer() {
123125
<li key={item.href}>
124126
<Link
125127
href={item.href}
128+
className="footer-link"
126129
style={{
127130
fontSize: "0.8125rem",
128-
color: "var(--color-ink-secondary)",
131+
color: "var(--color-ink-muted)",
129132
textDecoration: "none",
130133
}}
131134
>
@@ -162,9 +165,10 @@ export function Footer() {
162165
<li key={item.href}>
163166
<Link
164167
href={item.href}
168+
className="footer-link"
165169
style={{
166170
fontSize: "0.8125rem",
167-
color: "var(--color-ink-secondary)",
171+
color: "var(--color-ink-muted)",
168172
textDecoration: "none",
169173
}}
170174
>
@@ -199,9 +203,10 @@ export function Footer() {
199203
<li key={item.href}>
200204
<Link
201205
href={item.href}
206+
className="footer-link"
202207
style={{
203208
fontSize: "0.8125rem",
204-
color: "var(--color-ink-secondary)",
209+
color: "var(--color-ink-muted)",
205210
textDecoration: "none",
206211
}}
207212
>
@@ -214,12 +219,13 @@ export function Footer() {
214219
href="https://owasp.org"
215220
target="_blank"
216221
rel="noopener noreferrer"
222+
className="footer-link"
217223
style={{
218224
display: "flex",
219225
alignItems: "center",
220226
gap: "0.25rem",
221227
fontSize: "0.8125rem",
222-
color: "var(--color-ink-secondary)",
228+
color: "var(--color-ink-muted)",
223229
textDecoration: "none",
224230
}}
225231
>
@@ -232,12 +238,13 @@ export function Footer() {
232238
href={`${SITE_CONFIG.upstreamRepo}/blob/main/LICENSE`}
233239
target="_blank"
234240
rel="noopener noreferrer"
241+
className="footer-link"
235242
style={{
236243
display: "flex",
237244
alignItems: "center",
238245
gap: "0.25rem",
239246
fontSize: "0.8125rem",
240-
color: "var(--color-ink-secondary)",
247+
color: "var(--color-ink-muted)",
241248
textDecoration: "none",
242249
}}
243250
>
@@ -275,7 +282,8 @@ export function Footer() {
275282
href={SITE_CONFIG.upstreamRepo}
276283
target="_blank"
277284
rel="noopener noreferrer"
278-
style={{ color: "var(--color-ink-secondary)", textDecoration: "none" }}
285+
className="footer-link"
286+
style={{ color: "var(--color-ink-muted)", textDecoration: "none" }}
279287
>
280288
OWASP Hunting project
281289
</a>
@@ -293,7 +301,8 @@ export function Footer() {
293301
href={`${SITE_CONFIG.upstreamRepo}/blob/main/LICENSE`}
294302
target="_blank"
295303
rel="noopener noreferrer"
296-
style={{ color: "var(--color-ink-secondary)", textDecoration: "none" }}
304+
className="footer-link"
305+
style={{ color: "var(--color-ink-muted)", textDecoration: "none" }}
297306
>
298307
MIT License
299308
</a>

‎src/components/layout/Header.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -328,15 +328,6 @@ export function Header() {
328328
</header>
329329

330330
<Search open={searchOpen} onClose={() => setSearchOpen(false)} />
331-
332-
<style>{`
333-
@media (min-width: 768px) {
334-
.mobile-only { display: none !important; }
335-
}
336-
@media (max-width: 767px) {
337-
.hidden-mobile { display: none !important; }
338-
}
339-
`}</style>
340331
</>
341332
);
342333
}

0 commit comments

Comments
 (0)