feat(web): Use a better theme colors

packages/web/src/components/astro/HeroComponent.astro

@@ -1,5 +1,5 @@
 ---
-import { Stack, Grid } from "../solidjs/index.ts";
+import { Stack, Grid } from "../solidjs/index";
 
 // Define which areas are occupied by content at different breakpoints
 const occupiedAreas = {
@@ -29,13 +29,16 @@ const occupiedAreas = {
 >
   <div class="flex justify-center items-center flex-col">
     <Grid.Root
-      xsGridRows={6}
-      smGridRows={5}
-      mdGridRows={6}
-      xsGridColumns={8}
+      xsGridRows={1}
+      smGridRows={4}
+      mdGridRows={8}
+      xsGridColumns={1}
       smGridColumns={8}
       mdGridColumns={12}
       occupiedAreas={occupiedAreas}
-    />
+    >
+      <Grid.Cross row={1} column={1} />
+      <Grid.Cross row={-1} column={-1} />
+    </Grid.Root>
   </div>
 </Stack>

packages/web/src/components/solidjs/Grid.tsx

@@ -30,12 +30,12 @@ export interface GridRootProps {
 }
 
 const defaultProps: GridRootProps = {
-  xsGridRows: 6,
-  smGridRows: 5,
-  mdGridRows: 4,
-  xsGridColumns: 8,
-  smGridColumns: 8,
-  mdGridColumns: 12,
+  xsGridRows: 1,
+  smGridRows: 1,
+  mdGridRows: 1,
+  xsGridColumns: 1,
+  smGridColumns: 1,
+  mdGridColumns: 1,
   smHeight: "calc(var(--width) / var(--grid-cols) * var(--grid-rows))",
   occupiedAreas: {},
 }

packages/web/src/components/solidjs/index.module.css

@@ -71,11 +71,11 @@
 .grid_system {
   --max-width: 1080px;
   --min-width: 368px;
-  --guide-width: 1px;
+  --guide-width: 1.5px;
   --horizontal-margin: 2rem;
   --grid-system-width: 100vw;
   --guide-color: var(--color-gray-400);
-  --cross-color: var(--color-gray-600);
+  --cross-color: var(--color-orange-600);
   display: flex;
   position: relative;
   flex-direction: column;

packages/web/src/layouts/Layout.astro

@@ -17,12 +17,12 @@ import "@fontsource-variable/geist-mono";
     <meta
       name="theme-color"
       media="(prefers-color-scheme: light)"
-      content="hsl(0 0% 98%);"
+      content="hsl(0 0% 100%);"
     />
     <meta
       name="theme-color"
       media="(prefers-color-scheme: dark)"
-      content="hsl(0 0% 4%);"
+      content=" hsla(0, 0%, 4%, 1);"
     />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

packages/web/src/styles/global.css

@@ -100,11 +100,8 @@
   --color-gray-alpha-900: hsla(0, 0%, 0%, 0.61);
   --color-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
 
-  --color-background-100: hsl(0 0% 100%);
-  --color-background-200: hsl(0 0% 98%);
-
-  --color-shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.08);
-  --color-shadow-border-small: var(--color-shadow-border), 0px 2px 2px rgba(0, 0, 0, 0.04);
+  --color-background-100: hsl(0 0% 95%);
+  --color-background-200: hsl(0 0% 100%);
 }
 
 .dark {
@@ -207,11 +204,8 @@
   --color-gray-alpha-900: hsla(0, 0%, 100%, 0.61);
   --color-gray-alpha-1000: hsla(0, 0%, 100%, 0.92);
 
-  --color-background-100: hsl(0 0% 4%);
-  --color-background-200: hsl(0 0% 0%);
-
-  --color-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.145);
-  --color-shadow-border-small: var(--color-shadow-border), 0px 1px 2px rgba(0, 0, 0, 0.16)
+  --color-background-100: hsla(0, 0%, 10%, 1);
+  --color-background-200: hsla(0, 0%, 4%, 1);
 }
 
 @theme {