dave-dmg/blog_bricked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Header Component

Browse Source
This commit is contained in:
Dave
2025-09-17 13:14:24 +02:00
parent 6e2ab0a88b
commit 1773687814
8 changed files with 148 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(site)/layout.tsx
View File

@@ -1,5 +1,13 @@
import { MenuProvider } from '@/contexts/MenuContext';
import PageHeader from '@/components/Page/Header';
export default function SiteLayout({ export default function SiteLayout({
children, children,
}: Readonly<{ children: React.ReactNode }>) { }: Readonly<{ children: React.ReactNode }>) {
return <main>{children}</main>; return (
<MenuProvider>
<PageHeader />
<main>{children}</main>
</MenuProvider>
);
} }

2
src/app/(site)/page.module.css
View File

@@ -1,3 +1,3 @@
.content { .wrapper {
@mixin responsive-wrapper; @mixin responsive-wrapper;
} }

5
src/app/(site)/page.tsx
View File

@@ -1,12 +1,11 @@
import styles from './page.module.css'; import styles from './page.module.css';
import { MenuProvider } from '@/contexts/MenuContext';
export default function Home() { export default function Home() {
return ( return (
<MenuProvider> <div className={styles.wrapper}>
<p> <p>
DAVE! DAVE! Do Not Let Us Die In The Dark Night Of This Cold Winter! DAVE! DAVE! Do Not Let Us Die In The Dark Night Of This Cold Winter!
</p> </p>
</MenuProvider> </div>
); );
} }

11
src/app/layout.tsx
View File

@@ -69,12 +69,11 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html
<body lang="en"
className={`${geistSans.variable} ${blaka.variable} ${iosevkaSlab.variable} ${iosevkaMono.variable}`} className={`${geistSans.variable} ${blaka.variable} ${iosevkaSlab.variable} ${iosevkaMono.variable}`}
> >
{children} <body>{children}</body>
</body>
</html> </html>
); );
} }

93
src/components/Page/Header/Header.module.css Normal file
View File

@@ -0,0 +1,93 @@
.header {
@mixin py var(--spacing-tight);
width: var(--dim-full);
color: var(--color-text-inverse);
background-color: var(--color-surface-inverse);
}
.inner {
@mixin responsive-wrapper;
display: flex;
flex-direction: row;
gap: var(--spacing-cozy);
align-items: center;
justify-content: flex-start;
}
.logo {
font-family: var(--font-mono);
animation:
logo-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite,
logo-glitch 15s linear infinite;
animation-delay: 0s, 3s;
&:hover {
transform: translate(0, 0);
color: var(--color-secondary);
opacity: 1;
transition: all 0.2s ease;
animation: none;
}
}
.pagename {
font-family: var(--font-mono);
& .bracket {
color: var(--color-secondary);
}
}
.menutoggle {
@mixin ml auto;
& button {
cursor: pointer;
font-family: var(--font-mono);
transition: color 0.2s ease-out;
&:hover {
color: var(--color-primary);
}
&:active {
transform: scale(0.95);
transition: transform 0.1s ease-out;
}
}
}
@keyframes logo-pulse {
0% { opacity: 1; }
25% { opacity: 0.66; }
50% { opacity: 0.33; }
75% { opacity: 0.66; }
100% { opacity: 1; }
}
@keyframes logo-glitch {
0% {
transform: translate(0, 0);
color: inherit;
}
2% {
transform: translate(-2px, -2px);
color: var(--color-primary);
}
4% {
transform: translate(0, 0);
color: inherit;
}
100% {
transform: translate(0, 0);
color: inherit;
}
}

35
src/components/Page/Header/index.tsx Normal file
View File

@@ -0,0 +1,35 @@
'use client';
import Link from 'next/link';
import { useMenu } from '@/contexts/MenuContext';
import styles from './Header.module.css';
export default function Header() {
const { isMenuOpen, toggleMenu } = useMenu();
return (
<header className={styles.header}>
<div className={styles.inner}>
<div className={styles.logo}>
<Link href="/">◬</Link>
</div>
<div className={styles.pagename}>
<span>
dave <span className={styles.bracket}>[</span>dmg
<span className={styles.bracket}>]</span>
</span>
</div>
<div className={styles.menutoggle}>
<button
onClick={() => toggleMenu()}
aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
aria-expanded={isMenuOpen}
aria-controls="main-menu"
>
{isMenuOpen ? '[×]' : '[⚍]'}
</button>
</div>
</div>
</header>
);
}

3
src/styles/mixins/containers.css
View File

@@ -1,7 +1,8 @@
@define-mixin responsive-wrapper $vspacing: 0 $hspacing: var(--spacing-comfortable) { @define-mixin responsive-wrapper $vspacing: 0, $hspacing: var(--spacing-cozy) {
@mixin mx auto; @mixin mx auto;
max-width: clamp(60ch, 90vw, 90ch); max-width: clamp(60ch, 90vw, 90ch);
padding: $vspacing $hspacing; padding: $vspacing $hspacing;
font-family: var(--font-body);
font-size: var(--typo-size-responsive); font-size: var(--typo-size-responsive);
} }

2
src/styles/variables/colors.css
View File

@@ -85,7 +85,7 @@
--color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h); --color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
/* == Secondary Colors == */ /* == Secondary Colors == */
--color-secondary: var(--color-palette-electric-blue); --color-secondary: var(--color-palette-olive-drab);
--color-secondary-surface: oklch(from var(--color-secondary) calc(l + 0.1) c h); --color-secondary-surface: oklch(from var(--color-secondary) calc(l + 0.1) c h);
--color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h); --color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);