feat: Add login to layouts
- Add articles - Change order of articles - Add id attributes like in components - Add login example
This commit is contained in:
parent
a5bf80cb91
commit
6520cdbcf0
3 changed files with 91 additions and 47 deletions
|
|
@ -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{&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,11 +260,56 @@ 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 %}
|
||||
|
|
|
|||
|
|
@ -16,4 +16,5 @@
|
|||
@use "modules/start";
|
||||
@use "modules/clock";
|
||||
@use "modules/game";
|
||||
@use "modules/login";
|
||||
// @use "modules/YOUR-MODULE/YOUR-FILES";
|
||||
|
|
|
|||
28
source/style/modules/_login.scss
Normal file
28
source/style/modules/_login.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue