Matugen theme, responsive layout, search icon mask-image fix, and QoL improvements

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Generated theme
+src/theme.css

index.html

@@ -9,6 +9,7 @@
   <meta name="description" content="An accordion based startpage." />
   <meta name="author" content="PrettyCoffee">
   <link rel="apple-touch-icon" href="/logo192.png" />
+
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

input_template.j2

@@ -0,0 +1,26 @@
+/* Matugen generated variables */
+:root {
+  /* Main UI Surface */
+  --m3-bg: {{colors.surface.dark.hex}};
+  --m3-on-bg: {{colors.on_surface.dark.hex}};
+  --m3-surface-variant: {{colors.surface_variant.dark.hex}};
+  --m3-on-surface-variant: {{colors.on_surface_variant.dark.hex}};
+
+  /* Primary Accents */
+  --m3-primary: {{colors.primary.dark.hex}};
+  --m3-on-primary: {{colors.on_primary.dark.hex}};
+  --m3-primary-container: {{colors.primary_container.dark.hex}};
+
+  /* Secondary/Tertiary */
+  --m3-secondary: {{colors.secondary.dark.hex}};
+  --m3-tertiary: {{colors.tertiary.dark.hex}};
+  --m3-on-tertiary: {{colors.on_tertiary.dark.hex}};
+
+  /* Utility & Feedback */
+  --m3-outline: {{colors.outline.dark.hex}};
+  --m3-error: {{colors.error.dark.hex}};
+
+  /* Interaction states with filters */
+  --m3-hover: {{colors.primary.dark.hex | lighten(10)}};
+  --m3-on-hover: {{colors.on_primary.dark.hex}};
+}