Added base styles, variables, and mixins

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +1,39 @@
 <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>

package.json

@@ -13,15 +13,14 @@
     "@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",
@@ -31,12 +30,20 @@
     "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,6 +1,54 @@
-const config = {
+// postcss.config.js
-  plugins: {
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
-    '@tailwindcss/postcss': {},
+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/postcss/functions';
+
+const plugins = [
+  postcssGlobalData({
+    files: ['./src/styles/variables/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,
 };
-export default config;

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

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

src/app/(site)/page.tsx

@@ -1,7 +1,532 @@
+import styles from './page.module.css';
+
 export default function Home() {
   return (
-    <div className="text-3xl font-bold underline">
+    <div className={styles.content}>
-      Do not let us die in the dark night of this cold winter, Dave
+      <h1>Rods pursued studies dearer dangers Mellon spears lodgings.</h1>
+      <p>
+        Language Sméagol where? Forest cesspits talked reclaim verse dungeon
+        Envenom 60 then venerable prolonging! There is only one Lord of the
+        Ring.
+      </p>
+      <h2>Breeding job clothing talks caught Freda trust.</h2>
+      <p>
+        East dry because slinker deeper quarry knocks Sit. Treachery Front whim.
+        Even the smallest person can change the course of the future.
+      </p>
+      <h3>Fence Toby reaction greed fired parting!</h3>
+      <p>
+        Do not take me for some conjurer of cheap tricks. Room aged Hobbitses!
+        Wall odds force simply shield hmm Tuckborough pearl privilege grows.
+        Ride amazing seeps lake guardian pretty Arwen retrieve stroke steps?
+      </p>
+      <ul>
+        <li>
+          Primary Equipment Loadout - Every adventurer must carry essential gear
+          including weapons, armor, survival tools, and emergency supplies that
+          could mean the difference between life and death in the depths of
+          forgotten dungeons and abandoned ruins.
+        </li>
+        <li>
+          Weapon Categories and Combat Applications
+          <ul>
+            <li>
+              Melee Weapons - Close combat instruments ranging from simple clubs
+              and daggers to sophisticated swords and war hammers, each designed
+              for specific tactical situations and requiring different skill
+              sets to master effectively.
+            </li>
+            <li>
+              Ranged Weapons and Projectile Systems
+              <ul>
+                <li>
+                  Bows and Crossbows - Traditional projectile weapons that rely
+                  on mechanical tension to launch arrows and bolts with deadly
+                  accuracy across considerable distances, favored by hunters and
+                  scouts.
+                </li>
+                <li>
+                  Firearms and Explosive Devices
+                  <ul>
+                    <li>
+                      Pistols - Compact handheld firearms suitable for
+                      close-quarters combat and as backup weapons when primary
+                      armaments fail or become unusable in tight spaces.
+                    </li>
+                    <li>
+                      Rifles - Long-barreled precision weapons designed for
+                      accuracy at extended ranges, ideal for eliminating threats
+                      before they can close to melee distance.
+                    </li>
+                    <li>
+                      Heavy Weapons - Devastating armaments including cannons,
+                      siege engines, and experimental warpstone-powered devices
+                      that can breach fortifications and eliminate multiple
+                      enemies.
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  Thrown Weapons - Projectiles designed for manual deployment
+                  including knives, axes, and specialized implements that
+                  require significant skill and practice to use effectively in
+                  combat situations.
+                </li>
+              </ul>
+            </li>
+            <li>
+              Magic Items and Enchanted Artifacts - Supernatural implements that
+              harness arcane energies to produce effects beyond the capabilities
+              of mundane equipment, often requiring specific knowledge or
+              bloodlines to activate safely.
+            </li>
+          </ul>
+        </li>
+        <li>
+          Protective Gear and Defensive Equipment - Armor systems, shields, and
+          other defensive measures designed to reduce incoming damage and
+          improve survival chances against the horrors that lurk in the darkness
+          below.
+        </li>
+      </ul>
+      <ul>
+        <li>Helm&apos;s Deep saws rip outer special bowl determined.</li>
+        <li>
+          Breached forgive Hornblowers galumphing drums respectable wretched.
+        </li>
+        <li>Mellon slightest uttermost Isildur&apos;s sakes em.</li>
+        <li>Degree bone rift where sleep judgment Mordor.</li>
+        <li>
+          Tickle watchful lightest dry very teaching pushes picking Shire root.
+        </li>
+      </ul>
+      <h3>Maggot devils tea resisted person Sauron the White mist.</h3>
+      <p>
+        You shall not pass! Pelennor squash least crunchable feel faithless
+        years well-done fun. Rock ending almost shared extend crooked alliances
+        possible nightfall Dwarf fine risky.
+      </p>
+      <ol>
+        <li>
+          Character Creation Process - The systematic approach to developing a
+          playable character including attribute generation, skill selection,
+          equipment procurement, and background development that establishes the
+          foundation for all future adventures.
+        </li>
+        <li>
+          Combat Rules and Tactical Systems
+          <ol>
+            <li>
+              Initiative Phase Determination - The method by which turn order is
+              established at the beginning of combat encounters, typically
+              involving dice rolls modified by relevant characteristics and
+              environmental factors.
+            </li>
+            <li>
+              Action Resolution Mechanics and Probability Systems
+              <ol>
+                <li>
+                  Roll percentile dice against relevant skill values - The core
+                  mechanic requiring players to generate random numbers between
+                  1 and 100 and compare the result to their character&apos;s
+                  applicable skill rating.
+                </li>
+                <li>
+                  Compare results to skill values and apply situational
+                  modifiers
+                  <ol>
+                    <li>
+                      Success conditions require rolling under the target skill
+                      value after applying all relevant bonuses and penalties
+                      from equipment, positioning, and environmental conditions.
+                    </li>
+                    <li>
+                      Failure occurs when the dice result exceeds the modified
+                      skill value, resulting in missed attacks, failed attempts,
+                      or other negative outcomes depending on the specific
+                      action attempted.
+                    </li>
+                    <li>
+                      Critical results happen on natural rolls of 01-05 for
+                      automatic success or 96-00 for catastrophic failure,
+                      regardless of skill levels or modifiers applied to the
+                      attempt.
+                    </li>
+                  </ol>
+                </li>
+                <li>
+                  Apply environmental modifiers, equipment bonuses, and
+                  situational penalties that reflect the current tactical
+                  situation and the character&apos;s preparation level for the
+                  specific challenge being attempted.
+                </li>
+              </ol>
+            </li>
+            <li>
+              Damage Resolution and Wound Tracking - The system for determining
+              injury severity, applying armor protection values, and tracking
+              the cumulative effects of combat damage on character performance
+              and survival.
+            </li>
+          </ol>
+        </li>
+        <li>
+          Experience and Advancement Systems - The mechanisms by which
+          characters improve their capabilities over time through successful
+          completion of adventures, skill usage, and deliberate training between
+          expeditions.
+        </li>
+      </ol>
+      <ol>
+        <li>Spent begins Saruman become interrupt thing arts wide.</li>
+        <li>Barad-dûr gives forest worm closer.</li>
+        <li>
+          Comings mission province Haleth character chill special service?
+        </li>
+        <li>
+          Fine mean hours triumph loyal jelly league someone&apos;s raze
+          Bagshot!
+        </li>
+        <li>Bars ostler crack spreads should spring too dissuade s World.</li>
+      </ol>
+      <h3>Else ah Bolger torment minutes hours.</h3>
+      <p>
+        Possibly Moon effect utterly tipsy overcrowd next misplaced? Covet
+        parting Brandybuck hungers crevice hours pork haven&apos;t tempted
+        clothing. All right, then. Keep your secrets.
+      </p>
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>Unfold</th>
+            <th>Grumbling</th>
+            <th>Ago</th>
+            <th>Lifetime</th>
+            <th>Pillaged</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Lad</td>
+            <td>whip</td>
+            <td>arrows</td>
+            <td>fairer</td>
+            <td>begged</td>
+            <td>stabs</td>
+          </tr>
+          <tr>
+            <td>Appreciation</td>
+            <td>trouble-making</td>
+            <td>alone</td>
+            <td>horrid</td>
+            <td>prove</td>
+            <td>they&apos;ll</td>
+          </tr>
+          <tr>
+            <td>Filthy</td>
+            <td>tombs</td>
+            <td>vest</td>
+            <td>torches</td>
+            <td>barrels</td>
+            <td>powerful</td>
+          </tr>
+          <tr>
+            <td>Instead</td>
+            <td>foretold</td>
+            <td>ranks</td>
+            <td>stare</td>
+            <td>joy</td>
+            <td>unequaled</td>
+          </tr>
+          <tr>
+            <td>Knew</td>
+            <td>relations</td>
+            <td>fighting</td>
+            <td>spirits</td>
+            <td>gongs</td>
+            <td>bears</td>
+          </tr>
+          <tr>
+            <td>Seasoning</td>
+            <td>nut</td>
+            <td>one&apos;s</td>
+            <td>approve</td>
+            <td>gray</td>
+            <td>blessing</td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td>beheading</td>
+            <td>disturber</td>
+            <td>laid</td>
+            <td>forth</td>
+            <td>watching</td>
+            <td>domains</td>
+          </tr>
+        </tfoot>
+      </table>
+      <h4>Sodding tongue Elros leaves perceived south pocket.</h4>
+      <p>
+        Born revenge utterly that&apos;ll Goblin-town gladness. Chips sustained
+        times apocalypse closest Alfrid grow. I can cut across country easily
+        enough. Clearing toss unhappy Smeagol&apos;s gifted?
+      </p>
+      <blockquote>
+        <p>Sam... I&apos;m glad you are with me.</p>
+        <footer>
+          —Ravens, <cite>shore wizards skin harpoon</cite>
+        </footer>
+      </blockquote>
+      <figure>
+        <figure>
+          <img
+            src="https://picsum.photos/1280/1024"
+            alt="Industrial machinery in abandoned factory"
+            width="1280"
+            height="1024"
+          />
+          <figcaption>
+            Rusted conveyor systems in the former Blackwater Manufacturing
+            plant, photographed during demolition in 2023.
+          </figcaption>
+        </figure>
+      </figure>
+      <figure>
+        <blockquote>
+          <p>
+            More glad painted Sauron the White troop holidays captive has. Many
+            pierced repel bathroom absence glimpse Tom. All right, then. Keep
+            your secrets.
+          </p>
+        </blockquote>
+        <figcaption>
+          Common saying among veteran adventurers in the Undercity.
+        </figcaption>
+      </figure>
+      <details>
+        <summary>Equipment Requirements</summary>
+        <p>
+          All adventurers must carry a minimum of: one weapon (melee or ranged),
+          basic armor or protective gear, emergency rations for 3 days, torch or
+          light source, 50 feet of rope, and a first aid kit.
+        </p>
+        <p>
+          Optional but recommended: lockpicks, crowbar, grappling hook, healing
+          potions, and backup weapon.
+        </p>
+      </details>
+
+      <details>
+        <summary>Combat Mechanics Overview</summary>
+        <h4>Initiative System</h4>
+        <p>Roll 1d10 + Initiative characteristic. Highest goes first.</p>
+
+        <h4>Attack Resolution</h4>
+        <p>
+          Roll percentile dice under your relevant skill. Success means you hit,
+          failure means you miss.
+        </p>
+
+        <ul>
+          <li>Melee combat uses Weapon Skill</li>
+          <li>Ranged combat uses Ballistic Skill</li>
+          <li>Damage equals weapon damage + Strength bonus</li>
+        </ul>
+      </details>
+
+      <details open>
+        <summary>Currently Expanded Section</summary>
+        <p>
+          This details element starts open to test the expanded state styling.
+        </p>
+      </details>
+      <h5>
+        Raised Morgoth powerless roaming sing fire-breather regurgitation was.
+      </h5>
+      <p>
+        More glad painted Sauron the White troop holidays captive has. Many
+        pierced repel bathroom absence glimpse Tom. All right, then. Keep your
+        secrets.
+      </p>
+      <pre>
+        Prepared Tilda adventure characters crush. Wilds overlook blessed walk
+        requested. Ligulas sat eavesdropping breathes exceeding dim. Deeper
+        clever becomes regain Dimholt fronts.
+      </pre>
+      <h6>Resilient closest regret vile birthright innards Middle-earth.</h6>
+      <p>
+        Shire herald <strong>dear hard army carry without</strong> proposition.
+        Thranduil faint me chiefest{' '}
+        <a>middle hey-diddle-diddle squeaked sawed landlord</a>.{' '}
+        <del>Hallway clot-head&apos;s injury</del> journey Minas Morgul hasty?
+        Ring sight fit Boffins <kbd>S</kbd>. Manage Bifur ways{' '}
+        <mark>pity&apos;s swarming</mark> doubt. Wilderness breathing woe liege
+        <ins>Khazad-dum King&apos;s</ins> handy! Join corpses{' '}
+        <code>rack tongs knockers gongs</code> four-day Théoden&apos;s idiot.{' '}
+        <var>Hooded</var> Kingsfoil biding may. Extra{' '}
+        <time>Radagast the Brown</time> passion cutting skinned. Hurry problem{' '}
+        <sup>delays</sup> Bucklebury. Corks hell <small>hundred deal</small>{' '}
+        Barahir unprepared. What&apos;ll Dwarvish down
+        <em>bought haunted steps</em>. Master&apos;s given Hobbit{' '}
+        <dfn>afterwards bodies gibbet</dfn>. Towers stars <sub>productive</sub>{' '}
+        Baggins. Juicy <samp>opinion note</samp> Déagol tough books spreads.
+        Decide imaginable <q>Goblin-mutant Silvan</q> fellow.{' '}
+        <cite>Sit Agreed</cite> thick drink pearl tale. Legolas approve
+        night&apos;s
+        <abbr>retrieve</abbr> endless.
+      </p>
+      <hr />
+      <dl>
+        <dt>How</dt>
+        <dd>
+          Looks resilient eggs Tauriel higher supplant evisceration idiot
+          barely.
+        </dd>
+        <dt>Names</dt>
+        <dd>Slugs play Dwalin late parapet ending how morning?</dd>
+        <dd>
+          Holidays even disease thunder-battle nice irregular cooked
+          trouble&apos;ll Minas Tirith mistaken!
+        </dd>
+        <dt>Mice</dt>
+        <dd>
+          Productive Sit mend ones raiding hutch couldn&apos;t thirty-four.
+        </dd>
+        <dd>
+          Facing others act doing lives usually pity Legolas laws daughter.
+        </dd>
+        <dd>
+          Lords embalmed nature we&apos;d grievances Thror shelter tragedy.
+        </dd>
+      </dl>
+      <form>
+        <fieldset>
+          <legend>Need bandy council</legend>
+          <div>
+            <label>Text</label>
+            <input type="text" />
+          </div>
+          <div>
+            <label>Email</label>
+            <input type="email" />
+          </div>
+          <div>
+            <label>Password</label>
+            <input type="password" />
+          </div>
+          <div>
+            <label>Url</label>
+            <input type="url" />
+          </div>
+          <div>
+            <label>Number</label>
+            <input type="number" />
+          </div>
+          <div>
+            <label>Tel</label>
+            <input type="tel" />
+          </div>
+          <div>
+            <label>Search</label>
+            <input type="search" />
+          </div>
+          <div>
+            <label>Time</label>
+            <input type="time" />
+          </div>
+          <div>
+            <label>Date</label>
+            <input type="date" />
+          </div>
+          <div>
+            <label>Datetime-local</label>
+            <input type="datetime-local" />
+          </div>
+          <div>
+            <label>Week</label>
+            <input type="week" />
+          </div>
+          <div>
+            <label>Textarea</label>
+            <textarea></textarea>
+          </div>
+        </fieldset>
+        <fieldset>
+          <legend>Wring moments</legend>
+          <div>
+            <label>Month</label>
+            <input type="month" />
+          </div>
+          <div>
+            <label>
+              <input type="checkbox" name="checkbox" />
+              tipsy smuggler
+            </label>
+          </div>
+          <div>
+            <label>Color</label>
+            <input type="color" />
+          </div>
+          <div>
+            <label>File</label>
+            <input type="file" />
+          </div>
+          <div>
+            <label>Hidden</label>
+            <input type="hidden" />
+          </div>
+          <div>
+            <label>Image</label>
+            <input type="image" src="https://picsum.photos/96" />
+          </div>
+          <div>
+            <label>malt grass fall door&apos;s infested red</label>
+            <label>
+              <input type="radio" name="radio" />
+              rain joy
+            </label>
+            <label>
+              <input type="radio" name="radio" />
+              plates grieve
+            </label>
+            <label>
+              <input type="radio" name="radio" />
+              arranged listened
+            </label>
+          </div>
+          <div>
+            <label>Range</label>
+            <input type="range" />
+          </div>
+          <div>
+            <input type="button" value="Button" />
+          </div>
+          <div>
+            <input type="reset" value="Reset" />
+          </div>
+          <div>
+            <input type="submit" value="Submit" />
+          </div>
+          <button>infected awoke</button>
+          <div>
+            <label>Select</label>
+            <select>
+              <optgroup label="rubbish waited tastes">
+                <option>myth</option>
+                <option>metals</option>
+                <option>would</option>
+              </optgroup>
+              <optgroup label="thunderstorm particularly breach">
+                <option>began</option>
+                <option>threads</option>
+                <option>tight</option>
+              </optgroup>
+            </select>
+          </div>
+        </fieldset>
+      </form>
     </div>
   );
 }

src/app/globals.css

@@ -1 +1,4 @@
-@import 'tailwindcss';
+@import url("../styles/variables.css");
+@import url("../styles/utilities.css");
+@import url("../styles/foundation.css");
+@import url("../styles/base.css");

src/app/layout.tsx

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