Commit progress on stage 1

_sass/color_schemes/endorphin.scss

@@ -0,0 +1,25 @@
+@import "./color_schemes/light";
+
+$content-width: 1040px;
+
+$blue-000: #419cba;
+$blue-100: #52c5eb;
+$blue-200: #6ea5b8;
+$blue-300: #6884a1;
+$blue-400: #3f4954;
+$green-100: #42bbbb;
+$red-100: #eb6a8c;
+$red-200: #ed493b;
+
+// $body-background-color: $grey-dk-300;
+$body-heading-color: $blue-300;
+$link-color: $blue-000;
+// $nav-child-link-color: $color-5;
+// $sidebar-color: $grey-dk-300;
+// $base-button-color: $color-7;
+// $btn-primary-color: $blue-200;
+// $feedback-color: darken($sidebar-color, 3%);
+// $table-background-color: $grey-dk-250;
+// $search-background-color: $grey-dk-250;
+// $search-result-preview-color: $grey-dk-000;
+// $border-color: $grey-dk-200;

_sass/custom/custom.scss

@@ -0,0 +1,126 @@
+.btn-outline {
+  color: $green-100;
+  box-shadow: inset 0 0 0 2px $green-100;
+
+  &:hover,
+  &:active,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    color: darken($green-100, 4%);
+    box-shadow: inset 0 0 0 3px darken($green-100, 4%);
+  }
+
+  &:focus {
+    box-shadow: inset 0 0 0 2px darken($green-100, 4%);
+  }
+
+  &:focus:hover,
+  &.selected:focus {
+    box-shadow: inset 0 0 0 2px darken($green-100, 4%);
+  }
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+// Borrowed from Tailwind. 1_2 = 1/2
+.w-0 { width: 0px; }
+.w-1 { width: 0.25rem; }
+.w-2 { width: 0.5rem; }
+.w-3 { width: 0.75rem; }
+.w-4 { width: 1rem; }
+.w-5 { width: 1.25rem; }
+.w-6 { width: 1.5rem; }
+.w-7 { width: 1.75rem; }
+.w-8 { width: 2rem; }
+.w-9 { width: 2.25rem; }
+.w-10 { width: 2.5rem; }
+.w-11 { width: 2.75rem; }
+.w-12 { width: 3rem; }
+.w-14 { width: 3.5rem; }
+.w-16 { width: 4rem; }
+.w-20 { width: 5rem; }
+.w-24 { width: 6rem; }
+.w-28 { width: 7rem; }
+.w-32 { width: 8rem; }
+.w-36 { width: 9rem; }
+.w-40 { width: 10rem; }
+.w-44 { width: 11rem; }
+.w-48 { width: 12rem; }
+.w-52 { width: 13rem; }
+.w-56 { width: 14rem; }
+.w-60 { width: 15rem; }
+.w-64 { width: 16rem; }
+.w-72 { width: 18rem; }
+.w-80 { width: 20rem; }
+.w-96 { width: 24rem; }
+.w-px { width: 1px; }
+.w-1_2 { width: 50%; }
+.w-1_3 { width: 33.333333%; }
+.w-2_3 { width: 66.666667%; }
+.w-1_4 { width: 25%; }
+.w-2_4 { width: 50%; }
+.w-3_4 { width: 75%; }
+.w-1_5 { width: 20%; }
+.w-2_5 { width: 40%; }
+.w-3_5 { width: 60%; }
+.w-4_5 { width: 80%; }
+.w-1_6 { width: 16.666667%; }
+.w-2_6 { width: 33.333333%; }
+.w-3_6 { width: 50%; }
+.w-4_6 { width: 66.666667%; }
+.w-5_6 { width: 83.333333%; }
+.w-1_12 { width: 8.333333%; }
+.w-2_12 { width: 16.666667%; }
+.w-3_12 { width: 25%; }
+.w-4_12 { width: 33.333333%; }
+.w-5_12 { width: 41.666667%; }
+.w-6_12 { width: 50%; }
+.w-7_12 { width: 58.333333%; }
+.w-8_12 { width: 66.666667%; }
+.w-9_12 { width: 75%; }
+.w-10_12 { width: 83.333333%; }
+.w-11_12 { width: 91.666667%; }
+.w-full { width: 100%; }
+.w-screen { width: 100vw; }
+.w-min { width: min-content; }
+.w-max { width: max-content; }
+.w-fit { width: fit-content; }
+
+.h-0 { height: 0px; }
+.h-1 { height: 0.25rem; }
+.h-2 { height: 0.5rem; }
+.h-3 { height: 0.75rem; }
+.h-4 { height: 1rem; }
+.h-5 { height: 1.25rem; }
+.h-6 { height: 1.5rem; }
+.h-7 { height: 1.75rem; }
+.h-8 { height: 2rem; }
+.h-9 { height: 2.25rem; }
+.h-10 { height: 2.5rem; }
+.h-11 { height: 2.75rem; }
+.h-12 { height: 3rem; }
+.h-14 { height: 3.5rem; }
+.h-16 { height: 4rem; }
+.h-20 { height: 5rem; }
+.h-24 { height: 6rem; }
+.h-28 { height: 7rem; }
+.h-32 { height: 8rem; }
+.h-36 { height: 9rem; }
+.h-40 { height: 10rem; }
+.h-44 { height: 11rem; }
+.h-48 { height: 12rem; }
+.h-52 { height: 13rem; }
+.h-56 { height: 14rem; }
+.h-60 { height: 15rem; }
+.h-64 { height: 16rem; }
+.h-72 { height: 18rem; }
+.h-80 { height: 20rem; }
+.h-96 { height: 24rem; }
+.h-px { height: 1px; }
+
+.clear-left { clear: left; }
+.clear-right { clear: right; }
+.clear-both { clear: both; }
+.clear-none { clear: none; }