diff options
| author | Oxbian <oxbian@mailbox.org> | 2024-10-13 14:21:34 -0400 |
|---|---|---|
| committer | Oxbian <oxbian@mailbox.org> | 2024-10-13 14:21:34 -0400 |
| commit | 157468b84553c47d0f5ba312d815ea7195b0d6b5 (patch) | |
| tree | 2e367f441239f61f53307855d96e9f40b02e95ac /CSS/default.css | |
| parent | 633bf74a3ecb66760010ce8b958356523bd75a4b (diff) | |
| download | web-template-157468b84553c47d0f5ba312d815ea7195b0d6b5.tar.gz web-template-157468b84553c47d0f5ba312d815ea7195b0d6b5.zip | |
feat: components (buttons, inputfields, dropdowns, quotes / codes)
Diffstat (limited to 'CSS/default.css')
| -rw-r--r-- | CSS/default.css | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/CSS/default.css b/CSS/default.css new file mode 100644 index 0000000..3253f7c --- /dev/null +++ b/CSS/default.css @@ -0,0 +1,84 @@ +/* Default css, here is defined all colors, night / light mode colors + +/* Root */ +:root +{ + + /* Dark mode */ + --dark-bg: #191919; + --dark-text: #BBBBBB; + --dark-link: #191919; + --dark-link-bg: #f08080; + --dark-title: #f08080; + --dark-quote-border: #fbc4ab; /* Quotebar color */ + --dark-quote-bg: #3D3D3D; + + /* Light mode */ + --light-bg: #ffdab9; + --light-text: #191919; + --light-link: #191919; + --light-link-bg: #DE6E7C; + --light-title: #DE6E7C; + --light-quote-border: #6a040f; /* Quotebar color */ + --light-quote-bg: #F9AD8A; + + /* Default (will automatically be crushed by light/dark mode detection )*/ + --bg-color: var(--dark-bg); + --text-color: var(--dark-text); + --link-color: var(--dark-link); + --link-bg-color: var(--dark-link-bg); + --title-color: var(--dark-title); + --quote-border: var(--dark-quote-border); + --quote-bg: var(--dark-quote-bg); +} + +/* Body */ +body +{ + /* Reponsive font size */ + font-size: calc(10px + 0.390625vw); + font-family: 'Courier New', monospace; + font-weight: normal; + + background-color: var(--bg-color); + color: var(--text-color); + + margin: 2vh auto; + max-width: 80vw; +} + +h1, h2, h3, h4, h5, h6 +{ + color: var(--title-color); +} + +/* Night mode */ +@media (prefers-color-scheme: dark) +{ + :root + { + --bg-color: var(--dark-bg); + --text-color: var(--dark-text); + --link-color: var(--dark-link); + --link-bg-color: var(--dark-link-bg); + --title-color: var(--dark-title); + --quote-border: var(--dark-quote-border); + --quote-bg: var(--dark-quote-bg); + } +} + +/* Day mode */ +@media (prefers-color-scheme: light) +{ + :root + { + --bg-color: var(--light-bg); + --text-color: var(--light-text); + --link-color: var(--light-link); + --link-bg-color: var(--light-link-bg); + --title-color: var(--light-title); + --quote-border: var(--light-quote-border); + --quote-bg: var(--light-quote-bg); + } +} + |