diff --git a/public/money-bg.jpg b/public/money-bg.jpg
new file mode 100644
index 0000000..b298c66
Binary files /dev/null and b/public/money-bg.jpg differ
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/thirteen.svg b/public/thirteen.svg
deleted file mode 100644
index 8977c1b..0000000
--- a/public/thirteen.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/components/BudgetItem/BudgetItem.module.scss b/src/components/BudgetItem/BudgetItem.module.scss
index a953cea..145ff31 100644
--- a/src/components/BudgetItem/BudgetItem.module.scss
+++ b/src/components/BudgetItem/BudgetItem.module.scss
@@ -3,8 +3,9 @@
flex-direction: column;
gap: 16px;
padding: 32px;
- border-radius: 4px;
+ border-radius: var(--border-radius);
box-shadow: var(--box-shadow-lev-1);
+ background-color: var(--paper-white-color);
}
.Title {
diff --git a/src/components/BudgetList/BudgetList.module.scss b/src/components/BudgetList/BudgetList.module.scss
index 52cdc90..6ed0f4c 100644
--- a/src/components/BudgetList/BudgetList.module.scss
+++ b/src/components/BudgetList/BudgetList.module.scss
@@ -1,11 +1,11 @@
.Container {
display: flex;
flex-direction: column;
- gap: 1rem;
+ gap: 16px;
}
.ListItems {
display: grid;
- gap: 1rem;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 16px;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
diff --git a/src/components/Navigation/Navigation.module.scss b/src/components/Navigation/Navigation.module.scss
index 8470a87..704b21d 100644
--- a/src/components/Navigation/Navigation.module.scss
+++ b/src/components/Navigation/Navigation.module.scss
@@ -4,5 +4,6 @@
align-items: center;
padding: 16px;
box-shadow: var(--box-shadow-lev-2);
+ background-color: var(--paper-white-color);
justify-content: space-between;
}
diff --git a/src/components/_design/Button/Button.module.scss b/src/components/_design/Button/Button.module.scss
index 570ab25..a70c442 100644
--- a/src/components/_design/Button/Button.module.scss
+++ b/src/components/_design/Button/Button.module.scss
@@ -1,18 +1,18 @@
.Button {
background: #fff;
border: 1px solid #aaa;
- padding: 8px 16px;
+ padding: 16px;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 16px;
- border-radius: 4px;
+ border-radius: var(--border-radius);
cursor: pointer;
justify-content: center;
transition: .2s;
&:hover {
- opacity: 0.7;
+ opacity: 0.9;
background: #f8f8f8;
}
}
diff --git a/src/pages/api/budgets.ts b/src/pages/api/budgets.ts
index 11d8c92..ad38d66 100644
--- a/src/pages/api/budgets.ts
+++ b/src/pages/api/budgets.ts
@@ -4,7 +4,7 @@ import { Budget } from '../../generated/openapi';
import type { NextApiRequest, NextApiResponse } from 'next';
-const budgetList = budgetFactory.buildList(5);
+const budgetList = budgetFactory.buildList(12);
export default function handler(_req: NextApiRequest, res: NextApiResponse) {
res.status(200).json(budgetList);
diff --git a/src/styles/app.module.scss b/src/styles/app.module.scss
index 9bf07c3..18a9c95 100644
--- a/src/styles/app.module.scss
+++ b/src/styles/app.module.scss
@@ -1,11 +1,14 @@
.ContentWrapper {
--content-width: 100%;
+ --padding-container: 32px;
+ --padding-inline: var(--padding-container);
- @media (min-width: 800px) {
- --content-width: clamp(800px, 60vw, 1280px);
+ @media (min-width: 980px) {
+ --content-width: clamp(980px, 60vw, 1280px);
+ --padding-inline: 0px;
}
margin-inline: auto;
width: var(--content-width);
- padding: 32px 0px;
+ padding: var(--padding-container) var(--padding-inline);
}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0fd2acf..e3f1f6a 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,6 +1,6 @@
:root {
--max-width: 1100px;
- --border-radius: 12px;
+ --border-radius: 4px;
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
@@ -9,7 +9,7 @@
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
- --box-shadow-color: #ddd;
+ --box-shadow-color: #44444488;
--box-shadow-lev-1: 0px 2px 8px 0px var(--box-shadow-color);
--box-shadow-lev-2: 0px 2px 16px 0px var(--box-shadow-color);
@@ -43,7 +43,8 @@
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
- --primary-color: #84844c
+ --primary-color: #84844c;
+ --paper-white-color: #fff;
}
@media (prefers-color-scheme: dark) {
@@ -92,6 +93,14 @@ body {
}
body {
+ background-image: url("/money-bg.jpg");
+ background-color: #9f7d9f;
+ background-blend-mode: screen;
+ backdrop-filter: saturate(50%) blur(3px) sepia(10%);
+ background-size: cover;
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ min-height: 100vh;
}
a {