From f28bed372cacc5e804dd3d079bdc38d8c7f89b47 Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 17 Feb 2026 20:33:44 +0100 Subject: [PATCH 1/8] feat: Optimize components screen - Fix typos - Format - Rework shift and capslock detection --- source/screens/demo/components.liquid | 124 +++++++++++--------------- 1 file changed, 50 insertions(+), 74 deletions(-) diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid index 75c6eeb..02a51ff 100644 --- a/source/screens/demo/components.liquid +++ b/source/screens/demo/components.liquid @@ -31,8 +31,12 @@ tags:

Übersicht aller Elemente

-

Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (html.spec.whatwg.org/multipage/#toc-semantics) verwendet.

-

Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.

+

Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in + Gruppen eingeteilt, die auch das W3Consortium (html.spec.whatwg.org/multipage/#toc-semantics) + verwendet.

+

Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax + dargestellt.

article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}
@@ -40,7 +44,8 @@ tags:

Elemente:

// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer

<body>

-

Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.

+

Keine speziellen Attribute. Bekommt üblicherweise allgemeine Klassen zur Steuerung der Abmessungen + zugewiesen.

<article>

Ein Artikel.

<section>

@@ -85,7 +90,7 @@ tags:

Innerhalb eines <header>.

<footer>

-

Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.

+

Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.

Fußbereich
{% render "hippie/partials/footer-pinned.liquid" %} @@ -167,12 +172,11 @@ tags:

Varianten

div.div_info>p
-

Absatz in Informationsbox.

+

Absatz in einer Box mit dem Typ Information.

div.box_space>div.box_cube>span
-
- Text
+
Text
div.box_placeholder+hr+div.box_placeholder_bkg
@@ -299,20 +303,24 @@ tags:
- - - - Caps Lock is ON. + + +
+ + CapsLock is on.

<select>

@@ -321,79 +329,47 @@ tags: {% block script %} {{ block.super -}} {% endblock %} \ No newline at end of file From 6c5bf2e54d25e0c1cd969eb12e13c89d0bdacf4a Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 17 Feb 2026 21:01:00 +0100 Subject: [PATCH 2/8] feat: Replace nunjucks with liquid for introduction screen --- source/screens/demo/introduction.liquid | 40 +++++++++++++++++++++ source/screens/demo/introduction.njk | 47 ------------------------- 2 files changed, 40 insertions(+), 47 deletions(-) create mode 100644 source/screens/demo/introduction.liquid delete mode 100644 source/screens/demo/introduction.njk diff --git a/source/screens/demo/introduction.liquid b/source/screens/demo/introduction.liquid new file mode 100644 index 0000000..af5cf07 --- /dev/null +++ b/source/screens/demo/introduction.liquid @@ -0,0 +1,40 @@ +--- +title: Introduction +tags: +- demoIndex +--- +{% layout "hippie/page.liquid" %} + +{% block title %}Einführung{% endblock %} + +{% block main %} +
+
+
+

Introduction to HIPPIE

+

Hippie interweaves preeminent personal interface elements.

+
+
+
+

…

+

Contact: +

+

More: , +

+
+
+{% endblock %} + +{% block script %} +{{ block.super -}} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk deleted file mode 100644 index f1a9752..0000000 --- a/source/screens/demo/introduction.njk +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Introduction -tags: - - demoIndex ---- -{% set pageBase = "../" %} -{% set pageId = "intro" %} - -{% extends "demo/_main.njk" %} - -{% block title %}Einführung{% endblock %} -{% block head %} - {{ super() }} -{% endblock %} - -{% block main %} - -
-
-
-

Introduction to HIPPIE

-

Hippie interweaves preeminent personal interface elements.

-
-
-
-

…

-

Contact: -

-

More: , -

-
-
-{% endblock %} - -{% block script %} - {{ super() }} - -{% endblock %} \ No newline at end of file From d04e0e31741b6c4e55f728a5f214ac3bf991d7e5 Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 17 Feb 2026 21:53:06 +0100 Subject: [PATCH 3/8] feat: Add content to table screen --- source/screens/demo/examples/ui/table.liquid | 22 +++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid index 5266b2a..23b84d0 100755 --- a/source/screens/demo/examples/ui/table.liquid +++ b/source/screens/demo/examples/ui/table.liquid @@ -43,7 +43,10 @@ tags: Number Name Description + Amount + Unit Price + Sum @@ -68,6 +71,15 @@ tags: + + + + + + - - +
@@ -56,11 +58,101 @@ tags: + + + + {% render 'hippie/partials/frame-mode.liquid' %} {% endblock %} @@ -233,7 +326,55 @@ tags: elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'}); } } - // TODO: Neuen index bilden + + reindexRows(tbodyPosition); + }); + + let draggedRow = null; + + tbodyPosition.addEventListener('dragstart', (event) => { + const rowTarget = event.target.closest('tr[draggable="true"]'); + + if (rowTarget) { + draggedRow = rowTarget; + rowTarget.classList.add('dragging'); + event.dataTransfer.effectAllowed = 'move'; + + console.debug('Drag', rowTarget); + } + }); + + tbodyPosition.addEventListener('dragend', () => { + if (draggedRow) { + draggedRow.classList.remove('dragging'); + draggedRow = null; + } + }); + + tbodyPosition.addEventListener('dragover', (event) => { + event.preventDefault(); + event.dataTransfer.dropEffect = 'move'; + + const rowTarget = event.target.closest('tr'); + + if (rowTarget && rowTarget !== draggedRow) { + const rows = [...tbodyPosition.querySelectorAll('tr')]; + const draggedIndex = rows.indexOf(draggedRow); + const targetIndex = rows.indexOf(rowTarget); + + if (draggedIndex < targetIndex) { + rowTarget.parentNode.insertBefore(draggedRow, rowTarget.nextSibling); + } else { + rowTarget.parentNode.insertBefore(draggedRow, rowTarget); + } + } + }); + + tbodyPosition.addEventListener('drop', (event) => { + event.preventDefault(); + reindexRows(event.currentTarget); + + console.debug('Drop'); }); function cloneRow(type = 'default') { @@ -244,5 +385,15 @@ tags: return document.importNode(rowFragment, true); } + + function reindexRows(parent, selector = 'tr') { + const rows = parent.querySelectorAll(selector); + let th = undefined; + + for (let i = 0; i < rows.length; i++) { + th = rows[i].querySelector('th'); + th.textContent = i + 1; + } + } {% endblock %} \ No newline at end of file From d64bf61a9c0e98e80ba80febe33c2b1d8412f9a5 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 21 Feb 2026 12:16:34 +0100 Subject: [PATCH 6/8] feat: Replace layouts template - Change nunjucks to liquid for layouts screen - Add shortcodes for placeholders to eleventy --- .eleventy.js | 24 +- source/screens/demo/layouts.liquid | 311 +++++++++++++++++ source/screens/demo/layouts.njk | 317 ------------------ .../hippie/partials/placeholder-flag.liquid | 1 + 4 files changed, 335 insertions(+), 318 deletions(-) create mode 100644 source/screens/demo/layouts.liquid delete mode 100644 source/screens/demo/layouts.njk diff --git a/.eleventy.js b/.eleventy.js index 03ea12f..34db01b 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,4 +1,4 @@ -const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); +const {EleventyHtmlBasePlugin} = require("@11ty/eleventy"); module.exports = function (eleventyConfig) { eleventyConfig.addPlugin(EleventyHtmlBasePlugin); @@ -28,10 +28,32 @@ module.exports = function (eleventyConfig) { brand: 'hippie', titlePrefix: '', titlePostfix: ' - HIPPIE', + placeholders: { + name: 'Vorname Nachname', + address: 'Straße Nr., PLZ Ort', + phone: '+49 (0)101 1337 48', + mail: 'name@domain.tld' + }, debugMode: true, legacyMode: false }); + eleventyConfig.addShortcode('text', function (text, attrId, attrClass) { + return `${text}`; + }); + + eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) { + if (text === '') { + text = target; + } + + if (target.indexOf('@') !== -1) { + target = 'mailto:' + target; + } + + return `${text}`; + }); + eleventyConfig.addPassthroughCopy({'source/art/images': 'art'}); eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'}); diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid new file mode 100644 index 0000000..02f3fa3 --- /dev/null +++ b/source/screens/demo/layouts.liquid @@ -0,0 +1,311 @@ +--- +title: Layouts +tags: +- demoIndex +--- +{% layout "hippie/page.liquid" %} + +{% block title %}Gestaltungen{% endblock %} + +{% block main %} +
+
+

