tailwind

.cursor/rules/README.md

@@ -0,0 +1,3 @@
+All of the rules are directly a result of the knowledge cutoff
+
+I shouldn't have to do this

.cursor/rules/database.mdc

@@ -1,6 +1,6 @@
 ---
 description: database interactions in python
-globs: 
+globs: *.py
 alwaysApply: false
 ---
 use psycopg3

.cursor/rules/styles.mdc

@@ -0,0 +1,6 @@
+---
+description: Styling the project
+globs: *.css
+alwaysApply: false
+---
+use tailwind css v4

.prettierignore

@@ -11,3 +11,6 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+# Ignore scripts folder
+scripts/

.prettierrc

@@ -2,5 +2,6 @@
   "useTabs": false,
   "singleQuote": true,
   "trailingComma": "none",
-  "printWidth": 100
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -40,5 +40,10 @@
     "@fontsource/fira-mono": "^4.5.0",
     "@supabase/supabase-js": "^2.49.1",
     "supabase": "^2.15.8"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   }
 }

src/app.css

@@ -1,50 +1,69 @@
 @import '@fontsource/fira-mono';
 
-:root {
-  font-family:
-    Arial,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Open Sans',
-    'Helvetica Neue',
-    sans-serif;
-  --font-mono: 'Fira Mono', monospace;
-  --pure-white: #ffffff;
-  --pure-black: #000000;
-  --primary-color: #121212;
-  --secondary-color: #1e1e1e;
-  --tertiary-color: #2d2d2d;
-  --accent-color: #7c4dff;
-  --heading-color: rgba(255, 255, 255, 0.87);
-  --text-color: rgba(255, 255, 255, 0.6);
-  --background-without-opacity: rgba(30, 30, 30, 0.7);
-  --column-width: 42rem;
-  --column-margin-top: 4rem;
-  --border-color: #444444;
-
-  /* Codeforces rating colors */
-  --legendary-grandmaster-color: #ff0000;
-  --international-grandmaster-color: #ff0000;
-  --grandmaster-color: #ff0000;
-  --international-master-color: #ff8c00;
-  --master-color: #ff8c00;
-  --candidate-master-color: #aa00aa;
-  --expert-color: #0000ff;
-  --specialist-color: #03a89e;
-  --pupil-color: #008000;
-  --newbie-color: #808080;
+@import 'tailwindcss';
+
+@layer theme {
+  :root {
+    /* Fonts */
+    --font-sans:
+      Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+      'Open Sans', 'Helvetica Neue', sans-serif;
+    --font-mono: 'Fira Mono', monospace;
+
+    /* Colors */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.12 0 0);
+    --color-secondary: oklch(0.19 0 0);
+    --color-tertiary: oklch(0.28 0 0);
+    --color-accent: oklch(0.65 0.26 296.88);
+    --color-heading: oklch(1 0 0 / 0.87);
+    --color-text: oklch(1 0 0 / 0.6);
+    --color-text-muted: oklch(1 0 0 / 0.4);
+    --color-background: oklch(0.19 0 0 / 0.7);
+    --color-border: oklch(0.44 0 0);
+    --color-link: oklch(0.65 0.26 296.88);
+    --color-link-subtle: oklch(0.8 0.1 296.88);
+    --color-link-nav: oklch(1 0 0 / 0.8);
+
+    /* Codeforces rating colors */
+    --color-legendary-grandmaster: oklch(0.65 0.27 29.23);
+    --color-international-grandmaster: oklch(0.65 0.27 29.23);
+    --color-grandmaster: oklch(0.65 0.27 29.23);
+    --color-international-master: oklch(0.71 0.19 54.65);
+    --color-master: oklch(0.71 0.19 54.65);
+    --color-candidate-master: oklch(0.55 0.32 328.88);
+    --color-expert: oklch(0.45 0.26 264.05);
+    --color-specialist: oklch(0.6 0.17 196.09);
+    --color-pupil: oklch(0.51 0.18 142.5);
+    --color-newbie: oklch(0.54 0 0);
+
+    /* Spacing */
+    --spacing: 0.25rem;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+    /* Border radius */
+    --rounded-sm: 0.125rem;
+    --rounded: 0.25rem;
+    --rounded-md: 0.375rem;
+    --rounded-lg: 0.5rem;
+    --rounded-xl: 0.75rem;
+    --rounded-2xl: 1rem;
+    --rounded-full: 9999px;
+  }
 }
 
