separate header from App and add base styling

src/assets/scss/abstracts/_variables.scss

@@ -81,7 +81,7 @@ $font-family-sans-serif: 'Noto Sans';
 $font-family-text: 'Redaction'; // custom
 
 $font-size-base: 1rem;
-$font-size-sm: $font-size-base * .78125;
+$font-size-sm: $font-size-base * .9;
 
 $line-height-base: 1.5;
 $line-height-lg: $line-height-base;
@@ -119,9 +119,17 @@ $card-border-width: 0;
 // SPINNER
 $spinner-width: 50px;
 
-// CUSTOM
-$btn-size: 26px;
 
+// ╭─╴╷ ╷╭─╴╶┬╴╭─╮╭╮╮
+// │  │ │╰─╮ │ │ ││││
+// ╰─╴╰─╯╶─╯ ╵ ╰─╯╵╵╵
+
+// HEADER
+$header-spacer-sm: 18px;
+$header-spacer: 35px;
+$header-height: 86px;
+
+// NODEVIEW
 $node-view-spacer-sm-x: 18px;
 $node-view-spacer-sm-y: 18px;
 $node-view-spacer-x: 30px;
@@ -134,6 +142,8 @@ $node-card-spacer-y: 10px;
 $node-card-width: 560px;
 $node-card-height: 330px;
 
+// MISC
+$btn-size: 26px;
 $line: $border-width solid $black;
 
 @import '~bootstrap/scss/variables';

src/assets/scss/app.scss

@@ -4,6 +4,7 @@
 
 @import 'base/root';
 
+@import 'base/bootstrap-overrides';
 @import 'classes/misc';
 @import 'classes/nav-list';
 

src/assets/scss/base/_bootstrap-overrides.scss

@@ -0,0 +1,24 @@
+legend {
+  font-weight: $font-weight-bold;
+}
+
+.dropdown-menu {
+  border: 0;
+  padding: 0;
+  margin-left: -#{$header-spacer-sm};
+  margin-top: 5px;
+
+  .dropdown-item {
+    font-size: $font-size-sm;
+    padding: .25rem $header-spacer-sm;
+  }
+
+  @include media-breakpoint-up(sm) {
+    margin-left: -#{$header-spacer};
+
+    .dropdown-item {
+      font-size: $font-size-base;
+      padding: .25rem $header-spacer;
+    }
+  }
+}