Sammlung formatierter Elemente

+

Die Elemente werden fortlaufend komplexer

+
+
+

Bereiche (sections)

+

section

+ 
section.overflow>div.float_space_left>img^p+p>br+a.lineLink
+
+
+ {% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %} +
+

{% text hippie.placeholders.name %}
{% text hippie.placeholders.address %}

+

{% text hippie.placeholders.phone %}
{% link hippie.placeholders.mail, '', '', 'a_line' %}

+
+

nav

+ 
div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)
+
+ + +
+ 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4
+ + 
div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+
+ +
+

header

+ 
header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4
+
+

Aufmacher

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.

+ + +
+ 
header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4
+
+
+ +
+
+ 
footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4
+ +
+
+ +

Interaktiv (interactive)

+

input

+
+ + + + + +
+

form

+
+

Show me a + + Sorted by + + + + Matching + + +

+ + +

Gruppierung (grouping)

+

p

+ 
p.txt_right+p.txt_center+p.txt_left
+

Rechts

+

Mittig

+

Links

+

h*

+ 
h3.txt_color_dark+p.txt_tiny
+

Dunkle Überschrift

+

Mit winzigem Textabsatz

+ 
a>h4
+ +

Überschrift als Block-Verweis

+ +

Überschrift 1

+

Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.

