From 6520cdbcf035ce5029555c299051dd7d53044d9e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 12 Mar 2026 21:38:48 +0100
Subject: [PATCH] feat: Add login to layouts

- Add articles
- Change order of articles
- Add id attributes like in components
- Add login example
---
 source/screens/demo/layouts.liquid | 109 ++++++++++++++++-------------
 source/style/demo.scss             |   1 +
 source/style/modules/_login.scss   |  28 ++++++++
 3 files changed, 91 insertions(+), 47 deletions(-)
 create mode 100644 source/style/modules/_login.scss

diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid
index 37da17e..958c545 100644
--- a/source/screens/demo/layouts.liquid
+++ b/source/screens/demo/layouts.liquid
@@ -15,7 +15,7 @@ order: 4
 		<p>Die Elemente werden fortlaufend komplexer</p>
 	</header>
 	<article>
-		<h2>Bereiche (sections)</h2>
+		<h2 id="sections">Bereiche (sections)</h2>
 		<h3>section</h3>
 		<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
 		<section class="overflow">
@@ -169,46 +169,9 @@ order: 4
 				</footer>
 			</div>
 		</div>
-
-		<h2>Interaktiv (interactive)</h2>
-		<h3>input</h3>
-		<div class="flex inline">
-			<input value="Undefiniert"/>
-			<input type="text" size="8" value="Text"/>
-			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
-			<input type="button" value="Auswählen">
-			<input type="submit" value="Senden" disabled="disabled"/>
-		</div>
-		<h3>form</h3>
-		<form method="get">
-			<p>Show me a
-				<select name="F">
-					<option value="0">Plain list</option>
-					<option value="1" selected="selected">Fancy list</option>
-					<option value="2">Table list</option>
-				</select>
-				Sorted by
-				<select name="C">
-					<option value="N" selected="selected">Name</option>
-					<option value="M">Date Modified</option>
-					<option value="S">Size</option>
-					<option value="D">Description</option>
-				</select>
-				<select name="O">
-					<option value="A" selected="selected">Ascending</option>
-					<option value="D">Descending</option>
-				</select>
-				<select name="V">
-					<option value="0" selected="selected">in Normal order</option>
-					<option value="1">in Version order</option>
-				</select>
-				Matching
-				<input type="text" name="P" value="*"/>
-				<input type="submit" name="X" value="Go"/>
-			</p>
-		</form>
-
-		<h2>Gruppierung (grouping)</h2>
+	</article>
+	<article>
+		<h2 id="grouping">Gruppierung (grouping)</h2>
 		<h3>p</h3>
 		<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
 		<p class="txt_right">Rechts</p>
@@ -248,8 +211,15 @@ order: 4
 			<p>Eingerückter Inhalt</p>
 			<hr/>
 		</div>
-
-		<h2>Tabellen</h2>
+	</article>
+	<article>
+		<h2>Eingebettet</h2>
+		<div class="demo__flag">
+			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		</div>
+	</article>
+	<article>
+		<h2 id="tabularData">Tabellen (tabular data)</h2>
 		<pre class="pre_code"><code>table.link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
 		<table class="link js_pop">
 			<thead>
@@ -290,12 +260,57 @@ order: 4
 			</tr>
 			</tbody>
 		</table>
-
-		<h2>Eingebettet</h2>
-		<div class="demo__flag">
-			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+	</article>
+	<article>
+		<h2 id="forms">Formulare (forms)</h2>
+		<h3>form</h3>
+		<form method="get">
+			<p>Show me a
+				<select name="F">
+					<option value="0">Plain list</option>
+					<option value="1" selected="selected">Fancy list</option>
+					<option value="2">Table list</option>
+				</select>
+				Sorted by
+				<select name="C">
+					<option value="N" selected="selected">Name</option>
+					<option value="M">Date Modified</option>
+					<option value="S">Size</option>
+					<option value="D">Description</option>
+				</select>
+				<select name="O">
+					<option value="A" selected="selected">Ascending</option>
+					<option value="D">Descending</option>
+				</select>
+				<select name="V">
+					<option value="0" selected="selected">in Normal order</option>
+					<option value="1">in Version order</option>
+				</select>
+				Matching
+				<input type="text" name="P" value="*"/>
+				<input type="submit" name="X" value="Go"/>
+			</p>
+		</form>
+		<hr class="hidden">
+		<form action="" name="login">
+			<div>
+				<p>Anmeldung</p>
+				<input placeholder="Benutzername" name="username" type="text" autocomplete="username">
+				<input placeholder="Passwort" name="password" type="password" autocomplete="current-password">
+			</div>
+		</form>
+		<h3>input</h3>
+		<div class="flex inline">
+			<input value="Undefiniert"/>
+			<input type="text" size="8" value="Text"/>
+			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
+			<input type="button" value="Auswählen">
+			<input type="submit" value="Senden" disabled="disabled"/>
 		</div>
 	</article>
+	<article>
+		<h2 id="interactive">Interaktiv (interactive)</h2>
+	</article>
 </section>
 {% endblock %}
 
diff --git a/source/style/demo.scss b/source/style/demo.scss
index 43d9cbd..85090ad 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -16,4 +16,5 @@
 @use "modules/start";
 @use "modules/clock";
 @use "modules/game";
+@use "modules/login";
 // @use "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/modules/_login.scss b/source/style/modules/_login.scss
new file mode 100644
index 0000000..3382d86
--- /dev/null
+++ b/source/style/modules/_login.scss
@@ -0,0 +1,28 @@
+@use "sass:color";
+@use "../hippie-style/hippie";
+
+form[name="login"] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	& > div {
+		padding: hippie.$space_double;
+		background-color: color.adjust(hippie.basic_color(echo), $alpha: -0.4);
+
+		p {
+			margin-top: 0;
+			color: hippie.$color_brightest;
+		}
+
+		& > input {
+			display: block;
+			width: 100%;
+			margin-inline: 0;
+		}
+
+		input:first-of-type {
+			margin-bottom: hippie.$space_basic;
+		}
+	}
+}
\ No newline at end of file