aboutsummaryrefslogtreecommitdiff
path: root/assets/base.css
diff options
context:
space:
mode:
authorJulien Dessaux2023-01-25 17:45:06 +0100
committerJulien Dessaux2023-01-25 18:59:53 +0100
commit627f1f5d32ebeb89c41f72d960b4ab35778f7625 (patch)
tree29bd5f7531bd5bfe9c06c93f9166fdbd704676b9 /assets/base.css
parentUpdated last blog article (diff)
downloadwww-627f1f5d32ebeb89c41f72d960b4ab35778f7625.tar.gz
www-627f1f5d32ebeb89c41f72d960b4ab35778f7625.tar.bz2
www-627f1f5d32ebeb89c41f72d960b4ab35778f7625.zip
Added themes
Diffstat (limited to 'assets/base.css')
-rw-r--r--assets/base.css122
1 files changed, 116 insertions, 6 deletions
diff --git a/assets/base.css b/assets/base.css
index 4c5ed7f..c84ea13 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -1,19 +1,109 @@
+.black-theme {
+ /* Black mode */
+ --bg-0: #181818;
+ --bg-1: #252525;
+ --bg-2: #3b3b3b;
+ --dim: #777777;
+ --fg-0: #b9b9b9;
+ --fg-1: #dedede;
+ --red: #ed4a46;
+ --green: #70b433;
+ --yellow: #dbb32d;
+ --blue: #368aeb;
+ --magenta: #eb6eb7;
+ --cyan: #3fc5b7;
+ --orange: #e67f43;
+ --violet: #a580e2;
+ --br_red: #ff5e56;
+ --br_green: #83c746;
+ --br_yellow: #efc541;
+ --br_blue: #4f9cfe;
+ --br_magenta: #ff81ca;
+ --br_cyan: #56d8c9;
+ --br_orange: #fa9153;
+ --br_violet: #b891f5;
+}
+.dark-theme {
+ /* Dark mode */
+ --bg-0: #103c48;
+ --bg-1: #184956;
+ --bg-2: #2d5b69;
+ --dim: #72898f;
+ --fg-0: #adbcbc;
+ --fg-1: #cad8d9;
+ --red: #fa5750;
+ --green: #75b938;
+ --yellow: #dbb32d;
+ --blue: #4695f7;
+ --magenta: #f275be;
+ --cyan: #41c7b9;
+ --orange: #ed8649;
+ --violet: #af88eb;
+ --br_red: #ff665c;
+ --br_green: #84c747;
+ --br_yellow: #ebc13d;
+ --br_blue: #58a3ff;
+ --br_magenta: #ff84cd;
+ --br_cyan: #53d6c7;
+ --br_orange: #fd9456;
+ --br_violet: #bd96fa;
+}
+.light-theme {
+ /* Light mode */
+ --bg-0: #fbf3db;
+ --bg-1: #ece3cc;
+ --bg-2: #d5cdb6;
+ --dim: #909995;
+ --fg-0: #53676d;
+ --fg-1: #3a4d53;
+ --red: #d2212d;
+ --green: #489100;
+ --yellow: #ad8900;
+ --blue: #0072d4;
+ --magenta: #ca4898;
+ --cyan: #009c8f;
+ --orange: #c25d1e;
+ --violet: #8762c6;
+ --br_red: #cc1729;
+ --br_green: #428b00;
+ --br_yellow: #a78300;
+ --br_blue: #006dce;
+ --br_magenta: #c44392;
+ --br_cyan: #00978a;
+ --br_orange: #bc5819;
+ --br_violet: #825dc0;
+}
+
+#themes {
+ background-color: var(--bg-0);
+ border: none;
+ color: var(--fg-1);
+ font-size: 0.9em;
+ padding: 14px 16px;
+}
+
* {
box-sizing: border-box;
}
+html {
+ background-color: var(--bg-0);
+ color: var(--fg-0);
+}
body {
+ background-color: var(--bg-1);
display: grid;
grid-template-rows: auto 1fr auto;
font-family: -apple-system, BlinkMacSystemFont,
- "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
- "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
font-feature-settings: "kern" 1;
font-kerning: normal;
}
main {
+ background-color: var(--bg-1);
padding-left:1em;
padding-right:1em;
scrollbar-gutter: stable both-edges;
@@ -25,6 +115,8 @@ p {
overflow-wrap: anywhere;
}
pre,code {
+ background-color: var(--bg-0);
+ color: var(--fg-0);
white-space: pre-wrap;
}
nav#TableOfContents ul {
@@ -53,7 +145,25 @@ h1, h2, h3, h4, h5 {
.fullwidth {
width: 100%;
}
-img[src*='#center'] {
- display: block;
- margin: auto;
+img[src*='#center'] {
+ display: block;
+ margin: auto;
+}
+
+a {
+ color: var(--yellow);
+}
+a:visited {
+ color: var(--orange);
+}
+a:hover {
+ color: var(--red);
+}
+h1,
+body header nav ul li a,
+body header nav ul li a:visited {
+ color: var(--red);
+}
+h2, h3, h4, h5, h6 {
+ color: var(--green);
}