Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Implement website structure

Browse source 
- Add navigation with Themes, Puzzles, and Miscellany.
- Create "coming soon" pages for Puzzles and Miscellany.
- Create a Themes page with cards for various topics.
- Implement basic boxy layout.
- Prepare for future interactive additions and filtering.
- Set up for Netlify deployment.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-19 13:01:09 +00:00
parent 9debcb7e0b
commit fb7bb4aca4
18 changed files with 682 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/index.css
View file

@ -8,33 +8,48 @@ All colors MUST be HSL.
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
/* Clean, geometric aesthetic inspired by anytype */
--background: 0 0% 98%;
--foreground: 220 13% 18%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--card-foreground: 220 13% 18%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--popover-foreground: 220 13% 18%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--primary: 220 13% 18%;
--primary-foreground: 0 0% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary: 220 13% 91%;
--secondary-foreground: 220 13% 18%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--muted: 220 13% 96%;
--muted-foreground: 220 9% 46%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 346 77% 49%;
--accent-foreground: 0 0% 98%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 220 13% 18%;
/* Custom design tokens for the boxy aesthetic */
--surface: 0 0% 100%;
--surface-variant: 220 13% 96%;
--outline: 220 13% 87%;
--outline-variant: 220 13% 91%;
/* Gradients for visual interest */
--gradient-primary: linear-gradient(135deg, hsl(346 77% 49%) 0%, hsl(346 77% 45%) 100%);
--gradient-secondary: linear-gradient(135deg, hsl(220 13% 96%) 0%, hsl(220 13% 91%) 100%);
/* Shadows for depth */
--shadow-card: 0 1px 3px hsl(220 13% 18% / 0.1), 0 1px 2px hsl(220 13% 18% / 0.06);
--shadow-card-hover: 0 4px 6px hsl(220 13% 18% / 0.1), 0 2px 4px hsl(220 13% 18% / 0.06);
--radius: 0.5rem;
@ -56,33 +71,42 @@ All colors MUST be HSL.
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--background: 220 13% 9%;
--foreground: 220 13% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--card: 220 13% 11%;
--card-foreground: 220 13% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--popover: 220 13% 11%;
--popover-foreground: 220 13% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--primary: 220 13% 98%;
--primary-foreground: 220 13% 9%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--secondary: 220 13% 15%;
--secondary-foreground: 220 13% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--muted: 220 13% 15%;
--muted-foreground: 220 9% 63%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--accent: 346 77% 49%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--border: 220 13% 15%;
--input: 220 13% 15%;
--ring: 220 13% 91%;
/* Dark mode custom tokens */
--surface: 220 13% 11%;
--surface-variant: 220 13% 15%;
--outline: 220 13% 23%;
--outline-variant: 220 13% 19%;
--shadow-card: 0 1px 3px hsl(220 13% 0% / 0.2), 0 1px 2px hsl(220 13% 0% / 0.12);
--shadow-card-hover: 0 4px 6px hsl(220 13% 0% / 0.2), 0 2px 4px hsl(220 13% 0% / 0.12);
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;