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 +63 -75
4 changed files with 63 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 0c37acf47f - Show all commits

3
source/screens/demo/examples/ui/cli.njk
View file

@ -4,7 +4,7 @@ tags:
- ui
---
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_frame" %}
{% set bodyClass = "body_cli" %}
{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_io.njk" as io %}
@ -23,7 +23,6 @@ tags:
{% endblock %}
{% block body %}
{{ io.frameHeader('title-bar') }}
<div id="cli">
<div id="history">
<pre>Previous prompt</pre>

36
source/screens/demo/examples/ui/new.njk
View file

@ -23,25 +23,23 @@ tags:
{% block body %}
{{ header.status(hippie, new) }}
<div id="frame">
<header class="area menu io">
<nav>
<ul>
<li>
<a href="" class="a_button">Func 1</a>
</li>
<li>
<a href="" class="a_button">Func 2</a>
</li>
</ul>
</nav>
</header>
<div class="area grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<header class="area menu io">
<nav>
<ul>
<li>
<a href="" class="a_button">Func 1</a>
</li>
<li>
<a href="" class="a_button">Func 2</a>
</li>
</ul>
</nav>
</header>
<div class="area grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
{% endblock %}

75
source/style/modules/ui/_frame_module.scss
View file

@ -4,41 +4,8 @@
}
}
#cli {
@extend %flex-column;
background-color: black;
#line {
@extend %flex-row;
}
#prompt {
flex: 1;
}
pre {
margin: .5em 0;
color: white;
}
textarea {
resize: none;
max-height: 128px;
margin: $margin_io;
border: 0;
padding: $space_half;
// color: $color_text_io;
color: white;
// background-color: $color_back_io;
background-color: transparent;
line-height: 1.2;
}
}
.body_frame {
@extend %flex-column;
@extend .body_ui;
background-color: $color_back_basic;
@ -88,6 +55,46 @@
}
}
.body_cli {
@extend .body_frame;
background-color: black;
}
#cli {
@extend %flex-column;
background-color: black;
#line {
@extend %flex-row;
}
#prompt {
flex: 1;
}
pre {
margin: .5em 0;
color: white;
}
textarea {
resize: none;
max-height: 128px;
margin: $margin_io;
border: 0;
padding: $space_half;
// color: $color_text_io;
color: white;
// background-color: $color_back_io;
background-color: transparent;
line-height: 1.2;
}
}
#content {
background-color: $color_back_io;
@ -112,6 +119,8 @@
}
}
.io {
.spacer {
margin: 0;

24
source/style/modules/ui/_new_module.scss
View file

@ -2,23 +2,11 @@ $module_top_height: 32px;
$body_top_space: $module_top_height + $space_basic;
.body_new {
@extend .body_ui;
@extend %flex-column;
padding: $body_top_space $space_basic $space_basic;
}
#frame {
display: grid;
height: 100%;
// margin: $space_basic;
// grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr;
gap: $space_basic;
}
.area {
width: 100%;
height: 100%;
transition: $transition_best;
&:hover {
@ -26,15 +14,9 @@ $body_top_space: $module_top_height + $space_basic;
}
}
.menu,
#top {
nav ul {
margin: 0;
}
}
.grid {
display: grid;
flex: 1;
// grid-template-rows: repeat(2, 1fr);
// grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a a";
@ -92,7 +74,7 @@ $body_top_space: $module_top_height + $space_basic;
nav ul {
display: flex;
margin-left: 16px;
margin: 0 0 0 16px;
}
.brand {