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 {