Move themes to separate CSS file

2023-10-06 11:53:35 +01:00
parent bb0d389b09
commit e2cefdda08
3 changed files with 58 additions and 20 deletions
--- a/src/lib/main.css
+++ b/src/lib/main.css
@@ -0,0 +1,57 @@
+/* FONTS */
+@font-face {
+  font-family: 'firamono';
+  src: url('/font/firamono/firamono-regular.woff2') format('woff2'), url('/font/firamono/firamono-regular.woff') format('woff'),
+    url('/font/firamono/firamono-regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'firamono';
+  src: url('/font/firamono/firamono-500.woff2') format('woff2'), url('/font/firamono/firamono-500.woff') format('woff'), url('/font/firamono/firamono-500.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'urwgothic';
+  src: url('/font/urwgothic/urwgothic.woff2') format('woff2'), url('/font/urwgothic/urwgothic.woff') format('woff'), url('/font/urwgothic/urwgothic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'urwgothic';
+  src: url('/font/urwgothic/urwgothicDemi.woff2') format('woff2'), url('/font/urwgothic/urwgothicDemi.woff') format('woff'),
+    url('/font/urwgothic/urwgothicDemi.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'ubuntu';
+  src: url('/font/ubuntumono/ubuntumono-regular.woff2') format('woff2'), url('/font/ubuntumono/ubuntumono-regular.woff') format('woff'),
+    url('/font/ubuntumono/ubuntumono-regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background-color: var(--main-bg-color);
+  background-image: radial-gradient(var(--second-bg-color), var(--main-bg-color));
+  color: var(--second-text-color);
+  font-family: urwgothic, sans-serif;
+  text-align: center;
+  margin: auto;
+  width: 100%;
+  padding-bottom: 65px;
+}
+a {
+  color: var(--link-color);
+}
+button:hover {
+  cursor: pointer;
+}
--- a/src/lib/themes.css
+++ b/src/lib/themes.css
@@ -0,0 +1,56 @@
+/* OLD THEME */
+:root {
+    --main-bg-color: #404c55;
+    --second-bg-color: #2b343c; /* Use as first arg in radial gradient */
+    --accent-color: #007979;
+    --overlay-color: #3c6f79de;
+    --overlay-color-solid: #3c6f79;
+    --main-text-color: #00b7b7;
+    --second-text-color: #0afdfd;
+    --note-text-color: #9de7ff;
+    --link-color: azure;
+    --box-border-color: ;
+    --link-visited-color: azure;
+    --main-alert-color: #ed6d00;
+    --second-alert-color: #e77f00; /* Use as second arg in radial gradient */
+    --main-warning-color: orange;
+    --board-name-color: #fcfc09;
+}
+
+/* Main Theme
+:root {
+    --main-bg-color: #404c55;
+    --second-bg-color: #2b343c;
+    --accent-color: #007979;
+    --island-color: #3c6f79de;
+    --main-heading-color: #00b7b7;
+    --main-text-color: #0afdfd;
+    --note-text-color: #9de7ff;
+    --link-color: azure;
+    --box-border-color: rgba(0,0,0,0.19);
+    --link-visited-color: azure;
+    --main-alert-color: #ed6d00;
+    --second-alert-color: #e77f00;
+    --main-warning-color: orange;
+    --board-name-color: #fcfc09;
+}
+*/
+/*
+Christmas Theme
+{
+    --main-bg-color: #404c55;
+    --second-bg-color: #2b343c;
+    --accent-color: #007979;
+    --island-color: #3c6f79de;
+    --main-heading-color: #00b7b7;
+    --main-text-color: #0afdfd;
+    --note-text-color: #9de7ff;
+    --link-color: azure;
+    --box-border-color: rgba(0,0,0,0.19);
+    --link-visited-color: azure;
+    --main-alert-color: #ed6d00;
+    --second-alert-color: #e77f00;
+    --main-warning-color: orange;
+    --board-name-color: #fcfc09;
+}
+*/