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{ }+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{ }+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 %}