localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: solid Read More button + neon palette site-wide (not just homepage) so header/footer stays consistent on all pages

Browse Source
This commit is contained in:
Ryan Salazar
2026-05-22 05:40:54 +00:00
parent d4016a3c91
commit e5b09fe6d7
3 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/home-page/page.tsx
View File

@@ -130,7 +130,7 @@ function FeedSkeleton() {
export default function HomePage() {
return (
<div className="min-h-screen bg-background bb-neon">
<div className="min-h-screen bg-background">
{/* Sticky top bar + nav */}
<Header />

2
src/app/layout.tsx
View File

@@ -140,7 +140,7 @@ export default function RootLayout({
})
}} />
</head>
<body>
<body className="bb-neon">
{/* Skip to main content — WCAG 2.4.1 */}
<a
href="#main-content"

43
src/styles/tailwind.css
View File

@@ -487,20 +487,45 @@ h1, h2, h3 {
READ MORE
===================== */
.read-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-accent);
color: #ffffff;
background: var(--color-accent);
padding: 7px 14px;
border-radius: 2px;
border: 1px solid transparent;
text-decoration: none;
transition: color var(--transition-fast), letter-spacing var(--transition-fast);
transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.read-more::after {
content: "→";
font-size: 13px;
line-height: 1;
}
.read-more:hover {
color: var(--color-accent-dark);
letter-spacing: 0.07em;
text-decoration: underline;
background: var(--color-accent-dark);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
}
/* Under neon scope: green→cyan gradient with dark-gray text (matches other CTAs) */
.bb-neon .read-more {
background: linear-gradient(90deg, #00ff9f 0%, #00d4ff 100%);
color: #1a1a1a;
font-weight: 900;
text-shadow: none;
box-shadow: 0 0 12px rgba(0, 212, 255, 0.25);
}
.bb-neon .read-more:hover {
background: linear-gradient(90deg, #14ffb0 0%, #4ee0ff 100%);
color: #0a0a0a;
box-shadow: 0 0 18px rgba(0, 255, 159, 0.40);
}
/* =====================