Css fixes

.prettierrc.json

@@ -38,5 +38,5 @@
     "^.+\\.css$"
   ],
   "importOrderParserPlugins": ["typescript", "jsx"],
-  "importOrderTypeScriptVersion": "5.7.0"
+  "importOrderTypeScriptVersion": "6.0.3"
 }

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) Thinkmill Labs Pty Ltd
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

astro.config.mjs

@@ -6,7 +6,6 @@ import markdoc from '@astrojs/markdoc'
 import node from '@astrojs/node'
 import react from '@astrojs/react'
 
-// https://astro.build/config
 export default defineConfig({
   site: 'https://dave-dmg.de',
   integrations: [react(), markdoc(), keystatic()],

package.json

@@ -2,7 +2,6 @@
   "name": "dave-dmg",
   "version": "0.0.1",
   "private": true,
-  "license": "MIT",
   "type": "module",
   "scripts": {
     "build": "astro build",

src/layouts/BaseLayout.astro

@@ -27,7 +27,7 @@ const { title, description } = Astro.props
     <Font cssVariable="--font-julia-mono" preload />
     <Font cssVariable="--font-unigrim" />
   </head>
-  <body>
+  <body class="ui">
     <slot />
   </body>
 </html>

src/styles/base/colors.css

@@ -1,4 +1,5 @@
-:root {
+@layer tokens {
+  :root {
     /* === PALETTE === */
 
     /* == Ink == */
@@ -109,4 +110,5 @@
     --color-highlight: var(--color-tertiary);
     --color-skeleton-base: var(--color-surface-elevated-2);
     --color-skeleton-shimmer: var(--color-surface-elevated-1);
+  }
 }

src/styles/base/foundation.css

@@ -1,7 +1,7 @@
 @layer reset {
   /*
-Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/preflight)
-*/
+  Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/preflight)
+  */
 
   /*
     1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)

src/styles/base/primitives.css

@@ -1,4 +1,5 @@
-.ui {
+@layer tokens {
+  .ui {
     /* == Font sizes == */
     --type--3: 0.625rem; /* 10px */
     --type--2: 0.6875rem; /* 11px */
@@ -57,9 +58,9 @@
     --tracking-eyebrow: 0.16em; /* section eyebrows, zone labels */
     --tracking-plate: 0.08em; /* plate numbers */
     --tracking-display: 0.01em; /* Blaka h1 */
-}
+  }
 
-.content {
+  .content {
     /* == Font sizes == */
     --type--3: 0.625em;
     --type--2: 0.6875em;
@@ -108,9 +109,9 @@
     --tracking-9: -0.0237em;
     --tracking-10: -0.0247em;
     --leading-prose: 1.6;
-}
+  }
 
-:root {
+  :root {
     /* === FONT FAMILIES == */
     --font-display: var(--font-blaka), serif;
     --font-header: var(--font-geist), sans-serif;
@@ -197,4 +198,5 @@
     --layout-tier-height: 2.25rem;
     --layout-header-height: 3.125rem;
     --layout-card-min-height: 6.5rem; /* stops grid reflow on resolve */
+  }
 }

src/styles/global.css

@@ -1,6 +1,5 @@
-@layer reset, base, components, utilities;
+@layer reset, tokens, base, components, utilities;
 
-@import url("base/custom-media.css");
 @import url("base/foundation.css");
 @import url("base/colors.css");
 @import url("base/primitives.css");

tsconfig.json

@@ -5,7 +5,6 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
     },