Merge pull request #60 from gaslight/feature/css-theming-config

Feature/css theming config
launchscout · Jun 15, 2020 · f77c272 · f77c272
2 parents 4e4a0ce + fb625c4
commit f77c272
Show file tree

Hide file tree

Showing 22 changed files with 1,868 additions and 1,763 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,10 @@
 # The directory Mix will write compiled artifacts to.
 /_build/
 
+# Parcel caches
+/.cache/
+/assets/.cache
+
 # If you run "mix test --cover", coverage assets end up here.
 /cover/
 

diff --git a/assets/.sassrc b/assets/.sassrc
@@ -0,0 +1,3 @@
+{
+  "includePaths": ["node_modules"]
+}
diff --git a/assets/css/app-crimson-comand.scss b/assets/css/app-crimson-comand.scss
diff --git a/assets/css/app-live-deck.scss b/assets/css/app-live-deck.scss
diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -1,37 +1,36 @@
 //BASE STYLES
 @import
-"/base/reset",
-"/base/variables",
-"/base/typeography";
+"./base/reset",
+"./base/variables",
+"./base/typeography";
 
 //LAYOUT STYLES
 @import
-"/layout/base",
-"/layout/grid",
-"/layout/slides",
-"/layout/speaker",
-"/layout/remote",
-"/layout/templates";
+"./layout/base",
+"./layout/grid",
+"./layout/slides",
+"./layout/speaker",
+"./layout/remote",
+"./layout/templates";
 
 //MODULES STYLES
 @import
-"modules/blockquote",
-"/modules/aside",
-"/modules/icons",
-"/modules/forms",
-"/modules/modal",
-"/modules/code",
-"/modules/thumbnails",
-"/modules/menu",
-"/modules/timer",
-"/modules/notes",
-"/modules/lists",
-"/modules/buttons",
-"/modules/images",
-"/modules/error-page";
+"./modules/blockquote",
+"./modules/aside",
+"./modules/icons",
+"./modules/forms",
+"./modules/modal",
+"./modules/thumbnails",
+"./modules/menu",
+"./modules/timer",
+"./modules/notes",
+"./modules/lists",
+"./modules/buttons",
+"./modules/images",
+"./modules/error-page";
 
 //STATES STYLES
 @import
-"/states/colors",
-"/states/background",
-"/states/utilities";
+"./states/colors",
+"./states/background",
+"./states/utilities";
diff --git a/assets/css/layout/remote.scss b/assets/css/layout/remote.scss
@@ -198,8 +198,9 @@
         -webkit-text-fill-color: unset;
         margin: 0 8px $pad;
         color: $color-1;
+        font-family: $font-secondary;
         font-size: 1.5rem;
