6 files changed, 64 insertions, 8 deletions
diff --git a/site/themes/sine/static/css/style.css b/site/themes/sine/static/css/style.css
index c14e227..9470d48 100644
--- a/site/themes/sine/static/css/style.css
+++ b/site/themes/sine/static/css/style.css
@@ -1,8 +1,7 @@
 /* COLORS */
-@import url('themes/oxocarbon-light.css');
-@import url('themes/oxocarbon-dark.css');
+@import url('themes/themes.css');
 
-#toggleTheme {
+#switchTheme {
   font-family: "kirsch";
   font-size: 2rem;
   color: var(--fg);
@@ -10,8 +9,8 @@
   background: none;
   cursor: pointer;
   position: relative;
-  top: 2px;
-  margin: -4px 2px;
+  /* top: 2px; */
+  /* margin: -4px 2px; */
 }
 
 #logoContainer {
@@ -29,6 +28,13 @@
   font-display: block;
 }
 
+@font-face {
+  font-family: 'Jacquard12';
+  src: url('/fonts/Jacquard12-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 /* LAYOUT */
 
 body {
@@ -152,9 +158,10 @@ body {
   margin: 14px 0;
 }
 
-#content h1 {
+#content :is(h1, h2, h3, h4, h5, h6) {
   margin: 0;
   text-align: center;
+  font-family: "Jacquard12";
 }
 
 #content ul {
diff --git a/site/themes/sine/static/css/themes/melatonin-dark.css b/site/themes/sine/static/css/themes/melatonin-dark.css
new file mode 100644
index 0000000..bd12429
--- /dev/null
+++ b/site/themes/sine/static/css/themes/melatonin-dark.css
@@ -0,0 +1,22 @@
+/* COLORS */
+[data-theme="melatonin-dark"] {
+  --base00: #152233;
+  --base01: #253850;
+  --base02: #415d81;
+  --base03: #5b7aa2;
+  --base04: #84a3cb;
+  --base05: #c8d7eb;
+  --base06: #b9cce5;
+  --base07: #dce7f6;
+  --base08: #d87595;
+  --base09: #dd9f6b;
+  --base0A: #c88953;
+  --base0B: #90a254;
+  --base0C: #55aa9b;
+  --base0D: #5ba1d0;
+  --base0E: #a586d9;
+  --base0F: #a06f42;
+
+  --fg: var(--base06);
+  --bg: var(--base00);
+}
diff --git a/site/themes/sine/static/css/themes/melatonin-light.css b/site/themes/sine/static/css/themes/melatonin-light.css
new file mode 100644
index 0000000..f0d167b
--- /dev/null
+++ b/site/themes/sine/static/css/themes/melatonin-light.css
@@ -0,0 +1,22 @@
+/* COLORS */
+[data-theme="melatonin-light"] {
+  --base00: #e5edfa;
+  --base01: #cedef6;
+  --base02: #b8cef1;
+  --base03: #6e8db8;
+  --base04: #2f548a;
+  --base05: #294069;
+  --base06: #132745;
+  --base07: #02060e;
+  --base08: #d87595;
+  --base09: #dd9f6b;
+  --base0A: #c88953;
+  --base0B: #90a254;
+  --base0C: #55aa9b;
+  --base0D: #5ba1d0;
+  --base0E: #a586d9;
+  --base0F: #9a6c40;
+
+  --fg: var(--base06);
+  --bg: var(--base00);
+}
diff --git a/site/themes/sine/static/css/themes/oxocarbon-dark.css b/site/themes/sine/static/css/themes/oxocarbon-dark.css
index 3283009..5388115 100644
--- a/site/themes/sine/static/css/themes/oxocarbon-dark.css
+++ b/site/themes/sine/static/css/themes/oxocarbon-dark.css
@@ -1,5 +1,5 @@
 /* COLORS */
-[data-theme="dark"] {
+[data-theme="oxocarbon-dark"] {
   --base00: #161616;
   --base01: #262626;
   --base02: #393939;
diff --git a/site/themes/sine/static/css/themes/oxocarbon-light.css b/site/themes/sine/static/css/themes/oxocarbon-light.css
index 7cd48ee..018eba4 100644
--- a/site/themes/sine/static/css/themes/oxocarbon-light.css
+++ b/site/themes/sine/static/css/themes/oxocarbon-light.css
@@ -1,5 +1,5 @@
 /* COLORS */
-[data-theme="light"] {
+[data-theme="oxocarbon-light"] {
   --base00: #ffffff;
   --base01: #f2f2f2;
   --base02: #d0d0d0;
diff --git a/site/themes/sine/static/css/themes/themes.css b/site/themes/sine/static/css/themes/themes.css
new file mode 100644
index 0000000..a691171
--- /dev/null
+++ b/site/themes/sine/static/css/themes/themes.css
@@ -0,0 +1,5 @@
+/* Import all themes */
+@import url('melatonin-dark.css');
+@import url('melatonin-light.css');
+@import url('oxocarbon-light.css');
+@import url('oxocarbon-dark.css');