From 63c899b789ba37f08b9a533ad61c17923633d140 Mon Sep 17 00:00:00 2001 From: sthag Date: Mon, 16 Feb 2026 00:30:01 +0100 Subject: [PATCH] feat: Replace template fpr components screen - Nunjucks to liquid - Rename partials - Add footer partial --- source/screens/demo/components.liquid | 399 +++++++++++++++++ source/screens/demo/components.njk | 407 ------------------ source/templates/hippie/page.liquid | 6 +- ...{page-footer.liquid => footer-page.liquid} | 0 .../hippie/partials/footer-pinned.liquid | 3 + ...{page-header.liquid => header-page.liquid} | 0 .../{page-nav.liquid => nav-page.liquid} | 0 7 files changed, 405 insertions(+), 410 deletions(-) create mode 100644 source/screens/demo/components.liquid delete mode 100644 source/screens/demo/components.njk rename source/templates/hippie/partials/{page-footer.liquid => footer-page.liquid} (100%) create mode 100644 source/templates/hippie/partials/footer-pinned.liquid rename source/templates/hippie/partials/{page-header.liquid => header-page.liquid} (100%) rename source/templates/hippie/partials/{page-nav.liquid => nav-page.liquid} (100%) diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid new file mode 100644 index 0000000..75c6eeb --- /dev/null +++ b/source/screens/demo/components.liquid @@ -0,0 +1,399 @@ +--- +title: Components +tags: +- demoIndex +--- +{% layout "hippie/page.liquid" %} + +{% block title %}Komponenten{% endblock %} + +{% block main %} +
+
+

Medienformat Abfragen

+
+
+
Umbruch bei 
+
+

Telefone und größer

+

Nur Telefone

+

Nur Schreibtafeln hochkant

+

Schreibtafeln und größer

+

Schreibtafeln im Querformat

+

Schreibtafeln quer und größer

+

Nur Arbeitsplatzrechner

+

Arbeitsplatzrechner und größer

+

Richtige Monitore und größer

+
+
+
+ +
+
+

Ü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.

+
+ 
article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}
+
+

Bereiche

+

Elemente:

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

<body>

+

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

+

<article>

+
Ein Artikel.
+

<section>

+
Ein Bereich.
+

Varianten

+ 
section.sec_main_center
+
+

Ende.

+

Zentrierter Bereich.

+
+ 
section.sec_main_status
+
Status-Bereich
+

<nav>

+ +

<aside>

+

Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit .bside.

+ 
aside.right+div.bside
+
+ +
Hauptbereich
+
+

<h*>

+

Überschrift 1

+

Überschrift 2

+

Überschrift 3

+

Überschrift 4

+
Überschrift 5
+
+
Überschrift 6
+

Mit Absatz innerhalb von <hgroup>.

+
+
+

Überschrift 1 oder 2

+

Mit Absatz innerhalb von <hgroup>.

+
+

<header>

+
Kopfbereich
+ 
header.header_page
+ 
header.header_txt>h1
+
+

Überschrift 1

+

Innerhalb eines <header>.

+
+

<footer>

+

Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.

+
Fußbereich
+
+ {% render "hippie/partials/footer-pinned.liquid" %} +
+
+
+

Gruppierung

+

Elemente:

+ 
// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div
+

<p>

+

Ein Absatz. Ein code Element innerhalb wird besonders behandelt.

+

Varianten

+ 
p.column_2
+

Spalten können angegeben werden.

+ 
p.column_3.column_line
+

Spalten können angegeben werden.

+

<address>

+
Anschrift, mit bestimmtem, ##### Format.
+

<hr>

+
+

Varianten

+ 
hr.hidden+hr.dotted+hr.double
+ +
+
+ 
hr.vertical
+
+

<pre>

+ 
Vorformatierter Text.
+	erhält Umbrüche und Einrückung.
+
+ 
pre.pre_code>code*2
+ 
let variable = true;
+()(){}
+

<blockquote>

+
Ein Zitat ist eingerückt.
+ 
blockquote.quote_mark>p+p.quote_source
+
+

