Added general fields

.gitea/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Build and Deploy DAVE | DMGs Site
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   deploy:

.idea/inspectionProfiles/Project_Default.xml

@@ -1,39 +1,6 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
-    <inspection_tool class="CssDeprecatedValue" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssInvalidAtRule" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssInvalidCharsetRule" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="CssInvalidCustomPropertyAtRuleDeclaration" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssInvalidCustomPropertyAtRuleName" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssInvalidFunction" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssInvalidHtmlTagReference" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="CssInvalidImport" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="CssInvalidMediaFeature" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssInvalidPropertyValue" enabled="false" level="WARNING" enabled_by_default="false" editorAttributes="WARNING_ATTRIBUTES" />
-    <inspection_tool class="CssInvalidPseudoSelector" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssMissingComma" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="CssNegativeValue" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssNoGenericFontName" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="CssNonIntegerLengthInPixels" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="CssOverwrittenProperties" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="CssRedundantUnit" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="CssReplaceWithShorthandSafely" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="CssReplaceWithShorthandUnsafely" enabled="false" level="INFORMATION" enabled_by_default="false" />
-    <inspection_tool class="CssUnknownProperty" enabled="false" level="WARNING" enabled_by_default="false">
-      <option name="myCustomPropertiesEnabled" value="false" />
-      <option name="myIgnoreVendorSpecificProperties" value="false" />
-      <option name="myCustomPropertiesList">
-        <value>
-          <list size="0" />
-        </value>
-      </option>
-    </inspection_tool>
-    <inspection_tool class="CssUnknownTarget" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssUnknownUnit" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssUnresolvedClassInComposesRule" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssUnresolvedCustomProperty" enabled="false" level="ERROR" enabled_by_default="false" />
-    <inspection_tool class="CssUnusedSymbol" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
     <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
   </profile>

.idea/stylesheetLinters/stylelint.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="StylelintConfiguration">
-    <option name="fix-on-save" value="true" />
-  </component>
-</project>

content/system/navigation.json

@@ -1,142 +0,0 @@
-{
-  "items": [
-    {
-      "name": "Metatron",
-      "path": "/meta",
-      "gridPosition": "area_1",
-      "variant": "meta",
-      "sublinks": {
-        "discriminant": false
-      },
-      "subtitle": {
-        "discriminant": false
-      }
-    },
-    {
-      "name": "Kitchensink",
-      "path": "/",
-      "gridPosition": "area_2",
-      "variant": "kitchensink",
-      "sublinks": {
-        "discriminant": true,
-        "value": [
-          {
-            "name": "The Pomarj",
-            "path": "/kitchensink/the-pomarj"
-          },
-          {
-            "name": "Burning Pavis",
-            "path": "/kitchensink/burning-pavis"
-          },
-          {
-            "name": "SLA Armies",
-            "path": "/kitchensink/sla-armies"
-          }
-        ]
-      },
-      "subtitle": {
-        "discriminant": false
-      }
-    },
-    {
-      "name": "AWQ",
-      "path": "/awq",
-      "gridPosition": "area_3",
-      "variant": "awq",
-      "sublinks": {
-        "discriminant": true,
-        "value": [
-          {
-            "name": "The Crunch",
-            "path": "/awq/core-rules"
-          },
-          {
-            "name": "Sigmar's Heirs",
-            "path": "/awq/character"
-          },
-          {
-            "name": "Armory",
-            "path": "/awq/equipment"
-          },
-          {
-            "name": "The Winds of Magic",
-            "path": "/awq/magic"
-          },
-          {
-            "name": "Beastiary",
-            "path": "/awq/bestiary"
-          },
-          {
-            "name": "Duveldal",
-            "path": "/awq/pregens"
-          },
-          {
-            "name": "Plundered Vaults",
-            "path": "/awq/expansions"
-          },
-          {
-            "name": "Tools",
-            "path": "/awq/tools"
-          }
-        ]
-      },
-      "subtitle": {
-        "discriminant": false
-      }
-    },
-    {
-      "name": "Worldburner",
-      "path": "/worldburner",
-      "gridPosition": "area_4",
-      "variant": "worldburner",
-      "sublinks": {
-        "discriminant": true,
-        "value": [
-          {
-            "name": "Burning Lands",
-            "path": "/worldburner/geography"
-          },
-          {
-            "name": "Burning People",
-            "path": "/worldburner/cultures"
-          },
-          {
-            "name": "Burning Faiths",
-            "path": "/worldburner/religion"
-          },
-          {
-            "name": "Burning Witches",
-            "path": "/worldburner/magic"
-          },
-          {
-            "name": "Burning Realms",
-            "path": "/worldburner/states"
-          }
-        ]
-      },
-      "subtitle": {
-        "discriminant": false
-      }
-    },
-    {
-      "name": "Chainbreaker",
-      "path": "/chainbreaker",
-      "gridPosition": "area_5",
-      "variant": "chainbreaker",
-      "background": "/images/categories/items/4/background.png",
-      "sublinks": {
-        "discriminant": false
-      },
-      "subtitle": {
-        "discriminant": true,
-        "value": {
-          "content": "Spear & Animism",
-          "divider": {
-            "discriminant": true,
-            "value": "⎊"
-          }
-        }
-      }
-    }
-  ]
-}

keystatic.config.ts

@@ -1,11 +1,14 @@
 import { config } from '@keystatic/core';
 
-import navigation from '@/keystatic/singletons/navigation';
+import AuthorsCollection from '@/keystatic/collections/taxonomy/authors';
+import TagsCollection from '@/keystatic/collections/taxonomy/tags';
 
 export default config({
   storage: {
     kind: 'local',
   },
-  collections: {},
-  singletons: { navigation },
+  collections: {
+    authors: AuthorsCollection,
+    tags: TagsCollection,
+  },
 });

package.json

@@ -13,14 +13,15 @@
     "@keystatic/core": "^0.5.48",
     "@keystatic/next": "^5.0.4",
     "@markdoc/markdoc": "^0.5.4",
+    "@tailwindcss/postcss": "^4.1.13",
     "next": "15.5.3",
+    "postcss": "^8.5.6",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "tailwindcss": "^4.1.13"
   },
   "devDependencies": {
-    "@csstools/postcss-global-data": "^3.1.0",
     "@eslint/eslintrc": "^3",
-    "@fullhuman/postcss-purgecss": "^7.0.2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -30,20 +31,12 @@
     "eslint-config-next": "15.5.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-mdx": "^3.6.2",
-    "glob-all": "^3.3.1",
-    "postcss": "^8.5.6",
-    "postcss-easings": "^4.0.0",
-    "postcss-functions": "^4.0.2",
-    "postcss-import": "^16.1.1",
-    "postcss-mixins": "^12.1.2",
-    "postcss-nesting": "^13.0.2",
-    "postcss-preset-env": "^10.3.1",
-    "postcss-utilities": "^0.8.4",
     "prettier": "^3.6.2",
     "stylelint": "^16.24.0",
     "stylelint-config-clean-order": "^7.0.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-standard": "^39.0.0",
+    "stylelint-config-tailwindcss": "^1.0.0",
     "typescript": "^5"
   }
 }

postcss.config.mjs