+/* Base styles */
 body {
   min-height: 100vh;
   margin: 0;
-  background-color: var(--primary-color);
-  color: var(--text-color);
+  background-color: var(--color-primary);
+  color: var(--color-text);
 }
 
 #svelte {
@@ -56,41 +75,32 @@ body {
 h1,
 h2,
 p {
-  font-weight: 400;
-  color: var(--heading-color);
+  font-weight: normal;
+  color: var(--color-heading);
 }
 
 p {
   line-height: 1.5;
 }
 
-a {
-  color: var(--accent-color);
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
 h1 {
   font-size: 2rem;
   text-align: center;
 }
 
 h2 {
-  font-size: 1rem;
+  font-size: 1.25rem;
 }
 
 pre {
-  font-size: 16px;
+  font-size: 1rem;
   font-family: var(--font-mono);
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 3px;
-  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
-  padding: 0.5em;
+  background-color: color-mix(in oklab, black 30%, transparent);
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
   overflow-x: auto;
-  color: var(--heading-color);
+  color: var(--color-heading);
 }
 
 input,
@@ -99,15 +109,72 @@ button {
   font-family: inherit;
 }
 
-button:focus:not(:focus-visible) {
-  outline: none;
+a {
+  color: var(--color-text);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--color-heading);
+  text-decoration: underline;
+}
+
+/* Primary/accent links - use for important actions or main navigation */
+a.link-accent,
+.content a,
+nav.main-nav a {
+  color: var(--color-accent);
+}
+
+a.link-accent:hover,
+.content a:hover,
+nav.main-nav a:hover {
+  color: color-mix(in oklab, var(--color-accent) 80%, white);
+}
+
+/* Table links - more subtle styling for dense information displays */
+.table a,
+table a {
+  color: var(--color-text);
+  font-weight: 500;
+}
+
+/* User links in tables - keep them purple */
+.table a[href*='github.com'],
+table a[href*='github.com'],
+table td:nth-child(5) a {
+  color: var(--color-accent);
+}
+
+.table a[href*='github.com']:hover,
+table a[href*='github.com']:hover,
+table td:nth-child(5) a:hover {
+  color: color-mix(in oklab, var(--color-accent) 80%, white);
+}
+
+.table a:hover,
+table a:hover {
+  color: var(--color-heading);
+}
+
+/* Keep header home link behavior */
+header a[aria-label='Home']:hover {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: inline-block;
 }
 
+/* Component styles */
 .card {
-  background-color: var(--secondary-color);
-  border-radius: 8px;
+  background-color: var(--color-secondary);
+  border-radius: 0.5rem;
   padding: 1.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   margin-bottom: 1rem;
 }
 
@@ -119,44 +186,45 @@ button:focus:not(:focus-visible) {
 .table th {
   text-align: left;
   padding: 0.75rem;
-  border-bottom: 1px solid var(--tertiary-color);
-  color: var(--heading-color);
+  border-bottom: 1px solid var(--color-tertiary);
+  color: var(--color-heading);
 }
 
 .table td {
   padding: 0.75rem;
-  border-bottom: 1px solid var(--tertiary-color);
+  border-bottom: 1px solid var(--color-tertiary);
 }
 
 .table tr:hover {
-  background-color: var(--tertiary-color);
+  background-color: var(--color-tertiary);
 }
 
 .badge {
   display: inline-block;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   font-size: 0.75rem;
   font-weight: 600;
 }
 
 .badge-easy {
-  background-color: #4caf50;
+  background-color: oklch(0.73 0.2 142.5);
   color: white;
 }
 
 .badge-medium {
-  background-color: #ff9800;
+  background-color: oklch(0.71 0.19 54.65);
   color: white;
 }
 
 .badge-hard {
-  background-color: #f44336;
+  background-color: oklch(0.65 0.27 29.23);
   color: white;
 }
 
+/* Responsive utilities */
 @media (min-width: 720px) {
   h1 {
-    font-size: 2.4rem;
+    font-size: 3rem;
   }
 }