From 90d0c3c6df729ade66aa8d7a11277235587159a8 Mon Sep 17 00:00:00 2001
From: Henri <henrikarba@gmail.com>
Date: Fri, 21 Nov 2025 03:59:32 +0200
Subject: [PATCH] development README

---
 src/README.md | 38 ++++++++++++++++++++++++++++++++++++++
 src/app.css   |  4 ++--
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/README.md

diff --git a/src/README.md b/src/README.md
new file mode 100644
index 0000000..95169c8
--- /dev/null
+++ b/src/README.md
@@ -0,0 +1,38 @@
+# Development Guide
+
+> [!TIP]
+> Don't take anything here too seriously and have fun experimenting!
+> You're here to learn after all :)
+
+Running `npm run dev` starts a local development server with hot reloading (so you can see changes immediately as you edit files)
+
+> [!WARNING]  
+> This project uses custom router in `lib/Router.svelte` DO NOT TOUCH unless you know what you're doing! If you want to tinker, then do. When it breaks it just doesnt load any pages
+
+## Styling
+
+Look at `src/app.css` for global styles and CSS variables. Each Svelte component can also have its own styles scoped to that component
+
+Variables are defined in `:root`
+
+Add new ones only if they seem universal enough to be used in multiple places, don't add stuff like `--space-100: -888px` noone else will ever use that, if you really need it just add it to the component's own style block
+
+## Layout
+
+Try to use the existing layout components in `src/app.css` as much as possible to keep things consistent across the site.
+
+> [!NOTE]
+> These components are standard html components like h1, p, a, ul, li, etc but styled to fit the site's look and feel. Use html components defined in `src/app.css` unless you have a very good reason not to.
+
+If there are no existing components that fit your needs, feel free to add new ones but try to keep them generic enough to be reused in other places. Extra styiling can be added in the component's own style block as needed.
+
+## Responsive design
+
+There are also helper classes for responsive design:
+
+- `desktop-only` - hides content on mobile devices
+- `mobile-only` - hides content on desktop devices
+
+These classes use media queries defined in `src/app.css` based on common breakpoints.
+
+also things like `.stack`, `.inline`, `.grid`. Go look at `src/app.css` for what they do.
diff --git a/src/app.css b/src/app.css
index be2fffc..cae9288 100644
--- a/src/app.css
+++ b/src/app.css
@@ -18,7 +18,7 @@
   --nav-height: 64px;
   --footer-height: 80px;
 
-  /* spacing scale (use --space-#) */
+  /* spacing scale */
   --space-0: 0px;
   --space-1: 4px;
   --space-2: 8px;
@@ -27,7 +27,7 @@
   --space-5: 32px;
   --space-6: 48px;
 
-  /* radii / shadows */
+  /* radius / shadows */
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 14px;