github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-12 16:55:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): Use a better theme colors

Browse Source
This commit is contained in:
Wanjohi
2025-07-25 15:20:38 +03:00
parent 7156980063
commit edb70ead62
5 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/web/src/components/astro/HeroComponent.astro
View File

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

12
packages/web/src/components/solidjs/Grid.tsx
View File

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

4
packages/web/src/components/solidjs/index.module.css
View File

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

4
packages/web/src/layouts/Layout.astro
View File

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

14
packages/web/src/styles/global.css
View File

@@ -100,11 +100,8 @@
--color-gray-alpha-900: hsla(0, 0%, 0%, 0.61); --color-gray-alpha-900: hsla(0, 0%, 0%, 0.61);
--color-gray-alpha-1000: hsla(0, 0%, 0%, 0.91); --color-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
--color-background-100: hsl(0 0% 100%); --color-background-100: hsl(0 0% 95%);
--color-background-200: hsl(0 0% 98%); --color-background-200: hsl(0 0% 100%);
--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);
} }
.dark { .dark {
@@ -207,11 +204,8 @@
--color-gray-alpha-900: hsla(0, 0%, 100%, 0.61); --color-gray-alpha-900: hsla(0, 0%, 100%, 0.61);
--color-gray-alpha-1000: hsla(0, 0%, 100%, 0.92); --color-gray-alpha-1000: hsla(0, 0%, 100%, 0.92);
--color-background-100: hsl(0 0% 4%); --color-background-100: hsla(0, 0%, 10%, 1);
--color-background-200: hsl(0 0% 0%); --color-background-200: hsla(0, 0%, 4%, 1);
--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)
} }
@theme { @theme {