Optimize css

assets/css/color/orange-scp.css

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

assets/css/color/orange.css

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

assets/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

@@ -15,7 +15,7 @@ module.exports = (env, { mode }) => ({
     main: join("assets", "js", "menu.js"),
     languageSelector: join("assets", "js", "languageSelector.js"),
     prism: join("assets", "js", "prism.js"),
-    style: join("assets", "css", "style.css"),
+    style: join("assets", "css", "color", "orange.css"),
     red: join("assets", "css", "color", "red.css"),
     blue: join("assets", "css", "color", "blue.css"),
     green: join("assets", "css", "color", "green.css"),
@@ -23,7 +23,7 @@ module.exports = (env, { mode }) => ({
     pink: join("assets", "css", "color", "pink.css"),
     yellow: join("assets", "css", "color", "yellow.css"),
     grey: join("assets", "css", "color", "grey.css"),
-    'style-scp': join("assets", "css", "style.css"),
+    'style-scp': join("assets", "css", "color", "orange-scp.css"),
     'red-scp': join("assets", "css", "color", "red-scp.css"),
     'blue-scp': join("assets", "css", "color", "blue-scp.css"),
     'green-scp': join("assets", "css", "color", "green-scp.css"),