-        font-weight: 400;
+        font-weight: 600;
         word-break: break-word;
 
         @media screen and (min-height: 700px) {
@@ -213,8 +214,9 @@
         -webkit-text-fill-color: unset;
         margin-bottom: $pad;
         color: $color-1;
+        font-family: $font-secondary;
         font-size: 1.2rem;
-        font-weight: 400;
+        font-weight: 600;
         word-break: break-word;
 
         @media screen and (min-height: 700px) {

diff --git a/assets/css/layout/speaker.scss b/assets/css/layout/speaker.scss
@@ -37,8 +37,9 @@
       -webkit-text-fill-color: unset;
       margin: 0 8px $pad;
       color: $color-1;
+      font-family: $font-secondary;
       font-size: 1.5rem;
-      font-weight: 400;
+      font-weight: 600;
       word-break: break-word;
 
       @media screen and (min-height: 700px) {
@@ -69,8 +70,8 @@
       &__container {
         width: calc(1440px * 0.25);
         height: calc(900px * 0.25);
-        border: solid 5px darken($color-3, 3%);
         margin: 0 auto;
+        border: solid 5px darken($color-3, 3%);
 
         @media screen and (min-width: 1500px) {
           width: calc(1440px * 0.35);

diff --git a/assets/css/modules/error-page.scss b/assets/css/modules/error-page.scss
@@ -45,15 +45,15 @@
     position: relative;
 
     &::before {
-      content: url("/images/error-x-01.svg");
+      content: url("../static/images/error-x-01.svg");
       display: block;
       position: absolute;
         top: 30px;
         left: -30px;
     }
 
     &::after {
-      content: url("/images/error-x-02.svg");
+      content: url("../static/images/error-x-02.svg");
       display: block;
       position: absolute;
         top: -40px;

diff --git a/assets/css/modules/forms.scss b/assets/css/modules/forms.scss
@@ -49,7 +49,7 @@ select {
   padding: $pad-xxs ;
   overflow: hidden;
   border: solid 3px $color-4;
-  background: url(/images/icons/dropdown.svg) no-repeat right $color-4;
+  background: url(../static/images/icons/dropdown.svg) no-repeat right $color-4;
   line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;

diff --git a/assets/css/theme-crimson-command.scss b/assets/css/theme-crimson-command.scss
@@ -0,0 +1,4 @@
+//THEME STYLES
+@import
+"./themes/crimson-command-line-theme-fonts",
+"./themes/crimson-command-line-theme";
diff --git a/assets/css/theme-live-deck.scss b/assets/css/theme-live-deck.scss
@@ -0,0 +1,4 @@
+//THEME STYLES
+@import
+"./themes/live-deck-theme-fonts",
+"./themes/live-deck-theme";
diff --git a/assets/css/themes/live-deck-theme-fonts.scss b/assets/css/themes/live-deck-theme-fonts.scss
@@ -3,152 +3,152 @@
   font-style:  normal;
   font-weight: 100;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-Thin.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-Thin.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-Thin.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-Thin.woff?v=3.12") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 100;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-ThinItalic.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-ThinItalic.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-ThinItalic.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-ThinItalic.woff?v=3.12") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 200;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-ExtraLight.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-ExtraLight.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-ExtraLight.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-ExtraLight.woff?v=3.12") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 200;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-ExtraLightItalic.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-ExtraLightItalic.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-ExtraLightItalic.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-ExtraLightItalic.woff?v=3.12") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 300;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-Light.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-Light.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-Light.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-Light.woff?v=3.12") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 300;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-LightItalic.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-LightItalic.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-LightItalic.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-LightItalic.woff?v=3.12") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 400;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-Regular.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-Regular.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-Regular.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-Regular.woff?v=3.12") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 400;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-Italic.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-Italic.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-Italic.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-Italic.woff?v=3.12") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 500;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-Medium.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-Medium.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-Medium.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-Medium.woff?v=3.12") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 500;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-MediumItalic.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-MediumItalic.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-MediumItalic.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-MediumItalic.woff?v=3.12") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 600;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-SemiBold.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-SemiBold.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-SemiBold.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-SemiBold.woff?v=3.12") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 600;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-SemiBoldItalic.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-SemiBoldItalic.woff?v=3.12") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 700;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-Bold.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-Bold.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-Bold.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-Bold.woff?v=3.12") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 700;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-BoldItalic.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-BoldItalic.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-BoldItalic.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-BoldItalic.woff?v=3.12") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 800;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-ExtraBold.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-ExtraBold.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-ExtraBold.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-ExtraBold.woff?v=3.12") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 800;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 900;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-Black.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-Black.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-Black.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-Black.woff?v=3.12") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 900;
   font-display: swap;
-  src: url("/fonts/live-deck-theme/Inter-BlackItalic.woff2?v=3.12") format("woff2"),
-       url("/fonts/live-deck-theme/Inter-BlackItalic.woff?v=3.12") format("woff");
+  src: url("../static/fonts/live-deck-theme/Inter-BlackItalic.woff2?v=3.12") format("woff2"),
+       url("../static/fonts/live-deck-theme/Inter-BlackItalic.woff?v=3.12") format("woff");
 }
 
 @font-face {
@@ -157,21 +157,21 @@
   font-display: swap;
   font-style: normal;
   font-named-instance: 'Regular';
-  src: url("/fonts/live-deck-theme/Inter-roman.var.woff2?v=3.12") format("woff2");
+  src: url("../static/fonts/live-deck-theme/Inter-roman.var.woff2?v=3.12") format("woff2");
 }
 @font-face {
   font-family: 'Inter var';
   font-weight: 100 900;
   font-display: swap;
   font-style: italic;
   font-named-instance: 'Italic';
-  src: url("/fonts/live-deck-theme/Inter-italic.var.woff2?v=3.12") format("woff2");
+  src: url("../static/fonts/live-deck-theme/Inter-italic.var.woff2?v=3.12") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter var experimental';
   font-weight: 100 900;
   font-display: swap;
   font-style: oblique 0deg 10deg;
-  src: url("/fonts/live-deck-theme/Inter.var.woff2?v=3.12") format("woff2");
+  src: url("../static/fonts/live-deck-theme/Inter.var.woff2?v=3.12") format("woff2");
 }
diff --git a/assets/css/themes/live-deck-theme.scss b/assets/css/themes/live-deck-theme.scss
@@ -33,7 +33,7 @@ $full--color-gradient-2: linear-gradient(-45deg, $color-12, $color-12, $color-11
 $live-deck-main: 'Inter', sans-serif;
 
 body {
-  //background: url(/images/themes/live-deck-theme/wave-background.svg);
+  background: url(../static/images/themes/live-deck-theme/wave-background.svg);
   background-color: $color-2;
   color: $color-1;
   font-family: $live-deck-main;