Zitat mit automatischen Anführungszeichen

+

und Quellenangabe.

+
+

<dl>, <ol>, <ul>

+
+
Begriff
+
Definition
+
+
    +
  1. Eins
    2. +
  2. Zwei
    3. +
+
    +
  • Obst
    • +
  • Gemüse
    • +
+

Varianten

+ 
ul.list_basic.list_dash>li*2
+
    +
  • Mehr Abstand und
    • +
  • mit Unterstrichen.
    • +
+ 
ul.list_link>(li>a)*2
+ +

<figure>

+ 
figure>figcaption+{element}
+
+
Bezeichnung
+ Grafisches Element. +
+

<main>

+
Hauptbereich
+

<div>

+

Varianten

+ 
div.div_info>p
+
+

Absatz in Informationsbox.

+
+ 
div.box_space>div.box_cube>span
+
+
+ Text
+
+ 
div.box_placeholder+hr+div.box_placeholder_bkg
+
+
+
+
+
+

Tabellen

+

Elemente:

+ 
// 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
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KopfzeileAB
VorspalteEine
1erweiterte
2Tabelle
+ 
table.width_full.table_stripe.table_fix.table_free>tr>td*3
+ + + + + + + + + + + + + + + + + + + + + +
Tabelle
ohneRahmen
jedochmit
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
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
BezeichnungMengeWert
Alpha18990
Bravo101
Charlie11
Summe9001
+
+
+

Formulare

+

Elemente:

+ 
// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend
+

<input>

+
+ + + + + +
+

Varianten

+ 
input.button_io+button.button_io
+
+ + +
+
+ + + +
+
+
+ + + + Caps Lock is ON. +
+
+

<select>

+ +
+
+{% endblock %} + +{% block script %} +{{ block.super -}} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk deleted file mode 100644 index 4d4ba16..0000000 --- a/source/screens/demo/components.njk +++ /dev/null @@ -1,407 +0,0 @@ ---- -title: Components -tags: - - demoIndex ---- -{% set pageBase = "../" %} -{% set pageId = page.fileSlug %} - -{% extends "demo/_main.njk" %} -{% import "hippie/macros/_footer.njk" as footer %} - -{% block title %}Komponenten{% endblock %} -{% block head %} - {{ super() }} -{% endblock %} - -{% block main %} - -
-
-

Medienformat Abfragen

-
-
-
Umbruch bei 
-
-

Telefone und größer

-

Nur Telefone

-

Nur Schreibtafeln hochkant

-

Schreibtafeln und größer

-

Schreibtafeln im Querformat

-

Schreibtafeln quer und größer

-

Nur Arbeitsplatzrechner

-

Arbeitsplatzrechner und größer

-

Richtige Monitore und größer

-
-
-
- -
-
-

Ü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.

-
- 
article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}
-
-

Bereiche

-

Elemente:

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

<body>

-

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

-

<article>

-
Ein Artikel.
-

<section>

-
Ein Bereich.
-

Varianten

- 
section.sec_main_center
-
-

Ende.

-

Zentrierter Bereich.

-
- 
section.sec_main_status
-
Status-Bereich
-

<nav>

- -

<aside>

-

Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit .bside.

- 
aside.right+div.bside
-
- -
Hauptbereich
-
-

<h*>

-

Überschrift 1

-

Überschrift 2

-

Überschrift 3

-

Überschrift 4

-
Überschrift 5
-
-
Überschrift 6
-

Mit Absatz innerhalb von <hgroup>.

-
-
-

Überschrift 1 oder 2

-

Mit Absatz innerhalb von <hgroup>.

-
-

<header>

-
Kopfbereich
- 
header.header_page
- 
header.header_txt>h1
-
-

Überschrift 1

-

Innerhalb eines <header>.

-
-

<footer>

-

Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.

-
Fußbereich
-
- {{ footer.pinned() }} -
-
-
-

Gruppierung

-

Elemente:

- 
// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div
-

<p>

-

Ein Absatz. Ein code Element innerhalb wird besonders behandelt.

-

Varianten

- 
p.column_2
-