+

Überschrift 2

+

kann das ebenso.

+

hr

+ 
hr.space_even_half
+
+ 
hr.dotted.space_even_fourth
+
+

ul

+ 
nav>ul.list_link>(li>a)+li>a>img+span
+ +

div

+ 
div.space_left_fourth>(hr+p+hr)
+
+
+

Eingerückter Inhalt

+
+
+ +

Tabellen

+ 
table.table_link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2
+
#
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Ab / ZyNeu / Alt
■ + Name + URL + YYYY-MM-DD
+
Beschreibung
+
■ + Name + URL + YYYY-MM-DD
+
Beschreibung
+
+ +

Eingebettet

+
+ {% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %} +
+ + +{% endblock %} + +{% block script %} +{{ block.super -}} + + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk deleted file mode 100644 index a35cfff..0000000 --- a/source/screens/demo/layouts.njk +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Layouts -tags: - - demoIndex ---- -{% set pageBase = "../" %} -{% set pageId = page.fileSlug %} - -{% extends "demo/_main.njk" %} -{% import "hippie/macros/_placeholder.njk" as ph %} - -{% block title %}Gestaltungen{% endblock %} -{% block head %} - {{ super() }} -{% endblock %} - -{% block main %} - -
-
-

Sammlung formatierter Elemente

-

Die Elemente werden fortlaufend komplexer

-
-
-

Bereiche (sections)

-

section

- 
section.overflow>div.float_space_left>img^p+p>br+a.lineLink
-
-
{{ ph.flag('img', '', '', 'Avatar', '256') }}
-

{{ ph.name() }}
{{ ph.address() }}

-

{{ ph.phone() }}
{{ ph.email('lineLink') }}

-
-

nav

- 
div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)
-
- - -
- 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4
- - 
div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4
-
- -
-

header

- 
header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4
-
-

Aufmacher

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.

- - -
- 
header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4
-
-
- -
-
- 
footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4
- -
-
- -

Interaktiv (interactive)

-

input

-
- - - - - -
-

form

-
-

Show me a - - Sorted by - - - - Matching - - -

-
- -

Gruppierung (grouping)

-

p

- 
p.txt_right+p.txt_center+p.txt_left
-

Rechts

-

Mittig

-

Links

-

h*

- 
h3.txt_color_dark+p.txt_tiny
-

Dunkle Überschrift

-

Mit winzigem Textabsatz

- 
a>h4
- -

Überschrift als Block-Verweis

- -

Überschrift 1

-

Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.

-

Überschrift 2

-

kann das ebenso.

-

hr

- 
hr.space_even_half
-
- 
hr.dotted.space_even_fourth
-
-

ul

- 
nav>ul.list_link>(li>a)+li>a>img+span
- -

div

- 
div.space_left_fourth>(hr+p+hr)
-
-
-

Eingerückter Inhalt

-
-
- -

Tabellen