@@ -1,54 +1,6 @@
-// postcss.config.js
-import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
-import glob from 'glob-all';
-import path from 'path';
-import postcssGlobalData from '@csstools/postcss-global-data';
-import postcssEasing from 'postcss-easings';
-import postcssImport from 'postcss-import';
-import postcssMixins from 'postcss-mixins';
-import postcssNesting from 'postcss-nesting';
-import postcssPresetEnv from 'postcss-preset-env';
-import postcssUtilities from 'postcss-utilities';
-import postcssFunctions from 'postcss-functions';
-import customFunctions from './src/lib/postcss/functions';
-
-const plugins = [
-  postcssGlobalData({
-    files: ['./src/styles/globals/custom-media.css'],
-  }),
-  postcssMixins({
-    mixinsDir: './src/styles/mixins/',
-  }),
-  postcssImport(),
-  postcssPresetEnv({
-    stage: 1,
-    features: {
-      'nesting-rules': false,
-      'media-query-ranges': {
-        preserve: true,
-      },
-    },
-  }),
-  postcssEasing(),
-  postcssUtilities(),
-  postcssNesting(),
-  postcssFunctions({
-    functions: customFunctions,
-  }),
-];
-
-if (process.env.NODE_ENV === 'production') {
-  plugins.push(
-    purgeCSSPlugin({
-      content: glob.sync([
-        path.join(process.cwd(), 'src/**/*.{js,jsx,ts,tsx,css}'),
-        path.join(process.cwd(), 'content/**/*.{md,mdx}'),
-      ]),
-      safelist: ['html', 'body'],
-    })
-  );
-}
-
-export default {
-  plugins,
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
 };
+export default config;

src/app/(site)/layout.tsx

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

src/app/(site)/page.module.css

@@ -1,82 +0,0 @@
-.wrapper {
-  @mixin responsive-wrapper;
-
-  & body {
-    margin: 0;
-    padding: 2rem;
-
-    font-family: monospace;
-    color: #1a1a1d;
-
-    background: #f7f9fb;
-  }
-
-  & h1 {
-    margin-bottom: 2rem;
-    font-weight: 900;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-  }
-
-  & .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    margin-bottom: 3rem;
-  }
-
-  & .demoCard {
-    border: 3px solid #1a1a1d;
-    background: white;
-  }
-
-  & .demoTitle {
-    margin: 0;
-    padding: 0.5rem 1rem;
-
-    font-size: 0.875rem;
-    font-weight: bold;
-    color: white;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-
-    background: #1a1a1d;
-  }
-
-  & .imageContainer {
-    cursor: pointer;
-
-    position: relative;
-
-    overflow: hidden;
-
-    width: 100%;
-    height: 200px;
-  }
-
-  & .demoImage {
-    width: 100%;
-    height: 100%;
-
-    object-fit: cover;
-    filter: grayscale(100) contrast(150) brightness(100);
-
-    transition: none;
-  }
-
-  & .instructions {
-    margin-top: 2rem;
-    padding: 1rem;
-
-    font-family: monospace;
-    color: white;
-
-    background: #1a1a1d;
-  }
-
-  & .instructions h2 {
-    margin-top: 0;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-  }
-}

src/app/(site)/page.tsx

