From fa79e230da629c3b99b808723dcb31f06a64fa6b Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Wed, 8 Sep 2021 22:45:47 +0200
Subject: [PATCH] Minor improvement

---
 app/client/src/scss/_variables.scss | 39 +++++++++++++----------------
 app/client/src/scss/app.scss        |  3 ++-
 package.json                        |  1 +
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/app/client/src/scss/_variables.scss b/app/client/src/scss/_variables.scss
index ea367a2..0ebb570 100644
--- a/app/client/src/scss/_variables.scss
+++ b/app/client/src/scss/_variables.scss
@@ -1,12 +1,15 @@
+//
+// !!! IMPORTANT !!
+// First Define Bootstrap and Webkit bootstrap UI variables
+//
+
+$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-base: "Roboto", $font-family-sans-serif;
 $white: #fff;
 $black: #000;
-
 $body-bg: #fff;
 $body-color: #212529;
 
-// site specific variables
-
-// bootstrap settings
 // screen size - 32px (ex. 1400 - 32 = 1368)
 $grid-breakpoints: (
   xs: 0,
@@ -15,17 +18,15 @@ $grid-breakpoints: (
   lg: 992px,
   xl: 1168px,
 );
-// screen size - (32px * 2) (ex. 1400 - 64 = 1336)
+// container size - (32px * 2) (ex. 1400 - 64 = 1336)
 $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
   xl: 1136px,
 );
-
 $enable-gradients: false;
 $enable-shadows: false;
-
 $body-header-bg: $body-bg;
 $body-header-color: $body-color;
 $body-header-link: $body-color;
@@ -33,54 +34,48 @@ $body-main-nav-link-color: $body-color;
 $body-main-nav-link-hover-color: $body-color;
 $body-main-nav-dropdown-hover-bg: $body-color;
 $body-footer-footer-bg: $body-bg;
-
 $font-family-base: "Roboto";
 //
 
 $full-body-min-width: map-get($grid-breakpoints, "lg");
 $typography-breakpoint: map-get($grid-breakpoints, "sm") - 1;
-
 $header-bg: var(--header-bg);
 $header-color: var(--header-color);
 $header-link: var(--header-link);
-
 $main-nav-link-color: var(--main-nav-link-color);
 $main-nav-link-bg: none;
-
 $main-nav-toggler-size: 2rem;
-
 $main-nav-link-hover-bg: none;
 $main-nav-link-hover-color: var(--main-nav-link-hover-color);
-
 $main-nav-dropdown-bg: $header-bg;
 $main-nav-dropdown-color: $header-link;
 $main-nav-dropdown-hover-bg: var(--main-nav-dropdown-hover-bg);
 $main-nav-dropdown-hover-color: $main-nav-link-hover-color;
-
 $footer-bg: $header-bg;
 $footer-color: $header-color;
 $footer-link: $header-link;
-
 $footer-footer-bg: var(--footer-footer-bg);
-
 $sliderelement-carousel-slide-max-y: none;
 $sliderelement-carousel-slide-bg: $header-bg;
 $sliderelement-carousel-slide-ratio-x: 16;
 $sliderelement-carousel-slide-ratio-y: 9;
-
 $carousel-title-color: $white;
 $carousel-slide-min-height: 4rem;
 $carousel-text-shadow: 1px 1px $black;
 $carousel-controls-font-size: 3rem;
 $carousel-controls-zindex: 11;
 $carousel-controls-shadow: 1px 1px $black;
-$carousel-controls-hover-bg: transparentize($black, 0.4);
+$carousel-controls-hover-bg: transparentize($black, .4);
 $carousel-slide-img-loading-max-height: 70vh;
 
 // disable large screen sizing by default
 $extra-large-screen: 80000px;
-@import "~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/variables";
-
-$headings-margin-bottom: $spacer;
 $headings-line-height: 1.2;
-$font-family-base: "Roboto", $font-family-sans-serif;
+
+@import "~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/variables";
+$headings-margin-bottom: $spacer;
+
+//
+// !!! IMPORTANT !!
+// Next Define your project variables
+//
diff --git a/app/client/src/scss/app.scss b/app/client/src/scss/app.scss
index a98a736..046850f 100644
--- a/app/client/src/scss/app.scss
+++ b/app/client/src/scss/app.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 @import "~@a2nt/meta-lightbox-js/src/scss/app";
 @import "~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/libs/bootstrap";
 @import "~bootstrap/scss/card";
@@ -6,7 +8,6 @@
 @import "~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/libs/silverstripe";
 
 // Your custom styling
-@import "variables";
 @import "typography";
 @import "layout";
 @import "elements";
diff --git a/package.json b/package.json
index 3eabeaa..120a158 100755
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "@wry/trie": "^0.3.1",
     "animate.css": "^4.1.1",
     "ansi-html": "^0.0.7",
+    "ansi-html-community": "^0.0.8",
     "ansi-regex": "^6.0.0",
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",