From 177368781404daea3fc767c12c85cf5cbd599ee6 Mon Sep 17 00:00:00 2001 From: Dave Date: Wed, 17 Sep 2025 13:14:24 +0200 Subject: [PATCH] Added Header Component --- src/app/(site)/layout.tsx | 10 ++- src/app/(site)/page.module.css | 2 +- src/app/(site)/page.tsx | 5 +- src/app/layout.tsx | 11 ++- src/components/Page/Header/Header.module.css | 93 ++++++++++++++++++++ src/components/Page/Header/index.tsx | 35 ++++++++ src/styles/mixins/containers.css | 3 +- src/styles/variables/colors.css | 2 +- 8 files changed, 148 insertions(+), 13 deletions(-) create mode 100644 src/components/Page/Header/Header.module.css create mode 100644 src/components/Page/Header/index.tsx diff --git a/src/app/(site)/layout.tsx b/src/app/(site)/layout.tsx index 51631c6..09a1641 100644 --- a/src/app/(site)/layout.tsx +++ b/src/app/(site)/layout.tsx @@ -1,5 +1,13 @@ +import { MenuProvider } from '@/contexts/MenuContext'; +import PageHeader from '@/components/Page/Header'; + export default function SiteLayout({ children, }: Readonly<{ children: React.ReactNode }>) { - return
{children}
; + return ( + + +
{children}
+ + ); } diff --git a/src/app/(site)/page.module.css b/src/app/(site)/page.module.css index 28b2c04..736b891 100644 --- a/src/app/(site)/page.module.css +++ b/src/app/(site)/page.module.css @@ -1,3 +1,3 @@ -.content { +.wrapper { @mixin responsive-wrapper; } \ No newline at end of file diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx index 16bcdde..2006168 100644 --- a/src/app/(site)/page.tsx +++ b/src/app/(site)/page.tsx @@ -1,12 +1,11 @@ import styles from './page.module.css'; -import { MenuProvider } from '@/contexts/MenuContext'; export default function Home() { return ( - +

DAVE! DAVE! Do Not Let Us Die In The Dark Night Of This Cold Winter!

- +
); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 75d5948..595dfbd 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -69,12 +69,11 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - - {children} - + + {children} ); } diff --git a/src/components/Page/Header/Header.module.css b/src/components/Page/Header/Header.module.css new file mode 100644 index 0000000..e8ac92b --- /dev/null +++ b/src/components/Page/Header/Header.module.css @@ -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; + } +} \ No newline at end of file diff --git a/src/components/Page/Header/index.tsx b/src/components/Page/Header/index.tsx new file mode 100644 index 0000000..26c1247 --- /dev/null +++ b/src/components/Page/Header/index.tsx @@ -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 ( +
+
+
+ ◬ +
+
+ + dave [dmg + ] + +
+
+ +
+
+
+ ); +} diff --git a/src/styles/mixins/containers.css b/src/styles/mixins/containers.css index b690974..d79bedc 100644 --- a/src/styles/mixins/containers.css +++ b/src/styles/mixins/containers.css @@ -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; max-width: clamp(60ch, 90vw, 90ch); padding: $vspacing $hspacing; + font-family: var(--font-body); font-size: var(--typo-size-responsive); } \ No newline at end of file diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index bc9d6ac..2ee4931 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -85,7 +85,7 @@ --color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h); /* == 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-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);