@@ -1,493 +1,7 @@
-import styles from './page.module.css';
-
 export default function Home() {
   return (
-    <div className={styles.wrapper}>
-      <h1>
-        DAVE! DAVE! Do Not Let Us Die In The Dark Night Of This Cold Winter!
-      </h1>
-      <h2>Background / Image effects</h2>
-      <div className={styles.grid}>
-        <div className={`${styles.demoCard}`}>
-          <h3 className={styles.demoTitle}>Overexposure Blast</h3>
-          <div className={styles.imageContainer}>
-            <img
-              className={`${styles.demoImage} anim-overexposure`}
-              src="https://images.pexels.com/photos/1096925/pexels-photo-1096925.jpeg"
-              alt="Demo"
-            />
-          </div>
-        </div>
-
-        <div className={`${styles.demoCard}`}>
-          <h3 className={styles.demoTitle}>Contrast Slam</h3>
-          <div className={styles.imageContainer}>
-            <img
-              className={`${styles.demoImage} anim-contrastslam`}
-              src="https://images.pexels.com/photos/119809/pexels-photo-119809.jpeg"
-              alt="Demo"
-            />
-          </div>
-        </div>
-
-        <div className={`${styles.demoCard}`}>
-          <h3 className={styles.demoTitle}>Colorbleed</h3>
-          <div className={styles.imageContainer}>
-            <img
-              className={`${styles.demoImage} anim-colorbleed`}
-              src="https://images.pexels.com/photos/12924931/pexels-photo-12924931.jpeg"
-              alt="Demo"
-            />
-          </div>
-        </div>
-
-        <div className={`${styles.demoCard}`}>
-          <h3 className={styles.demoTitle}>Film Burn</h3>
-          <div className={styles.imageContainer}>
-            <img
-              className={`${styles.demoImage} anim-filmburn`}
-              src="https://images.pexels.com/photos/1031357/pexels-photo-1031357.jpeg"
-              alt="Demo"
-            />
-          </div>
-        </div>
-
-        <div className={`${styles.demoCard}`}>
-          <h3 className={styles.demoTitle}>Photocopier Malfunction</h3>
-          <div className={styles.imageContainer}>
-            <img
-              className={`${styles.demoImage} anim-malfunction`}
-              src="https://images.pexels.com/photos/3054252/pexels-photo-3054252.jpeg"
-              alt="Demo"
-            />
-          </div>
-        </div>
-
-        <div className={`${styles.demoCard}`}>
-          <h3 className={styles.demoTitle}>Toner Starvation</h3>
-          <div className={styles.imageContainer}>
-            <img
-              className={`${styles.demoImage} anim-tonerstarvation`}
-              src="https://images.pexels.com/photos/3822728/pexels-photo-3822728.jpeg"
-              alt="Demo"
-            />
-          </div>
-        </div>
-
-        <div className={`${styles.demoCard}`}>
-          <h3 className={styles.demoTitle}>Digital Corruption</h3>
-          <div className={styles.imageContainer}>
-            <img
-              className={`${styles.demoImage} anim-corruption`}
-              src="https://images.pexels.com/photos/220793/pexels-photo-220793.jpeg"
-              alt="Demo"
-            />
-          </div>
-        </div>
-
-        <div className={`${styles.demoCard}`}>
-          <h3 className={styles.demoTitle}>Stark Flash</h3>
-          <div className={styles.imageContainer}>
-            <img
-              className={`${styles.demoImage} anim-starkflash`}
-              src="https://images.pexels.com/photos/13744675/pexels-photo-13744675.jpeg"
-              alt="Demo"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className={styles.instructions}>
-        <h2>Instructions</h2>
-        <p>
-          Hover over each image to see the effect. These are designed to work
-          with your base filter:
-        </p>
-        <code>filter: grayscale(1) contrast(150%) brightness(120%)</code>
-        <p>
-          You can replace the demo images with your own by changing the src
-          attributes. All effects use stepped animations or sharp transitions to
-          maintain that industrial, non-digital feel.
-        </p>
-        <p>
-          The effects range from subtle (Contrast Slam) to more dramatic
-          (Digital Corruption). Choose based on how aggressive you want the
-          interaction to feel.
-        </p>
-      </div>
-      <h2>Link Effects</h2>
-      <div className={styles.grid}>
-        {/* Your Ideas */}
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Strikethrough Mark (Marker)</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-strikethroughmarker">
-              strikethrough link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Strikethrough Mark (Industrial)</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-strikethroughindustrial">
-              strikethrough link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Marker Highlight [Industrial]</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-markerhighlightindustrial">
-              marker highlight link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        {/* Stamping/Punching Effects */}
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Label Maker</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-labelmaker">
-              label maker link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Rubber Stamp</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-rubberstamp">
-              rubber stamp link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        {/* Industrial/Mechanical */}
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Press/Stamp</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-pressstamp">
-              pressed link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Typewriter Underline</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-typewriter">
-              typewriter link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Hard Invert</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-hardInvert">
-              hard invert link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        {/* Marking/Annotation */}
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Bracket Annotation</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-pointer">
-              bracket link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Corner Box</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-cornerbox">
-              corner box link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        {/* Glitch/Digital */}
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Character Glitch</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-characterglitch">
-              glitch link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Pixel Shift</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-pixelshift">
-              shifting link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        {/* Extra Ideas */}
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>Redacted/Censored</h3>
-          <p>
-            This is some text with a{' '}
-            <a href="#" className="anim-redacted">
-              redacted link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-
-        <div className={styles.demoCard}>
-          <h3 className={styles.demoTitle}>X-Ray/Negative</h3>
-          <p>
-            This is some text with an{' '}
-            <a href="#" className="anim-xray">
-              x-ray link
-            </a>{' '}
-            in the middle of it.
-          </p>
-        </div>
-      </div>
-      <div className="content">
-        <h1>
-          Successful Isildur's brink again throttle flank tightening splash.
-        </h1>
-        <p>
-          Help illusion embrace liquor tightening intelligence Maggot's whips
-          bit forests. 17 sing impassable helps Southrons beheading. What's the
-          Elvish word for 'friend'?
-        </p>
-        <h2>Give Hobbitses lend yours lads picking uniting sometime.</h2>
-        <p>
-          Inferno shaken skin undo wars close circles verse suck Dwarves. I gave
-          you the chance of aiding me willingly, but you have elected the way of
-          pain! Precautions tower tied Rivendell everyone agents wouldn't?
-        </p>
-        <h3>Doorway Mithrandir clearing wielder strengths floor?</h3>
-        <p>
-          Pillaged pointy-eared mix charm Grond confounded able-bodied tact
-          glimpse instruction open dear. Suffering powerful capable gulls
-          famousest stroke breathes Bilbo squeaked pace chances. Let the
-          Ring-bearer decide.
-        </p>
-        <ul>
-          <li>Mirkwood.</li>
-          <li>Tom.</li>
-          <li>Bilbo's.</li>
-          <li>Gandalf's.</li>
-          <li>Dwarvish.</li>
-        </ul>
-        <ul>
-          <li>Queen wants Oin loose heads decay piety!</li>
-          <li>Large happening arrived owes legends wit war bled Durin's.</li>
-          <li>
-            Pursuit exactly during relief mission meats cause Noldorin ablaze
-            tracked.
-          </li>
-          <li>Darken knife midday meat Goblinses.</li>
-          <li>
-            Your Rabble-rousers greatest could beast thirty-four t wizards
-            slumbers reforge.
-          </li>
-        </ul>
-        <h3>Late vagabond knowing Ent legends there flattened cultured?</h3>
-        <p>
-          Swords are no more use here. Deny Chubbs restored. Scare rebuild
-          Argonath tracked day's large.
-        </p>
-        <ol>
-          <li>Easterlings!</li>
-          <li>Bill.</li>
-          <li>Dúnedain!</li>
-          <li>Gandalf.</li>
-          <li>Orcrist.</li>
-        </ol>
-        <ol>
-          <li>Answers feelings Elrond conjurer runs.</li>
-          <li>Sul nudge powerless jelly dumping hair grows log forgave?</li>
-          <li>
-            Retaken succumbed funeral courtyard Glóin incident mere somewhere
-            commander assistance?
-          </li>
-          <li>Bore outrun stead fight Athelas guardroom willing contains.</li>
-          <li>Hunted Angmar wager noose arguing?</li>
-        </ol>
-        <h3>Elros next own wisp whence cakehole right!</h3>
-        <p>
-          Thank hid its lessened lined tells prefers were Stone-Giants thousand
-          troubles. Earendil staff pines bog finest mushroom consumption.
-          Mistaken streaming fates paths arts puppet Barad-dûr uniting? You
-          shall not pass!
-        </p>
-        <table>
-          <thead>
-            <tr>
-              <th></th>
-              <th>Ales</th>
-              <th>Deeply</th>
-              <th>Mortality</th>
-              <th>Open</th>
-              <th>Single-handedly</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Band</td>
-              <td>appeared</td>
-              <td>waited</td>
-              <td>whose</td>
-              <td>plate</td>
-              <td>marshaling</td>
-            </tr>
-            <tr>
-              <td>Meat</td>
-              <td>nest</td>
-              <td>thatched</td>
-              <td>rallying</td>
-              <td>claimed</td>
-              <td>hungers</td>
-            </tr>
-            <tr>
-              <td>Mouse</td>
-              <td>also</td>
-              <td>birdses</td>
-              <td>moons</td>
-              <td>strain</td>
-              <td>brightest</td>
-            </tr>
-            <tr>
-              <td>Hate</td>
-              <td>different</td>
-              <td>arrangements</td>
-              <td>chiefest</td>
-              <td>think</td>
-              <td>try</td>
-            </tr>
-            <tr>
-              <td>Something's</td>
-              <td>task</td>
-              <td>here's</td>
-              <td>decent</td>
-              <td>someone</td>
-              <td>uses</td>
-            </tr>
-            <tr>
-              <td>Shirt</td>
-              <td>tonight</td>
-              <td>bay</td>
-              <td>beautifully</td>
-              <td>tad</td>
-              <td>cloaks</td>
-            </tr>
-          </tbody>
-          <tfoot>
-            <tr>
-              <td>revenge</td>
-              <td>teaching</td>
-              <td>mischief</td>
-              <td>shores</td>
-              <td>dreams</td>
-              <td>tested</td>
-            </tr>
-          </tfoot>
-        </table>
-        <h4>Stage dishcloth 20 horses Tooks souls crawl crime.</h4>
-        <p>
-          Approve Sul wilderness grave embellishment greatly over these rack
-          struggle. End ringing bell Anor halls pairs thirst fortress curtain
-          cleared? Dwelt language 1296 Underhill nasty. I gave you the chance of
-          aiding me willingly, but you have elected the way of pain!
-        </p>
-        <blockquote>
-          <p>You are full of surprises, Master Baggins.</p>
-          <footer>
-            —Girion, <cite>warmongering appears</cite>
-          </footer>
-        </blockquote>
-        <h5>
-          Sung outscoring fingers Fundin reaction inquiries buggers deadliest.
-        </h5>
-        <p>
-          Mustn't powerless pierces Muil sorry crossing diamond brandy. Rip
-          rockets hinder Braga go had web ought sakes hail. A wizard is never
-          late, Frodo Baggins. Nor is he early. He arrives precisely when he
-          means to. Ashes tie Gamgee dicky!
-        </p>
-        <pre>
-          Rhudaur fancy tilled heart beggars. Dwarf nothing talked foot club.
-          Slaughtered flatten Hobbit journey's four-day?
-        </pre>
-        <h6>Pearl tact tomb bits Arwen Evenstar worry?</h6>
-        <p>
-          Times unspoiled <time>defenses</time> Silvan.{' '}
-          <del>Sigrid Pippin Gandalf</del> thin stubbornness noises easily
-          spread. Eldar warriors <code>won answered</code> filth yourself
-          pocket. Showing store consistency <kbd>M</kbd> crevice. Decision
-          feverfew <sup>giving</sup> Misty Mountain lord supplant. Gorgoroth{' '}
-          <dfn>load born fulfilled plenty</dfn> fates serpent. Doorstep Pippin's{' '}
-          <cite>pity bridge</cite> long weak weep? Brightest <abbr>Chubbs</abbr>{' '}
-          jewels understand. Somewhat Erebor <sub>noise</sub> squealing moved?
-          Pippin's <mark>feels overrun</mark> hours brown burns. <var>Anor</var>{' '}
-          turning pick prophecy. Surrounded <q>entered needlessly weary</q> vile
-          hmm Bagshot Row. Consent <ins>outwitted dotage slug</ins> Homely hear.
-          Parapet <strong>protected favored defied roam</strong> quiet Dori sick
-          bent. <samp>Homage store hurricane</samp> prove ferret Helm's Deep
-          lately? <small>Excellent regret fun often</small> returned Wood-elves
-          apocalypse. Théodred's rights rat drawing{' '}
-          <a>examine dared bygone residence deeply</a>.{' '}
-          <em>Greenway Girion Rohirrim</em> trammel waiting edge.
-        </p>
-        <hr />
-        <dl>
-          <dt>Turn</dt>
-          <dd>
-            Bare protuberance arrived forging funny salvage Cair except first
-            banners.
-          </dd>
-          <dt>Foes</dt>
-          <dd>Bore river large house shadows it's Tuckborough warn.</dd>
-          <dd>
-            Stirring Greenwood nest sapphire grant gob flagon famous mean!
-          </dd>
-          <dt>Unprepared</dt>
-          <dd>
-            Single-handed wriggling creatures lock canopy anytime horses defense
-            Hobbit's?
-          </dd>
-          <dd>
-            Nûmenor dungeons achieving encourage fretting dines believes
-            understand.
-          </dd>
-          <dd>Ease love shine legs wee harbor Udùn adventure tumble stays.</dd>
-        </dl>
-      </div>
+    <div className="text-3xl font-bold underline">
+      Do not let us die in the dark night of this cold winter, Dave
     </div>
   );
 }

