basic setup to use less for css compilation

.gitignore

@@ -25,3 +25,4 @@ hs_err_pid*
 # IDE Folders
 .idea/
 .vs/
+node_modules

less/actors.less

@@ -87,8 +87,7 @@
     height: 18px;
     line-height: 16px;
     margin: 4px 8px 2px;
-    .modesto();
-    font-size: 18px;
+    .russoOne(14px);
     color: @colorOlive;
     border-bottom: 1px solid @colorFaint;
   }
@@ -124,7 +123,7 @@
         align-items: center;
         height: 28px;
         line-height: 28px;
-        .modesto();
+        .russoOne();
 
         > * {
           font-weight: 400;
@@ -157,7 +156,7 @@
     list-style: none;
     margin: 0;
     padding: 0;
-    .modesto();
+    .russoOne();
     border: @borderGroove;
     border-radius: 3px;
 
@@ -493,7 +492,7 @@
       h3 {
         margin: 0 -5px 0 0;
         padding-left: 5px;
-        .modesto();
+        .russoOne();
         font-size: 16px;
       }
 

less/apps.less

@@ -114,7 +114,7 @@
     padding: 2px 0;
     border-top: @borderGroove;
     border-bottom: @borderGroove;
-    .modesto();
+    .russoOne();
   }
 
   /* Tags */
@@ -216,7 +216,7 @@
     border-bottom: @borderGroove;
 
     .header-details {
-      .modesto();
+      .russoOne();
     }
 
     /* Character Name */
@@ -278,7 +278,7 @@
   .sheet-navigation {
     flex: 0 0 @navHeight;
     margin-bottom: 5px;
-    .modesto();
+    .russoOne(14px);
 
     .item {
       height: 30px;

less/variables.less

@@ -14,9 +14,9 @@
   font-weight: 400;
   src: url('./fonts/RussoOne.ttf');
 }
-.russoOne {
+.russoOne(@font-size: 20px) {
   font-family: 'Russo One';
-  font-size: 20px;
+  font-size: @font-size;
   font-weight: 400;
 }
 /* bungee-inline-regular - latin */
@@ -55,7 +55,23 @@
 @colorOlive: #4b4a44;
 @colorCrimson: #44191A;
 @borderGroove: 2px groove #eeede0;
-@sheetBackground: url("ui/parchment.jpg") repeat;
+//@sheetBackground: url("ui/parchment.jpg") repeat;
+
+
+//SW5e Colors
+@colorBlack: #1C1C1C;
+@colorDarkGray: #363636;
+@colorGray: #4f4f4f;
+@colorLightGray: #828282;
+@colorPaleGray: #D6D6D6;
+@colorRed: #c40f0f; 
+@colorPaleRed: #FBF4F4;
+@colorLightRed: #F6E1E1;
+@colorBlue: #0d99cc;
+@colorLightBlue: #7ed6f7;
+@colorPaleBlue: #afc6d6;
+
+@sheetBackground: linear-gradient(90deg, @colorPaleBlue 0%, @colorPaleGray 30%, @colorPaleGray 70%, @colorPaleBlue); //url("ui/parchment.webp") repeat;
 
 /* ----------------------------------------- */
 /*  Flexbox                                  */