- 
table.table_link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Ab / ZyNeu / Alt
■ - Name - URL - YYYY-MM-DD
-
Beschreibung
-
■ - Name - URL - YYYY-MM-DD
-
Beschreibung
-
- -

Eingebettet

-
- {{ ph.flag() }} -
-
-
-{% endblock %} - -{% block script %} - {{ super() }} - - {{ log.asset(true) }} - {{ log.log('Assets loaded.', assetsLoaded) }} - -{% endblock %} \ No newline at end of file diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid index 02432cb..280a48c 100644 --- a/source/templates/hippie/partials/placeholder-flag.liquid +++ b/source/templates/hippie/partials/placeholder-flag.liquid @@ -1,4 +1,5 @@ {% assign height = width | divided_by: 1.6 %} + {% if type == 'svg' or type == '' %} {% comment %} From 2d3c049d40a07fb76f4a6c8a9f99cdb294d76ef3 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 21 Feb 2026 12:58:31 +0100 Subject: [PATCH 7/8] feat: Remove pageBase from liquid templates - Remove pageBase global from all liquid templates - Change " to ' for all liquid tags --- source/screens/demo/basics.liquid | 9 ++++----- source/screens/demo/components.liquid | 4 ++-- source/screens/demo/examples/10print.liquid | 2 +- source/screens/demo/examples/clock.liquid | 4 ++-- source/screens/demo/examples/game.liquid | 4 ++-- source/screens/demo/examples/start.liquid | 5 ++--- source/screens/demo/examples/ui/cli.liquid | 4 ++-- source/screens/demo/examples/ui/drag.liquid | 6 +++--- source/screens/demo/examples/ui/explorer.liquid | 4 ++-- source/screens/demo/examples/ui/form.liquid | 4 ++-- source/screens/demo/examples/ui/gallery.liquid | 4 ++-- source/screens/demo/examples/ui/index.liquid | 2 +- source/screens/demo/examples/ui/table.liquid | 4 ++-- source/screens/demo/examples/ui/tile.liquid | 4 ++-- source/screens/demo/examples/ui/tui.liquid | 4 ++-- source/screens/demo/examples/ui/windows.liquid | 10 +++++----- source/screens/demo/index.liquid | 5 ++--- source/screens/demo/introduction.liquid | 2 +- source/screens/demo/layouts.liquid | 2 +- source/screens/demo/pages/blank.liquid | 7 +------ source/screens/demo/pages/default.liquid | 16 ++++++---------- source/screens/demo/pages/error/304.liquid | 5 ++--- source/screens/demo/pages/error/400.liquid | 5 ++--- source/screens/demo/pages/error/401.liquid | 5 ++--- source/screens/demo/pages/error/403.liquid | 5 ++--- source/screens/demo/pages/error/404.liquid | 5 ++--- source/screens/demo/pages/error/408.liquid | 5 ++--- source/screens/demo/pages/error/500.liquid | 5 ++--- source/screens/demo/pages/error/503.liquid | 5 ++--- source/screens/demo/pages/maintenance.liquid | 5 ++--- source/templates/hippie/app.liquid | 5 ++--- source/templates/hippie/default.liquid | 6 +++--- source/templates/hippie/full.liquid | 14 ++++++-------- source/templates/hippie/page.liquid | 8 ++++---- source/templates/hippie/partials/links.liquid | 2 +- source/templates/hippie/partials/nav-page.liquid | 4 ++-- source/templates/hippie/simple.liquid | 2 +- source/templates/hippie/status.liquid | 4 ++-- 38 files changed, 86 insertions(+), 110 deletions(-) diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid index 017fcfd..8093d67 100644 --- a/source/screens/demo/basics.liquid +++ b/source/screens/demo/basics.liquid @@ -3,8 +3,7 @@ title: Basics tags: - demoIndex --- -{% assign pageBase = "../" -%} -{% layout "hippie/page.liquid" %} +{% layout 'hippie/page.liquid' %} {% block title %}Grundlagen{% endblock %} @@ -278,7 +277,7 @@ tags:
  • - Startseite + Startseite
  • Hilfe @@ -580,7 +579,7 @@ tags:

    Eingebundene Inhalte

    - {% render "hippie/partials/placeholder-flag.liquid", type: "img", width: "128", desc: "Fahne von Interaktionsweise" %} + {% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}

    Dies ist ein Bild. Es wird mit dem Element <img> eingebunden. Solch ein Bild hat üblicherweise die Attribute @@ -599,7 +598,7 @@ tags: und <picture> in Kombination verwendet werden.

    - {% render "hippie/partials/placeholder-flag.liquid", type: "img", src: "file", width: "128", desc: "Fahne von Interaktionsweise" %} + {% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}

    Tabellen

    diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid index 02a51ff..e4faaaf 100644 --- a/source/screens/demo/components.liquid +++ b/source/screens/demo/components.liquid @@ -3,7 +3,7 @@ title: Components tags: - demoIndex --- -{% layout "hippie/page.liquid" %} +{% layout 'hippie/page.liquid' %} {% block title %}Komponenten{% endblock %} @@ -93,7 +93,7 @@ tags:

    Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.

    Fußbereich
    - {% render "hippie/partials/footer-pinned.liquid" %} + {% render 'hippie/partials/footer-pinned.liquid' %}
    diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid index 8486ef3..9ee9246 100644 --- a/source/screens/demo/examples/10print.liquid +++ b/source/screens/demo/examples/10print.liquid @@ -3,7 +3,7 @@ title: 10print tags: - demoExample --- -{% layout "hippie/simple.liquid" %} +{% layout 'hippie/simple.liquid' %} {% block head %} {{ block.super -}} diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index ea927c6..7dc6998 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -3,8 +3,8 @@ title: Clock tags: - demoExample --- -{% assign bodyClass = "body_clock" -%} -{% layout "hippie/simple.liquid" %} +{% assign bodyClass = 'body_clock' -%} +{% layout 'hippie/simple.liquid' %} {% block body %}
    diff --git a/source/screens/demo/examples/game.liquid b/source/screens/demo/examples/game.liquid index 19d97dd..734a5a6 100644 --- a/source/screens/demo/examples/game.liquid +++ b/source/screens/demo/examples/game.liquid @@ -4,8 +4,8 @@ tags: - demoExample - gameExample --- -{% assign bodyClass = "body_game" -%} -{% layout "hippie/simple.liquid" %} +{% assign bodyClass = 'body_game' -%} +{% layout 'hippie/simple.liquid' %} {% block body %}
    diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid index 3a42779..e11d3f8 100644 --- a/source/screens/demo/examples/start.liquid +++ b/source/screens/demo/examples/start.liquid @@ -3,10 +3,9 @@ title: Start tags: - demoExample --- -{% assign pageBase = "../../" -%} {% assign pageId = page.fileSlug -%} -{% assign bodyClass = "body_start" -%} -{% layout "hippie/simple.liquid" %} +{% assign bodyClass = 'body_start' -%} +{% layout 'hippie/simple.liquid' %} {% block body %}
    diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/screens/demo/examples/ui/cli.liquid index 18f4cd4..a87d4b8 100644 --- a/source/screens/demo/examples/ui/cli.liquid +++ b/source/screens/demo/examples/ui/cli.liquid @@ -3,8 +3,8 @@ title: CLI tags: - ui --- -{% assign bodyClass = "body_cli" -%} -{% layout "hippie/app.liquid" %} +{% assign bodyClass = 'body_cli' -%} +{% layout 'hippie/app.liquid' %} {% block body %}
    diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/screens/demo/examples/ui/drag.liquid index 7b46674..37d806e 100755 --- a/source/screens/demo/examples/ui/drag.liquid +++ b/source/screens/demo/examples/ui/drag.liquid @@ -3,7 +3,7 @@ title: Drag tags: - ui --- -{% layout "hippie/app.liquid" %} +{% layout 'hippie/app.liquid' %} {% block body %}
    @@ -22,8 +22,8 @@ tags: {% endblock %} {%- block script %} - - + + {% endcomment %} +{% comment %}{% endcomment %} - - + + -{% endblock %} \ No newline at end of file +{% block body %} + +{% endblock %} diff --git a/source/screens/demo/pages/error/304.liquid b/source/screens/demo/pages/error/304.liquid index 4fa65ef..75127a7 100644 --- a/source/screens/demo/pages/error/304.liquid +++ b/source/screens/demo/pages/error/304.liquid @@ -1,9 +1,8 @@ --- title: 304 --- -{% assign pageBase = "../../../" -%} -{% assign bodyClass = "body_status" %} -{% layout "hippie/status.liquid" %} +{% assign bodyClass = 'body_status' %} +{% layout 'hippie/status.liquid' %} {% block main %} {{ block.super -}} diff --git a/source/screens/demo/pages/error/400.liquid b/source/screens/demo/pages/error/400.liquid index 86cb860..ffe7d9c 100644 --- a/source/screens/demo/pages/error/400.liquid +++ b/source/screens/demo/pages/error/400.liquid @@ -1,9 +1,8 @@ --- title: 400 --- -{% assign pageBase = "../../../" -%} -{% assign bodyClass = "body_status" %} -{% layout "hippie/status.liquid" %} +{% assign bodyClass = 'body_status' %} +{% layout 'hippie/status.liquid' %} {% block main %} {{ block.super -}} diff --git a/source/screens/demo/pages/error/401.liquid b/source/screens/demo/pages/error/401.liquid index 09029d6..a2fbb39 100644 --- a/source/screens/demo/pages/error/401.liquid +++ b/source/screens/demo/pages/error/401.liquid @@ -1,9 +1,8 @@ --- title: 401 --- -{% assign pageBase = "../../../" -%} -{% assign bodyClass = "body_status" %} -{% layout "hippie/status.liquid" %} +{% assign bodyClass = 'body_status' %} +{% layout 'hippie/status.liquid' %} {% block main %} {{ block.super -}} diff --git a/source/screens/demo/pages/error/403.liquid b/source/screens/demo/pages/error/403.liquid index 31a5790..cfa9eed 100644 --- a/source/screens/demo/pages/error/403.liquid +++ b/source/screens/demo/pages/error/403.liquid @@ -1,9 +1,8 @@ --- title: 403 --- -{% assign pageBase = "../../../" -%} -{% assign bodyClass = "body_status" %} -{% layout "hippie/status.liquid" %} +{% assign bodyClass = 'body_status' %} +{% layout 'hippie/status.liquid' %} {% block main %} {{ block.super -}} diff --git a/source/screens/demo/pages/error/404.liquid b/source/screens/demo/pages/error/404.liquid index a90082a..9a00731 100644 --- a/source/screens/demo/pages/error/404.liquid +++ b/source/screens/demo/pages/error/404.liquid @@ -1,9 +1,8 @@ --- title: 404 --- -{% assign pageBase = "../../../" -%} -{% assign bodyClass = "body_status" %} -{% layout "hippie/status.liquid" %} +{% assign bodyClass = 'body_status' %} +{% layout 'hippie/status.liquid' %} {% block main %} {{ block.super -}} diff --git a/source/screens/demo/pages/error/408.liquid b/source/screens/demo/pages/error/408.liquid index 7984e61..1f0ef44 100644 --- a/source/screens/demo/pages/error/408.liquid +++ b/source/screens/demo/pages/error/408.liquid @@ -1,9 +1,8 @@ --- title: 408 --- -{% assign pageBase = "../../../" -%} -{% assign bodyClass = "body_status" %} -{% layout "hippie/status.liquid" %} +{% assign bodyClass = 'body_status' %} +{% layout 'hippie/status.liquid' %} {% block main %} {{ block.super -}} diff --git a/source/screens/demo/pages/error/500.liquid b/source/screens/demo/pages/error/500.liquid index 6d21ccc..5e6cb69 100644 --- a/source/screens/demo/pages/error/500.liquid +++ b/source/screens/demo/pages/error/500.liquid @@ -1,9 +1,8 @@ --- title: 500 --- -{% assign pageBase = "../../../" -%} -{% assign bodyClass = "body_status" %} -{% layout "hippie/status.liquid" %} +{% assign bodyClass = 'body_status' %} +{% layout 'hippie/status.liquid' %} {% block main %} {{ block.super -}} diff --git a/source/screens/demo/pages/error/503.liquid b/source/screens/demo/pages/error/503.liquid index 4805020..2a01f87 100644 --- a/source/screens/demo/pages/error/503.liquid +++ b/source/screens/demo/pages/error/503.liquid @@ -1,9 +1,8 @@ --- title: 503 --- -{% assign pageBase = "../../../" -%} -{% assign bodyClass = "body_status" %} -{% layout "hippie/status.liquid" %} +{% assign bodyClass = 'body_status' %} +{% layout 'hippie/status.liquid' %} {% block main %} {{ block.super -}} diff --git a/source/screens/demo/pages/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid index 4fa3286..fe36599 100644 --- a/source/screens/demo/pages/maintenance.liquid +++ b/source/screens/demo/pages/maintenance.liquid @@ -1,9 +1,8 @@ --- title: Maintenance --- -{% assign pageBase = "../../" -%} -{% assign pageClass = "h_full_view" -%} -{% layout "hippie/status.liquid" %} +{% assign pageClass = 'h_full_view' -%} +{% layout 'hippie/status.liquid' %} {% block body %}
    diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid index 7e704f7..4118172 100644 --- a/source/templates/hippie/app.liquid +++ b/source/templates/hippie/app.liquid @@ -1,7 +1,6 @@ -{% assign pageBase = "../../../" -%} {% assign pageId = page.fileSlug -%} -{% assign pageClass = "html_ui" -%} -{% layout "hippie/default.liquid" %} +{% assign pageClass = 'html_ui' -%} +{% layout 'hippie/default.liquid' %} {% block title %}{{ title }}{% endblock %} diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid index bdcf341..4cb653e 100644 --- a/source/templates/hippie/default.liquid +++ b/source/templates/hippie/default.liquid @@ -18,10 +18,10 @@ {{ hippie.titlePostfix -}} {% block meta -%} - {% render "hippie/partials/meta.liquid" %} + {% render 'hippie/partials/meta.liquid' %} {% endblock -%} {% block links -%} - {% render "hippie/partials/links.liquid" %} + {% render 'hippie/partials/links.liquid' %} {% endblock -%} {% endblock -%} @@ -29,7 +29,7 @@ {%- block body %}{% endblock -%} {%- block script %}{% endblock -%} diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid index a3bc72c..5b22b17 100644 --- a/source/templates/hippie/full.liquid +++ b/source/templates/hippie/full.liquid @@ -18,19 +18,17 @@ {{ hippie.titlePostfix -}} {% block meta -%} - {% render "hippie/partials/meta.liquid", author: "Interaktionsweise", desc: "Hippie interweaves preeminent personal interface elements" %} + {% render 'hippie/partials/meta.liquid', author: 'Interaktionsweise', desc: 'Hippie interweaves preeminent personal interface elements' %} {% comment %}{% endcomment %} {% endblock -%} - {% render "hippie/partials/script-log.liquid" %} - {% render "hippie/partials/log-setup", hippie: hippie, state: true -%} - {% render "hippie/partials/log-start" -%} + {% render 'hippie/partials/script-log.liquid' %} + {% render 'hippie/partials/log-setup', hippie: hippie, state: true -%} + {% render 'hippie/partials/log-start' -%} {% block links -%} - {% render "hippie/partials/links.liquid" %} - {% comment %}{% endcomment %} - {% comment %}{% endcomment %} + {% render 'hippie/partials/links.liquid' %} {% endblock -%} - {% render "hippie/partials/log-log" with "HEAD end :: Links parsed, starting to load." as msg -%} + {% render 'hippie/partials/log-log' with 'HEAD end :: Links parsed, starting to load.' as msg -%} {% endblock -%} diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid index 4afccb7..b6edd40 100644 --- a/source/templates/hippie/page.liquid +++ b/source/templates/hippie/page.liquid @@ -1,5 +1,5 @@ {% assign pageId = page.fileSlug -%} -{% layout "hippie/full.liquid" %} +{% layout 'hippie/full.liquid' %} {% block meta %} {{ block.super -}} @@ -22,15 +22,15 @@ {% block body %} {{ block.super -}} -{% render "hippie/partials/nav-page.liquid" %} +{% render 'hippie/partials/nav-page.liquid' %}
    - {% render "hippie/partials/header-page.liquid" %} + {% render 'hippie/partials/header-page.liquid' %}
    {% block main %}{% endblock %}
    - {% render "hippie/partials/footer-page.liquid" %} + {% render 'hippie/partials/footer-page.liquid' %}
    {% endblock %} diff --git a/source/templates/hippie/partials/links.liquid b/source/templates/hippie/partials/links.liquid index c1a8845..32d854d 100644 --- a/source/templates/hippie/partials/links.liquid +++ b/source/templates/hippie/partials/links.liquid @@ -1,3 +1,3 @@ {% comment %}{% endcomment %} - + diff --git a/source/templates/hippie/partials/nav-page.liquid b/source/templates/hippie/partials/nav-page.liquid index 36e5184..cf52d72 100644 --- a/source/templates/hippie/partials/nav-page.liquid +++ b/source/templates/hippie/partials/nav-page.liquid @@ -4,7 +4,7 @@
  • - {% comment %}{% endcomment %} + {% comment %}{% endcomment %}
  • @@ -22,7 +22,7 @@
  • - {% comment %}{% endcomment %} + {% comment %}{% endcomment %}
diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid index b644f9f..b711fe6 100644 --- a/source/templates/hippie/simple.liquid +++ b/source/templates/hippie/simple.liquid @@ -1,5 +1,5 @@ {% assign pageId = page.fileSlug -%} -{% layout "hippie/default.liquid" %} +{% layout 'hippie/default.liquid' %} {% block title %}{{ title }}{% endblock %} diff --git a/source/templates/hippie/status.liquid b/source/templates/hippie/status.liquid index f2e0ce1..86499ed 100644 --- a/source/templates/hippie/status.liquid +++ b/source/templates/hippie/status.liquid @@ -15,12 +15,12 @@ {{ hippie.titlePostfix -}} {% block meta -%} - {% render "hippie/partials/meta.liquid" %} + {% render 'hippie/partials/meta.liquid' %} {% endblock -%} {% block links -%} - + {% endblock -%} {% endblock -%} From 5765207e51dfadafb9a79ddfb63078f33b8d8578 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 21 Feb 2026 14:09:10 +0100 Subject: [PATCH 8/8] feat: Change table classes --- source/screens/demo/basics.liquid | 10 ++++---- source/screens/demo/components.liquid | 10 ++++---- source/screens/demo/layouts.liquid | 33 +++++++++++++++------------ source/style/hippie-style | 2 +- 4 files changed, 29 insertions(+), 26 deletions(-) diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid index 8093d67..6d190ec 100644 --- a/source/screens/demo/basics.liquid +++ b/source/screens/demo/basics.liquid @@ -631,7 +631,7 @@ tags:
table>tr>td*2^tr>td[colspan=2]
- +
@@ -641,12 +641,12 @@ tags:
Mit ohne
- table.table_blank>tr>td*2^tr>td[colspan=2] + table.blank>tr>td*2^tr>td[colspan=2]

Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:

