From 7950d23b145b4dffe5a11fbc7ea660f3456f919b Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 19 Jun 2025 14:20:56 +0200 Subject: [PATCH] feat: More content for components and layouts - Update hippie styles - Add demo images - New components content - New layout structure and content --- source/art/images/demo/bullet.gif | Bin 0 -> 67 bytes source/art/images/demo/letter.gif | Bin 0 -> 77 bytes source/screens/demo/components.njk | 83 ++++++++++++++++++++++++++--- source/screens/demo/layouts.njk | 55 ++++++++++++------- source/style/hippie-style | 2 +- 5 files changed, 112 insertions(+), 28 deletions(-) create mode 100644 source/art/images/demo/bullet.gif create mode 100644 source/art/images/demo/letter.gif diff --git a/source/art/images/demo/bullet.gif b/source/art/images/demo/bullet.gif new file mode 100644 index 0000000000000000000000000000000000000000..55a84abda4f23c8a666c7407220b5d6c3d29b233 GIT binary patch literal 67 zcmZ?wbhEHb6krfwXkcWJmzQT?U{L(Y!pOkD$e;sc1H}ax7?`Ab`d6NQo8K^JQeako VY}IPMlvx!MC0dqgMKLf~0|2-%5Q+c* literal 0 HcmV?d00001 diff --git a/source/art/images/demo/letter.gif b/source/art/images/demo/letter.gif new file mode 100644 index 0000000000000000000000000000000000000000..60aac08875a890ca2123c56ff6c0187c3a02f6ca GIT binary patch literal 77 zcmZ?wbhEHb6krfwXkcW30L7myKqe!D4u}hqVPI0}>0f#JEkEy!En%E@rYNp|)7o`I YR<3>C(^+cLPFXANM1GT&Wo57i0C18ONdN!< literal 0 HcmV?d00001 diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk index 87c7a3c..5890112 100644 --- a/source/screens/demo/components.njk +++ b/source/screens/demo/components.njk @@ -80,7 +80,17 @@ tags:
Überschrift 6

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.

+
{{ footer.pinned() }}
@@ -90,24 +100,81 @@ tags:

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.txt_center
- 
p.txt_right
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.hr_hidden
- 
hr.hr_dotted
- 
hr.space_even_half
- 
hr.hr_dotted.space_even_fourth
+ 
hr.hr_hidden+hr.hr_dotted+hr.hr_double
+
+
+
+

<pre>

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

<blockquote>

- 
blockquote>p+p.quote_source
+
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. +
+ +

Varianten

+ 
ul.list_basic.list_dash>li*2
+ + 
ul.list_link>(li>a)*2
+

<figure>

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

<main>

+
Hauptbereich

<div>

- 
div.div_info>p

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

diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk index ab80554..a45a817 100644 --- a/source/screens/demo/layouts.njk +++ b/source/screens/demo/layouts.njk @@ -21,19 +21,9 @@ tags:

Die Elemente werden fortlaufend komplexer

-

<h3>

-

Beispiele

- 
h3.txt_color_dark+p
-

Dunkle Überschrift

-

Mit normalem Textabsatz

-

<h4>

-

Beispiele

- 
a>h4
- -

Überschrift als Block-Verweis

- -

<section>

- 
section>div.float_space_left>img^p+p
+

Bereiche

+

section

+ 
section.overflow>div.float_space_left>img^p+p>br+a.lineLink
Fahne von interaktionsweise

Vorname Name
Straße 1, 01234 Stadt

@@ -41,13 +31,13 @@ tags: name@domain.tld

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

Eingerückter Inhalt

- 
nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4
+ 
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 $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+ 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4
+ 
div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+

Show me a @@ -229,10 +221,34 @@ tags:

Gruppierung

+

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.hr_dotted.space_even_fourth
+
+

ul

ul.list_link>(li>a>img)*2+li>a
  • - name@domain.tld + name@domain.tld
  • Work @@ -254,7 +270,7 @@ tags: - + Name URL @@ -269,7 +285,7 @@ tags: - + Name URL @@ -283,6 +299,7 @@ tags: +

    Eingebettet

    diff --git a/source/style/hippie-style b/source/style/hippie-style index d17f966..a1a4bd4 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit d17f9667943a2f525707b1dc77d2d9bf95814e71 +Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2