Spalten können angegeben werden.

- 
p.column_3.column_line
-

Spalten können angegeben werden.

-

<address>

-
Anschrift, mit bestimmtem, ##### Format.
-

<hr>

-
-

Varianten

- 
hr.hidden+hr.dotted+hr.double
- -
-
- 
hr.vertical
-
-

<pre>

- 
Vorformatierter Text.
-	erhält Umbrüche und Einrückung.
-
- 
pre.pre_code>code*2
- 
let variable = true;
-()(){}
-

<blockquote>

-
Ein Zitat ist eingerückt.
- 
blockquote.quote_mark>p+p.quote_source
-
-

Zitat mit automatischen Anführungszeichen

-

und Quellenangabe.

-
-

<dl>, <ol>, <ul>

-
-
Begriff
-
Definition
-
-
    -
  1. Eins
    2. -
  2. Zwei
    3. -
-
    -
  • Obst
    • -
  • Gemüse
    • -
-

Varianten

- 
ul.list_basic.list_dash>li*2
-
    -
  • Mehr Abstand und
    • -
  • mit Unterstrichen.
    • -
- 
ul.list_link>(li>a)*2
- -

<figure>

- 
figure>figcaption+{element}
-
-
Bezeichnung
- Grafisches Element. -
-

<main>

-
Hauptbereich
-

<div>

-

Varianten

- 
div.div_info>p
-
-

Absatz in Informationsbox.

-
- 
div.box_space>div.box_cube>span
-
-
- Text
-
- 
div.box_placeholder+hr+div.box_placeholder_bkg
-
-
-
-
-
-

Tabellen

-

Elemente:

- 
// 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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KopfzeileAB
VorspalteEine
1erweiterte
2Tabelle
- 
table.width_full.table_stripe.table_fix.table_free>tr>td*3
- - - - - - - - - - - - - - - - - - - - - -
Tabelle
ohneRahmen
jedochmit
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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
BezeichnungMengeWert
Alpha18990
Bravo101
Charlie11
Summe9001
-
-
-

Formulare

-

Elemente:

- 
// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend
-

<input>

-
- - - - - -
-

Varianten

- 
input.button_io+button.button_io
-
- - -
-
- - - -
-
-
- - - - Caps Lock is ON. -
-
-

<select>

- -
-
-{% endblock %} - -{% block script %} - {{ super() }} - -{% endblock %} \ No newline at end of file diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid index 4a17167..4afccb7 100644 --- a/source/templates/hippie/page.liquid +++ b/source/templates/hippie/page.liquid @@ -22,15 +22,15 @@ {% block body %} {{ block.super -}} -{% render "hippie/partials/page-nav.liquid" %} +{% render "hippie/partials/nav-page.liquid" %}
- {% render "hippie/partials/page-header.liquid" %} + {% render "hippie/partials/header-page.liquid" %}
{% block main %}{% endblock %}
- {% render "hippie/partials/page-footer.liquid" %} + {% render "hippie/partials/footer-page.liquid" %}
{% endblock %} diff --git a/source/templates/hippie/partials/page-footer.liquid b/source/templates/hippie/partials/footer-page.liquid similarity index 100% rename from source/templates/hippie/partials/page-footer.liquid rename to source/templates/hippie/partials/footer-page.liquid diff --git a/source/templates/hippie/partials/footer-pinned.liquid b/source/templates/hippie/partials/footer-pinned.liquid new file mode 100644 index 0000000..5f4160a --- /dev/null +++ b/source/templates/hippie/partials/footer-pinned.liquid @@ -0,0 +1,3 @@ + diff --git a/source/templates/hippie/partials/page-header.liquid b/source/templates/hippie/partials/header-page.liquid similarity index 100% rename from source/templates/hippie/partials/page-header.liquid rename to source/templates/hippie/partials/header-page.liquid diff --git a/source/templates/hippie/partials/page-nav.liquid b/source/templates/hippie/partials/nav-page.liquid similarity index 100% rename from source/templates/hippie/partials/page-nav.liquid rename to source/templates/hippie/partials/nav-page.liquid