mirror of
https://github.com/olehomelchenko/olehomelchenko.com.git
synced 2026-02-05 02:54:37 +00:00
feat: custom theme
This commit is contained in:
313
themes-guide.md
Normal file
313
themes-guide.md
Normal file
@@ -0,0 +1,313 @@
|
||||
|
||||
## Personal Design System
|
||||
|
||||
### Brand Colors
|
||||
|
||||
| Role | Hex | Usage |
|
||||
|------|-----|-------|
|
||||
| Primary Blue | `#1789fc` | UI accents, links, interactive elements |
|
||||
| Primary Yellow | `#fdb833` | Highlights, secondary accents |
|
||||
| Text | `#2d2a26` | Body text, headings |
|
||||
| Background | `#f5f3f0` | Page background |
|
||||
|
||||
### Data Visualization
|
||||
|
||||
**Categorical (8 colors):**
|
||||
`#296EB4` `#FDB833` `#CCE160` `#9FDFDC` `#8A983E` `#C7C7FA` `#D02F2F` `#A62191`
|
||||
|
||||
**Sequential:** Ramps derived from `#1789fc` (blue) or `#fdb833` (yellow)
|
||||
|
||||
**Diverging:** Blue ↔ neutral midpoint ↔ Yellow
|
||||
|
||||
### Typography
|
||||
|
||||
| Role | Font |
|
||||
|------|------|
|
||||
| Headings | Finlandica |
|
||||
| Body | IBM Plex Sans |
|
||||
| Code | IBM Plex Mono |
|
||||
|
||||
### Design Principles
|
||||
|
||||
- Sharp corners, no border-radius
|
||||
- Solid fills over gradients
|
||||
- Light mode only
|
||||
- Colorblind-safe palette
|
||||
|
||||
|
||||
## Font instructions from Google Fonts
|
||||
Code below was generated by Google Fonts:
|
||||
|
||||
|
||||
```
|
||||
|
||||
Embed code in the <head> of your html
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Finlandica:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
|
||||
IBM Plex Sans: CSS class for a variable style
|
||||
|
||||
|
||||
.ibm-plex-sans-<uniquifier> {
|
||||
font-family: "IBM Plex Sans", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: <weight>;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
"wdth" 100;
|
||||
}
|
||||
|
||||
|
||||
Finlandica: CSS class for a variable style
|
||||
|
||||
|
||||
.finlandica-<uniquifier> {
|
||||
font-family: "Finlandica", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: <weight>;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
IBM Plex Mono: CSS classes
|
||||
|
||||
.ibm-plex-mono-thin {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-extralight {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-light {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-regular {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-medium {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-semibold {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-bold {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-thin-italic {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-extralight-italic {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-light-italic {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-regular-italic {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-medium-italic {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-semibold-italic {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ibm-plex-mono-bold-italic {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
## Colors for website theme
|
||||
|
||||
The code below was generated by Realtime Colors website.
|
||||
|
||||
General variables:
|
||||
|
||||
```
|
||||
:root[data-theme="light"] {
|
||||
--text: #2c2a26;
|
||||
--background: #f5f3f0;
|
||||
--primary: #296eb3;
|
||||
--secondary: #fdba35;
|
||||
--accent: #188afb;
|
||||
}
|
||||
:root[data-theme="dark"] {
|
||||
--text: #d9d7d3;
|
||||
--background: #0f0d0a;
|
||||
--primary: #4c91d6;
|
||||
--secondary: #ca8702;
|
||||
--accent: #0475e7;
|
||||
}
|
||||
```
|
||||
|
||||
Option with shades:
|
||||
```
|
||||
:root[data-theme="light"] {
|
||||
--text-50: #f3f3f1;
|
||||
--text-100: #e7e6e4;
|
||||
--text-200: #d0cdc8;
|
||||
--text-300: #b8b4ad;
|
||||
--text-400: #a09b92;
|
||||
--text-500: #888277;
|
||||
--text-600: #6d685f;
|
||||
--text-700: #524e47;
|
||||
--text-800: #37342f;
|
||||
--text-900: #1b1a18;
|
||||
--text-950: #0e0d0c;
|
||||
|
||||
--background-50: #f5f3f0;
|
||||
--background-100: #ebe7e0;
|
||||
--background-200: #d6cec2;
|
||||
--background-300: #c2b6a3;
|
||||
--background-400: #ad9d85;
|
||||
--background-500: #998566;
|
||||
--background-600: #7a6a52;
|
||||
--background-700: #5c503d;
|
||||
--background-800: #3d3529;
|
||||
--background-900: #1f1b14;
|
||||
--background-950: #0f0d0a;
|
||||
|
||||
--primary-50: #eaf2fa;
|
||||
--primary-100: #d5e5f6;
|
||||
--primary-200: #acccec;
|
||||
--primary-300: #82b2e3;
|
||||
--primary-400: #5999d9;
|
||||
--primary-500: #2f7fd0;
|
||||
--primary-600: #2666a6;
|
||||
--primary-700: #1c4c7d;
|
||||
--primary-800: #133353;
|
||||
--primary-900: #09192a;
|
||||
--primary-950: #050d15;
|
||||
|
||||
--secondary-50: #fff6e6;
|
||||
--secondary-100: #feeecd;
|
||||
--secondary-200: #fedd9a;
|
||||
--secondary-300: #fdcb68;
|
||||
--secondary-400: #fdba35;
|
||||
--secondary-500: #fca903;
|
||||
--secondary-600: #ca8702;
|
||||
--secondary-700: #976502;
|
||||
--secondary-800: #654401;
|
||||
--secondary-900: #322201;
|
||||
--secondary-950: #191100;
|
||||
|
||||
--accent-50: #e6f2ff;
|
||||
--accent-100: #cde5fe;
|
||||
--accent-200: #9bccfd;
|
||||
--accent-300: #68b2fd;
|
||||
--accent-400: #3699fc;
|
||||
--accent-500: #047ffb;
|
||||
--accent-600: #0366c9;
|
||||
--accent-700: #024c97;
|
||||
--accent-800: #023364;
|
||||
--accent-900: #011932;
|
||||
--accent-950: #000d19;
|
||||
|
||||
}
|
||||
:root[data-theme="dark"] {
|
||||
--text-50: #0e0d0c;
|
||||
--text-100: #1b1a18;
|
||||
--text-200: #37342f;
|
||||
--text-300: #524e47;
|
||||
--text-400: #6d685f;
|
||||
--text-500: #888277;
|
||||
--text-600: #a09b92;
|
||||
--text-700: #b8b4ad;
|
||||
--text-800: #d0cdc8;
|
||||
--text-900: #e7e6e4;
|
||||
--text-950: #f3f3f1;
|
||||
|
||||
--background-50: #0f0d0a;
|
||||
--background-100: #1f1b14;
|
||||
--background-200: #3d3529;
|
||||
--background-300: #5c503d;
|
||||
--background-400: #7a6a52;
|
||||
--background-500: #998566;
|
||||
--background-600: #ad9d85;
|
||||
--background-700: #c2b6a3;
|
||||
--background-800: #d6cec2;
|
||||
--background-900: #ebe7e0;
|
||||
--background-950: #f5f3f0;
|
||||
|
||||
--primary-50: #050d15;
|
||||
--primary-100: #09192a;
|
||||
--primary-200: #133353;
|
||||
--primary-300: #1c4c7d;
|
||||
--primary-400: #2666a6;
|
||||
--primary-500: #2f7fd0;
|
||||
--primary-600: #5999d9;
|
||||
--primary-700: #82b2e3;
|
||||
--primary-800: #acccec;
|
||||
--primary-900: #d5e5f6;
|
||||
--primary-950: #eaf2fa;
|
||||
|
||||
--secondary-50: #191100;
|
||||
--secondary-100: #322201;
|
||||
--secondary-200: #654401;
|
||||
--secondary-300: #976502;
|
||||
--secondary-400: #ca8702;
|
||||
--secondary-500: #fca903;
|
||||
--secondary-600: #fdba35;
|
||||
--secondary-700: #fdcb68;
|
||||
--secondary-800: #fedd9a;
|
||||
--secondary-900: #feeecd;
|
||||
--secondary-950: #fff6e6;
|
||||
|
||||
--accent-50: #000d19;
|
||||
--accent-100: #011932;
|
||||
--accent-200: #023364;
|
||||
--accent-300: #024c97;
|
||||
--accent-400: #0366c9;
|
||||
--accent-500: #047ffb;
|
||||
--accent-600: #3699fc;
|
||||
--accent-700: #68b2fd;
|
||||
--accent-800: #9bccfd;
|
||||
--accent-900: #cde5fe;
|
||||
--accent-950: #e6f2ff;
|
||||
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user