src/app/globals.css

@@ -1,6 +1 @@
-@layer reset, tokens, base, layout, content, components, utilities, animations;
-
-@import url("../styles/tokens.css");
-@import url("../styles/globals/foundation.css");
-@import url("../styles/globals/base.css");
-@import url("../styles/globals/content.css");
+@import 'tailwindcss';

src/app/layout.tsx

@@ -17,44 +17,42 @@ const blaka = Blaka({
 const iosevkaSlab = localFont({
   src: [
     {
-      path: '../../public/fonts/IosevkaSlabQp/IosevkaSlabQp-Regular.woff2',
+      path: '../fonts/IosevkaSlabQp/IosevkaSlabQp-Regular.woff2',
       weight: '400',
       style: 'normal',
     },
     {
-      path: '../../public/fonts/IosevkaSlabQp/IosevkaSlabQp-Bold.woff2',
+      path: '../fonts/IosevkaSlabQp/IosevkaSlabQp-Bold.woff2',
       weight: '700',
       style: 'normal',
     },
     {
-      path: '../../public/fonts/IosevkaSlabQp/IosevkaSlabQp-Heavy.woff2',
+      path: '../fonts/IosevkaSlabQp/IosevkaSlabQp-Heavy.woff2',
       weight: '900',
       style: 'normal',
     },
   ],
   variable: '--font-iosevka-slab',
-  display: 'swap',
 });
 
-const iosevkaMono = localFont({
+const iosevkaSans = localFont({
   src: [
     {
-      path: '../../public/fonts/IosevkaSansMono/IosevkaSansMono-Regular.woff2',
+      path: '../fonts/IosevkaSansMono/IosevkaSansMono-Regular.woff2',
       weight: '400',
       style: 'normal',
     },
     {
-      path: '../../public/fonts/IosevkaSansMono/IosevkaSansMono-Bold.woff2',
+      path: '../fonts/IosevkaSansMono/IosevkaSansMono-Bold.woff2',
       weight: '700',
       style: 'normal',
     },
     {
-      path: '../../public/fonts/IosevkaSansMono/IosevkaSansMono-Heavy.woff2',
+      path: '../fonts/IosevkaSansMono/IosevkaSansMono-Heavy.woff2',
       weight: '900',
       style: 'normal',
     },
   ],
-  display: 'swap',
   variable: '--font-iosevka-mono',
 });
 
@@ -69,11 +67,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${blaka.variable} ${iosevkaSlab.variable} ${iosevkaMono.variable}`}
-    >
-      <body>{children}</body>
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${blaka.variable} ${iosevkaSlab.variable} ${iosevkaSlab.variable} antialiased`}
+      >
+        {children}
+      </body>
     </html>
   );
 }

src/components/Page/Header/Header.module.css

@@ -1,77 +0,0 @@
-@layer components {
-  .header {
-    @mixin py var(--el-header-paddingY);
-
-    position: sticky;
-    z-index: 9;
-    top: 0;
-
-    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;
-
-    font-size: var(--el-header-font-size);
-    line-height: var(--el-header-line-height);
-
-  }
-
-  .logo {
-    @mixin anim-txt-characterglitch;
-
-    font-family: var(--font-mono);
-    animation:
-        logo-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-
-    &:hover {
-      transform: translate(0, 0);
-      color: var(--color-secondary);
-    }
-  }
-
-  .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; }
-  }
-}

src/components/Page/Header/index.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import { useMenu } from '@/contexts/MenuContext';
-import styles from './Header.module.css';
-
-export default function Header() {
-  const { isMenuOpen, closeMenu, openMenu, startClosing, resetClosing } =
-    useMenu();
-
-  const handleMenuToggle = () => {
-    if (isMenuOpen) {
-      startClosing();
-      setTimeout(() => {
-        closeMenu();
-        resetClosing();
-      }, 800);
-    } else {
-      openMenu();
-    }
-  };
-  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={() => handleMenuToggle()}
-            aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
-            aria-expanded={isMenuOpen}
-            aria-controls="main-menu"
-          >
-            {isMenuOpen ? '[×]' : '[⚍]'}
-          </button>
-        </div>
-      </div>
-    </header>
-  );
-}

src/components/Page/Menu/Menu.module.css

