external/my-finance-pal
1
0
Fork 0
mirror of https://github.com/siwa-net/my-finance-pal.git synced 2024-11-10 00:51:56 +01:00
Code Issues Projects Releases Packages Wiki Activity

Content container

Browse source
This commit is contained in:
Simon Wanner 2023-03-22 10:45:20 +01:00
parent fe6ed2b158
commit 11dfe615a0
5 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/BudgetItem/BudgetItem.module.scss
View file

@ -2,7 +2,6 @@
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 250px;
height: 250px;
background: skyblue;
}

5
src/components/BudgetList/BudgetList.module.scss
View file

@ -5,7 +5,8 @@
}
.ListItems {
display: flex;
display: grid;
gap: 1rem;
border: 1px solid green;
}
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

8
src/pages/_app.tsx
View file

@ -1,22 +1,26 @@
import '../styles/globals.css';
import { QueryClient } from '@tanstack/query-core';
import { QueryClientProvider } from '@tanstack/react-query';
import { Inter } from 'next/font/google';
import React from 'react';
import '../styles/globals.css';
import { Navigation } from '../components/Navigation/Navigation';
import appStyles from '../styles/app.module.scss';
import type { AppProps } from 'next/app';
const inter = Inter({ subsets: ['latin'] });
const queryClient = new QueryClient();
export default function App({ Component, pageProps }: AppProps) {
return (
<QueryClientProvider client={queryClient}>
<main className={inter.className}>
<Navigation />
<Component {...pageProps} />
<section className={appStyles.ContentWrapper}>
<Component {...pageProps} />
</section>
</main>
</QueryClientProvider>
);

8
src/pages/index.tsx
View file

@ -7,14 +7,12 @@ export default function Home() {
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<title>My Finance Pal</title>
<meta name="description" content="Demo application for a budget planner" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div style={{ padding: '0 80px' }}>
<BudgetList />
</div>
<BudgetList />
</>
);
}

10
src/styles/app.module.scss Normal file
View file

@ -0,0 +1,10 @@
.ContentWrapper {
--content-width: 100%;
@media (min-width: 800px) {
--content-width: clamp(800px, 60vw, 1280px);
}
margin-inline: auto;
width: var(--content-width);
}