diff --git a/client/src/App.css b/client/src/App.css index 1d2bc97..f202981 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,12 +1,67 @@ -html { +:root { + /* Catppuccin colors */ + /* Light mode */ + --light-text: #1e2030; + --light-background: #eff1f5; + --light-accent: #8839ef; + --light-highlight: #209fb5; + /* Dark mode */ + --dark-text: #cad3f5; + --dark-background: #24273a; + --dark-accent: #c6a0f6; + --dark-highlight: #7dc4e4; + + /* Global configs */ color-scheme: light dark; font-family: system-ui; - display: flex; - align-items: center; - justify-content: center; +} + +@media (prefers-color-scheme: light) { + html { + color: var(--light-text); + background-color: var(--light-background); + } + + h1 { + color: var(--light-highlight); + } +} + +@media (prefers-color-scheme: dark) { + html { + color: var(--dark-text); + background-color: var(--dark-background); + } + + h1 { + color: var(--dark-highlight); + } +} + +html { } body { - height: 100%; - width: 100%; + min-height: 100svh; + height: fit-content; + display: flex; + flex-direction: column; + align-items: center; + margin: 0; +} + +#app { + height: 100%; + min-width: 100%; + display: flex; + flex-direction: column; + align-items: center; + align-content: center; + justify-content: center; +} + +#body { + max-width: 40rem; + width: 100%; + height: 100%; } diff --git a/client/src/App.tsx b/client/src/App.tsx index b01dfa7..82db791 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,6 +1,6 @@ -import "/src/App.css"; -import { About } from "./pages/about"; -import { Root } from "./pages/root"; +import "@/App.css"; +import { About } from "@/pages/about"; +import { Root } from "@/pages/root"; import { BrowserRouter, Route, Routes } from "react-router"; export function App() { diff --git a/client/src/components/header/header.css b/client/src/components/header/header.css index dd546ca..a5862d7 100644 --- a/client/src/components/header/header.css +++ b/client/src/components/header/header.css @@ -1,9 +1,14 @@ header { - border-color: #c6a0f6; + --margin: 0.25rem; + --padding: 0.25rem; border-width: 2px; border-style: solid; - position: sticky top; + position: sticky; + + margin: var(--margin); + padding: var(--padding); + width: calc(100% - (2 * var(--margin)) - (2 * var(--padding)) - 4px); } nav { @@ -20,8 +25,27 @@ nav { } a { - color: #cad3f5; text-decoration: none; font-weight: bold; } } + +@media (prefers-color-scheme: light) { + header { + border-color: var(--light-accent); + } + + a { + color: var(--light-text); + } +} + +@media (prefers-color-scheme: dark) { + header { + border-color: var(--dark-accent); + } + + a { + color: var(--dark-text); + } +} diff --git a/client/src/components/header/index.tsx b/client/src/components/header/index.tsx index 18eda90..90dcd5c 100644 --- a/client/src/components/header/index.tsx +++ b/client/src/components/header/index.tsx @@ -1,3 +1,4 @@ +import "@/App.css"; import "./header.css"; import { Nav } from "./nav"; diff --git a/client/src/components/header/nav.tsx b/client/src/components/header/nav.tsx index 68d2f24..26938fb 100644 --- a/client/src/components/header/nav.tsx +++ b/client/src/components/header/nav.tsx @@ -5,13 +5,17 @@ export function Nav() { return ( ); } + +function NavLink(props: { path: string; name: string }) { + return ( +
  • + {props.name} +
    • + ); +} diff --git a/client/src/index.tsx b/client/src/index.tsx index e2d3e7b..6dc29df 100644 --- a/client/src/index.tsx +++ b/client/src/index.tsx @@ -1,11 +1,11 @@ -import { createRoot } from 'react-dom/client'; -import { StrictMode } from 'react'; -import { App } from './App'; +import { createRoot } from "react-dom/client"; +import { StrictMode } from "react"; +import { App } from "@/App"; let container = document.getElementById("app")!; -let root = createRoot(container) +let root = createRoot(container); root.render( - + , ); diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx index 7af40d5..2f9ee32 100644 --- a/client/src/pages/about.tsx +++ b/client/src/pages/about.tsx @@ -1,16 +1,15 @@ -import { Header } from "/src/components/header"; -import "/src/App.css"; +import { Page } from "@/pages/page"; +import "@/App.css"; export function About() { return ( - <> -
    +

    About Starve Me Now!

    Firstly, this is intended for those who have a starvation/diet control fetish. This is not intended to help with weight loss or similar reasons to fast.

    - +     ); } diff --git a/client/src/pages/page.tsx b/client/src/pages/page.tsx new file mode 100644 index 0000000..c48ab01 --- /dev/null +++ b/client/src/pages/page.tsx @@ -0,0 +1,11 @@ +import { Header } from "@/components/header"; +import "@/App.css"; + +export function Page(props: { children: React.ReactNode }) { + return ( + <> +
    +
    {props.children}
    + + ); +} diff --git a/client/src/pages/root.tsx b/client/src/pages/root.tsx index 7057d23..1060df5 100644 --- a/client/src/pages/root.tsx +++ b/client/src/pages/root.tsx @@ -1,14 +1,13 @@ -import { Header } from "/src/components/header"; -import "/src/App.css"; +import { Page } from "./page"; +import "@/App.css"; export function Root() { return ( - <> -
    +

    Starve Me Now!

    Edit src/App.tsx to get started!

    - +     ); } diff --git a/client/tsconfig.json b/client/tsconfig.json index ddc2511..d6ccc11 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -1,29 +1,34 @@ { - "compilerOptions": { - /* Visit https://aka.ms/tsconfig to read more about this file */ - "target": "ES2020", - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "jsx": "react-jsx", - "useDefineForClassFields": true, + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + "target": "ES2020", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "jsx": "react-jsx", + "useDefineForClassFields": true, - /* Modules */ - "module": "ESNext", - "moduleResolution": "bundler", + /* Modules */ + "module": "ESNext", + "moduleResolution": "bundler", - /* Emit */ - "noEmit": true, + /* Emit */ + "noEmit": true, - /* Interop Constraints */ - "isolatedModules": true, - "allowSyntheticDefaultImports": true, - "allowImportingTsExtensions": true, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, + /* Interop Constraints */ + "isolatedModules": true, + "allowSyntheticDefaultImports": true, + "allowImportingTsExtensions": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, - /* Type Checking */ - "strict": true, + /* Type Checking */ + "strict": true, - /* Completeness */ - "skipLibCheck": true - } + /* Completeness */ + "skipLibCheck": true, + + "baseUrl": "./src", + "paths": { + "@/*": ["*"] + } + } }