interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +64 -25
4 changed files with 64 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6e722cd907 - Show all commits

2
source/screens/demo/examples/ui/index.njk
View file

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

76
source/screens/demo/examples/ui/settings.njk
View file

@ -25,12 +25,14 @@ tags:
{% block body %} {% block body %}
<div id="frame"> <div id="frame">
<header class="io"> <header class="io">
<button title="menu">
<i class="bi bi-three-dots"></i>
</button>
<span class="span_solo">title-bar</span>
<nav> <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"> <button title="minimize">
<i class="bi bi-dash"></i> <i class="bi bi-dash"></i>
</button> </button>
@ -44,19 +46,29 @@ tags:
</header> </header>
<main class="io"> <main class="io">
<aside class="io"> <aside class="io">
options
<nav> <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> </ul>
<hr> </nav>
<hr>
<nav>
<ul> <ul>
<li> <li>
<label for="">label</label> <label for="">label</label>
</li> <input type="text">
<li>
<button>button</button>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -64,10 +76,35 @@ tags:
<section> <section>
<header class="io"> <header class="io">
<nav> <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"> <button title="search">
<i class="bi bi-search"></i> <i class="bi bi-search"></i>
</button> </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"> <button title="cut">
<i class="bi bi-scissors"></i> <i class="bi bi-scissors"></i>
</button> </button>
@ -77,6 +114,10 @@ tags:
<button title="paste"> <button title="paste">
<i class="bi bi-clipboard-check-fill"></i> <i class="bi bi-clipboard-check-fill"></i>
</button> </button>
<div class="spacer b"></div>
<button title="delete">
<i class="bi bi-trash"></i>
</button>
</nav> </nav>
<hr class="vertical"> <hr class="vertical">
<nav> <nav>
@ -92,14 +133,15 @@ tags:
</button> </button>
</li> </li>
</ul> </ul>
<span>options-bar</span>
</nav> </nav>
<span class="span_solo">section-bar</span> <nav></nav>
</header> </header>
section</section> section</section>
</main> </main>
<footer class="io"> <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> <button>action</button>
</footer> </footer>
</div> </div>

2
source/style/hippie-style

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

9
source/style/modules/ui/_settings_module.scss
View file

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