Split orange theme out into its own stylesheet

layouts/partials/head.html

@@ -6,10 +6,7 @@
 <link rel="canonical" href="{{ .Permalink }}" />
 
 <!-- Theme CSS -->
-<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
+<link rel="stylesheet" href="{{ with $.Site.Params.ThemeColor | default "orange" }}{{ printf "assets/%s.css" . | absURL }}{{ end }}">
-{{ if (ne $.Site.Params.ThemeColor "orange") }}
-  <link rel="stylesheet" href="{{ (printf "assets/%s.css" $.Site.Params.ThemeColor) | absURL }}">
-{{ end }}
 
 <!-- Custom CSS to override theme properties (/static/style.css) -->
 {{ if (fileExists "static/style.css") -}}

source/css/color/blue.css

@@ -1,10 +1,4 @@
-@import '../main.css';
+@import '../style';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
 
 :root {
   --accent: #23B0FF;

source/css/color/green.css

@@ -1,10 +1,4 @@
-@import '../main.css';
+@import '../style';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
 
 :root {
   --accent: #78E2A0;

source/css/color/orange.css

@@ -0,0 +1,8 @@
+@import '../style';
+
+:root {
+  --accent: #FFA86A;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

source/css/color/pink.css

@@ -1,10 +1,4 @@
-@import '../main.css';
+@import '../style';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
 
 :root {
   --accent: #EE72F1;

source/css/color/red.css

@@ -1,10 +1,4 @@
-@import '../main.css';
+@import '../style';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
 
 :root {
   --accent: #FF6266;

source/css/font.css

@@ -2,12 +2,12 @@
   font-family: 'Fira Code';
   font-style:  normal;
   font-weight: 400;
-  src: url("../fonts/FiraCode-Regular.woff") format("woff");
+  src: url("../../fonts/FiraCode-Regular.woff") format("woff");
 }
 
 @font-face {
   font-family: 'Fira Code';
   font-style:  normal;
   font-weight: 800;
-  src: url("../fonts/FiraCode-Bold.woff") format("woff");
+  src: url("../../fonts/FiraCode-Bold.woff") format("woff");
 }

source/css/syntax.css

@@ -38,7 +38,7 @@ code.language-html {
 .token.selector,
 .token.tag,
 .token.punctuation {
-  color: white;
+  color: var(--color);
 }
 
 .token.comment,

source/css/variables.css

@@ -1,9 +1,4 @@
 :root {
-  --accent: #FFA86A;
-  --background: color-mod(var(--accent) blend(#1D1E28 98%));
-  --color: white;
-  --border-color: rgba(255, 255, 255, .1);
-
   /* variables for js, must be the same as these in @custom-media queries */
   --phoneWidth: (max-width: 684px);
   --tabletWidth: (max-width: 900px);

webpack.config.js

@@ -20,7 +20,7 @@ module.exports = {
       join("source", "js", "languageSelector.js")
     ],
     "prism.js": join("source", "js", "prism.js"),
-    "style.css": join("source", "css", "style.css"),
+    "orange.css": join("source", "css", "color", "orange.css"),
     "red.css": join("source", "css", "color", "red.css"),
     "blue.css": join("source", "css", "color", "blue.css"),
     "green.css": join("source", "css", "color", "green.css"),