set theme

src/app.css

@@ -1,7 +1,6 @@
 :root {
-    --text-color-primary: black;
     --border-radius: 8px;
-    --border-color: black;
+    --border-color: var(--color-secondary);
     --border-size: 2px;
 
     --spacing30: 0.5rem;
@@ -10,6 +9,26 @@
     --spacing60: 1.25rem;
     --spacing70: 1.5rem;
 
+    --color-base-100: oklch(24.353% 0 0);
+    --color-base-200: oklch(22.648% 0 0);
+    --color-base-300: oklch(20.944% 0 0);
+    --color-base-content: oklch(84.87% 0 0);
+    --color-primary: oklch(41.703% 0.099 251.473);
+    --color-primary-content: oklch(88.34% 0.019 251.473);
+    --color-secondary: oklch(64.092% 0.027 229.389);
+    --color-secondary-content: oklch(12.818% 0.005 229.389);
+    --color-accent: oklch(67.271% 0.167 35.791);
+    --color-accent-content: oklch(13.454% 0.033 35.791);
+    --color-neutral: oklch(27.441% 0.013 253.041);
+    --color-neutral-content: oklch(85.488% 0.002 253.041);
+    --color-info: oklch(62.616% 0.143 240.033);
+    --color-info-content: oklch(12.523% 0.028 240.033);
+    --color-success: oklch(70.226% 0.094 156.596);
+    --color-success-content: oklch(14.045% 0.018 156.596);
+    --color-warning: oklch(77.482% 0.115 81.519);
+    --color-warning-content: oklch(15.496% 0.023 81.519);
+    --color-error: oklch(51.61% 0.146 29.674);
+    --color-error-content: oklch(90.322% 0.029 29.674);
 }
 
 *,

src/lib/assets/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#d16b6b" d="M576 304.2L576 320L64 320C64 300 74 281.3 90.6 270.2L338.9 104.7C347.5 99 357.5 96 367.8 96C482.8 96 576 189.2 576 304.2zM576 368L576 480C576 515.3 547.3 544 512 544L128 544C92.7 544 64 515.3 64 480L64 368L576 368z"/></svg>

src/lib/components/LinkCards.svelte

@@ -16,9 +16,10 @@
     div {
         --card-size: 150px;
 
+        container-type: inline-size;
         display: flex;
         flex-wrap: wrap;
-            justify-content: center;
+        justify-content: space-between;
         gap: var(--spacing50);
 
         a {
@@ -32,14 +33,19 @@
             width: var(--card-size);
             height: var(--card-size);
 
-                color: var(--text-color-primary);
+            background-color: var(--color-base-300);
+            color: var(--color-secondary);
             border: var(--border-size) solid var(--border-color);
             border-radius: var(--border-radius);
 
             span {
                 font-size: 1.25rem;
+                color: var(--color-base-content);
             }
         }
+
+        @media (width < 515px) {
+            justify-content: center;
+        }
     }
 </style>
-

src/routes/+layout.svelte

@@ -22,6 +22,8 @@
 			grid-template-columns:
 				minmax(var(--spacing50), auto) minmax(auto, 800px)
 				minmax(var(--spacing50), auto);
+			color: var(--color-base-content);
+			background-color: var(--color-base-100);
 		}
 	}
 </style>