@@ -1,403 +0,0 @@
-@layer components {
-  /* === MenuGrid === */
-
-  .menu {
-    pointer-events: none;
-
-    position: fixed;
-    z-index: 9;
-    top: var(--el-header-height);
-    left: 0;
-
-    display: grid;
-    grid-auto-columns: 1fr;
-    grid-template-areas:
-    "area_1"
-    "area_2"
-    "area_3"
-    "area_4"
-    "area_5";
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(5, auto);
-    gap: 0;
-    gap: var(--spacing-cozy);
-
-    width: 100vw;
-    height: 100%;
-    max-height: calc(100vh - var(--el-header-height));
-
-    visibility: hidden;
-    opacity: 0;
-    background-color: var(--color-palette-charcoal-gray);
-
-    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
-
-    &.isOpen {
-      pointer-events: auto;
-      visibility: visible;
-      opacity: 1;
-    }
-
-    @media screen and (--bp-tablet) {
-      @mixin px var(--spacing-comfortable);
-
-      grid-template-areas:
-        "area_1"
-        "area_2"
-        "area_3"
-        "area_4"
-        "area_5";
-      grid-template-columns: repeat(3, 1fr);
-      grid-template-rows: repeat(2, 1fr);
-      gap: var(--spacing-comfortable);
-    }
-
-    @media screen and (--bp-desktop) {
-      display: grid;
-      grid-template-areas:
-        "area_4 area_4 area_3 area_3 area_3 area_3 area_2"
-        "area_4 area_4 area_3 area_3 area_3 area_3 area_2"
-        "area_5 area_5 area_3 area_3 area_3 area_3 area_2"
-        "area_5 area_5 area_3 area_3 area_3 area_3 area_1"
-        "area_5 area_5 area_3 area_3 area_3 area_3 area_1";
-      grid-template-columns: 2.5fr 1fr 3fr 1.5fr 1fr 1fr 4fr;
-      grid-template-rows: 3fr 1fr 2.5fr 1.5fr 2fr;
-    }
-  }
-
-  /* === MenuArea === */
-  .area {
-    /* === AREA VARIABLES === */
-    --area-bg: transparent;
-    --area-border: transparent;
-    --area-animation-keyframe: none;
-    --area-animation-duration: 0s;
-    --area-animation-timing: linear;
-    --area-bg-filter: grayscale(100%) contrast(150) brightness(150);
-
-    /** === TITLE VARIABLES === */
-    --title-color: var(--color-palette-light-silver);
-    --title-font: var(--font-header);
-    --title-font-size: var(--typo-size-2xl);
-    --title-font-weight: var(--typo-weight-black);
-    --title-line-height: 1;
-    --title-transform: uppercase;
-    --title-spacing: var(--typo-spacing-comfortable);
-    --title-hover-color: var(--color-tertiary);
-    --title-current-color: var(--color-primary);
-    --title-current-bg: var(--color-primary);
-
-    /** === SUBLINK VARIABLES === */;
-    --sublink-color: var(--color-palette-light-silver);
-    --sublink-font: var(--font-header);
-    --sublink-font-size: var(--typo-size-2xl);
-    --sublink-font-weight: var(--typo-weight-black);
-    --sublink-transform: uppercase;
-    --sublink-spacing: var(--typo-spacing-relaxed);
-    --sublink-line-height: var(--typo-leading-relaxed);
-    --sublink-letter-spacing: var(--typo-spacing-relaxed);
-    --sublink-current-color: var(--color-primary);
-    --sublink-current-bg: var(--color-primary);
-
-    /** === SUBTITLE VARIABLES === **/
-    --divider-color: var(--color-palette-light-silver);
-    --divider-width: var(--size-6);
-    --divider-height: var(--size-2);
-    --divider-font: var(--font-mono);
-    --divider-symbol: ⯆;
-    --divider-font-size: var(--typo-size-2xl);
-    --divider-padding: 0 var(--typo-spacing-cozy);
-    --subtitle-color: var(--color-palette-light-silver);
-    --subtitle-font: var(--font-mono);
-    --subtitle-font-size: var(--typo-size-2xl);
-    --subtitle-text-transform: uppercase;
-    --subtitle-letter-spacing: var(--typo-spacing-cozy);
-
-    position: relative;
-
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    border: var(--size-1) solid var(--area-border);
-
-    text-align: center;
-
-    background: var(--area-bg);
-
-    transition: all 0.2s ease-in-out;
-
-    &:not(.current) {
-      &:hover {
-        animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
-      }
-    }
-  }
-
-  .area_1 { grid-area: area_1; }
-  .area_2 { grid-area: area_2; }
-  .area_3 { grid-area: area_3; }
-  .area_4 { grid-area: area_4; }
-  .area_5 { grid-area: area_5; }
-
-  .hasBGImg {
-    &:hover {
-      .bgImg {
-        animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
-      }
-    }
-  }
-
-  .bgImg {
-    position: absolute;
-    z-index: -1;
-
-    width: 100%;
-    height: 100%;
-
-    object-fit: cover;
-    filter: var(--area-bg-filter);
-
-    @media screen and (--bp-tablet-down) {
-      display: none;
-    }
-  }
-
-  /* === MenuTitle === */
-  .title {
-    position: relative;
-  }
-
-  .mainlink {
-    position: relative;
-
-    font-family: var(--title-font);
-    font-size: var(--title-font-size);
-    font-weight: var(--title-font-weight);
-    line-height: var(--title-line-height);
-    color: var(--title-color);
-    text-transform: var(--title-transform);
-    letter-spacing: var(--title-spacing);
-
-    transition: any 0.5s ease-in-out;
-
-    &:focus {
-      &:hover {
-        color: var(--title-current-color);
-      }
-
-      @media screen and (--bp-tablet-down) {
-        outline: none;
-
-        &:hover {
-          color: var(--title-current-color);
-        }
-      }
-    }
-
-    &.current {
-      pointer-events: none;
-
-      @media screen and (--bp-tablet-down) {
-        &:hover {
-          color: var(--title-current-color);
-        }
-      }
-
-      @media screen and (--bp-desktop) {
-      }
-    }
-
-    @media screen and (--bp-tablet-down) {
-      transition: border 0.5s ease-in-out;
-    }
-  }
-
-  /* === MenuSublinks === */
-  .list {
-    @media screen and (--bp-tablet-down) {
-      display: none;
-    }
-  }
-
-  .item {
-    position: relative;
-  }
-
-  .sublink {
-    position: relative;
-
-    font-family: var(--sublink-font);
-    font-size: var(--sublink-font-size);
-    font-weight: var(--sublink-font-weight);
-    line-height: var(--sublink-line-height);
-    color: var(--sublink-color);
-    text-transform: var(--sublink-transform);
-    letter-spacing: var(--sublink-spacing);;
-
-    &:not(.current),
-    &:not(.focus) {
-      transition: var(--sublink-hover-transition);
-
-      &::after,
-      &::before {
-        position: absolute;
-        font-family: var(--sublink-hover-decorator-font);
-        opacity: 0;
-        transition: var(--sublink-hover-decorator-transition);
-      }
-
-      &::before {
-        content: var(--sublink-hover-decorator-left-symbol);
-        left: 0;
-      }
-
-      &::after {
-        content: var(--sublink-hover-decorator-right-symbol);
-        right: 0;
-      }
-
-      &:hover {
-        color: var(--sublink-hover-color);
-
-        &::before {
-          top: var(--sublink-hover-decorator-left-pos-y);
-          left: var(--sublink-hover-decorator-left-pos-x);
-          transform: var(--sublink-hover-decorator-left-transform);
-          opacity: 1;
-        }
-
-        &::after {
-          top: var(--sublink-hover-decorator-right-pos-y);
-          right: var(--sublink-hover-decorator-rightt-pos-x);
-          transform: var(--sublink-hover-decorator-right-transform);
-          opacity: 1;
-        }
-      }
-
-      &:focus {
-        &:hover {
-          color: var(--sublink-current-color);
-        }
-      }
-
-      &.current {
-        pointer-events: none;
-      }
-    }
-  }
-
-  /* === MenuSubtitle === */
-  .wrapper {
-    position: relative;
-
-    @media screen and (--bp-tablet-down) {
-      display: none;
-    }
-  }
-
-  /* === UTILITY Classes */
-  @media screen and (--bp-desktop) {
-    .pos_tr {
-      position: absolute;
-      top: 1em;
-      right: 1em;
-    }
-
-    .pos_tc {
-      position: absolute;
-      top: 1em;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .pos_tl {
-      position: absolute;
-      top: 1em;
-      left: 1em;
-    }
-
-    .pos_cr {
-      position: absolute;
-      top: 50%;
-      right: 1em;
-      transform: translateY(-50%);
-    }
-
-    .pos_c {
-      position: absolute;
-      bottom: 50%;
-      left: 50%;
-      transform: translate(-50%, 50%);
-    }
-
-    .pos_cl {
-      position: absolute;
-      top: 50%;
-      right: 1em;
-      transform: translateY(-50%);
-    }
-
-    .pos_br {
-      position: absolute;
-      right: 1em;
-      bottom: 1em;
-    }
-
-    .pos_bc {
-      position: absolute;
-      bottom: 1em;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .pos_bl {
-      position: absolute;
-      bottom: 1em;
-      left: 1em;
-    }
-
-    .vertical-rl {
-      writing-mode: vertical-rl;
-
-      & * {
-        writing-mode: vertical-rl;
-      }
-    }
-
-    .vertical-lr {
-      writing-mode: vertical-lr;
-
-      & * {
-        writing-mode: vertical-lr;
-      }
-    }
-
-    .sideways-rl {
-      writing-mode: sideways-rl;
-
-      & * {
-        writing-mode: sideways-rl;
-      }
-    }
-
-    .sideways-lr {
-      writing-mode: sideways-lr;
-
-      & * {
-        writing-mode: sideways-lr;
-      }
-    }
-  }
-
-  /* === CATEGORY Variants === */
-  @media screen and (--bp-desktop) {
-    .meta {}
-    .kitchensink {}
-    .awq {}
-    .worldburner {}
-    .chainbreaker {}
-  }
-}

src/components/Page/Menu/MenuArea/MenuArea.module.css

@@ -1,121 +0,0 @@
-@layer components {
-  .area {
-    --area-bg: transparent;
-
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    text-align: center;
-
-    background: var(--area-bg);
-
-    @media screen and (--bp-tablet-down) {
-      border-bottom: var(--size-1) solid var(--color-palette-gunmetal);
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-  }
-
-  .area_1 {
-    position: relative;
-    grid-area: area_1;
-  }
-
-  .area_2 {
-    position: relative;
-    grid-area: area_2;
-  }
-
-  .area_3 {
-    position: relative;
-    grid-area: area_3;
-  }
-
-  .area_4 {
-    position: relative;
-    grid-area: area_4;
-  }
-
-  .area_5 {
-    position: relative;
-    grid-area: area_5;
-  }
-
-  .hasBGImg {
-    position: relative;
-
-    &:hover {
-      & .bgImg {
-        animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
-      }
-    }
-  }
-
-  .bgImg {
-    --area-bg-animation-keyframe: none;
-    --area-bg--animation-duration: 0s;
-    --area-bg--animation-timing: linear;
-    --area-bg-filter: grayscale(100%) contrast(150) brightness(150);
-
-    position: absolute;
-    z-index: -1;
-
-    width: 100%;
-    height: 100%;
-
-    object-fit: cover;
-    filter: var(--area-bg-filter);
-
-    @media screen and (--bp-tablet-down) {
-      display: none;
-    }
-  }
-
-  @media screen and (--bp-desktop) {
-    .chainbreaker {
-      --area-animation-keyframe: var(--kf-color-bleed);
-      --area-animation-duration: var(--img-colorbleed-duration);
-      --area-animation-timing: var(--img-colorbleed-timing);
-
-      & .bgImg {
-        z-index: -2;
-      }
-
-      &.hasBGImg {
-        --divider-color: transparent;
-        --title-color: transparent;
-        --subtitle-color: transparent;
-        --subtitle-transition: all 0.3s ease-in-out;
-        --title-transition: color 0.3s ease-in-out;
-
-        &::before {
-          content: "";
-
-          position: absolute;
-          z-index: -1;
-
-          width: 100%;
-          height: 100%;
-
-          opacity: 0;
-          background: alpharize(var(--grid-bg), 0.66);
-        }
-
-        &:hover {
-          --divider-color: var(--color-tertiary);
-          --title-color: var(--color-tertiary);
-          --subtitle-color: var(--color-tertiary);
-
-          &::before {
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-}

src/components/Page/Menu/MenuArea/index.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import MenuItem from '@/components/Page/Menu//MenuItem/';
-import { useCurrentPath } from '@/hooks/useCurrentPath';
-
-import styles from './MenuArea.module.css';
-
-import { NavigationItem } from '@/lib/types/navigation';
-
-interface MenuAreaProps {
-  item: NavigationItem;
-}
-
-const MenuArea = React.memo(({ item }: MenuAreaProps) => {
-  const hasBGImg = !!item.background;
-  const { isCurrentPath } = useCurrentPath();
-
-  const areaClasses = React.useMemo(() => {
-    return [
-      styles.area,
-      styles[item.gridPosition],
-      styles[item.variant],
-      isCurrentPath(item.path) ? styles.current : '',
-      item.background ? styles.hasBGImg : null,
-    ]
-      .filter(Boolean)
-      .join(' ');
-  }, [item.background, isCurrentPath]);
-
-  return (
-    <section className={areaClasses}>
-      {hasBGImg && (
-        <img
-          className={styles.bgImg}
-          src={item.background}
-          alt={`Background Image for ${item.name}`}
-        />
-      )}
-      <MenuItem item={item} />
-    </section>
-  );
-});
-
-MenuArea.displayName = 'MenuArea';
-
-export default MenuArea;

src/components/Page/Menu/MenuGrid/MenuGrid.module.css

@@ -1,115 +0,0 @@
-@layer components {
-  .menu {
-    --grid-bg: var(--color-palette-charcoal-gray);
-    --grid-fg: var(--color-palette-light-silver);
-
-    /* === MenuTitle Vars === */
-    --title-color: var(--grid-fg);
-    --title-font: var(--font-mono);
-    --title-font-size: var(--typo-size-2xl);
-    --title-font-weight: var(--typo-weight-black);
-    --title-line-height: 1;
-    --title-transform: uppercase;
-    --title-spacing: var(--typo-spacing-comfortable);
-    --title-hover-fg: var(--primary);
-    --title-hover-bg: transparent;
-    --title-current-bg: var(--color-tertiary);
-    --title-current-fg: var(--grid-bg);
-    --title-focus-fg: var(--color-secondary);
-    --title-focus-bg: var(--grid-bg);
-    --title-transition: none;
-
-    /* === MenuSublinks Vars === */
-    --sublink-color: var(--grid-fg);
-    --sublink-font: var(--font-mono);
-    --sublink-font-size: var(--typo-size-xl);
-    --sublink-font-weight: var(--typo-weight-light);
-    --sublink-transform: uppercase;
-    --sublink-line-height: var(--typo-leading-relaxed);
-    --sublink-spacing: var(--typo-spacing-loosest);
-    --sublink-hover-fg: var(--color-tertiary);
-    --sublink-hover-bg: transparent;
-    --sublink-current-fg: var(--grid-bg);
-    --sublink-current-bg: var(--color-primary);
-    --sublink-focus-fg: var(--color-secondary);
-    --sublink-focus-bg: var(--grid-bg);
-    --sublink-transition: none;
-
-    /* === MenuSubtitle Vars === */
-    --divider-color: var(--grid-fg);
-    --divider-width: var(--size-12);
-    --divider-height: var(--size-2);
-    --divider-font: var(--font-mono);
-    --divider-font-size: var(--typo-size-2xl);
-    --divider-padding: 0 var(--typo-spacing-cozy);
-    --subtitle-font: var(--font-mono);
-    --subtitle-color: var(--grid-fg);
-    --subtitle-font-size: var(--typo-size-xl);
-    --subtitle-text-transform: uppercase;
-    --subtitle-letter-spacing: var(--typo-spacing-cozy);
-    --subtitle-transition: none;
-
-    pointer-events: none;
-
-    position: fixed;
-    z-index: 9;
-    top: var(--el-header-height);
-    left: 0;
-
-    display: grid;
-    grid-auto-columns: 1fr;
-    grid-template-areas:
-    "area_1"
-    "area_2"
-    "area_3"
-    "area_4"
-    "area_5";
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(5, auto);
-
-    width: 100vw;
-    height: calc(100vh - var(--el-header-height));
-
-    color: var(--grid-fg);
-
-    visibility: hidden;
-    opacity: 0;
-    background-color: var(--grid-bg);
-    clip-path: inset(0 0 100% 0);
-
-    transition: clip-path 0.35s steps(8, end);
-
-
-    &.isOpen {
-      pointer-events: auto;
-
-      transform: translateY(0);
-
-      visibility: visible;
-      opacity: 1;
-      clip-path: inset(0 0 0 0);
-    }
-
-    &.isClosing {
-      clip-path: inset(0 0 100% 0);
-      transition: clip-path 0.25s steps(6, end);
-
-      &.isOpen {
-        clip-path: inset(0 0 100% 0);
-        transition: clip-path 0.25s steps(6, end);
-      }
-    }
-
-    @media screen and (--bp-desktop) {
-      display: grid;
-      grid-template-areas:
-        "area_4 area_4 area_3 area_3 area_3 area_3 area_2"
-        "area_4 area_4 area_3 area_3 area_3 area_3 area_2"
-        "area_5 area_5 area_3 area_3 area_3 area_3 area_2"
-        "area_5 area_5 area_3 area_3 area_3 area_3 area_1"
-        "area_5 area_5 area_3 area_3 area_3 area_3 area_1";
-      grid-template-columns: 2.5fr 1fr 3fr 1.5fr 1fr 1fr 4fr;
-      grid-template-rows: 3fr 1fr 2.5fr 1.5fr 2fr;
-    }
-  }
-}

src/components/Page/Menu/MenuGrid/index.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { useMenu } from '@/contexts/MenuContext';
-import MenuArea from '@/components/Page/Menu/MenuArea/';
-
-import styles from './MenuGrid.module.css';
-
-interface MenuGridProps {
-  navigationData: Awaited<
-    ReturnType<
-      typeof import('@/lib/readers/system/navigation').getNavigationData
-    >
-  >;
-}
-
-export default function MenuGrid({ navigationData }: MenuGridProps) {
-  const { isMenuOpen, closeMenu, isClosing, startClosing, resetClosing } =
-    useMenu();
-  const menuRef = React.useRef<HTMLElement>(null);
-  const handleClose = React.useCallback(() => {
-    startClosing();
-    setTimeout(() => {
-      closeMenu();
-      resetClosing();
-    }, 800);
-  }, [closeMenu, startClosing, resetClosing]);
-
-  React.useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isMenuOpen) {
-        handleClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isMenuOpen, handleClose]);
-
-  React.useEffect(() => {
-    if (isMenuOpen && menuRef.current) {
-      const initialFocus = menuRef.current.querySelector(
-        'a, button'
-      ) as HTMLElement;
-      initialFocus?.focus();
-    }
-  }, [isMenuOpen]);
-
-  if (!navigationData) return null;
-
-  const { items } = navigationData;
-
-  return (
-    <nav
-      ref={menuRef}
-      className={`${styles.menu} ${isMenuOpen ? styles.isOpen : ''} ${isClosing ? styles.isClosing : ''}`}
-      aria-hidden={!isMenuOpen}
-      aria-label="Main navigation"
-    >
-      {items.map((item, index) => (
-        <MenuArea key={item.gridPosition} item={item} />
-      ))}
-    </nav>
-  );
-}

src/components/Page/Menu/MenuItem/index.tsx

@@ -1,24 +0,0 @@
-import { hasSublinks, hasSubtitle } from '@/lib/types/navigation';
-import MenuTitle from '@/components/Page/Menu/MenuTitle/';
-import MenuSublinks from '@/components/Page/Menu/MenuSublinks/';
-import MenuSubtitle from '@/components/Page/Menu/MenuSubtitle/';
-
-import { NavigationItem } from '@/lib/types/navigation';
-
-interface MenuItem {
-  item: NavigationItem;
-}
-
-export default function MenuItem({ item }: MenuItem) {
-  return (
-    <>
-      <MenuTitle path={item.path} name={item.name} variant={item.variant} />
-      {hasSublinks(item) && (
-        <MenuSublinks sublinks={item.sublinks.value} variant={item.variant} />
-      )}
-      {hasSubtitle(item) && (
-        <MenuSubtitle subtitle={item.subtitle.value} variant={item.variant} />
-      )}
-    </>
-  );
-}

src/components/Page/Menu/MenuSublinks/MenuSublinks.module.css

@@ -1,57 +0,0 @@
-@layer components {
-  .list {
-    @media screen and (--bp-tablet-down) {
-      @util hide-visually;
-    }
-  }
-
-  .item {
-    position: relative;
-  }
-
-  .sublink {
-    font-family: var(--sublink-font);
-    font-size: var(--sublink-font-size);
-    font-weight: var(--sublink-font-weight);
-    line-height: var(--sublink-line-height);
-    color: var(--sublink-color);
-    text-transform: var(--sublink-transform);
-    letter-spacing: var(--sublink-spacing);
-
-    &.current {
-      padding: var(--spacing-snug) var(--spacing-tight);
-      color: var(--title-current-fg);
-      animation: var(--kf-text-glitch) 5s infinite;
-
-      &::before {
-        content: "⟩";
-      }
-    }
-
-    &:not(.current) {
-      --pointer-left-symbol: "▶";
-      --pointer-right-symbol: "◀";
-      --pointer-distance: 1em;
-
-      @mixin anim-txt-pointer_focus;
-      @mixin px var(--spacing-tight);
-
-      &:focus {
-        color: var(--sublink-focus-fg);
-        outline: none;
-      }
-
-      &:not(:focus) {
-        --pointer-left-symbol: "{";
-        --pointer-right-symbol: "}";
-        --pointer-distance: 0.5em;
-
-        @mixin anim-txt-pointer;
-
-        &:hover {
-          --sublink-color: var(--color-primary);
-        }
-      }
-    }
-  }
-}

src/components/Page/Menu/MenuSublinks/index.tsx

@@ -1,29 +0,0 @@
-import Link from 'next/link';
-
-import styles from './MenuSublinks.module.css';
-
-import { SubNavigationItem } from '@/lib/types/navigation';
-import { useCurrentPath } from '@/hooks/useCurrentPath';
-
-interface MenuSublinks {
-  sublinks: readonly SubNavigationItem[];
-  variant: string;
-}
-
-export default function MenuSublinks({ sublinks, variant }: MenuSublinks) {
-  const { isCurrentPath } = useCurrentPath();
-  return (
-    <ul className={`${styles.list} ${styles[`${variant}`]}`}>
-      {sublinks.map((sublink: SubNavigationItem) => (
-        <li className={styles.item} key={sublink.path}>
-          <Link
-            href={sublink.path}
-            className={`${styles.sublink} ${isCurrentPath(sublink.path) ? styles.current : ''}`}
-          >
-            {sublink.name}
-          </Link>
-        </li>
-      ))}
-    </ul>
-  );
-}

src/components/Page/Menu/MenuSubtitle/MenuSubtitle.module.css

@@ -1,57 +0,0 @@
-@layer components {
-  .claim {
-
-    @media screen and (--bp-tablet-down) {
-      display: none;
-    }
-  }
-
-  .divider {
-    position: relative;
-    width: 100%;
-    text-align: center;
-  }
-
-  .dividersymbol {
-    position: relative;
-
-    font-family: var(--divider-font);
-    font-size: var(--divider-font-size);
-    line-height: var(--divider-line-height);
-    color: var(--divider-color);
-
-    transition: var(--subtitle-transition);
-
-    &::before,
-    &::after {
-      content: '';
-
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-
-      width: var(--divider-width);
-      height: var(--divider-height);
-
-      background-color: var(--divider-color);
-    }
-
-    &::before {
-      left: calc(var(--divider-width) *-1);
-    }
-
-    &::after {
-      right: calc(var(--divider-width) *-1);
-    }
-  }
-
-  .subtitle {
-    font-family: var(--subtitle-font);
-    font-size: var(--subtitle-font-size);
-    color: var(--subtitle-color);
-    text-transform: var(--subtitle-text-transform);
-    letter-spacing: var(--subtitle-letter-spacing);
-
-    transition: var(--subtitle-transition);
-  }
-}

src/components/Page/Menu/MenuSubtitle/index.tsx

@@ -1,26 +0,0 @@
-import { Subtitle, hasDivider } from '@/lib/types/navigation';
-import styles from './MenuSubtitle.module.css';
-
-interface MenuSubtitleProps {
-  subtitle: Subtitle;
-  variant: string;
-}
-
-export default function MenuSubtitle({ subtitle, variant }: MenuSubtitleProps) {
-  const divider = hasDivider(subtitle) ? (
-    <div className={styles.divider}>
-      <span className={`${styles.dividersymbol}`}>
-        {subtitle.divider.value}
-      </span>
-    </div>
-  ) : (
-    ''
-  );
-
-  return (
-    <div className={`${styles.claim} ${styles[`${variant}`]}`}>
-      {divider}
-      <p className={`${styles.subtitle}`}>{subtitle.content}</p>
-    </div>
-  );
-}

src/components/Page/Menu/MenuTitle/MenuTitle.module.css

@@ -1,63 +0,0 @@
-@layer components {
-  .heading {
-    position: relative;
-
-    &:has(+ ul) {
-      @mixin my var(--spacing-comfortable);
-    }
-  }
-
-  .mainlink {
-    position: relative;
-
-    border: none;
-
-    font-family: var(--title-font);
-    font-size: var(--title-font-size);
-    font-weight: var(--title-font-weight);
-    line-height: var(--title-line-height);
-    color: var(--title-color);
-    text-transform: var(--title-transform);
-    letter-spacing: var(--title-spacing);
-
-    background: transparent;
-
-    transition: var(--title-transition);
-
-    &.current {
-      padding: var(--spacing-snug) var(--spacing-tight);
-      color: var(--title-current-fg);
-      animation: var(--kf-text-glitch) 5s infinite;
-
-      &::before {
-        content: "⟩";
-      }
-    }
-
-    &:not(.current) {
-      --pointer-left-symbol: "▶";
-      --pointer-right-symbol: "◀";
-      --pointer-distance: 1em;
-
-      @mixin anim-txt-pointer_focus;
-      @mixin px var(--spacing-tight);
-
-      &:focus {
-        color: var(--title-focus-fg);
-        outline: none;
-      }
-
-      &:not(:focus) {
-        --pointer-left-symbol: "{";
-        --pointer-right-symbol: "}";
-        --pointer-distance: 0.5em;
-
-        @mixin anim-txt-pointer;
-
-        &:hover {
-          --title-color: var(--color-primary);
-        }
-      }
-    }
-  }
-}

src/components/Page/Menu/MenuTitle/index.tsx

@@ -1,25 +0,0 @@
-import Link from 'next/link';
-
-import styles from './MenuTitle.module.css';
-
-import { useCurrentPath } from '@/hooks/useCurrentPath';
-
-interface MenuTitleProps {
-  name: string;
-  path: string;
-  variant: string;
-}
-
-export default function MenuTitle({ name, path, variant }: MenuTitleProps) {
-  const { isCurrentPath } = useCurrentPath();
-  return (
-    <h2 className={`${styles.heading} ${styles[`${variant}`]}`}>
-      <Link
-        className={`${styles.mainlink} ${isCurrentPath(path) ? styles.current : ''}`}
-        href={path}
-      >
-        {name}
-      </Link>
-    </h2>
-  );
-}

src/components/Page/Menu/index.tsx

@@ -1,7 +0,0 @@
-import { getNavigationData } from '@/lib/readers/system/navigation';
-import MenuGrid from '@/components/Page/Menu/MenuGrid';
-
-export default async function Menu() {
-  const navigation = await getNavigationData();
-  return <MenuGrid navigationData={navigation} />;
-}

src/contexts/MenuContext.tsx

@@ -1,62 +0,0 @@
-'use client';
-
-import React, { useContext, useEffect } from 'react';
-
-interface MenuContextType {
-  isMenuOpen: boolean;
-  isClosing: boolean;
-  closeMenu: () => void;
-  openMenu: () => void;
-  startClosing: () => void;
-  resetClosing: () => void;
-}
-
-const MenuContext = React.createContext<MenuContextType | undefined>(undefined);
-
-interface MenuProviderProps {
-  children: React.ReactNode;
-}
-
-export const MenuProvider = ({ children }: MenuProviderProps) => {
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [isClosing, setIsClosing] = React.useState(false);
-
-  const closeMenu = () => setIsMenuOpen(false);
-  const openMenu = () => setIsMenuOpen(true);
-  const startClosing = () => setIsClosing(true);
-  const resetClosing = () => setIsClosing(false);
-
-  useEffect(() => {
-    if (isMenuOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
-    }
-    return () => {
-      document.body.style.overflow = 'unset';
-    };
-  }, [isMenuOpen]);
-
-  return (
-    <MenuContext.Provider
-      value={{
-        isMenuOpen,
-        openMenu,
-        closeMenu,
-        isClosing,
-        startClosing,
-        resetClosing,
-      }}
-    >
-      {children}
-    </MenuContext.Provider>
-  );
-};
-
-export const useMenu = () => {
-  const context = useContext(MenuContext);
-  if (context === undefined) {
-    throw new Error('useMenu must be used within a MenuProvider');
-  }
-  return context;
-};