feat: Restructure settings

- New styles
- New content

source/screens/demo/examples/ui/index.njk

@@ -25,7 +25,7 @@ tags:
 {% block body %}
 	<div class="sec_main_center">
 		<nav role="doc-toc">
-			<h1>Inhaltsverzeichnis</h1>
+			<h1>{{ title }}</h1>
 			<ul class="list_link">
 				{%- for ui in collections.ui -%}
 					<li>

source/screens/demo/examples/ui/settings.njk

@@ -25,12 +25,14 @@ tags:
 {% block body %}
 	<div id="frame">
 		<header class="io">
-			<button title="menu">
-				<i class="bi bi-three-dots"></i>
-			</button>
-			<span class="span_solo">title-bar</span>
 			<nav>
-				<div class="spacer-a"></div>
+				<button title="menu">
+					<i class="bi bi-three-dots"></i>
+				</button>
+				<span>title-bar</span>
+			</nav>
+			<nav>
+				<div class="spacer a"></div>
 				<button title="minimize">
 					<i class="bi bi-dash"></i>
 				</button>
@@ -44,19 +46,29 @@ tags:
 		</header>
 		<main class="io">
 			<aside class="io">
-				options
 				<nav>
-					<ul>
+					<div>location-pane</div>
-						<li>setting</li>
+					<ul class="vertical">
-						<li>text</li>
+						<li>
+							<a class="a_button" href="">
+								<span>Start/Home</span>
+								<i class="bi bi-pin-fill"></i>
+							</a>
+						</li>
+						<li>
+							<a class="a_button" href="">
+								<span>System</span>
+								<i class="bi bi-pin-fill"></i>
+							</a>
+						</li>
 					</ul>
-					<hr>
+				</nav>
+				<hr>
+				<nav>
 					<ul>
 						<li>
 							<label for="">label</label>
-						</li>
+							<input type="text">
-						<li>
-							<button>button</button>
 						</li>
 					</ul>
 				</nav>
@@ -64,10 +76,35 @@ tags:
 			<section>
 				<header class="io">
 					<nav>
+						<button title="back">
+							<i class="bi bi-caret-left"></i>
+						</button>
+						<button title="up">
+							<i class="bi bi-caret-up"></i>
+						</button>
+						<button title="forward">
+							<i class="bi bi-caret-right"></i>
+						</button>
+						<button title="reload">
+							<i class="bi bi-arrow-clockwise"></i>
+						</button>
+						<input type="text">
+					</nav>
+					<nav>
+						<span>location-bar</span>
+						<hr class="vertical">
 						<button title="search">
 							<i class="bi bi-search"></i>
 						</button>
-						<div class="spacer-b"></div>
+						<input type="text">
+					</nav>
+				</header>
+				<header class="io">
+					<nav>
+						<button title="add">
+							<i class="bi bi-plus-circle"></i>
+						</button>
+						<div class="spacer a"></div>
 						<button title="cut">
 							<i class="bi bi-scissors"></i>
 						</button>
@@ -77,6 +114,10 @@ tags:
 						<button title="paste">
 							<i class="bi bi-clipboard-check-fill"></i>
 						</button>
+						<div class="spacer b"></div>
+						<button title="delete">
+							<i class="bi bi-trash"></i>
+						</button>
 					</nav>
 					<hr class="vertical">
 					<nav>
@@ -92,14 +133,15 @@ tags:
 								</button>
 							</li>
 						</ul>
+						<span>options-bar</span>
 					</nav>
-					<span class="span_solo">section-bar</span>
+					<nav></nav>
 				</header>
 				section</section>
 		</main>
 		<footer class="io">
-			<span class="span_solo">state</span>
+			<span>state</span>
-			<div class="spacer-a"></div>
+			<div class="spacer a"></div>
 			<button>action</button>
 		</footer>
 	</div>

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit b7ec209761cac635ba8312dbb07bf831ebc32933
+Subproject commit 3d23ba55d4c1c300d49cf91868cf65bb8307b5a6

source/style/modules/ui/_settings_module.scss

@@ -1,9 +1,6 @@
 @mixin nav-spacer($name, $size, $orientation) {
-	.spacer-#{$name} {
+	.spacer.#{$name} {
 		width: $size;
-		margin: 0;
-		border: $border_dotted;
-		opacity: .25;
 	}
 }
 
@@ -35,7 +32,7 @@
 		flex: 1;
 
 		aside {
-			background-color: $color_brighter;
+			background-color: rgba(255, 255, 255, .1);
 		}
 
 		section {
@@ -46,9 +43,9 @@
 
 .io {
 	.spacer {
-		width: $space_double;
 		margin: 0;
 		border: $border_dotted;
+		padding: 0;
 		opacity: .25;
 	}