chore: css structure

src/client/components/Layout.tsx

@@ -4,6 +4,7 @@ import { ParentProps, createEffect, onMount } from "solid-js";
 import { useSolidBaseContext } from "../context";
 import { CurrentPageDataContext, useCurrentPageData } from "../page-data";
 import {getTheme, setTheme} from "../theme";
+import styles from "./Layout.module.css";
 
 export default function Layout(props: ParentProps) {
 	const { Header, TableOfContent } = useSolidBaseContext().components;

src/client/index.css

@@ -0,0 +1,6 @@
+@import "./reset.css";
+@import "./variables.css";
+
+html {
+  background: var(--background-color);
+}

src/client/index.tsx

@@ -7,6 +7,7 @@ import { FileRoutes } from "@solidjs/start/router";
 import { type JSX, Show, Suspense, children } from "solid-js";
 import {Dynamic} from "solid-js/web";
 import { SolidBaseProvider, useSolidBaseContext } from "./context";
+import "./index.css";
 
 interface SolidBaseAppProps {
 	root?: BaseRouterProps["root"];

src/client/reset.css

@@ -0,0 +1,34 @@
+/*
+  Josh's Custom CSS Reset
+  https://www.joshwcomeau.com/css/custom-css-reset/
+*/
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+#root, #__next {
+  isolation: isolate;
+}

src/client/variables.css

@@ -0,0 +1,7 @@
+html {
+  --background-color: #ffffff;
+}
+
+html[data-theme="dark"] {
+  --background-color: #18181b;
+}