diff --git a/src/components/header/header.css.ts b/src/components/header/header.css.ts new file mode 100644 index 0000000..bbbc56a --- /dev/null +++ b/src/components/header/header.css.ts @@ -0,0 +1,6 @@ +import { style } from "@vanilla-extract/css"; +import { vars } from "~/theme.css"; + +export const header = style({ + +}) \ No newline at end of file diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx new file mode 100644 index 0000000..0f5c0a9 --- /dev/null +++ b/src/components/header/header.tsx @@ -0,0 +1,6 @@ +import { component$ } from "@builder.io/qwik"; +import { header } from "./header.css"; + +export const Header = component$(() => { + return
; +}); diff --git a/src/components/sidenav/sidenav.css.ts b/src/components/sidenav/sidenav.css.ts new file mode 100644 index 0000000..f6c841f --- /dev/null +++ b/src/components/sidenav/sidenav.css.ts @@ -0,0 +1,6 @@ +import { style } from "@vanilla-extract/css"; +import { vars } from "~/theme.css"; + +export const sidenav = style({ + +}) \ No newline at end of file diff --git a/src/components/sidenav/sidenav.tsx b/src/components/sidenav/sidenav.tsx new file mode 100644 index 0000000..01e0214 --- /dev/null +++ b/src/components/sidenav/sidenav.tsx @@ -0,0 +1,6 @@ +import { component$ } from "@builder.io/qwik"; +import { sidenav } from "./sidenav.css"; + +export const SideNav = component$(() => { + return
; +}); diff --git a/src/root.tsx b/src/root.tsx index 65ad337..cd36445 100644 --- a/src/root.tsx +++ b/src/root.tsx @@ -7,6 +7,7 @@ import { import { RouterHead } from "./components/router-head/router-head"; import "./global.css"; +import { darkTheme, lightTheme } from "./theme.css"; export default component$(() => { /** @@ -24,7 +25,7 @@ export default component$(() => { - + diff --git a/src/routes/header.css.ts b/src/routes/header.css.ts new file mode 100644 index 0000000..5b22e9a --- /dev/null +++ b/src/routes/header.css.ts @@ -0,0 +1,6 @@ +import { style } from "@vanilla-extract/css"; +import { vars } from "~/theme.css"; + +export const header = style({ + backgroundColor: vars.color.background +}) \ No newline at end of file diff --git a/src/routes/layout.css.ts b/src/routes/layout.css.ts new file mode 100644 index 0000000..4ffa9a8 --- /dev/null +++ b/src/routes/layout.css.ts @@ -0,0 +1,18 @@ +import { style } from "@vanilla-extract/css"; +import { vars } from "~/theme.css"; + +export const layoutRow = style({ + width: "100vw", + height: "100vh", + display: "grid", + gridTemplateRows: "36px 1fr", + backgroundColor: vars.color.backgroundHighlight, + gap: "1px", +}) + +export const layoutColumn = style({ + display: "grid", + gridTemplateColumns: "36px 1fr", + gap: "1px", + backgroundColor: vars.color.backgroundHighlight, +}) \ No newline at end of file diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx index 870f310..92d73c4 100644 --- a/src/routes/layout.tsx +++ b/src/routes/layout.tsx @@ -2,7 +2,12 @@ import { component$, Slot, useStyles$ } from "@builder.io/qwik"; import { routeLoader$ } from "@builder.io/qwik-city"; import type { RequestHandler } from "@builder.io/qwik-city"; -import styles from "./styles.css?inline"; +import { layoutColumn, layoutRow } from "./layout.css"; +import { SideNav } from "~/components/sidenav/sidenav"; +import { Header } from "~/components/header/header"; +import { header } from "./header.css"; +import { nav } from "./nav.css"; +import { main } from "./main.css"; export const onGet: RequestHandler = async ({ cacheControl }) => { // Control caching for this request for best performance and to reduce hosting costs: @@ -22,14 +27,16 @@ export const useServerTimeLoader = routeLoader$(() => { }); export default component$(() => { - useStyles$(styles); + // useStyles$(styles); return ( - <> - {/*
*/} -
- -
- {/*