diff options
| -rw-r--r-- | banner.png | bin | 29377 -> 30398 bytes | |||
| -rw-r--r-- | diagram.png | bin | 142990 -> 137318 bytes | |||
| -rw-r--r-- | styles/readme.md | 104 | ||||
| -rw-r--r-- | styles/styleguidedark.png | bin | 0 -> 147290 bytes | |||
| -rw-r--r-- | styles/styleguidelight.png | bin | 0 -> 145641 bytes |
5 files changed, 104 insertions, 0 deletions
| Binary files differ diff --git a/diagram.png b/diagram.png Binary files differindex e63be37..befb76d 100644 --- a/diagram.png +++ b/diagram.png diff --git a/styles/readme.md b/styles/readme.md new file mode 100644 index 0000000..89cb09c --- /dev/null +++ b/styles/readme.md @@ -0,0 +1,104 @@ +# 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 + + + +## Light + + + +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; } + +.subtile { + color: var(--gray-300); + font-style: italic; +} + +/* no-select */ +.nosel { + user-select: none; + font-weight: 600; +} + +``` + diff --git a/styles/styleguidedark.png b/styles/styleguidedark.png Binary files differnew file mode 100644 index 0000000..c7f01f7 --- /dev/null +++ b/styles/styleguidedark.png diff --git a/styles/styleguidelight.png b/styles/styleguidelight.png Binary files differnew file mode 100644 index 0000000..c4aa687 --- /dev/null +++ b/styles/styleguidelight.png |
