From 08e9a255c87c567c274ddaceb8fd154f65d4ef5a Mon Sep 17 00:00:00 2001
From: amphineko <sukareki@gmail.com>
Date: Sun, 27 Oct 2024 03:07:44 +0000
Subject: [PATCH] feat: replace with more generic(?) background

---
 .devcontainer/devcontainer.json     |  5 +++-
 src/assets/images/blueprint-bg.svg  | 45 +++++++++++++++++++++++++++++
 src/components/display/accounts.tsx |  7 ++++-
 src/index.tsx                       |  7 +++--
 4 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/images/blueprint-bg.svg

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 3c5d4be..882d3ba 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -20,5 +20,8 @@
                 }
             }
         }
-    }
+    },
+    "forwardPorts": [
+        5173
+    ]
 }
\ No newline at end of file
diff --git a/src/assets/images/blueprint-bg.svg b/src/assets/images/blueprint-bg.svg
new file mode 100644
index 0000000..a710e9e
--- /dev/null
+++ b/src/assets/images/blueprint-bg.svg
@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12rem" height="12rem" viewbox="0 0 12rem 12rem" fill="none">
+  <style>
+    <![CDATA[
+      .cell {
+        fill: #939597; 
+        stroke: #FFFFFF;
+        stroke-width: 0.1rem; 
+      }
+  
+      .description {
+        dominant-baseline: hanging;
+        font-family: monospace;
+        font-size: 1rem;
+        font-weight: 300;
+        fill: white;
+        text-decoration: underline;
+      }
+  
+      .size {
+        dominant-baseline: hanging;
+        font-family: monospace;
+        font-size: 1.5rem;
+        font-weight: 300;
+        fill: white;
+      }
+
+      .color {
+        dominant-baseline: hanging;
+        font-family: monospace;
+        font-size: 1rem;
+        font-weight: 300;
+        fill: white;
+      }
+  
+      .underline {
+        fill: #FFFFFF;
+        stroke-width: 0.5rem; 
+      }
+    ]]>
+  </style>
+  <rect class="cell" width="12rem" height="12rem" x="0" y="0" />
+  <text x="0.5rem" y="0.5rem" class="description">BG</text>
+  <text x="0.5rem" y="2rem" class="size">12rem</text>
+  <text x="0.5rem" y="4rem" class="color">#939597 GREY</text>
+</svg>
diff --git a/src/components/display/accounts.tsx b/src/components/display/accounts.tsx
index 9130d14..b7df1a7 100644
--- a/src/components/display/accounts.tsx
+++ b/src/components/display/accounts.tsx
@@ -1,6 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import { Dimmed, Redacted } from '../typography'
 import { Capsule } from './capsule'
+import { BORDER_RADIUS } from '../../lib/css'
 
 const Account = ({
     children,
@@ -41,7 +42,7 @@ const Category = ({ children, title }: PropsWithChildren<{ title: string }>) =>
             }
 
             .title {
-                color: #eee;
+                color: #333;
                 font-size: 1rem;
             }
 
@@ -66,10 +67,14 @@ const Container = ({ children }: PropsWithChildren) => (
         {children}
         <style jsx>{`
             .container {
+                background: #f5f5f5;
+                border-radius: ${BORDER_RADIUS};
+                box-shadow: 0 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
                 display: flex;
                 flex-direction: row;
                 flex-wrap: wrap;
                 gap: 1rem;
+                padding: 1rem;
             }
         `}</style>
     </div>
diff --git a/src/index.tsx b/src/index.tsx
index dec5d7b..b80cdcd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import type { IconType } from 'react-icons'
 import { TbBulb, TbGitBranch } from 'react-icons/tb'
-import Background from './assets/images/background.svg'
+import Background from './assets/images/blueprint-bg.svg'
 import { AccountShowcase } from './components/display/accounts.tsx'
 import { Capsule } from './components/display/capsule'
 import { Footer, FooterLink, FooterParagraph } from './components/display/footer'
@@ -88,7 +88,9 @@ export const IndexPage = () => {
                     </AccountShowcase.Category>
                 ))}
             </AccountShowcase.Container>
+
             <Row>{DESCRIPTION_PARAGRAPHS}</Row>
+
             <Footer>
                 <FooterParagraph icon={TbGitBranch as IconType} color="#ddd">
                     <FooterLink href="https://github.com/amphineko/reactiveneko">
@@ -114,7 +116,8 @@ export const IndexPage = () => {
                 body {
                     background: url(${Background});
                     background-color: #aaa;
-                    background-size: cover;
+                    background-position: center;
+                    background-size: repeat;
                     display: flex;
                     flex-direction: column;
                     font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFangTC-Light', 'Microsoft YaHei', '微软雅黑',