diff --git a/source/css/index.css b/source/css/index.css
index 241db78..4d99e0e 100644
--- a/source/css/index.css
+++ b/source/css/index.css
@@ -3,9 +3,8 @@ html {
}
body {
- --accent-1: #3bd18a;
- background-color: #1f1731;
- color: #f2efff;
+ background-color: var(--background-1);
+ color: var(--foreground-1);
font-size: 1.75rem;
padding: 16px;
}
@@ -23,7 +22,7 @@ main {
h1,
h2 {
- background-color: #2a2041;
+ background-color: var(--background-2);
padding: 16px;
width: 100%;
}
@@ -36,7 +35,7 @@ p {
a {
border: 1px dashed transparent;
- color: #41c8e5;
+ color: var(--primary-accent-7);
display: inline-block;
font-weight: bold;
padding: 4px 8px;
@@ -44,13 +43,13 @@ a {
}
a:hover {
- background-color: #d2b83a;
- color: #1f1731;
+ background-color: var(--primary-accent-3);
+ color: var(--background-1);
}
a:active,
a:focus {
- border: 1px dashed #f2efff;
+ border: 1px dashed var(--foreground-1);
outline: none;
}
@@ -62,12 +61,12 @@ main,
footer,
h1,
ul {
- border: 1px solid var(--accent-1);
+ border: 1px solid var(--primary-accent-5);
}
ul {
align-items: center;
- background-color: #2a2041;
+ background-color: var(--background-2);
list-style: none;
margin: 0;
overflow: auto;
@@ -84,7 +83,7 @@ li:last-child {
}
.divider {
- border-top: 1px solid var(--accent-1);
+ border-top: 1px solid var(--primary-accent-5);
width: 100%;
}
diff --git a/source/css/libraries.css b/source/css/libraries.css
index dd869d1..8ca54a3 100644
--- a/source/css/libraries.css
+++ b/source/css/libraries.css
@@ -5,7 +5,7 @@
}
.libraries li {
- background-color: #2a2041;
+ background-color: var(--background-2);
padding: 16px;
}
@@ -14,7 +14,7 @@
}
.libraries a:hover {
- background-color: #3bd18a;
+ background-color: var(--primary-accent-2);
}
.libraries .badges {
@@ -24,20 +24,20 @@
#npm,
.libraries li.npm {
- border: 1px solid #f99fb1;
+ border: 1px solid var(--primary-accent-1);
}
.npm a {
- background-color: #f99fb1;
- color: #1f1731;
+ background-color: var(--primary-accent-1);
+ color: var(--background-1);
}
#crates,
.libraries li.crates {
- border: 1px solid #96c839;
+ border: 1px solid var(--primary-accent-4);
}
.crates a {
- background-color: #96c839;
- color: #1f1731;
+ background-color: var(--primary-accent-4);
+ color: var(--background-1);
}
diff --git a/source/css/userscripts.css b/source/css/userscripts.css
index 3460004..3e0bc0e 100644
--- a/source/css/userscripts.css
+++ b/source/css/userscripts.css
@@ -1,11 +1,7 @@
-body {
- --accent-1: #96c839;
-}
-
header {
align-items: center;
- background-color: #2a2041;
- border: 1px solid var(--accent-1);
+ background-color: var(--background-2);
+ border: 1px solid var(--primary-accent-4);
display: flex;
justify-content: center;
padding: 16px;
@@ -18,12 +14,12 @@ h2 {
}
a.install {
- background-color: var(--accent-1);
- color: #1f1731;
+ background-color: var(--primary-accent-4);
+ color: var(--background-1);
}
a.install:hover {
- background-color: #d2b83a;
+ background-color: var(--primary-accent-3);
}
.remove-padding,
diff --git a/source/css/userstyles.css b/source/css/userstyles.css
index c50b73d..f3dba9e 100644
--- a/source/css/userstyles.css
+++ b/source/css/userstyles.css
@@ -1,11 +1,7 @@
-body {
- --accent-1: #f99fb1;
-}
-
header {
align-items: center;
- background-color: #2a2041;
- border: 1px solid var(--accent-1);
+ background-color: var(--background-2);
+ border: 1px solid var(--primary-accent-1);
display: flex;
justify-content: center;
padding: 16px;
@@ -18,8 +14,8 @@ h2 {
}
a.install {
- background-color: var(--accent-1);
- color: #1f1731;
+ background-color: var(--primary-accent-1);
+ color: var(--background-1);
}
a.install:hover {
diff --git a/source/css/variables.css b/source/css/variables.css
new file mode 100644
index 0000000..4479c4c
--- /dev/null
+++ b/source/css/variables.css
@@ -0,0 +1,33 @@
+body {
+ --foreground-1: #f2efff;
+ --foreground-2: #e6deff;
+ --background-1: #1f1731;
+ --background-2: #2a2041;
+ --primary-accent-1: #f99fb1;
+ --primary-accent-2: #faa56c;
+ --primary-accent-3: #d2b83a;
+ --primary-accent-4: #96c839;
+ --primary-accent-5: #3bd18a;
+ --primary-accent-6: #3ecdbf;
+ --primary-accent-7: #41c8e5;
+ --primary-accent-8: #98b9f8;
+ --primary-accent-9: #d5a6f8;
+ --primary-accent-10: #f99add;
+ --primary-gray-1: #e2e2e2;
+ --primary-gray-2: #c6c6c6;
+ --primary-gray-3: #ababab;
+ --secondary-accent-1: #8b123c;
+ --secondary-accent-2: #6a3b11;
+ --secondary-accent-3: #514610;
+ --secondary-accent-4: #384d10;
+ --secondary-accent-5: #115133;
+ --secondary-accent-6: #124f49;
+ --secondary-accent-7: #144d5a;
+ --secondary-accent-8: #17477e;
+ --secondary-accent-9: #6f1995;
+ --secondary-accent-10: #81156a;
+ --secondary-gray-1: #1b1b1b;
+ --secondary-gray-2: #303030;
+ --secondary-gray-3: #474747;
+ --transparent-accent-1: #000a;
+}
diff --git a/source/index.html b/source/index.html
index a0e6d8f..32c20c4 100644
--- a/source/index.html
+++ b/source/index.html
@@ -6,6 +6,7 @@
Bauke
+
diff --git a/source/libraries/index.html b/source/libraries/index.html
index bb6d19d..07b367d 100644
--- a/source/libraries/index.html
+++ b/source/libraries/index.html
@@ -6,6 +6,7 @@
Libraries
+
diff --git a/source/userscripts/index.html b/source/userscripts/index.html
index c6ec280..a7d5ac8 100644
--- a/source/userscripts/index.html
+++ b/source/userscripts/index.html
@@ -6,6 +6,7 @@
Userscripts
+
diff --git a/source/userstyles/index.html b/source/userstyles/index.html
index d36a801..71eb023 100644
--- a/source/userstyles/index.html
+++ b/source/userstyles/index.html
@@ -6,6 +6,7 @@
Userstyles
+