feat: replace with more generic(?) background

amphineko · Oct 27, 2024 · 08e9a25 · 08e9a25
1 parent c1e07e5
commit 08e9a25
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 4 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -20,5 +20,8 @@
                 }
             }
         }
-    }
+    },
+    "forwardPorts": [
+        5173
+    ]
 }
diff --git a/src/assets/images/blueprint-bg.svg b/src/assets/images/blueprint-bg.svg
diff --git 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
@@ -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', '微软雅黑',
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,5 +20,8 @@ @@
                     }
                 }
             }
-        }
+        },
+        "forwardPorts": [
+        ]
     }