From 6098a1e62d2791e1c41e93cd3d855c80f12749f1 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 23:24:49 +0100
Subject: [PATCH] feat: Style and content for windows

---
 .../screens/demo/examples/ui/windows.liquid   | 31 +++++++++-
 source/style/modules/ui/_windows_module.scss  | 61 ++++++++++++++++++-
 2 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 9dc321b..daacb66 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -7,9 +7,34 @@ tags:
 {% layout "hippie/app.liquid" %}
 
 {% block body %}
-<nav id="task-bar">
-	<button data-action="start">Start</button>
-</nav>
+<div id="task-bar">
+	<nav>
+		<button data-action="start"><i class="bi bi-microsoft"></i></button>
+	</nav>
+	<nav>
+		<button><i class="bi bi-search"></i></button>
+		<button><i class="bi bi-layers-half"></i></button>
+	</nav>
+	<nav class="big">
+		<button><i class="bi bi-folder"></i></button>
+		<button><i class="bi bi-terminal"></i></button>
+	</nav>
+	<div>
+		<nav class="small">
+			<button><i class="bi bi-chevron-up"></i></button>
+			<button><i class="bi bi-steam"></i></button>
+			<button><i class="bi bi-router"></i></button>
+			<button><i class="bi bi-mic"></i></button>
+			<button><i class="bi bi-volume-down"></i></button>
+		</nav>
+		<nav class="clock">
+			<span>##:##<br>TT.MM.JJJJ</span>
+		</nav>
+		<nav>
+			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
+		</nav>
+	</div>
+</div>
 <div id="screen-space"></div>
 <div id="placeholder"></div>
 {% endblock %}
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
index 0f46b78..c7a9846 100644
--- a/source/style/modules/ui/_windows_module.scss
+++ b/source/style/modules/ui/_windows_module.scss
@@ -2,10 +2,21 @@
 
 @use "../../hippie-style/hippie";
 
-#task-bar {
-	@extend %flex-inline;
-	z-index: map.get(hippie.$z-indexes, "content-top");
+$padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
+
+%flex-bar {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
 	align-items: stretch;
+	align-content: center;
+	justify-content: flex-start;
+	gap: hippie.$space_half hippie.$space_basic;
+}
+
+#task-bar {
+	@extend %flex-bar;
+	z-index: map.get(hippie.$z-indexes, "content-top");
 	position: fixed;
 	//right: 0;
 	//bottom: 0;
@@ -14,10 +25,54 @@
 	padding: hippie.$space_basic;
 	background-color: rgba(0, 0, 0, .1);
 
+	nav,
+	& > div {
+		@extend %flex-bar;
+
+		&:last-child {
+			margin-left: auto;
+		}
+	}
+
 	button {
 		@extend .button_io;
 		overflow: hidden;
 	}
+
+	nav.small {
+		//font-size: .8em;
+
+		button {
+			border: none;
+			padding: $padding_half;
+
+			&:hover {
+				background-color: transparent;
+			}
+		}
+	}
+
+	nav.big {
+		font-size: 1.5em;
+
+		button {
+			border: none;
+			padding: 0;
+
+			&:hover {
+				background-color: transparent;
+			}
+		}
+	}
+
+	.clock {
+		text-align: end;
+
+		&,
+		& > * {
+			line-height: 1;
+		}
+	}
 }
 
 #screen-space {