commit d0bfe6c1454cfb337e562321bc71b7f3d4d8534a
Author: Leo <contact@leonguyen.com>
Date:   Mon Oct 18 22:57:11 2021 -0500

    Initial commit.

diff --git a/scss/_variables.scss b/scss/_variables.scss
new file mode 100644
index 0000000..60e5e17
--- /dev/null
+++ b/scss/_variables.scss
@@ -0,0 +1,96 @@
+// Color system
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #da0000 !default; // Customized
+$orange:  hsla(30, 100%, 50%, 1) !default; // The Gold color from God
+$green:   hsl(134, 87%, 30%) !default; // Customized
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+
+$primary: $purple;
+$info:    $blue;
+$warning: $orange;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$primary-50: #f1e8ff;
+$secondary-50: #e9eff2;
+$success-50: #d9ffe1;
+$info-50: hsl(215, 100%, 97%);
+$warning-50: hsl(50, 100%, 96%);
+$danger-50: hsl(350, 100%, 96%);
+
+// Custom schematic colors
+// TODO: Remove this section
+$primary-lighter: #af83ff;
+$primary-lightest: #f1e8ff;
+$secondary-lighter: #e3e6e8;
+$secondary-lightest: #e9eff2;
+$success-lighter: #42ad5b;
+$success-lightest: #d9ffe1;
+$info-lighter: #67a3fb;
+$info-lightest: hsla(215, 100%, 97%, 1);
+$warning-lighter: #ffb972;
+$warning-lightest: hsla(50, 100%, 96%, 1);
+$danger-lighter: #ff7991;
+$danger-lightest: hsl(350, 100%, 96%);
+
+// Options
+$enable-shadows: true;
+
+// Body
+$body-bg: hsl(260, 27%, 94%);
+
+// Links
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+// Typography
+$font-family-sans-serif: "Roboto", sans-serif !default;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
+
+$h1-font-size: $font-size-base * 1.6 !default;
+$h2-font-size: $font-size-base * 1.4 !default;
+$h3-font-size: $font-size-base * 1.3 !default;
+$h4-font-size: $font-size-base * 1.2 !default;
+$h5-font-size: $font-size-base * 1.1 !default;
+$h6-font-size: $font-size-base !default;
+$headings-font-weight: bold; // Make headings bold
+
+// Code
+$code-font-size: 100%;
+$code-color: $primary;
+
+// Forms
+$input-bg: $white;
+$input-transition: null;
+
+// Buttons
+$btn-box-shadow: null;
+$enable-gradients: true;
+$btn-transition: none;
+
+// Navs
+$nav-link-transition: none;
+
+// Navbar
+$navbar-dark-color: rgba($white, .8) !default;
+$navbar-dark-hover-color: $white!default;
+
+// Breadcrumb
+$breadcrumb-divider: quote(">");
diff --git a/scss/bootstrap/_buttons.scss b/scss/bootstrap/_buttons.scss
new file mode 100644
index 0000000..e8eace3
--- /dev/null
+++ b/scss/bootstrap/_buttons.scss
@@ -0,0 +1,184 @@
+// Default buttons
+.btn {
+  // Remove border
+  &-primary, &-secondary, &-success, &-info, &-warning, &-danger, &-light, &-dark {
+    // border-color: transparent;
+  }
+
+  // Tertiary
+  &-tertiary {
+    color: $gray-600;
+    background-color: $gray-200;
+
+    &:hover, &:active, &:focus {
+      color: $black;
+      background-color: $gray-300;
+      border-color: $gray-300;
+    }
+  }
+
+  &-success {
+    color: $white;
+
+    &:hover {
+      color: $white;
+      background-color: $green-600;
+    }
+  }
+
+  &-warning {
+    color: $white;
+
+    &:hover {
+      color: $white;
+      background-color: $orange-600;
+    }
+  }
+}
+
+// Outline buttons
+.btn-outline {
+  &-success:hover {
+    color: $white;
+  }
+
+  &-warning:hover {
+    color: $white;
+  }
+
+  // Tertiary
+  &-tertiary {
+    color: $gray-600;
+    border-color: $gray-400;
+
+    &:hover {
+      color: $black;
+      background-color: $gray-200;
+      border-color: $gray-200;
+    }
+  }
+}
+
+// Tender class
+.btn-tender {
+  &-primary {
+    color: $primary;
+    background-color: $primary-50;
+    border-color: $purple-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  &-secondary {
+    color: $gray-800;
+    background-color: $gray-200;
+    border-color: $gray-500;
+
+    &:hover {
+      color: #fff;
+      background-color: $secondary;
+      border-color: $secondary;
+    }
+  }
+
+  // Tertiary
+  &-tertiary {
+    color: $gray-700;
+    background-color: $gray-100;
+    border-color: $gray-400;
+
+    &:hover, &:active, &:focus {
+      color: $black;
+      background-color: $gray-200;
+      border-color: $gray-200;
+    }
+  }
+
+  &-success {
+    color: $success;
+    background-color: $success-50;
+    border-color: $green-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $success;
+      border-color: $success;
+    }
+  }
+
+  &-info {
+    color: $info;
+    background-color: $info-50;
+    border-color: $blue-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $info;
+      border-color: $info;
+    }
+  }
+
+  &-warning {
+    color: $warning;
+    background-color: $warning-50;
+    border-color: $orange-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $warning;
+      border-color: $warning;
+    }
+  }
+
+  &-danger {
+    color: $danger;
+    background-color: $danger-50;
+    border-color: $red-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $danger;
+      border-color: $danger;
+    }
+  }
+}
+
+// Phantom class
+.btn-phantom {
+  &-primary, &-secondary, &-success, &-info, &-warning, &-danger {
+    background-color: transparent;
+  }
+
+  &-primary:hover {
+    color: $primary;
+    background-color: $primary-50;
+  }
+  &-secondary:hover {
+    color: $black;
+    background-color: $secondary-50;
+  }
+  &-tertiary:hover {
+    color: $gray-600;
+    background-color: $gray-100;
+  }
+  &-success:hover {
+    color: $success;
+    background-color: $success-50;
+  }
+  &-info:hover {
+    color: $info;
+    background-color: $info-50;
+  }
+  &-warning:hover {
+    color: $warning;
+    background-color: $warning-50;
+  }
+  &-danger:hover {
+    color: $danger;
+    background-color: $danger-50;
+  }
+}
diff --git a/scss/bootstrap/_code.scss b/scss/bootstrap/_code.scss
new file mode 100644
index 0000000..eefa058
--- /dev/null
+++ b/scss/bootstrap/_code.scss
@@ -0,0 +1,5 @@
+code {
+  padding: 0.2rem 0.3rem;
+  background-color: $primary-lightest;
+  @include border-radius($border-radius-sm);
+}
diff --git a/scss/bootstrap/_form-control.scss b/scss/bootstrap/_form-control.scss
new file mode 100644
index 0000000..29b2407
--- /dev/null
+++ b/scss/bootstrap/_form-control.scss
@@ -0,0 +1,3 @@
+.form-control {
+  background-clip: inherit; // Remove weird border in input boxes
+}
diff --git a/scss/bootstrap/_nav.scss b/scss/bootstrap/_nav.scss
new file mode 100644
index 0000000..d4bd83e
--- /dev/null
+++ b/scss/bootstrap/_nav.scss
@@ -0,0 +1,19 @@
+// Beautiful nav tabs
+.nav-tabs {
+  margin-bottom: 1rem;
+}
+.nav-tabs .nav-link {
+  border: none;
+  color: #666;
+
+  &.active {
+    color: $primary;
+    background-color: transparent;
+    border: none;
+    border-bottom: 2px solid $primary;
+  }
+
+  &:hover, &:focus {
+    color: $primary;
+  }
+}
diff --git a/scss/bootstrap/_navbar.scss b/scss/bootstrap/_navbar.scss
new file mode 100644
index 0000000..9068053
--- /dev/null
+++ b/scss/bootstrap/_navbar.scss
@@ -0,0 +1,58 @@
+.navbar {
+  z-index: 1040;
+  background-image: none;
+
+  .nav-link {
+    white-space: nowrap;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  // Make dropdown menus auto drop
+  .dropdown {
+    .dropdown-menu {
+      // z-index: 10000;
+      display: none;
+      opacity: 0;
+      pointer-events: none;
+      // transition: all .15s linear;
+      // animation: disappear 0.15s linear;
+    }
+
+    &:hover {
+      .dropdown-menu {
+        pointer-events: auto;
+        display: block;
+        opacity: 1;
+        // transition: all .15s linear;
+        animation: appear 0.15s linear;
+      }
+    }
+
+    @keyframes appear {
+      0% {
+        display: block;
+        opacity: 0;
+      }
+      100% {
+        display: block;
+        opacity: 1;
+      }
+    }
+
+    /*@keyframes disappear {
+      0% {
+        opacity: 1;
+        display: block;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        display: none;
+        transform: scale(0);
+      }
+    }*/
+  }
+}
diff --git a/scss/elements/footer.scss b/scss/elements/footer.scss
new file mode 100644
index 0000000..2e143ba
--- /dev/null
+++ b/scss/elements/footer.scss
@@ -0,0 +1,27 @@
+#footer {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1.5rem;
+  color: $gray-500;
+  background-color: $gray-800;
+
+  h2 {
+    margin-top: 1rem;
+    margin-bottom: 0.75rem;
+    font-size: $font-size-base * 1.25;
+
+    &.small {
+      font-size: $font-size-base * 1.5;
+      font-variant: all-small-caps;
+    }
+  }
+
+  .nav-link {
+    color: $gray-500;
+    padding: 0.25rem 0;
+
+    &:hover {
+      color: $white;
+    }
+  }
+}
diff --git a/scss/elements/radio.scss b/scss/elements/radio.scss
new file mode 100644
index 0000000..fac069a
--- /dev/null
+++ b/scss/elements/radio.scss
@@ -0,0 +1,20 @@
+.essence-radio {
+  margin: 0.5rem 0;
+  padding-left: 0;
+
+  .form-check-input[type=radio] {
+    display: none;
+  }
+
+  label {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border: 1px solid $gray-300;
+    border-radius: 0.25rem;
+  }
+
+  .form-check-input[type=radio]:checked + label {
+    background-color: $primary-50;
+    border: 1px solid $primary;
+  }
+}
diff --git a/scss/elements/sidebar.scss b/scss/elements/sidebar.scss
new file mode 100644
index 0000000..5788c81
--- /dev/null
+++ b/scss/elements/sidebar.scss
@@ -0,0 +1,89 @@
+#wrapper {
+  display: flex;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+
+  min-height: 100vh;
+  width: 200px;
+  padding: 5px 10px;
+
+  background-color: $white;
+
+  transition: none;
+
+  &-brand {
+    margin: 10px;
+    font-size: 1.125rem;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &-header {
+    margin: 10px 10px 5px;
+    font-weight: bold;
+    color: $secondary;
+  }
+
+  &-link {
+    padding: 10px 10px;
+    border-radius: 5px;
+    color: $secondary;
+    text-decoration: none;
+
+    &:hover {
+      color: $primary;
+      background-color: $primary-lightest;
+      text-decoration: none;
+    }
+  }
+
+  &-btn-collapse {
+    margin-top: 10px;
+  }
+
+  .sidebar-collapsed-shown {
+    display: none;
+  }
+}
+
+.sidebar-collapsed {
+  width: 60px;
+  padding: 5px 5px;
+  overflow-y: overlay;
+
+  transition: width 0.25s;
+
+  .sidebar-brand {
+    text-align: center;
+
+    span {
+      display: none;
+    }
+  }
+
+  .sidebar-header {
+    display: none;
+  }
+
+  .sidebar-link {
+    padding: 10px 15px;
+
+    span {
+      display: none;
+    }
+  }
+
+  .sidebar-collapsed-hidden {
+    display: none;
+  }
+  .sidebar-collapsed-shown {
+    display: inline;
+  }
+}
diff --git a/scss/essence.scss b/scss/essence.scss
new file mode 100644
index 0000000..ccdf49e
--- /dev/null
+++ b/scss/essence.scss
@@ -0,0 +1,22 @@
+// Variables
+@import '~bootstrap/scss/functions';
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
+
+// Bootstrap components
+@import 'bootstrap/buttons';
+@import 'bootstrap/nav';
+@import 'bootstrap/navbar';
+
+@import 'bootstrap/code';
+@import 'bootstrap/form-control';
+
+// Vendor
+@import "vendors/prismjs";
+
+// Essence components
+@import 'elements/sidebar';
+@import 'elements/footer';
+@import 'elements/radio';
diff --git a/scss/vendors/prismjs.scss b/scss/vendors/prismjs.scss
new file mode 100644
index 0000000..97524db
--- /dev/null
+++ b/scss/vendors/prismjs.scss
@@ -0,0 +1,138 @@
+/**
+ * Prism Substance Theme, based on Material Theme.
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  padding: 0;
+  color: #fff;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: 8px;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2d3748;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+/* Purple (keywords) */
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #d9a9ff; // #cc99cd;
+}
+
+/* Yellow (classes, properties) */
+.token.entity,
+.token.name,
+.token.class-name,
+.token.class,
+.token.package,
+.token.scope,
+.token.attr-name {
+  color: #ffe484; // #FFCB6B;
+}
+
+/* Blue (functions) */
+.token.function-name,
+.token.boolean,
+.token.function {
+  color: #82AAFF;
+}
+
+/* Red (tags) */
+.token.tag,
+.token.namespace,
+.token.selector,
+.token.deleted {
+  color: #ff8383; // #F07178;
+}
+
+/* Green (strings, attribute values) */
+.token.string,
+.token.char,
+.token.property,
+.token.attr-value,
+.token.regex {
+  color: #b5f4a5; // #C3E88D;
+}
+
+/* Orange (numbers) */
+.token.number,
+.token.constant {
+  color: #F78C6C;
+}
+
+/* Cyan (signs) */
+.token.symbol,
+.token.punctuation,
+.token.operator,
+.token.url,
+.token.unit,
+.token.hexcode,
+.token.doctype-tag {
+  color: #89DDFF;
+}
+
+/* White (variables, CSS pseudo classes) */
+.token.variable,
+.token.pseudo-class {
+  color: #fff;
+}
+
+/* Gray (comments) */
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #99a3d0; // Palelight
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}