- +
@@ -684,7 +684,7 @@ tags:
Beschreibung bzw. Zusammenhang der Tabelle
- table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2 + table.width_full.fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2

Viele weitere Formate sind möglich.

@@ -738,7 +738,7 @@ tags:

- +
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid index e4faaaf..4f4dd2b 100644 --- a/source/screens/demo/components.liquid +++ b/source/screens/demo/components.liquid @@ -189,8 +189,8 @@ tags: 
// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th

<table>

Varianten

- 
table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
- + 
table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
+
@@ -220,8 +220,8 @@ tags:
- 
table.width_full.table_stripe.table_fix.table_free>tr>td*3
- + 
table.width_full.stripe.fix.free>tr>td*3
+
@@ -243,7 +243,7 @@ tags:
Tabelle Streifen
- 
table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
+ 
table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid index d7dc539..500e902 100644 --- a/source/screens/demo/layouts.liquid +++ b/source/screens/demo/layouts.liquid @@ -7,7 +7,7 @@ tags: {% block title %}Gestaltungen{% endblock %} -{% block main %} +{% block main %}

Sammlung formatierter Elemente

@@ -100,7 +100,9 @@ tags: 
header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4

Aufmacher

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, + volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh + quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.

- 
footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4
+ 
footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4

Tabellen

- 
table.table_link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2
-
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
+ 
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
+
@@ -257,30 +260,30 @@ tags: - - + - + - - - + - + - diff --git a/source/style/hippie-style b/source/style/hippie-style index 91d136f..69535d8 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 91d136f1c310c6276ecb2f4318f468f842099816 +Subproject commit 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f
 
■ - Name + ■ + Name URL YYYY-MM-DDYYYY-MM-DD
+
Beschreibung
■ - Name + ■ + Name URL YYYY-MM-DDYYYY-MM-DD
+
Beschreibung