feat: New settings

- Add dependency to bootstrap icons
- Add example content
- Restructure layout
- Now more usage of base hippie styles

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 1a3c25d8b5969b53ec0404c8e77fe6322d083042
+Subproject commit 2f63dbe2b65ddb320c0a7ea186f04a9c3698c9e7

source/style/modules/ui/_settings_module.scss

@@ -1,12 +1,24 @@
+@mixin nav-spacer($name, $size, $orientation) {
+	.spacer-#{$name} {
+		width: $size;
+		margin: 0;
+		border: $border_dotted;
+		opacity: .25;
+	}
+}
+
 #frame {
 	position: relative;
 	height: 100%;
-	background-color: $color-dark;
 
-	.title-bar {
-		button {
-			margin: 0 2px;
-		}
+	header,
+	aside,
+	footer {
+		border: 1px solid transparent;
+	}
+
+	&>header {
+		background-color: rgba(0, 0, 0, .1);
 	}
 
 	main {
@@ -19,20 +31,26 @@
 .frame-flex {
 	display: flex;
 	flex-direction: column;
+	gap: $space_basic;
 
-	.title-bar {
-		display: flex;
-
-		div:last-child {
-			margin-left: auto;
-		}
-	}
-	
 	main {
 		flex: 1;
 
-		aside, section {
+		aside,
+		section {
 			height: 100%;
 		}
 	}
+}
+
+.io {
+	.spacer {
+		width: $space_double;
+		margin: 0;
+		border: $border_dotted;
+		opacity: .25;
+	}
+
+	@include nav-spacer('a', $space_double, false);
+	@include nav-spacer('b', $space_small, false);
 }