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

@@ -14,6 +14,9 @@ tags:
 
 {% block links %}
 	{{ super() }}
+	<link 
+		href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
+		rel="stylesheet">
 	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}
 
@@ -22,28 +25,91 @@ tags:
 {% endblock %}
 
 {% block body %}
-<div id="frame" class="frame-flex">
+	<div id="frame" class="frame-flex">
-  <div class="title-bar">
+		<header class="io">
-    <div>title-bar<button class="button_io">menu</button class="button_io"><button class="button_io">search</button class="button_io"></div>
+			<button title="menu">
-    <div><button class="button_io">minimize</button class="button_io"><button class="button_io">maximize</button class="button_io"><button class="button_io">close</button class="button_io"></div>
+				<i class="bi bi-three-dots"></i>
-  </div>
+			</button>
-  <main>
+			<span class="span_solo">title-bar</span>
-    <aside class="left">aside
+			<nav>
+				<div class="spacer-a"></div>
+				<button title="minimize">
+					<i class="bi bi-dash"></i>
+				</button>
+				<button title="maximize">
+					<i class="bi bi-fullscreen"></i>
+				</button>
+				<button title="close">
+					<i class="bi bi-x-square"></i>
+				</button>
+			</nav>
+		</header>
+		<main class="io">
+			<aside class="io left">
+				options
 				<nav>
 					<ul>
 						<li>setting</li>
-        <li>setting</li>
+						<li>text</li>
+					</ul>
+					<hr>
+					<ul>
+						<li>
+							<label for="">label</label>
+						</li>
+						<li>
+							<button>button</button>
+						</li>
 					</ul>
 				</nav>
 			</aside>
-    <section class="bside">section</section>
+			<section class="bside">
+				<header class="io">
+					<nav>
+						<button title="search">
+							<i class="bi bi-search"></i>
+						</button>
+						<div class="spacer-b"></div>
+						<button title="cut">
+							<i class="bi bi-scissors"></i>
+						</button>
+						<button title="copy">
+							<i class="bi bi-copy"></i>
+						</button>
+						<button title="paste">
+							<i class="bi bi-clipboard-check-fill"></i>
+						</button>
+					</nav>
+					<hr class="vertical">
+					{# // FIXME: Navigationsstile sind chaotisch #}
+					<nav>
+						<ul>
+							<li>
+								<button title="collapse">
+									<i class="bi bi-arrows-collapse"></i>
+								</button>
+							</li>
+							<li>
+								<button title="expand">
+									<i class="bi bi-arrows-expand-vertical"></i>
+								</button>
+							</li>
+						</ul>
+					</nav>
+					<span class="span_solo">section-bar</span>
+				</header>
+				section</section>
 		</main>
-</div>
+		<footer class="io">
+			<span class="span_solo">state</span>
+			<div class="spacer-a"></div>
+			<button>action</button>
+		</footer>
+	</div>
 {% endblock %}
 
 {%- block script %}
 	{{ super() }}
 	<script src="{{ pageBase }}js/app.js"></script>
-  <script>
+	<script></script>
-  </script>
 {% endblock %}

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 {
+	header,
-		button {
+	aside,
-			margin: 0 2px;
+	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);
+}