Move themes.css into global.css

src/template.html

@@ -8,9 +8,8 @@
 
     %sapper.base%
 
-    <link rel="stylesheet" href="/css/global.css">
     <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/css/themes.css">
+    <link rel="stylesheet" href="/css/global.css">
     <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
     <link rel="icon" type="image/png" href="/img/favicon.ico">
 

static/css/global.css

@@ -1,14 +1,67 @@
+
+/* Default theme */
+:root {
+  --background-color: #2d2d2d;
+  --headings-color: #ffffff;
+  --font-color: #ffffff;
+  --line-color: #ffffff;
+  --link-color: #CC99FF;
+}
+
+/* Dark theme */
+html[data-theme='dark'] {
+  --background-color: #2d2d2d;
+  --headings-color: #ffffff;
+  --font-color: #ffffff;
+  --line-color: #eeeeee;
+  --link-color: #CC99FF;
+}
+
+hr {
+  background-color: var(--line-color);
+}
+
+li a:hover {
+  border-bottom: 3px solid var(--line-color);
+  text-decoration: none;
+}
+
 body {
+  background-color: var(--background-color);
+  color: var(--font-color);
   font-family: 'Open Sans', sans-serif;
   font-display: swap;
   font-size: 1rem;
   line-height: 1.8;
 }
 
+h1, h2, h3, h4, h5 {
+  color: var(--headings-color);
+  font-weight: bold;
+}
+
+hr {
+  background-color: var(--line-color);
+}
+
+li a:hover {
+  border-bottom: 3px solid var(--line-color);
+  text-decoration: none;
+}
+
+a {
+  color: var(--link-color);
+}
+
+a:hover {
+  color: var(--font-color);
+}
+
 .overlay {
-  display: flex;
   background-size: cover;
   background-position: center;
+  border-bottom: 2px solid var(--line-color);
+  display: flex;
   min-height: 200px;
   text-align: center;
   align-items: center;
@@ -28,7 +81,7 @@ nav {
   justify-content: space-between;
 }
 
-/* flexbox navbar test*/
+/* flexbox navbar test */
 nav ul {
   display: flex;
   padding: 0;
@@ -38,7 +91,7 @@ nav ul {
 nav ul li {
   font-size: 1rem;
   text-align: center;
-  padding: 5px;
+  padding: 5px 15px;
 }
 
 nav li {
@@ -47,13 +100,15 @@ nav li {
 
 /* Change color on hover */
 nav li a {
-  margin-left: 20px;
-  margin-right: 20px;
   text-decoration: none;
 }
 
 main {
-  margin-top: 30px;
+  margin-top: 20px;
+}
+
+footer {
+  margin-bottom: 20px;
 }
 
 /* Content types */
@@ -62,7 +117,7 @@ section {
   padding: 5px 20px;
 }
 
-/*Simple css to style it like a toggle switch*/
+/* Simple css to style it like a toggle switch */
 .theme-switch-wrapper {
   display: flex;
   align-items: center;

static/css/themes.css

@@ -1,48 +0,0 @@
-/* Default theme */
-:root {
-    --background-color: #2d2d2d;
-    --headings-color: #ffffff;
-    --font-color: #ffffff;
-    --line-color: #ffffff;
-    --link-color: #CC99FF;
-}
-
-/* Dark theme */
-html[data-theme='dark'] {
-    --background-color: #2d2d2d;
-    --headings-color: #ffffff;
-    --font-color: #ffffff;
-    --line-color: #eeeeee;
-    --link-color: #CC99FF;
-}
-
-body {
-    background-color: var(--background-color);
-    color: var(--font-color);
-}
-
-h1, h2, h3, h4, h5 {
-    color: var(--headings-color);
-    font-weight: bold;
-}
-
-hr {
-    background-color: var(--line-color);
-}
-
-.overlay {
-    border-bottom: 2px solid var(--line-color);
-}
-
-li a:hover {
-    border-bottom: 3px solid var(--line-color);
-    text-decoration: none;
-}
-
-a {
-    color: var(--link-color);
-}
-
-a:hover {
-    color: var(--font-color);
-}