background

2025-11-23 16:54:18 +01:00
parent 9354f02819
commit 5e72feae8b
5 changed files with 53 additions and 6 deletions
--- a/assets/noise.svg
+++ b/assets/noise.svg
@@ -0,0 +1,12 @@
+<!-- see also: https://grainy-gradients.vercel.app/ -->
+<svg viewBox='0 0 4000 4000' xmlns='http://www.w3.org/2000/svg'>
+    <filter id='noiseFilter'>
+        <feTurbulence
+                type='fractalNoise'
+                baseFrequency='0.62'
+                numOctaves='3'
+                stitchTiles='stitch'/>
+    </filter>
+
+    <rect width='100%' height='100%' filter='url(#noiseFilter)'/>
+</svg>
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <link rel="stylesheet" href="/src/App.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>cblt-website</title>
    </head>
--- a/src/App.css
+++ b/src/App.css
@@ -48,8 +48,36 @@
    font-display: swap;
 }

-:root {
-    font-family: veramono, monospace;
-    background: #141516;
+#root {
+    position: absolute;
+    overflow: scroll;
    height: 100%;
+    width: 100%;
+}
+
+html {
+    min-height: 100%;
+}
+
+body {
+    font-family: veramono, monospace;
+    height: 100%;
+
+    filter: contrast(400%) brightness(1000%);
+    background: #190a52;
+    background:
+            linear-gradient(177deg, rgba(25, 10, 82, 1) 0%, rgba(29, 0, 43, 0) 100%),
+            url("/assets/noise.svg"),
+            rgba(29, 0, 43, 1);
+    background-blend-mode: overlay;
+    position: absolute;
+    isolation: isolate;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}
+
+#background {
+
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,3 @@
-import './App.css';
 import { Card, CardContent, Container, ThemeProvider, Typography } from '@mui/material';
 import { Theme } from './Theme.ts';

@@ -8,8 +7,12 @@ function App() {
            <ThemeProvider theme={Theme}>
                <Container>
                    <Card>
-                        <CardContent>
-                            <Typography fontSize={36} fontFamily='hammersmith-one'>
+                        <CardContent sx={{ height: '2000px' }}>
+                            <Typography
+                                // sx={(theme) => ({ color: theme.palette.text.secondary })}
+                                fontSize={36}
+                                fontFamily='hammersmith-one'
+                            >
                                Hello, World!
                            </Typography>
                        </CardContent>
--- a/src/Theme.ts
+++ b/src/Theme.ts
@@ -6,5 +6,8 @@ export const Theme = createTheme({
        primary: {
            main: '#b9121b',
        },
+        text: {
+            primary: '#b5b5b5',
+        },
    },
 });