From 286519adb6088f9d9a6dec513f4dd0da02827b4f Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 21 Apr 2021 10:38:58 +0200
Subject: readme update

---
 styles/readme.md | 102 ++++++-------------------------------------------------
 1 file changed, 11 insertions(+), 91 deletions(-)

(limited to 'styles/readme.md')

diff --git a/styles/readme.md b/styles/readme.md
index 1d1e96f..62fcfa7 100644
--- a/styles/readme.md
+++ b/styles/readme.md
@@ -1,103 +1,23 @@
-# Styles
+# styles
 
-This is the folder where all website css should be. Currently most of the css is
-done using inline styles in the .tsx files, but they're being moved to seperate
-.css files in here. A redesign has also been in the making and we now have a
-style guide to follow while writing the website:
+## dark
 
-## Dark
+![dark mode style guide](./styleguidedark.png)
 
-![Dark mode style guide](./styleguidedark.png)
+## light
 
-## Light
-
-![Light mode style guide](./styleguidelight.png)
+![light mode style guide](./styleguidelight.png)
 
 The new designs can be found on
 [Figma](https://www.figma.com/file/rTciVQApAe6cwrH1Prl5Wn/4-op-een-rij?node-id=0%3A1).
 The Figma designs are in dark mode, but the website will (for now) still have
 light mode as it's default theme.
 
-After the move to .css files is done I'll also start working on the new theming
-settings, and allow custom themes to be created with css that can easily be
-selected in the settings page instead of having to copy-paste color codes
-manually.
-
-## Show me the css
-
-These will eventually be moved to global.css when the move to .css files is
-done.
-
-```css
-:root {
-	--background: #E3E6EE;
-	--foreground: var(--gray-900);
-
-	--accent: #7E3AA6;
-
-	--error: #A63A4D;
-	--disk-b-alt: #582D35;
-
-	--confirm: #3AA699;
-	--disk-a-alt: #244743;
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--background: var(--gray-900);
-		--foreground: #FFFFF3;
-
-		--accent: #AD34F3;
-
-		--error: #FF4365;
-		--disk-b-alt: #F49BA1;
-
-		--confirm: #00D9C0;
-		--disk-a-alt: #86F3F3;
-	}
-}
-
-:root {
-	/* shade */
-	--gray-100: #CED2DC;
-	--gray-200: #A9AFC0;
-	--gray-300: #757D92;
-	--gray-700: #293140;
-	--gray-800: #1F242D;
-	--gray-900: #141619;
-
-	/* box-shadow */
-	--drop-level-2: 0px 8px 32px 0px  rgba(0, 0, 0, 0.3);
-	--drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);
-
-	/* border-radius */
-	--tight-corner: 6px;
-	--loose-corner: 8px;
-
-	/* margin/padding */
-	--spacing-small:  6px;
-	--spacing-medium: 12px;
-	--spacing-large:  24px;
-}
-
-html {
-	font-family: "Inter", sans-serif;
-	font-size: 14px;
-}
-
-/* headings */
-h1, h2, h3 { font-weight: 700; }
-h1 { font-size: 25px; }
-h2 { font-size: 20px; }
+I'm now working on the new theming settings, and allow custom themes to be
+created with css that can easily be selected in the settings page instead of
+having to copy-paste color codes manually.
 
-.subtile {
-	color: var(--gray-300);
-	font-style: italic;
-}
+There are utility styles in ./utility.css. These are supposed to mimick
+something like tailwind css. Most styles from the style guide are also defined
+in ./global.css.
 
-/* no-select */
-.nosel {
-	user-select: none;
-	font-weight: 600;
-}
-```
-- 
cgit v1.2.3