From b356249dbbd2d21a09e64778c876a87d06f9b8ed Mon Sep 17 00:00:00 2001
From: bo7owers <74225602+bo7owers@users.noreply.github.com>
Date: Sun, 2 Aug 2026 14:28:41 -0400
Subject: [PATCH] update app/*

---
 src/app/globals.css     | 110 +++++++++++++++++++----------
 src/app/layout.js       |  33 ++++-----
 src/app/page.js         |  93 +++++++++----------------
 src/app/page.module.css | 148 ++--------------------------------------
 4 files changed, 128 insertions(+), 256 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 4c18fb3..c6bed55 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,49 +1,89 @@
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+/*
+  Josh's Custom CSS Reset
+  https://www.joshwcomeau.com/css/custom-css-reset/
+*/
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
 }
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-html {
-  height: 100%;
+* {
+    margin: 0;
 }
-
 html,
 body {
-  max-width: 100vw;
-  overflow-x: hidden;
+    height: 100%;
+}
+body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+#root,
+#__next {
+    isolation: isolate;
 }
 
+/* Styles */
 body {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    display: flex;
+    flex-direction: column;
+    background-image: url("/wallpaper.jpg");
+
+    font-family: "Comic Sans MS", cursive, sans-serif;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+h1 {
+    margin-bottom: 1em;
+    text-align: center;
+    font-size: 1.75rem;
+}
+p {
+    font-size: 1rem;
+    margin-bottom: 1.5em;
+    text-indent: 2em;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+footer {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding-bottom: 48px;
+    text-align: center;
+    color: white;
+}
+footer span {
+    background: hsl(234deg 54% 53%);
+    padding: 8px 16px;
+    border-radius: 1000px;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+/* Scrollbar and selection styles */
+::selection {
+    background-color: var(--selection-background-color, hsl(50deg 100% 78%));
+    color: var(--selection-text-color, black);
 }
diff --git a/src/app/layout.js b/src/app/layout.js
index e41b55c..e31c31e 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,25 +1,22 @@
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import React from 'react';
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
+import Header from '../components/Header';
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import './styles.css';
 
-export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({ children }) {
+function RootLayout({ children }) {
   return (
-    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
-      <body>{children}</body>
+    <html lang="en">
+      <body>
+        <Header />
+        {children}
+        <footer>
+          <img src="/ie-badge.gif" width={100} />
+          <span>Thanks for visiting!</span>
+        </footer>
+      </body>
     </html>
   );
 }
+
+export default RootLayout;
diff --git a/src/app/page.js b/src/app/page.js
index 290b6c3..b9c423b 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,66 +1,35 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import React from 'react';
 
-export default function Home() {
+import MaxWidthWrapper from '../components/MaxWidthWrapper';
+import DrumMachine from '../components/DrumMachine';
+import styles from './page.module.css';
+
+function Home() {
   return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className={styles.intro}>
-          <h1>To get started, edit the page.js file.</h1>
-          <p>
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className={styles.secondary}
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <MaxWidthWrapper
+      as="main"
+      className={styles.wrapper}
+    >
+      <h1>
+        Welcome to the zaniest place on the ‘Web!
+      </h1>
+      <p>
+        Hey there, fellow netizens! If you're
+        reading this, you've stumbled upon the
+        coolest corner of the internet: my awesome
+        website. Get ready to embark on a
+        nostalgic journey back to the groovy era
+        of the 90s, where the web was wild, and
+        creativity ran free!
+      </p>
+      <p>
+        I've created the gnarliest drum machine
+        ever. Press the buttons to hear the music.
+        Tubular!
+      </p>
+      <DrumMachine />
+    </MaxWidthWrapper>
   );
 }
+
+export default Home;
\ No newline at end of file
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 643fe27..5ef03bd 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,142 +1,8 @@
-.page {
-  --background: #fafafa;
-  --foreground: #fff;
-
-  --text-primary: #000;
-  --text-secondary: #666;
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-  --button-secondary-border: #ebebeb;
-
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-geist-sans);
-  background-color: var(--background);
-}
-
-.main {
-  display: flex;
-  flex: 1;
-  width: 100%;
-  max-width: 800px;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  background-color: var(--foreground);
-  padding: 120px 60px;
-}
-
-.intro {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  text-align: left;
-  gap: 24px;
-}
-
-.intro h1 {
-  max-width: 320px;
-  font-size: 40px;
-  font-weight: 600;
-  line-height: 48px;
-  letter-spacing: -2.4px;
-  text-wrap: balance;
-  color: var(--text-primary);
-}
-
-.intro p {
-  max-width: 440px;
-  font-size: 18px;
-  line-height: 32px;
-  text-wrap: balance;
-  color: var(--text-secondary);
-}
-
-.intro a {
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.ctas {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  max-width: 440px;
-  gap: 16px;
-  font-size: 14px;
-}
-
-.ctas a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 40px;
-  padding: 0 16px;
-  border-radius: 128px;
-  border: 1px solid transparent;
-  transition: 0.2s;
-  cursor: pointer;
-  width: fit-content;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--text-primary);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--button-secondary-border);
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-}
-
-@media (max-width: 600px) {
-  .main {
-    padding: 48px 24px;
-  }
-
-  .intro {
-    gap: 16px;
-  }
-
-  .intro h1 {
-    font-size: 32px;
-    line-height: 40px;
-    letter-spacing: -1.92px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-
-  .page {
-    --background: #000;
-    --foreground: #000;
-
-    --text-primary: #ededed;
-    --text-secondary: #999;
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-    --button-secondary-border: #1a1a1a;
-  }
+.wrapper {
+    background: hsl(234deg 70% 85% / 0.9);
+    border-radius: 8px 8px 0px 0px;
+    padding: 32px;
+    backdrop-filter: blur(4px);
+    border-bottom: 8px dashed hsl(234deg 54% 53%);
+    outline: 8px solid hsl(234deg 70% 85% / 0.9);
 }
-- 
2.51.2