improve look

layouts/theme.ts

@@ -1,9 +1,115 @@
 import { createTheme } from "@mantine/core";
-import type { MantineThemeOverride } from "@mantine/core";
+import type { MantineColorsTuple, MantineThemeOverride } from "@mantine/core";
+
+/** Generated with https://mantine.dev/colors-generator */
+const skyBlue: MantineColorsTuple = [
+  "#e1f8ff",
+  "#cbedff",
+  "#9ad7ff",
+  "#64c1ff",
+  "#3aaefe",
+  "#20a2fe",
+  "#099cff",
+  "#0088e4",
+  "#0079cd",
+  "#0068b6",
+];
 
 const theme: MantineThemeOverride = createTheme({
-  /** Put your mantine theme override here */
-  primaryColor: "violet",
+  primaryColor: "skyBlue",
+  colors: {
+    skyBlue,
+    /** Generated with https://harmonizer.evilmartians.com/ */
+    red: [
+      "oklch(0.93 0.04 15)",
+      "oklch(0.86 0.08 15)",
+      "oklch(0.79 0.13 15)",
+      "oklch(0.7 0.16 15)",
+      "oklch(0.6 0.14 15)",
+      "oklch(0.73 0.16 15)",
+      "oklch(0.63 0.15 15)",
+      "oklch(0.52 0.12 15)",
+      "oklch(0.38 0.09 15)",
+      "oklch(0 0 15)",
+    ],
+    yellow: [
+      "oklch(0.93 0.04 89)",
+      "oklch(0.85 0.08 89)",
+      "oklch(0.77 0.13 89)",
+      "oklch(0.69 0.16 89)",
+      "oklch(0.58 0.14 89)",
+      "oklch(0.72 0.16 89)",
+      "oklch(0.62 0.15 89)",
+      "oklch(0.51 0.12 89)",
+      "oklch(0.37 0.09 89)",
+      "oklch(0 0 89)",
+    ],
+    aquamarine: [
+      "oklch(0.92 0.04 170)",
+      "oklch(0.84 0.08 170)",
+      "oklch(0.76 0.13 170)",
+      "oklch(0.66 0.16 170)",
+      "oklch(0.56 0.14 170)",
+      "oklch(0.69 0.16 170)",
+      "oklch(0.6 0.15 170)",
+      "oklch(0.49 0.12 170)",
+      "oklch(0.36 0.09 170)",
+      "oklch(0 0 170)",
+    ],
+    azure: [
+      "oklch(0.93 0.04 250)",
+      "oklch(0.85 0.08 250)",
+      "oklch(0.77 0.13 250)",
+      "oklch(0.68 0.16 250)",
+      "oklch(0.58 0.14 250)",
+      "oklch(0.71 0.16 250)",
+      "oklch(0.62 0.15 250)",
+      "oklch(0.5 0.12 250)",
+      "oklch(0.37 0.09 250)",
+      "oklch(0 0 250)",
+    ],
+    lavender: [
+      "oklch(0.93 0.04 285)",
+      "oklch(0.86 0.08 285)",
+      "oklch(0.78 0.13 285)",
+      "oklch(0.7 0.16 285)",
+      "oklch(0.59 0.14 285)",
+      "oklch(0.73 0.16 285)",
+      "oklch(0.63 0.15 285)",
+      "oklch(0.51 0.12 285)",
+      "oklch(0.38 0.09 285)",
+      "oklch(0 0 285)",
+    ],
+    fuchsia: [
+      "oklch(0.93 0.04 320)",
+      "oklch(0.86 0.08 320)",
+      "oklch(0.79 0.13 320)",
+      "oklch(0.7 0.16 320)",
+      "oklch(0.6 0.14 320)",
+      "oklch(0.73 0.16 320)",
+      "oklch(0.63 0.15 320)",
+      "oklch(0.52 0.12 320)",
+      "oklch(0.38 0.09 320)",
+      "oklch(0 0 320)",
+    ],
+  },
+  black: "#444444",
+  white: "#f5f5f5",
+  fontFamily: "Genos",
+  fontFamilyMonospace: "Ubuntu Mono",
+  headings: {
+    fontFamily: "Revalia",
+  },
+  fontSizes: {
+    xs: "0.875rem",
+    sm: "1rem",
+    md: "1.125rem",
+    lg: "1.25rem",
+    xl: "1.5rem",
+    "2xl": "1.875rem",
+    "3xl": "2.25rem",
+    "4xl": "3rem",
+  },
 });
 
 export default theme;

pages/+Head.tsx

@@ -8,6 +8,20 @@ export default function HeadDefault() {
   return (
     <>
       <link rel="icon" href={logoUrl} />
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&display=swap"
+        rel="stylesheet"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+        rel="stylesheet"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&family=Revalia&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+        rel="stylesheet"
+      />
       <ColorSchemeScript />
     </>
   );