Test-Inhalte in ein anderes Verzeichnis (/potemkin/) verschoben
authorKai Moritz <kai@juplo.de>
Sun, 17 Jul 2016 08:39:12 +0000 (10:39 +0200)
committerKai Moritz <kai@juplo.de>
Wed, 28 Jun 2017 09:23:39 +0000 (11:23 +0200)
50 files changed:
dist/index.html
dist/potemkin.html [new file with mode: 0644]
dist/potemkin/fix-swf/getting-started.html [new file with mode: 0644]
dist/potemkin/fix-swf/overview.html [new file with mode: 0644]
dist/potemkin/html-experimente.html [new file with mode: 0644]
dist/potemkin/html-experimente/basis-layout.html [new file with mode: 0644]
dist/potemkin/html-experimente/breadcrumb.html [new file with mode: 0644]
dist/potemkin/html-experimente/druck-layout.html [new file with mode: 0644]
dist/potemkin/html-experimente/error.html [new file with mode: 0644]
dist/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html [new file with mode: 0644]
dist/potemkin/html-experimente/fast-leer-einspaltig.html [new file with mode: 0644]
dist/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html [new file with mode: 0644]
dist/potemkin/html-experimente/fast-leer-kein-menü.html [new file with mode: 0644]
dist/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html [new file with mode: 0644]
dist/potemkin/html-experimente/fast-leer-mit-menü.html [new file with mode: 0644]
dist/potemkin/html-experimente/formulare.html [new file with mode: 0644]
dist/potemkin/html-experimente/kein-layout.html [new file with mode: 0644]
dist/potemkin/html-experimente/phone.html [new file with mode: 0644]
dist/potemkin/html-experimente/seitenaufteilung.html [new file with mode: 0644]
dist/potemkin/html-experimente/seitenkopf.html [new file with mode: 0644]
dist/potemkin/html-experimente/symbole.html [new file with mode: 0644]
dist/potemkin/html-experimente/tablet.html [new file with mode: 0644]
dist/potemkin/html-experimente/testlab.html [new file with mode: 0644]
dist/potemkin/html-experimente/tiny.html [new file with mode: 0644]
dist/potemkin/typo.html [new file with mode: 0644]
dist/projects/fix-swf/getting-started.html [deleted file]
dist/projects/fix-swf/overview.html [deleted file]
dist/projects/html-experimente.html [deleted file]
dist/projects/html-experimente/basis-layout.html [deleted file]
dist/projects/html-experimente/breadcrumb.html [deleted file]
dist/projects/html-experimente/druck-layout.html [deleted file]
dist/projects/html-experimente/error.html [deleted file]
dist/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html [deleted file]
dist/projects/html-experimente/fast-leer-einspaltig.html [deleted file]
dist/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html [deleted file]
dist/projects/html-experimente/fast-leer-kein-menü.html [deleted file]
dist/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html [deleted file]
dist/projects/html-experimente/fast-leer-mit-menü.html [deleted file]
dist/projects/html-experimente/formulare.html [deleted file]
dist/projects/html-experimente/kein-layout.html [deleted file]
dist/projects/html-experimente/phone.html [deleted file]
dist/projects/html-experimente/seitenaufteilung.html [deleted file]
dist/projects/html-experimente/seitenkopf.html [deleted file]
dist/projects/html-experimente/symbole.html [deleted file]
dist/projects/html-experimente/tablet.html [deleted file]
dist/projects/html-experimente/testlab.html [deleted file]
dist/projects/html-experimente/tiny.html [deleted file]
dist/projects/typo.html [deleted file]
dist/templates/layout.html
dist/templates/variables.json

index d15f773..27da26a 100644 (file)
@@ -27,7 +27,7 @@
       <h2 class="nav menu">Section-Menu</h2>
       <ul id="menu" class="cf">
         <li class="m blog"><a href="blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
       <h2 class="nav menu">Section-Menu</h2>
       <ul id="menu" class="cf">
         <li class="m blog"><a href="blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
-        <li class="m projects"><a href="projects" th:href="@{/projects.html}" class="m">Projects</a></li>
+        <li class="m projects"><a href="potemkin.html" th:href="@{/potemkin.html}" class="m">Projects</a></li>
         <li class="m about"><a href="about.html" th:href="@{/about.html}" class="m">About</a></li>
       </ul>
     </nav>
         <li class="m about"><a href="about.html" th:href="@{/about.html}" class="m">About</a></li>
       </ul>
     </nav>
           <h1>hibernate4-maven-plugin</h1>
           <p>
             <strong>Lorem ipsum</strong> dolor
           <h1>hibernate4-maven-plugin</h1>
           <p>
             <strong>Lorem ipsum</strong> dolor
-            <a href="projects/typo.html" th:href="@{/projects/typo.html}">sit amet</a>,
+            <a href="potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
             consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
             labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
             consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
             labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-            <a href="projects/html-experimente.html" th:href="@{/projects/html-experimente.html}">exercitation</a>
+            <a href="potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
             ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
             irure dolor in reprehenderit in voluptate velit esse cillum dolore
             eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
             ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
             irure dolor in reprehenderit in voluptate velit esse cillum dolore
             eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
diff --git a/dist/potemkin.html b/dist/potemkin.html
new file mode 100644 (file)
index 0000000..9256008
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Projects', uri='/potemkin.html'"
+    >
+  <head>
+    <title>Projects - Potemkinsche Dörfer!</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+    <script src="js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+   <h1>Projects - Potemkinsche Dörfer!</h1>
+  </body>
+</html>
diff --git a/dist/potemkin/fix-swf/getting-started.html b/dist/potemkin/fix-swf/getting-started.html
new file mode 100644 (file)
index 0000000..08a8487
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Fix SWF - Getting Started', uri='/potemkin/fix-swf/getting-started.html'"
+    >
+  <head>
+    <title>Fix SWF - Getting Started</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <h1>Getting Started - DUMMY</h1>
+  </body>
+</html>
diff --git a/dist/potemkin/fix-swf/overview.html b/dist/potemkin/fix-swf/overview.html
new file mode 100644 (file)
index 0000000..1079006
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Fix SWF - Overview', uri='/potemkin/fix-swf/overview.html'"
+    >
+  <head>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Fix SWF - Overview</title>
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <h1>Overview - DUMMY</h1>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente.html b/dist/potemkin/html-experimente.html
new file mode 100644 (file)
index 0000000..337df5a
--- /dev/null
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="uri='/potemkin/html-experimente.html'"
+    >
+  <head>
+    <title>HTML-Experimente</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+    <script src="../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <article class="main" layout:fragment="maincontent">
+      <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
+      <ul>
+        <li><a href="html-experimente/formulare.html" th:href="@{/potemkin/html-experimente/formulare.html}">Formulare</a></li>
+        <li><a href="html-experimente/symbole.html" th:href="@{/potemkin/html-experimente/symbole.html}">Symbol-Font</a></li>
+        <li><a href="../templates/404.html" th:href="@{/404.html}">404-Template</a></li>
+        <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/potemkin/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
+        <li><a href="../templates/error.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
+        <li><a href="html-experimente/error.html" th:href="@{/potemkin/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
+      </ul>
+      <h2>Layout-Grenzfälle</h2>
+      <ul>
+        <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
+        <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
+        <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
+        <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
+        <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
+        <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
+        <li><a href="html-experimente/breadcrumb.html" th:href="@{/potemkin/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
+      </ul>
+      <h2>Layout-Variationen</h2>
+      <ul>
+        <li><a href="html-experimente/kein-layout.html" th:href="@{/potemkin/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
+        <li><a href="html-experimente/basis-layout.html" th:href="@{/potemkin/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
+        <li><a href="html-experimente/druck-layout.html" th:href="@{/potemkin/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
+        <li><a href="html-experimente/tiny.html" th:href="@{/potemkin/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
+        <li><a href="html-experimente/phone.html" th:href="@{/potemkin/html-experimente/phone.html}">Layout für Smartphones</a></li>
+        <li><a href="html-experimente/tablet.html" th:href="@{/potemkin/html-experimente/tablet.html}">Layout für Tablets</a></li>
+      </ul>
+      <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
+      <ul>
+        <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/potemkin/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
+        <li><a href="html-experimente/seitenkopf.html" th:href="@{/potemkin/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
+      </ul>
+      <h2>Anderer Krams...</h2>
+      <ul>
+        <li><a href="html-experimente/testlab.html" th:href="@{/potemkin/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>
+      </ul>
+    </article>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/basis-layout.html b/dist/potemkin/html-experimente/basis-layout.html
new file mode 100644 (file)
index 0000000..0e07e93
--- /dev/null
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Nur das Basis-Layout', uri='/potemkin/html-experimente/basis-layout.html'"
+    >
+  <head layout:fragment="head">
+    <title>HTML-Experimente - Basis-Layout</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../less/base.less" th:href="@{/css/base.min.css}"/>
+    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+  </head>
+  <body>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/breadcrumb.html b/dist/potemkin/html-experimente/breadcrumb.html
new file mode 100644 (file)
index 0000000..77e131a
--- /dev/null
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Seite mit sehr langem Breadcrumb', uri='/potemkin/html-experimente/breadcrumb.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Langer Breadcrumb</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <ol layout:fragment="breadcrumb">
+      <li class="b"><a class="b" href="../../index.html" th:href="@{/index.html}">Home</a></li>
+      <li class="b"><a class="b" href="../../potemkin.html" th:href="@{/potemkin.html}">Projects</a></li>
+      <li class="b"><a class="b" href="../html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
+      <li class="b"><strong class="b">Dies ist ein Seite mit einem unendlich langen Breadcrumb-Eintrag der bestimmt nicht in den vorgesehenen Platz passt</strong></li>
+    </ol>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/druck-layout.html b/dist/potemkin/html-experimente/druck-layout.html
new file mode 100644 (file)
index 0000000..051e951
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Die für den Ausdruck angepasste Ansicht', uri='/potemkin/html-experimente/druck-layout.html'"
+    >
+  <head layout:fragment="head">
+    <title>HTML-Experimente - Druck-Layout</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/print.css" th:href="@{/css/print.css}"/>
+    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+  </head>
+  <body>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/error.html b/dist/potemkin/html-experimente/error.html
new file mode 100644 (file)
index 0000000..5205f86
--- /dev/null
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    >
+  <head>
+    <title>This Page Will Raise An Error</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+    <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html b/dist/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
new file mode 100644 (file)
index 0000000..e05b563
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="contentclass='onecolumn', uri='/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <nav layout:fragment="navigation">
+      <hr class="n"/>
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul id="menu" class="cf">
+        <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
+        <li class="m projects"><a href="../../potemkin.html" th:href="@{/potemkin.html}" class="m selected">Projects</a></li>
+        <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
+      </ul>
+    </nav>
+    <article class="main" layout:fragment="maincontent">
+      <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
+      <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+    </article>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/fast-leer-einspaltig.html b/dist/potemkin/html-experimente/fast-leer-einspaltig.html
new file mode 100644 (file)
index 0000000..cf2ba67
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="contentclass='onecolumn', uri='/potemkin/html-experimente/fast-leer-einspaltig.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Fast leere einspaltige Seite</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <nav layout:fragment="navigation">
+      <hr class="n"/>
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul id="menu" class="cf">
+        <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
+        <li class="m projects"><a href="../../potemkin.html" th:href="@{/potemkin.html}" class="m selected">Projects</a></li>
+        <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
+      </ul>
+    </nav>
+    <article class="main" layout:fragment="maincontent">
+      <header><h1>Fast leere einspaltige Seite</h1></header>
+      <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+    </article>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html b/dist/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html
new file mode 100644 (file)
index 0000000..825185a
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="contentclass='nomenu', uri='/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <nav layout:fragment="navigation">
+      <hr class="n"/>
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul id="menu" class="cf">
+        <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
+        <li class="m projects"><a href="../../potemkin.html" th:href="@{/potemkin.html}" class="m selected">Projects</a></li>
+        <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
+      </ul>
+    </nav>
+    <article class="main" layout:fragment="maincontent">
+      <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
+      <p>Ein ganz bischen Text...</p>
+    </article>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/fast-leer-kein-menü.html b/dist/potemkin/html-experimente/fast-leer-kein-menü.html
new file mode 100644 (file)
index 0000000..de708b9
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="contentclass='nomenu', uri='/potemkin/html-experimente/fast-leer-kein-menü.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Fast leere Seite ohne Menü</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <nav layout:fragment="navigation">
+      <hr class="n"/>
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul id="menu" class="cf">
+        <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
+        <li class="m projects"><a href="../../potemkin.html" th:href="@{/potemkin.html}" class="m selected">Projects</a></li>
+        <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
+      </ul>
+    </nav>
+    <article class="main" layout:fragment="maincontent">
+      <header><h1>Fast leere Seite ohne Menü</h1></header>
+      <p>Ein ganz bischen Text...</p>
+    </article>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html b/dist/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html
new file mode 100644 (file)
index 0000000..54fb18e
--- /dev/null
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with=", uri='/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <article class="main" layout:fragment="maincontent">
+      <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
+      <p>Ein ganz bischen Text...</p>
+    </article>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/fast-leer-mit-menü.html b/dist/potemkin/html-experimente/fast-leer-mit-menü.html
new file mode 100644 (file)
index 0000000..73d7bb5
--- /dev/null
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with=", uri='/potemkin/html-experimente/fast-leer-mit-menü.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Fast leere Seite mit Menü</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <article class="main" layout:fragment="maincontent">
+      <header><h1>Fast leere Seite mit Menü</h1></header>
+      <p>Ein ganz bischen Text...</p>
+    </article>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/formulare.html b/dist/potemkin/html-experimente/formulare.html
new file mode 100644 (file)
index 0000000..437f2d4
--- /dev/null
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="uri='/potemkin/html-experimente/formulare.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Formulare</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <article class="main" layout:fragment="maincontent">
+      <header><h1>Formulare</h1></header>
+      <form class="form" action="#" method="get">
+        <h2 class="f">Anzeigetext</h2>
+        <div class="f textarea">
+          <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
+          <textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
+          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+        </div>
+      </form>
+      <form class="form" action="#" method="get">
+        <h2 class="f">Textformatierung</h2>
+        <fieldset class="f radiobutton cf">
+          <legend class="f info">
+            Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
+            Online erscheint die Anzeige als normaler Fließtext.
+          </legend>
+          <hr class="f" />
+          <div class="col2">
+            <div class="f">
+              <input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_02">Text zentriert</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_04">Text fett</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_05">Text fett und rot</label>
+            </div>
+          </div>
+          <div class="col2">
+            <div class="f">
+              <input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+      <form class="form" action="#" method="get">
+        <h2 class="f">Einspaltige Radiobuttons...</h2>
+        <fieldset class="f radiobutton">
+          <div class="f">
+            <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_b02">Option X</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
+          </div>
+        </fieldset>
+        <hr class="f" />
+        <div class="f submit">
+          <input class="f" type="submit" value="&gt; zur Übersicht" />
+          <input class="f left" type="submit" value="&lt; zurück" />
+          <input class="f" type="submit" value="&gt; weiter" />
+        </div>
+      </form>
+      <form class="form" action="#" method="get">
+        <h2 class="f">Bild</h2>
+        <fieldset class="f checkbox">
+          <legend class="f">
+            Du kannst Deiner Anzeige ein Bild hinzufügen.
+            Das Bild erscheint nur online.
+            Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
+          </legend>
+          <hr class="f" />
+          <div class="f">
+            <input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
+            <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+          </div>
+          <div class="f">
+            <input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
+            <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
+          </div>
+        </fieldset>
+      </form>
+      <form class="form" action="#" method="get">
+        <h2 class="f">Alleinstehende Checkbox</h2>
+        <div class="f checkbox">
+          <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
+          <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+        </div>
+      </form>
+      <form class="form" action="#" method="get">
+        <h2 class="f">Kundendaten</h2>
+        <p class="f required">
+          <strong class="r">Pflichtfelder</strong> sind mit einem
+          <strong class="r symbol">*</strong> markiert.
+        </p>
+        <div class="f text required">
+          <label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
+          <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
+        </div>
+        <div class="f text required">
+          <label for="text_tbox_02" class="f">Vorname</label>
+          <input class="f" id="text_tbox_02" type="text" value="Max" />
+        </div>
+        <div class="f select required">
+          <label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
+          <select class="f" id="text_tbox_03">
+            <option>Dortmund</option>
+            <option>Bochum</option>
+            <option>Essen</option>
+            <option>Mönchengladbach</option>
+            <option>Oberhausen</option>
+            <option>Castrop-Rauxel</option>
+            <option>Düsseldorf</option>
+          </select>
+        </div>
+        <div class="f text required">
+          <label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
+          <input class="f error" id="text_tbox_04" type="text" value="" />
+          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
+        </div>
+        <div class="f text required">
+          <label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
+          <input class="f" id="text_tbox_05" type="text" value="" />
+        </div>
+        <div class="f text required">
+          <label for="text_tbox_06" class="f">Telefon</label>
+          <input class="f" id="text_tbox_06" type="text" value="" />
+        </div>
+        <hr class="f" />
+        <div class="f submit">
+          <input class="f" type="submit" value="&gt; weiter" />
+        </div>
+      </form>
+      <form class="form" action="#" method="get">
+        <h2 class="f">Anzeige regionalisieren</h2>
+        <p class="f">
+          Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
+          diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
+          bestimmten Städten suchen.
+          Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
+          diesen Interessenten aber auch nicht gefunden.
+        </p>
+        <hr class="f" />
+        <div class="f text">
+          <label class="f" for="city">Stadt</label>
+          <input id="city" type="text" class="f" />
+          <p class="f info">
+            Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+          </p>
+        </div>
+      </form>
+      <form class="form" action="#" method="get">
+        <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+        <div class="f text required">
+          <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
+          <input class="f" id="text_tbox_05" type="password" value="t" />
+        </div>
+      </form>
+      <form class="form" action="#" method="get">
+        <h2 class="f">Lade das Bild hoch</h2>
+        <p class="f info">
+          Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
+          Das Bild darf nicht größer als 8 MByte sein.
+        </p>
+        <div class="f file required">
+          <label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
+          <input class="f" id="file_tbox_01" type="file" />
+        </div>
+        <hr class="f" />
+        <div class="f submit">
+          <input class="f" type="submit" value="&gt; Doch kein Bild" />
+          <input class="f" type="submit" value="&gt; Bild hochladen" />
+        </div>
+      </form>
+      <div class="form">
+        <h2 class="f">Antworten</h2>
+        <p class="f required">
+          <strong class="r">Pflichtfelder</strong> sind mit einem
+          <strong class="r symbol">*</strong> markiert.
+        </p>
+        <div class="f text required">
+          <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
+          <input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
+        </div>
+        <div class="f text required">
+          <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+          <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
+        </div>
+        <div class="f text required">
+          <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+          <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
+        </div>
+        <div class="f textarea required">
+          <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+          <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
+        </div>
+        <div class="f checkbox">
+          <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
+          <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
+        </div>
+        <div class="f checkbox">
+          <input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
+          <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
+        </div>
+      </div>
+      <div class="form cf">
+        <div class="col2 left">
+          <h2 class="f">Weiter mit Anmeldung</h2>
+          <div class="f text">
+            <label class="f" for="username">Benutzername</label>
+            <input class="f" name="username" id="username" type="text" tabindex="6" />
+          </div>
+          <div class="f text">
+            <label class="f" for="password">Passwort</label>
+            <input class="f" name="password" id="password" type="password" tabindex="7" />
+          </div>
+        </div>
+        <div class="col2 right">
+          <h2 class="f">Weiter ohne Anmeldung</h2>
+          <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
+          <div class="f captcha cf">
+            <span class="f">Was steht da?</span>
+            <img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
+          </div>
+          <div class="f text">
+            <label class="f" for="captcha">Lösung</label>
+            <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
+          </div>
+        </div>
+      </div>
+    </article>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/kein-layout.html b/dist/potemkin/html-experimente/kein-layout.html
new file mode 100644 (file)
index 0000000..90f4e91
--- /dev/null
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Alle Stylings deaktiviert', uri='/potemkin/html-experimente/kein-layout.html'"
+    >
+  <head layout:fragment="head">
+    <title>HTML-Experimente - Kein Layout</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+  </head>
+  <body>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/phone.html b/dist/potemkin/html-experimente/phone.html
new file mode 100644 (file)
index 0000000..1824312
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Layout für Smartphones', uri='/potemkin/html-experimente/phone.html'"
+    >
+  <head layout:fragment="head">
+    <title>HTML-Experimente - Layout PHONE</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/phone.css" th:href="@{/css/phone.css}"/>
+    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+  </head>
+  <body>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/seitenaufteilung.html b/dist/potemkin/html-experimente/seitenaufteilung.html
new file mode 100644 (file)
index 0000000..1bfbec5
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Nur das Basis-Layout und die Seitenaufteiltung', uri='/potemkin/html-experimente/seitenaufteilung.html'"
+    >
+  <head layout:fragment="head">
+    <title>HTML-Experimente - Basis-Layout &amp; Seitenaufteilung</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenaufteilung.css" th:href="@{/css/seitenaufteilung.css}"/>
+    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+  </head>
+  <body>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/seitenkopf.html b/dist/potemkin/html-experimente/seitenkopf.html
new file mode 100644 (file)
index 0000000..5dc6cd9
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Nur das Basis-Layout und die Seitenaufteiltung', uri='/potemkin/html-experimente/seitenkopf.html'"
+    >
+  <head layout:fragment="head">
+    <title>HTML-Experimente - Basis-Layout &amp; Seitenkopf</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenkopf.css" th:href="@{/css/seitenkopf.css}"/>
+    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+  </head>
+  <body>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/symbole.html b/dist/potemkin/html-experimente/symbole.html
new file mode 100644 (file)
index 0000000..ede6782
--- /dev/null
@@ -0,0 +1,419 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="uri='/potemkin/html-experimente/symbole.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Symbol-Font</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <article class="main" layout:fragment="maincontent">
+      <header><h1>Symbol-Font</h1></header>
+      <h2>100%</h2>
+      <div class="symbols">
+        <span class="e600">&#xe600;</span>
+        <span class="e601">&#xe601;</span>
+        <span class="e602">&#xe602;</span>
+        <span class="e603">&#xe603;</span>
+        <span class="e604">&#xe604;</span>
+        <span class="e605">&#xe605;</span>
+        <span class="e606">&#xe606;</span>
+        <span class="e607">&#xe607;</span>
+        <span class="e608">&#xe608;</span>
+        <span class="e609">&#xe609;</span>
+        <span class="e60a">&#xe60a;</span>
+        <span class="e60b">&#xe60b;</span>
+        <span class="e60c">&#xe60c;</span>
+        <span class="e60d">&#xe60d;</span>
+        <span class="e60e">&#xe60e;</span>
+        <span class="e60f">&#xe60f;</span>
+        <span class="e610">&#xe610;</span>
+        <span class="e611">&#xe611;</span>
+        <span class="e612">&#xe612;</span>
+        <span class="e613">&#xe613;</span>
+        <span class="e614">&#xe614;</span>
+        <span class="e615">&#xe615;</span>
+        <span class="e616">&#xe616;</span>
+        <span class="e617">&#xe617;</span>
+        <span class="e618">&#xe618;</span>
+        <span class="e619">&#xe619;</span>
+        <span class="e61a">&#xe61a;</span>
+        <span class="e61b">&#xe61b;</span>
+        <span class="e61c">&#xe61c;</span>
+        <span class="e61d">&#xe61d;</span>
+        <span class="e61e">&#xe61e;</span>
+        <span class="e61f">&#xe61f;</span>
+        <span class="e620">&#xe620;</span>
+        <span class="e621">&#xe621;</span>
+        <span class="e622">&#xe622;</span>
+        <span class="e623">&#xe623;</span>
+        <span class="e624">&#xe624;</span>
+        <span class="e625">&#xe625;</span>
+        <span class="e626">&#xe626;</span>
+        <span class="e627">&#xe627;</span>
+        <span class="e628">&#xe628;</span>
+        <span class="e629">&#xe629;</span>
+        <span class="e62a">&#xe62a;</span>
+        <span class="e62b">&#xe62b;</span>
+        <span class="e62c">&#xe62c;</span>
+        <span class="e62d">&#xe62d;</span>
+        <span class="e62e">&#xe62e;</span>
+        <span class="e62f">&#xe62f;</span>
+        <span class="e630">&#xe630;</span>
+        <span class="e631">&#xe631;</span>
+        <span class="e632">&#xe632;</span>
+        <span class="e633">&#xe633;</span>
+        <span class="e634">&#xe634;</span>
+        <span class="e635">&#xe635;</span>
+        <span class="e636">&#xe636;</span>
+        <span class="e637">&#xe637;</span>
+        <span class="e638">&#xe638;</span>
+        <span class="e639">&#xe639;</span>
+        <span class="e63a">&#xe63a;</span>
+        <span class="e63b">&#xe63b;</span>
+        <span class="e63c">&#xe63c;</span>
+        <span class="e63d">&#xe63d;</span>
+        <span class="e63e">&#xe63e;</span>
+        <span class="e63f">&#xe63f;</span>
+        <span class="e640">&#xe640;</span>
+        <span class="e641">&#xe641;</span>
+        <span class="e642">&#xe642;</span>
+        <span class="e643">&#xe643;</span>
+        <span class="e644">&#xe644;</span>
+        <span class="e645">&#xe645;</span>
+        <span class="e646">&#xe646;</span>
+        <span class="e647">&#xe647;</span>
+        <span class="e648">&#xe648;</span>
+        <span class="e649">&#xe649;</span>
+        <span class="e64a">&#xe64a;</span>
+        <span class="e64b">&#xe64b;</span>
+      </div>
+      <h2>200%</h2>
+      <div class="symbols" style="font-size: 200%; line-height: 1.5em">
+        <span class="e600">&#xe600;</span>
+        <span class="e601">&#xe601;</span>
+        <span class="e602">&#xe602;</span>
+        <span class="e603">&#xe603;</span>
+        <span class="e604">&#xe604;</span>
+        <span class="e605">&#xe605;</span>
+        <span class="e606">&#xe606;</span>
+        <span class="e607">&#xe607;</span>
+        <span class="e608">&#xe608;</span>
+        <span class="e609">&#xe609;</span>
+        <span class="e60a">&#xe60a;</span>
+        <span class="e60b">&#xe60b;</span>
+        <span class="e60c">&#xe60c;</span>
+        <span class="e60d">&#xe60d;</span>
+        <span class="e60e">&#xe60e;</span>
+        <span class="e60f">&#xe60f;</span>
+        <span class="e610">&#xe610;</span>
+        <span class="e611">&#xe611;</span>
+        <span class="e612">&#xe612;</span>
+        <span class="e613">&#xe613;</span>
+        <span class="e614">&#xe614;</span>
+        <span class="e615">&#xe615;</span>
+        <span class="e616">&#xe616;</span>
+        <span class="e617">&#xe617;</span>
+        <span class="e618">&#xe618;</span>
+        <span class="e619">&#xe619;</span>
+        <span class="e61a">&#xe61a;</span>
+        <span class="e61b">&#xe61b;</span>
+        <span class="e61c">&#xe61c;</span>
+        <span class="e61d">&#xe61d;</span>
+        <span class="e61e">&#xe61e;</span>
+        <span class="e61f">&#xe61f;</span>
+        <span class="e620">&#xe620;</span>
+        <span class="e621">&#xe621;</span>
+        <span class="e622">&#xe622;</span>
+        <span class="e623">&#xe623;</span>
+        <span class="e624">&#xe624;</span>
+        <span class="e625">&#xe625;</span>
+        <span class="e626">&#xe626;</span>
+        <span class="e627">&#xe627;</span>
+        <span class="e628">&#xe628;</span>
+        <span class="e629">&#xe629;</span>
+        <span class="e62a">&#xe62a;</span>
+        <span class="e62b">&#xe62b;</span>
+        <span class="e62c">&#xe62c;</span>
+        <span class="e62d">&#xe62d;</span>
+        <span class="e62e">&#xe62e;</span>
+        <span class="e62f">&#xe62f;</span>
+        <span class="e630">&#xe630;</span>
+        <span class="e631">&#xe631;</span>
+        <span class="e632">&#xe632;</span>
+        <span class="e633">&#xe633;</span>
+        <span class="e634">&#xe634;</span>
+        <span class="e635">&#xe635;</span>
+        <span class="e636">&#xe636;</span>
+        <span class="e637">&#xe637;</span>
+        <span class="e638">&#xe638;</span>
+        <span class="e639">&#xe639;</span>
+        <span class="e63a">&#xe63a;</span>
+        <span class="e63b">&#xe63b;</span>
+        <span class="e63c">&#xe63c;</span>
+        <span class="e63d">&#xe63d;</span>
+        <span class="e63e">&#xe63e;</span>
+        <span class="e63f">&#xe63f;</span>
+        <span class="e640">&#xe640;</span>
+        <span class="e641">&#xe641;</span>
+        <span class="e642">&#xe642;</span>
+        <span class="e643">&#xe643;</span>
+        <span class="e644">&#xe644;</span>
+        <span class="e645">&#xe645;</span>
+        <span class="e646">&#xe646;</span>
+        <span class="e647">&#xe647;</span>
+        <span class="e648">&#xe648;</span>
+        <span class="e649">&#xe649;</span>
+        <span class="e64a">&#xe64a;</span>
+        <span class="e64b">&#xe64b;</span>
+      </div>
+      <h2>300%</h2>
+      <div class="symbols" style="font-size: 300%; line-height: 1.5em">
+        <span class="e600">&#xe600;</span>
+        <span class="e601">&#xe601;</span>
+        <span class="e602">&#xe602;</span>
+        <span class="e603">&#xe603;</span>
+        <span class="e604">&#xe604;</span>
+        <span class="e605">&#xe605;</span>
+        <span class="e606">&#xe606;</span>
+        <span class="e607">&#xe607;</span>
+        <span class="e608">&#xe608;</span>
+        <span class="e609">&#xe609;</span>
+        <span class="e60a">&#xe60a;</span>
+        <span class="e60b">&#xe60b;</span>
+        <span class="e60c">&#xe60c;</span>
+        <span class="e60d">&#xe60d;</span>
+        <span class="e60e">&#xe60e;</span>
+        <span class="e60f">&#xe60f;</span>
+        <span class="e610">&#xe610;</span>
+        <span class="e611">&#xe611;</span>
+        <span class="e612">&#xe612;</span>
+        <span class="e613">&#xe613;</span>
+        <span class="e614">&#xe614;</span>
+        <span class="e615">&#xe615;</span>
+        <span class="e616">&#xe616;</span>
+        <span class="e617">&#xe617;</span>
+        <span class="e618">&#xe618;</span>
+        <span class="e619">&#xe619;</span>
+        <span class="e61a">&#xe61a;</span>
+        <span class="e61b">&#xe61b;</span>
+        <span class="e61c">&#xe61c;</span>
+        <span class="e61d">&#xe61d;</span>
+        <span class="e61e">&#xe61e;</span>
+        <span class="e61f">&#xe61f;</span>
+        <span class="e620">&#xe620;</span>
+        <span class="e621">&#xe621;</span>
+        <span class="e622">&#xe622;</span>
+        <span class="e623">&#xe623;</span>
+        <span class="e624">&#xe624;</span>
+        <span class="e625">&#xe625;</span>
+        <span class="e626">&#xe626;</span>
+        <span class="e627">&#xe627;</span>
+        <span class="e628">&#xe628;</span>
+        <span class="e629">&#xe629;</span>
+        <span class="e62a">&#xe62a;</span>
+        <span class="e62b">&#xe62b;</span>
+        <span class="e62c">&#xe62c;</span>
+        <span class="e62d">&#xe62d;</span>
+        <span class="e62e">&#xe62e;</span>
+        <span class="e62f">&#xe62f;</span>
+        <span class="e630">&#xe630;</span>
+        <span class="e631">&#xe631;</span>
+        <span class="e632">&#xe632;</span>
+        <span class="e633">&#xe633;</span>
+        <span class="e634">&#xe634;</span>
+        <span class="e635">&#xe635;</span>
+        <span class="e636">&#xe636;</span>
+        <span class="e637">&#xe637;</span>
+        <span class="e638">&#xe638;</span>
+        <span class="e639">&#xe639;</span>
+        <span class="e63a">&#xe63a;</span>
+        <span class="e63b">&#xe63b;</span>
+        <span class="e63c">&#xe63c;</span>
+        <span class="e63d">&#xe63d;</span>
+        <span class="e63e">&#xe63e;</span>
+        <span class="e63f">&#xe63f;</span>
+        <span class="e640">&#xe640;</span>
+        <span class="e641">&#xe641;</span>
+        <span class="e642">&#xe642;</span>
+        <span class="e643">&#xe643;</span>
+        <span class="e644">&#xe644;</span>
+        <span class="e645">&#xe645;</span>
+        <span class="e646">&#xe646;</span>
+        <span class="e647">&#xe647;</span>
+        <span class="e648">&#xe648;</span>
+        <span class="e649">&#xe649;</span>
+        <span class="e64a">&#xe64a;</span>
+        <span class="e64b">&#xe64b;</span>
+      </div>
+      <h2>400%</h2>
+      <div class="symbols" style="font-size: 400%; line-height: 1.5em">
+        <span class="e600">&#xe600;</span>
+        <span class="e601">&#xe601;</span>
+        <span class="e602">&#xe602;</span>
+        <span class="e603">&#xe603;</span>
+        <span class="e604">&#xe604;</span>
+        <span class="e605">&#xe605;</span>
+        <span class="e606">&#xe606;</span>
+        <span class="e607">&#xe607;</span>
+        <span class="e608">&#xe608;</span>
+        <span class="e609">&#xe609;</span>
+        <span class="e60a">&#xe60a;</span>
+        <span class="e60b">&#xe60b;</span>
+        <span class="e60c">&#xe60c;</span>
+        <span class="e60d">&#xe60d;</span>
+        <span class="e60e">&#xe60e;</span>
+        <span class="e60f">&#xe60f;</span>
+        <span class="e610">&#xe610;</span>
+        <span class="e611">&#xe611;</span>
+        <span class="e612">&#xe612;</span>
+        <span class="e613">&#xe613;</span>
+        <span class="e614">&#xe614;</span>
+        <span class="e615">&#xe615;</span>
+        <span class="e616">&#xe616;</span>
+        <span class="e617">&#xe617;</span>
+        <span class="e618">&#xe618;</span>
+        <span class="e619">&#xe619;</span>
+        <span class="e61a">&#xe61a;</span>
+        <span class="e61b">&#xe61b;</span>
+        <span class="e61c">&#xe61c;</span>
+        <span class="e61d">&#xe61d;</span>
+        <span class="e61e">&#xe61e;</span>
+        <span class="e61f">&#xe61f;</span>
+        <span class="e620">&#xe620;</span>
+        <span class="e621">&#xe621;</span>
+        <span class="e622">&#xe622;</span>
+        <span class="e623">&#xe623;</span>
+        <span class="e624">&#xe624;</span>
+        <span class="e625">&#xe625;</span>
+        <span class="e626">&#xe626;</span>
+        <span class="e627">&#xe627;</span>
+        <span class="e628">&#xe628;</span>
+        <span class="e629">&#xe629;</span>
+        <span class="e62a">&#xe62a;</span>
+        <span class="e62b">&#xe62b;</span>
+        <span class="e62c">&#xe62c;</span>
+        <span class="e62d">&#xe62d;</span>
+        <span class="e62e">&#xe62e;</span>
+        <span class="e62f">&#xe62f;</span>
+        <span class="e630">&#xe630;</span>
+        <span class="e631">&#xe631;</span>
+        <span class="e632">&#xe632;</span>
+        <span class="e633">&#xe633;</span>
+        <span class="e634">&#xe634;</span>
+        <span class="e635">&#xe635;</span>
+        <span class="e636">&#xe636;</span>
+        <span class="e637">&#xe637;</span>
+        <span class="e638">&#xe638;</span>
+        <span class="e639">&#xe639;</span>
+        <span class="e63a">&#xe63a;</span>
+        <span class="e63b">&#xe63b;</span>
+        <span class="e63c">&#xe63c;</span>
+        <span class="e63d">&#xe63d;</span>
+        <span class="e63e">&#xe63e;</span>
+        <span class="e63f">&#xe63f;</span>
+        <span class="e640">&#xe640;</span>
+        <span class="e641">&#xe641;</span>
+        <span class="e642">&#xe642;</span>
+        <span class="e643">&#xe643;</span>
+        <span class="e644">&#xe644;</span>
+        <span class="e645">&#xe645;</span>
+        <span class="e646">&#xe646;</span>
+        <span class="e647">&#xe647;</span>
+        <span class="e648">&#xe648;</span>
+        <span class="e649">&#xe649;</span>
+        <span class="e64a">&#xe64a;</span>
+        <span class="e64b">&#xe64b;</span>
+      </div>
+      <h2>500%</h2>
+      <div class="symbols" style="font-size: 500%; line-height: 1.5em">
+        <span class="e600">&#xe600;</span>
+        <span class="e601">&#xe601;</span>
+        <span class="e602">&#xe602;</span>
+        <span class="e603">&#xe603;</span>
+        <span class="e604">&#xe604;</span>
+        <span class="e605">&#xe605;</span>
+        <span class="e606">&#xe606;</span>
+        <span class="e607">&#xe607;</span>
+        <span class="e608">&#xe608;</span>
+        <span class="e609">&#xe609;</span>
+        <span class="e60a">&#xe60a;</span>
+        <span class="e60b">&#xe60b;</span>
+        <span class="e60c">&#xe60c;</span>
+        <span class="e60d">&#xe60d;</span>
+        <span class="e60e">&#xe60e;</span>
+        <span class="e60f">&#xe60f;</span>
+        <span class="e610">&#xe610;</span>
+        <span class="e611">&#xe611;</span>
+        <span class="e612">&#xe612;</span>
+        <span class="e613">&#xe613;</span>
+        <span class="e614">&#xe614;</span>
+        <span class="e615">&#xe615;</span>
+        <span class="e616">&#xe616;</span>
+        <span class="e617">&#xe617;</span>
+        <span class="e618">&#xe618;</span>
+        <span class="e619">&#xe619;</span>
+        <span class="e61a">&#xe61a;</span>
+        <span class="e61b">&#xe61b;</span>
+        <span class="e61c">&#xe61c;</span>
+        <span class="e61d">&#xe61d;</span>
+        <span class="e61e">&#xe61e;</span>
+        <span class="e61f">&#xe61f;</span>
+        <span class="e620">&#xe620;</span>
+        <span class="e621">&#xe621;</span>
+        <span class="e622">&#xe622;</span>
+        <span class="e623">&#xe623;</span>
+        <span class="e624">&#xe624;</span>
+        <span class="e625">&#xe625;</span>
+        <span class="e626">&#xe626;</span>
+        <span class="e627">&#xe627;</span>
+        <span class="e628">&#xe628;</span>
+        <span class="e629">&#xe629;</span>
+        <span class="e62a">&#xe62a;</span>
+        <span class="e62b">&#xe62b;</span>
+        <span class="e62c">&#xe62c;</span>
+        <span class="e62d">&#xe62d;</span>
+        <span class="e62e">&#xe62e;</span>
+        <span class="e62f">&#xe62f;</span>
+        <span class="e630">&#xe630;</span>
+        <span class="e631">&#xe631;</span>
+        <span class="e632">&#xe632;</span>
+        <span class="e633">&#xe633;</span>
+        <span class="e634">&#xe634;</span>
+        <span class="e635">&#xe635;</span>
+        <span class="e636">&#xe636;</span>
+        <span class="e637">&#xe637;</span>
+        <span class="e638">&#xe638;</span>
+        <span class="e639">&#xe639;</span>
+        <span class="e63a">&#xe63a;</span>
+        <span class="e63b">&#xe63b;</span>
+        <span class="e63c">&#xe63c;</span>
+        <span class="e63d">&#xe63d;</span>
+        <span class="e63e">&#xe63e;</span>
+        <span class="e63f">&#xe63f;</span>
+        <span class="e640">&#xe640;</span>
+        <span class="e641">&#xe641;</span>
+        <span class="e642">&#xe642;</span>
+        <span class="e643">&#xe643;</span>
+        <span class="e644">&#xe644;</span>
+        <span class="e645">&#xe645;</span>
+        <span class="e646">&#xe646;</span>
+        <span class="e647">&#xe647;</span>
+        <span class="e648">&#xe648;</span>
+        <span class="e649">&#xe649;</span>
+        <span class="e64a">&#xe64a;</span>
+        <span class="e64b">&#xe64b;</span>
+      </div>
+    </article>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/tablet.html b/dist/potemkin/html-experimente/tablet.html
new file mode 100644 (file)
index 0000000..70be887
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Layout für Tablets', uri='/potemkin/html-experimente/tablet.html'"
+    >
+  <head layout:fragment="head">
+    <title>HTML-Experimente - Layout TABLET</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tablet.css" th:href="@{/css/tablet.css}"/>
+    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+  </head>
+  <body>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/testlab.html b/dist/potemkin/html-experimente/testlab.html
new file mode 100644 (file)
index 0000000..e49d179
--- /dev/null
@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/testlab"
+    th:with="title='Media-Query-Test: BEISPIEL', uri='/potemkin/html-experimente/testlab.html'"
+    >
+  <head>
+    <title>HTML-Experimente - Media-Query-Test: BEISPIEL</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+    <script src="../../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body>
+    <div layout:fragment="content" th:remove="tag">
+      <form class="testlab form" action="#" method="get">
+        <h2 class="f">Anzeigetext</h2>
+        <div class="f textarea">
+          <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
+          <textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
+          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+        </div>
+      </form>
+      <form class="testlab form" action="#" method="get">
+        <h2 class="f">Textformatierung</h2>
+        <fieldset class="f radiobutton cf">
+          <legend class="f info">
+            Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
+            Online erscheint die Anzeige als normaler Fließtext.
+          </legend>
+          <hr class="f" />
+          <div class="col2">
+            <div class="f">
+              <input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_02">Text zentriert</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_04">Text fett</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_05">Text fett und rot</label>
+            </div>
+          </div>
+          <div class="col2">
+            <div class="f">
+              <input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
+              <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+      <form class="testlab form" action="#" method="get">
+        <h2 class="f">Einspaltige Radiobuttons...</h2>
+        <fieldset class="f radiobutton">
+          <div class="f">
+            <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_b02">Option X</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
+          </div>
+        </fieldset>
+        <hr class="f" />
+        <div class="f submit">
+          <input class="f" type="submit" value="&gt; zur Übersicht" />
+          <input class="f left" type="submit" value="&lt; zurück" />
+          <input class="f" type="submit" value="&gt; weiter" />
+        </div>
+      </form>
+      <form class="testlab form" action="#" method="get">
+        <h2 class="f">Bild</h2>
+        <fieldset class="f checkbox">
+          <legend class="f">
+            Du kannst Deiner Anzeige ein Bild hinzufügen.
+            Das Bild erscheint nur online.
+            Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
+          </legend>
+          <hr class="f" />
+          <div class="f">
+            <input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
+            <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+          </div>
+          <div class="f">
+            <input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
+            <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
+          </div>
+        </fieldset>
+      </form>
+      <form class="testlab form" action="#" method="get">
+        <h2 class="f">Alleinstehende Checkbox</h2>
+        <div class="f checkbox">
+          <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
+          <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+        </div>
+      </form>
+      <form class="testlab form" action="#" method="get">
+        <h2 class="f">Kundendaten</h2>
+        <p class="f required">
+          <strong class="r">Pflichtfelder</strong> sind mit einem
+          <strong class="r symbol">*</strong> markiert.
+        </p>
+        <div class="f text required">
+          <label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
+          <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
+        </div>
+        <div class="f text required">
+          <label for="text_tbox_02" class="f">Vorname</label>
+          <input class="f" id="text_tbox_02" type="text" value="Max" />
+        </div>
+        <div class="f select required">
+          <label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
+          <select class="f" id="text_tbox_03">
+            <option>Dortmund</option>
+            <option>Bochum</option>
+            <option>Essen</option>
+            <option>Mönchengladbach</option>
+            <option>Oberhausen</option>
+            <option>Castrop-Rauxel</option>
+            <option>Düsseldorf</option>
+          </select>
+        </div>
+        <div class="f text required">
+          <label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
+          <input class="f error" id="text_tbox_04" type="text" value="" />
+          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
+        </div>
+        <div class="f text required">
+          <label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
+          <input class="f" id="text_tbox_05" type="text" value="" />
+        </div>
+        <div class="f text required">
+          <label for="text_tbox_06" class="f">Telefon</label>
+          <input class="f" id="text_tbox_06" type="text" value="" />
+        </div>
+        <hr class="f" />
+        <div class="f submit">
+          <input class="f" type="submit" value="&gt; weiter" />
+        </div>
+      </form>
+      <form class="testlab form" action="#" method="get">
+        <h2 class="f">Anzeige regionalisieren</h2>
+        <p class="f">
+          Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
+          diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
+          bestimmten Städten suchen.
+          Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
+          diesen Interessenten aber auch nicht gefunden.
+        </p>
+        <hr class="f" />
+        <div class="f text">
+          <label class="f" for="city">Stadt</label>
+          <input id="city" type="text" class="f" />
+          <p class="f info">
+            Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+          </p>
+        </div>
+      </form>
+      <form class="testlab form" action="#" method="get">
+        <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+        <div class="f text required">
+          <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
+          <input class="f" id="text_tbox_05" type="password" value="t" />
+        </div>
+      </form>
+      <form class="testlab form" action="#" method="get">
+        <h2 class="f">Lade das Bild hoch</h2>
+        <p class="f info">
+          Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
+          Das Bild darf nicht größer als 8 MByte sein.
+        </p>
+        <div class="f file required">
+          <label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
+          <input class="f" id="file_tbox_01" type="file" />
+        </div>
+        <hr class="f" />
+        <div class="f submit">
+          <input class="f" type="submit" value="&gt; Doch kein Bild" />
+          <input class="f" type="submit" value="&gt; Bild hochladen" />
+        </div>
+      </form>
+      <div class="testlab form">
+        <h2 class="f">Antworten</h2>
+        <p class="f required">
+          <strong class="r">Pflichtfelder</strong> sind mit einem
+          <strong class="r symbol">*</strong> markiert.
+        </p>
+        <div class="f text required">
+          <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
+          <input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
+        </div>
+        <div class="f text required">
+          <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+          <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
+        </div>
+        <div class="f text required">
+          <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+          <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
+        </div>
+        <div class="f textarea required">
+          <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+          <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
+        </div>
+        <div class="f checkbox">
+          <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
+          <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
+        </div>
+        <div class="f checkbox">
+          <input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
+          <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
+        </div>
+      </div>
+      <div class="testlab form cf">
+        <div class="col2 left">
+          <h2 class="f">Weiter mit Anmeldung</h2>
+          <div class="f text">
+            <label class="f" for="username">Benutzername</label>
+            <input class="f" name="username" id="username" type="text" tabindex="6" />
+          </div>
+          <div class="f text">
+            <label class="f" for="password">Passwort</label>
+            <input class="f" name="password" id="password" type="password" tabindex="7" />
+          </div>
+        </div>
+        <div class="col2 right">
+          <h2 class="f">Weiter ohne Anmeldung</h2>
+          <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
+          <div class="f captcha cf">
+            <span class="f">Was steht da?</span>
+            <img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
+          </div>
+          <div class="f text">
+            <label class="f" for="captcha">Lösung</label>
+            <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/dist/potemkin/html-experimente/tiny.html b/dist/potemkin/html-experimente/tiny.html
new file mode 100644 (file)
index 0000000..7f2b4b8
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    xmlns:th="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="title='Layout für sehr kleine Bildschirmgrößen', uri='/potemkin/html-experimente/tiny.html'"
+    >
+  <head layout:fragment="head">
+    <title>HTML-Experimente - Layout TINY</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tiny.css" th:href="@{/css/tiny.css}"/>
+    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+  </head>
+  <body>
+    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
+  </body>
+</html>
diff --git a/dist/potemkin/typo.html b/dist/potemkin/typo.html
new file mode 100644 (file)
index 0000000..fdef979
--- /dev/null
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:layout="http://www.thymeleaf.org"
+    layout:decorator="templates/layout"
+    th:with="uri='/potemkin/typo.html'"
+    >
+  <head>
+    <title>Typography</title>
+    <!--/*-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+    <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+    <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+    <script src="../js/prettify.js" th:src="@{/js/prettify.js}"></script>
+    <script src="../js/less-1.7.0.min.js"></script>
+    <!--*/-->
+  </head>
+  <body onload="prettyPrint()">
+    <article layout:fragment="maincontent">
+      <header><h1>Typography</h1></header>
+      <p>
+        Lorem ipsum dolor <a href="#da">sit amet</a>, consectetur adipisicing elit,
+        sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud
+        <a href="#dort">exercitation</a> ullamco laboris nisi ut aliquip
+        <em>ex ea</em> commodo consequat. Duis aute irure dolor in reprehenderit
+        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        <strong>Excepteur sint <em>occaecat</em> cupidatat non proident</strong>,
+        sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <h2>Ein Link <a href="#link">im Titel</a></h2>
+      <p>Ein Link <a href="#link">im Text</a>.</p>
+      <h2>Normal / Italic / Bold / Bold+Italic</h2>
+      <ul>
+        <li>normal</li>
+        <li><em>italic</em></li>
+        <li><strong>bold</strong></li>
+        <li><strong><em>bold italic</em></strong></li>
+      </ul>
+      <p>
+        ÄäÖöÜüß@€¢
+        <strong>ÄäÖöÜüß@€¢</strong>
+        <em>ÄäÖöÜüß@€¢</em>
+        <strong><em>ÄäÖöÜüß@€¢</em></strong>
+      </p>
+      <h1>H1: Heading</h1>
+      <h2>H2: Heading</h2>
+      <h3>H3: Heading</h3>
+      <h4>H4: Heading</h4>
+      <h1>H1: Heading</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+        culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <h2>H2: Heading</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+        culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <h3>H3: Heading</h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+        culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <h4>H4: Heading</h4>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+        culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <h1>Preformatted code</h1>
+      <p>
+        <em>Juplo Branding</em> uses
+        <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" title="Visit prettify's README">google-code-prettify</a> for automatic
+        syntax highlighting.
+      </p>
+      <pre class="prettyprint linenums"><code class="language-xml">&lt;plugin&gt;
+  &lt;groupId&gt;ro.isdc.wro4j&lt;/groupId&gt;
+  &lt;artifactId&gt;wro4j-maven-plugin&lt;/artifactId&gt;
+  &lt;version&gt;${wro4j.version}&lt;/version&gt;
+  &lt;configuration&gt;
+    &lt;wroManagerFactory&gt;ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory&lt;/wroManagerFactory&gt;
+    &lt;cssDestinationFolder&gt;${project.build.directory}/${project.build.finalName}/css/&lt;/cssDestinationFolder&gt;
+  &lt;/configuration&gt;
+  &lt;executions&gt;
+    &lt;execution&gt;
+      &lt;phase&gt;package&lt;/phase&gt;
+      &lt;goals&gt;
+        &lt;goal&gt;run&lt;/goal&gt;
+      &lt;/goals&gt;
+    &lt;/execution&gt;
+  &lt;/executions&gt;
+&lt;/plugin&gt;
+</code></pre>
+    </article>
+  </body>
+</html>
diff --git a/dist/projects/fix-swf/getting-started.html b/dist/projects/fix-swf/getting-started.html
deleted file mode 100644 (file)
index bddaed9..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Fix SWF - Getting Started', uri='/projects/fix-swf/getting-started.html'"
-    >
-  <head>
-    <title>Fix SWF - Getting Started</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <h1>Getting Started - DUMMY</h1>
-  </body>
-</html>
diff --git a/dist/projects/fix-swf/overview.html b/dist/projects/fix-swf/overview.html
deleted file mode 100644 (file)
index 0ff32a7..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Fix SWF - Overview', uri='/projects/fix-swf/overview.html'"
-    >
-  <head>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <title>Fix SWF - Overview</title>
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <h1>Overview - DUMMY</h1>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente.html b/dist/projects/html-experimente.html
deleted file mode 100644 (file)
index c0253d7..0000000
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="uri='/projects/html-experimente.html'"
-    >
-  <head>
-    <title>HTML-Experimente</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
-    <script src="../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <article class="main" layout:fragment="maincontent">
-      <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
-      <ul>
-        <li><a href="html-experimente/formulare.html" th:href="@{/projects/html-experimente/formulare.html}">Formulare</a></li>
-        <li><a href="html-experimente/symbole.html" th:href="@{/projects/html-experimente/symbole.html}">Symbol-Font</a></li>
-        <li><a href="../templates/404.html" th:href="@{/404.html}">404-Template</a></li>
-        <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/projects/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
-        <li><a href="../templates/error.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
-        <li><a href="html-experimente/error.html" th:href="@{/projects/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
-      </ul>
-      <h2>Layout-Grenzfälle</h2>
-      <ul>
-        <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
-        <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
-        <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
-        <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
-        <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
-        <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
-        <li><a href="html-experimente/breadcrumb.html" th:href="@{/projects/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
-      </ul>
-      <h2>Layout-Variationen</h2>
-      <ul>
-        <li><a href="html-experimente/kein-layout.html" th:href="@{/projects/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
-        <li><a href="html-experimente/basis-layout.html" th:href="@{/projects/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
-        <li><a href="html-experimente/druck-layout.html" th:href="@{/projects/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
-        <li><a href="html-experimente/tiny.html" th:href="@{/projects/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
-        <li><a href="html-experimente/phone.html" th:href="@{/projects/html-experimente/phone.html}">Layout für Smartphones</a></li>
-        <li><a href="html-experimente/tablet.html" th:href="@{/projects/html-experimente/tablet.html}">Layout für Tablets</a></li>
-      </ul>
-      <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
-      <ul>
-        <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/projects/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
-        <li><a href="html-experimente/seitenkopf.html" th:href="@{/projects/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
-      </ul>
-      <h2>Anderer Krams...</h2>
-      <ul>
-        <li><a href="html-experimente/testlab.html" th:href="@{/projects/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>
-      </ul>
-    </article>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/basis-layout.html b/dist/projects/html-experimente/basis-layout.html
deleted file mode 100644 (file)
index 4c8c848..0000000
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Nur das Basis-Layout', uri='/projects/html-experimente/basis-layout.html'"
-    >
-  <head layout:fragment="head">
-    <title>HTML-Experimente - Basis-Layout</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../less/base.less" th:href="@{/css/base.min.css}"/>
-    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
-  </head>
-  <body>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/breadcrumb.html b/dist/projects/html-experimente/breadcrumb.html
deleted file mode 100644 (file)
index b86265a..0000000
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Seite mit sehr langem Breadcrumb', uri='/projects/html-experimente/breadcrumb.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Langer Breadcrumb</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <ol layout:fragment="breadcrumb">
-      <li class="b"><a class="b" href="../../index.html" th:href="@{/index.html}">Home</a></li>
-      <li class="b"><a class="b" href="../../projects.html" th:href="@{/projects.html}">Projects</a></li>
-      <li class="b"><a class="b" href="../html-experimente.html" th:href="@{/projects/html-experimente.html}">HTML-Experimente</a></li>
-      <li class="b"><strong class="b">Dies ist ein Seite mit einem unendlich langen Breadcrumb-Eintrag der bestimmt nicht in den vorgesehenen Platz passt</strong></li>
-    </ol>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/druck-layout.html b/dist/projects/html-experimente/druck-layout.html
deleted file mode 100644 (file)
index a926e19..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Die für den Ausdruck angepasste Ansicht', uri='/projects/html-experimente/druck-layout.html'"
-    >
-  <head layout:fragment="head">
-    <title>HTML-Experimente - Druck-Layout</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/print.css" th:href="@{/css/print.css}"/>
-    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
-  </head>
-  <body>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/error.html b/dist/projects/html-experimente/error.html
deleted file mode 100644 (file)
index 5205f86..0000000
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    >
-  <head>
-    <title>This Page Will Raise An Error</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
-    <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
-  </head>
-  <body>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html b/dist/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
deleted file mode 100644 (file)
index dba3d01..0000000
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="contentclass='onecolumn', uri='/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <nav layout:fragment="navigation">
-      <hr class="n"/>
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul id="menu" class="cf">
-        <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
-        <li class="m projects"><a href="../../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
-        <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
-      </ul>
-    </nav>
-    <article class="main" layout:fragment="maincontent">
-      <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
-      <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
-    </article>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/fast-leer-einspaltig.html b/dist/projects/html-experimente/fast-leer-einspaltig.html
deleted file mode 100644 (file)
index 3a6f3bf..0000000
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="contentclass='onecolumn', uri='/projects/html-experimente/fast-leer-einspaltig.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Fast leere einspaltige Seite</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <nav layout:fragment="navigation">
-      <hr class="n"/>
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul id="menu" class="cf">
-        <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
-        <li class="m projects"><a href="../../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
-        <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
-      </ul>
-    </nav>
-    <article class="main" layout:fragment="maincontent">
-      <header><h1>Fast leere einspaltige Seite</h1></header>
-      <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
-    </article>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html b/dist/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html
deleted file mode 100644 (file)
index 4f09c34..0000000
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="contentclass='nomenu', uri='/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <nav layout:fragment="navigation">
-      <hr class="n"/>
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul id="menu" class="cf">
-        <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
-        <li class="m projects"><a href="../../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
-        <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
-      </ul>
-    </nav>
-    <article class="main" layout:fragment="maincontent">
-      <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
-      <p>Ein ganz bischen Text...</p>
-    </article>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/fast-leer-kein-menü.html b/dist/projects/html-experimente/fast-leer-kein-menü.html
deleted file mode 100644 (file)
index d39f840..0000000
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="contentclass='nomenu', uri='/projects/html-experimente/fast-leer-kein-menü.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Fast leere Seite ohne Menü</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <nav layout:fragment="navigation">
-      <hr class="n"/>
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul id="menu" class="cf">
-        <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
-        <li class="m projects"><a href="../../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
-        <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
-      </ul>
-    </nav>
-    <article class="main" layout:fragment="maincontent">
-      <header><h1>Fast leere Seite ohne Menü</h1></header>
-      <p>Ein ganz bischen Text...</p>
-    </article>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html b/dist/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html
deleted file mode 100644 (file)
index b054f0b..0000000
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with=", uri='/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <article class="main" layout:fragment="maincontent">
-      <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
-      <p>Ein ganz bischen Text...</p>
-    </article>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/fast-leer-mit-menü.html b/dist/projects/html-experimente/fast-leer-mit-menü.html
deleted file mode 100644 (file)
index a74518e..0000000
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with=", uri='/projects/html-experimente/fast-leer-mit-menü.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Fast leere Seite mit Menü</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <article class="main" layout:fragment="maincontent">
-      <header><h1>Fast leere Seite mit Menü</h1></header>
-      <p>Ein ganz bischen Text...</p>
-    </article>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/formulare.html b/dist/projects/html-experimente/formulare.html
deleted file mode 100644 (file)
index ea0f4af..0000000
+++ /dev/null
@@ -1,272 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="uri='/projects/html-experimente/formulare.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Formulare</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <article class="main" layout:fragment="maincontent">
-      <header><h1>Formulare</h1></header>
-      <form class="form" action="#" method="get">
-        <h2 class="f">Anzeigetext</h2>
-        <div class="f textarea">
-          <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
-          <textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
-          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
-        </div>
-      </form>
-      <form class="form" action="#" method="get">
-        <h2 class="f">Textformatierung</h2>
-        <fieldset class="f radiobutton cf">
-          <legend class="f info">
-            Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
-            Online erscheint die Anzeige als normaler Fließtext.
-          </legend>
-          <hr class="f" />
-          <div class="col2">
-            <div class="f">
-              <input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_01">normaler Fließtext</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_02">Text zentriert</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_04">Text fett</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_05">Text fett und rot</label>
-            </div>
-          </div>
-          <div class="col2">
-            <div class="f">
-              <input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-      <form class="form" action="#" method="get">
-        <h2 class="f">Einspaltige Radiobuttons...</h2>
-        <fieldset class="f radiobutton">
-          <div class="f">
-            <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
-            <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
-          </div>
-          <div class="f">
-            <input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
-            <label class="f" for="radio_tbox_b02">Option X</label>
-          </div>
-          <div class="f">
-            <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
-            <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
-          </div>
-        </fieldset>
-        <hr class="f" />
-        <div class="f submit">
-          <input class="f" type="submit" value="&gt; zur Übersicht" />
-          <input class="f left" type="submit" value="&lt; zurück" />
-          <input class="f" type="submit" value="&gt; weiter" />
-        </div>
-      </form>
-      <form class="form" action="#" method="get">
-        <h2 class="f">Bild</h2>
-        <fieldset class="f checkbox">
-          <legend class="f">
-            Du kannst Deiner Anzeige ein Bild hinzufügen.
-            Das Bild erscheint nur online.
-            Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
-          </legend>
-          <hr class="f" />
-          <div class="f">
-            <input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
-            <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
-          </div>
-          <div class="f">
-            <input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
-            <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
-          </div>
-        </fieldset>
-      </form>
-      <form class="form" action="#" method="get">
-        <h2 class="f">Alleinstehende Checkbox</h2>
-        <div class="f checkbox">
-          <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
-          <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
-        </div>
-      </form>
-      <form class="form" action="#" method="get">
-        <h2 class="f">Kundendaten</h2>
-        <p class="f required">
-          <strong class="r">Pflichtfelder</strong> sind mit einem
-          <strong class="r symbol">*</strong> markiert.
-        </p>
-        <div class="f text required">
-          <label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
-          <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
-        </div>
-        <div class="f text required">
-          <label for="text_tbox_02" class="f">Vorname</label>
-          <input class="f" id="text_tbox_02" type="text" value="Max" />
-        </div>
-        <div class="f select required">
-          <label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
-          <select class="f" id="text_tbox_03">
-            <option>Dortmund</option>
-            <option>Bochum</option>
-            <option>Essen</option>
-            <option>Mönchengladbach</option>
-            <option>Oberhausen</option>
-            <option>Castrop-Rauxel</option>
-            <option>Düsseldorf</option>
-          </select>
-        </div>
-        <div class="f text required">
-          <label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
-          <input class="f error" id="text_tbox_04" type="text" value="" />
-          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
-        </div>
-        <div class="f text required">
-          <label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
-          <input class="f" id="text_tbox_05" type="text" value="" />
-        </div>
-        <div class="f text required">
-          <label for="text_tbox_06" class="f">Telefon</label>
-          <input class="f" id="text_tbox_06" type="text" value="" />
-        </div>
-        <hr class="f" />
-        <div class="f submit">
-          <input class="f" type="submit" value="&gt; weiter" />
-        </div>
-      </form>
-      <form class="form" action="#" method="get">
-        <h2 class="f">Anzeige regionalisieren</h2>
-        <p class="f">
-          Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
-          diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
-          bestimmten Städten suchen.
-          Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
-          diesen Interessenten aber auch nicht gefunden.
-        </p>
-        <hr class="f" />
-        <div class="f text">
-          <label class="f" for="city">Stadt</label>
-          <input id="city" type="text" class="f" />
-          <p class="f info">
-            Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
-          </p>
-        </div>
-      </form>
-      <form class="form" action="#" method="get">
-        <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
-        <div class="f text required">
-          <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
-          <input class="f" id="text_tbox_05" type="password" value="t" />
-        </div>
-      </form>
-      <form class="form" action="#" method="get">
-        <h2 class="f">Lade das Bild hoch</h2>
-        <p class="f info">
-          Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
-          Das Bild darf nicht größer als 8 MByte sein.
-        </p>
-        <div class="f file required">
-          <label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
-          <input class="f" id="file_tbox_01" type="file" />
-        </div>
-        <hr class="f" />
-        <div class="f submit">
-          <input class="f" type="submit" value="&gt; Doch kein Bild" />
-          <input class="f" type="submit" value="&gt; Bild hochladen" />
-        </div>
-      </form>
-      <div class="form">
-        <h2 class="f">Antworten</h2>
-        <p class="f required">
-          <strong class="r">Pflichtfelder</strong> sind mit einem
-          <strong class="r symbol">*</strong> markiert.
-        </p>
-        <div class="f text required">
-          <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
-          <input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
-        </div>
-        <div class="f text required">
-          <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
-          <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
-        </div>
-        <div class="f text required">
-          <label class="f" for="subject"><span class="required">*</span> Betreff</label>
-          <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
-        </div>
-        <div class="f textarea required">
-          <label class="f" for="text"><span class="required">*</span> Nachricht</label>
-          <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
-        </div>
-        <div class="f checkbox">
-          <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
-          <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
-        </div>
-        <div class="f checkbox">
-          <input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
-          <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
-        </div>
-      </div>
-      <div class="form cf">
-        <div class="col2 left">
-          <h2 class="f">Weiter mit Anmeldung</h2>
-          <div class="f text">
-            <label class="f" for="username">Benutzername</label>
-            <input class="f" name="username" id="username" type="text" tabindex="6" />
-          </div>
-          <div class="f text">
-            <label class="f" for="password">Passwort</label>
-            <input class="f" name="password" id="password" type="password" tabindex="7" />
-          </div>
-        </div>
-        <div class="col2 right">
-          <h2 class="f">Weiter ohne Anmeldung</h2>
-          <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
-          <div class="f captcha cf">
-            <span class="f">Was steht da?</span>
-            <img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
-          </div>
-          <div class="f text">
-            <label class="f" for="captcha">Lösung</label>
-            <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
-          </div>
-        </div>
-      </div>
-    </article>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/kein-layout.html b/dist/projects/html-experimente/kein-layout.html
deleted file mode 100644 (file)
index 7d8caf3..0000000
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Alle Stylings deaktiviert', uri='/projects/html-experimente/kein-layout.html'"
-    >
-  <head layout:fragment="head">
-    <title>HTML-Experimente - Kein Layout</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
-  </head>
-  <body>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/phone.html b/dist/projects/html-experimente/phone.html
deleted file mode 100644 (file)
index 759eef1..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Layout für Smartphones', uri='/projects/html-experimente/phone.html'"
-    >
-  <head layout:fragment="head">
-    <title>HTML-Experimente - Layout PHONE</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/phone.css" th:href="@{/css/phone.css}"/>
-    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
-  </head>
-  <body>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/seitenaufteilung.html b/dist/projects/html-experimente/seitenaufteilung.html
deleted file mode 100644 (file)
index e65656c..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Nur das Basis-Layout und die Seitenaufteiltung', uri='/projects/html-experimente/seitenaufteilung.html'"
-    >
-  <head layout:fragment="head">
-    <title>HTML-Experimente - Basis-Layout &amp; Seitenaufteilung</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenaufteilung.css" th:href="@{/css/seitenaufteilung.css}"/>
-    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
-  </head>
-  <body>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/seitenkopf.html b/dist/projects/html-experimente/seitenkopf.html
deleted file mode 100644 (file)
index dc89d9f..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Nur das Basis-Layout und die Seitenaufteiltung', uri='/projects/html-experimente/seitenkopf.html'"
-    >
-  <head layout:fragment="head">
-    <title>HTML-Experimente - Basis-Layout &amp; Seitenkopf</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenkopf.css" th:href="@{/css/seitenkopf.css}"/>
-    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
-  </head>
-  <body>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/symbole.html b/dist/projects/html-experimente/symbole.html
deleted file mode 100644 (file)
index 7572c33..0000000
+++ /dev/null
@@ -1,419 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="uri='/projects/html-experimente/symbole.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Symbol-Font</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <article class="main" layout:fragment="maincontent">
-      <header><h1>Symbol-Font</h1></header>
-      <h2>100%</h2>
-      <div class="symbols">
-        <span class="e600">&#xe600;</span>
-        <span class="e601">&#xe601;</span>
-        <span class="e602">&#xe602;</span>
-        <span class="e603">&#xe603;</span>
-        <span class="e604">&#xe604;</span>
-        <span class="e605">&#xe605;</span>
-        <span class="e606">&#xe606;</span>
-        <span class="e607">&#xe607;</span>
-        <span class="e608">&#xe608;</span>
-        <span class="e609">&#xe609;</span>
-        <span class="e60a">&#xe60a;</span>
-        <span class="e60b">&#xe60b;</span>
-        <span class="e60c">&#xe60c;</span>
-        <span class="e60d">&#xe60d;</span>
-        <span class="e60e">&#xe60e;</span>
-        <span class="e60f">&#xe60f;</span>
-        <span class="e610">&#xe610;</span>
-        <span class="e611">&#xe611;</span>
-        <span class="e612">&#xe612;</span>
-        <span class="e613">&#xe613;</span>
-        <span class="e614">&#xe614;</span>
-        <span class="e615">&#xe615;</span>
-        <span class="e616">&#xe616;</span>
-        <span class="e617">&#xe617;</span>
-        <span class="e618">&#xe618;</span>
-        <span class="e619">&#xe619;</span>
-        <span class="e61a">&#xe61a;</span>
-        <span class="e61b">&#xe61b;</span>
-        <span class="e61c">&#xe61c;</span>
-        <span class="e61d">&#xe61d;</span>
-        <span class="e61e">&#xe61e;</span>
-        <span class="e61f">&#xe61f;</span>
-        <span class="e620">&#xe620;</span>
-        <span class="e621">&#xe621;</span>
-        <span class="e622">&#xe622;</span>
-        <span class="e623">&#xe623;</span>
-        <span class="e624">&#xe624;</span>
-        <span class="e625">&#xe625;</span>
-        <span class="e626">&#xe626;</span>
-        <span class="e627">&#xe627;</span>
-        <span class="e628">&#xe628;</span>
-        <span class="e629">&#xe629;</span>
-        <span class="e62a">&#xe62a;</span>
-        <span class="e62b">&#xe62b;</span>
-        <span class="e62c">&#xe62c;</span>
-        <span class="e62d">&#xe62d;</span>
-        <span class="e62e">&#xe62e;</span>
-        <span class="e62f">&#xe62f;</span>
-        <span class="e630">&#xe630;</span>
-        <span class="e631">&#xe631;</span>
-        <span class="e632">&#xe632;</span>
-        <span class="e633">&#xe633;</span>
-        <span class="e634">&#xe634;</span>
-        <span class="e635">&#xe635;</span>
-        <span class="e636">&#xe636;</span>
-        <span class="e637">&#xe637;</span>
-        <span class="e638">&#xe638;</span>
-        <span class="e639">&#xe639;</span>
-        <span class="e63a">&#xe63a;</span>
-        <span class="e63b">&#xe63b;</span>
-        <span class="e63c">&#xe63c;</span>
-        <span class="e63d">&#xe63d;</span>
-        <span class="e63e">&#xe63e;</span>
-        <span class="e63f">&#xe63f;</span>
-        <span class="e640">&#xe640;</span>
-        <span class="e641">&#xe641;</span>
-        <span class="e642">&#xe642;</span>
-        <span class="e643">&#xe643;</span>
-        <span class="e644">&#xe644;</span>
-        <span class="e645">&#xe645;</span>
-        <span class="e646">&#xe646;</span>
-        <span class="e647">&#xe647;</span>
-        <span class="e648">&#xe648;</span>
-        <span class="e649">&#xe649;</span>
-        <span class="e64a">&#xe64a;</span>
-        <span class="e64b">&#xe64b;</span>
-      </div>
-      <h2>200%</h2>
-      <div class="symbols" style="font-size: 200%; line-height: 1.5em">
-        <span class="e600">&#xe600;</span>
-        <span class="e601">&#xe601;</span>
-        <span class="e602">&#xe602;</span>
-        <span class="e603">&#xe603;</span>
-        <span class="e604">&#xe604;</span>
-        <span class="e605">&#xe605;</span>
-        <span class="e606">&#xe606;</span>
-        <span class="e607">&#xe607;</span>
-        <span class="e608">&#xe608;</span>
-        <span class="e609">&#xe609;</span>
-        <span class="e60a">&#xe60a;</span>
-        <span class="e60b">&#xe60b;</span>
-        <span class="e60c">&#xe60c;</span>
-        <span class="e60d">&#xe60d;</span>
-        <span class="e60e">&#xe60e;</span>
-        <span class="e60f">&#xe60f;</span>
-        <span class="e610">&#xe610;</span>
-        <span class="e611">&#xe611;</span>
-        <span class="e612">&#xe612;</span>
-        <span class="e613">&#xe613;</span>
-        <span class="e614">&#xe614;</span>
-        <span class="e615">&#xe615;</span>
-        <span class="e616">&#xe616;</span>
-        <span class="e617">&#xe617;</span>
-        <span class="e618">&#xe618;</span>
-        <span class="e619">&#xe619;</span>
-        <span class="e61a">&#xe61a;</span>
-        <span class="e61b">&#xe61b;</span>
-        <span class="e61c">&#xe61c;</span>
-        <span class="e61d">&#xe61d;</span>
-        <span class="e61e">&#xe61e;</span>
-        <span class="e61f">&#xe61f;</span>
-        <span class="e620">&#xe620;</span>
-        <span class="e621">&#xe621;</span>
-        <span class="e622">&#xe622;</span>
-        <span class="e623">&#xe623;</span>
-        <span class="e624">&#xe624;</span>
-        <span class="e625">&#xe625;</span>
-        <span class="e626">&#xe626;</span>
-        <span class="e627">&#xe627;</span>
-        <span class="e628">&#xe628;</span>
-        <span class="e629">&#xe629;</span>
-        <span class="e62a">&#xe62a;</span>
-        <span class="e62b">&#xe62b;</span>
-        <span class="e62c">&#xe62c;</span>
-        <span class="e62d">&#xe62d;</span>
-        <span class="e62e">&#xe62e;</span>
-        <span class="e62f">&#xe62f;</span>
-        <span class="e630">&#xe630;</span>
-        <span class="e631">&#xe631;</span>
-        <span class="e632">&#xe632;</span>
-        <span class="e633">&#xe633;</span>
-        <span class="e634">&#xe634;</span>
-        <span class="e635">&#xe635;</span>
-        <span class="e636">&#xe636;</span>
-        <span class="e637">&#xe637;</span>
-        <span class="e638">&#xe638;</span>
-        <span class="e639">&#xe639;</span>
-        <span class="e63a">&#xe63a;</span>
-        <span class="e63b">&#xe63b;</span>
-        <span class="e63c">&#xe63c;</span>
-        <span class="e63d">&#xe63d;</span>
-        <span class="e63e">&#xe63e;</span>
-        <span class="e63f">&#xe63f;</span>
-        <span class="e640">&#xe640;</span>
-        <span class="e641">&#xe641;</span>
-        <span class="e642">&#xe642;</span>
-        <span class="e643">&#xe643;</span>
-        <span class="e644">&#xe644;</span>
-        <span class="e645">&#xe645;</span>
-        <span class="e646">&#xe646;</span>
-        <span class="e647">&#xe647;</span>
-        <span class="e648">&#xe648;</span>
-        <span class="e649">&#xe649;</span>
-        <span class="e64a">&#xe64a;</span>
-        <span class="e64b">&#xe64b;</span>
-      </div>
-      <h2>300%</h2>
-      <div class="symbols" style="font-size: 300%; line-height: 1.5em">
-        <span class="e600">&#xe600;</span>
-        <span class="e601">&#xe601;</span>
-        <span class="e602">&#xe602;</span>
-        <span class="e603">&#xe603;</span>
-        <span class="e604">&#xe604;</span>
-        <span class="e605">&#xe605;</span>
-        <span class="e606">&#xe606;</span>
-        <span class="e607">&#xe607;</span>
-        <span class="e608">&#xe608;</span>
-        <span class="e609">&#xe609;</span>
-        <span class="e60a">&#xe60a;</span>
-        <span class="e60b">&#xe60b;</span>
-        <span class="e60c">&#xe60c;</span>
-        <span class="e60d">&#xe60d;</span>
-        <span class="e60e">&#xe60e;</span>
-        <span class="e60f">&#xe60f;</span>
-        <span class="e610">&#xe610;</span>
-        <span class="e611">&#xe611;</span>
-        <span class="e612">&#xe612;</span>
-        <span class="e613">&#xe613;</span>
-        <span class="e614">&#xe614;</span>
-        <span class="e615">&#xe615;</span>
-        <span class="e616">&#xe616;</span>
-        <span class="e617">&#xe617;</span>
-        <span class="e618">&#xe618;</span>
-        <span class="e619">&#xe619;</span>
-        <span class="e61a">&#xe61a;</span>
-        <span class="e61b">&#xe61b;</span>
-        <span class="e61c">&#xe61c;</span>
-        <span class="e61d">&#xe61d;</span>
-        <span class="e61e">&#xe61e;</span>
-        <span class="e61f">&#xe61f;</span>
-        <span class="e620">&#xe620;</span>
-        <span class="e621">&#xe621;</span>
-        <span class="e622">&#xe622;</span>
-        <span class="e623">&#xe623;</span>
-        <span class="e624">&#xe624;</span>
-        <span class="e625">&#xe625;</span>
-        <span class="e626">&#xe626;</span>
-        <span class="e627">&#xe627;</span>
-        <span class="e628">&#xe628;</span>
-        <span class="e629">&#xe629;</span>
-        <span class="e62a">&#xe62a;</span>
-        <span class="e62b">&#xe62b;</span>
-        <span class="e62c">&#xe62c;</span>
-        <span class="e62d">&#xe62d;</span>
-        <span class="e62e">&#xe62e;</span>
-        <span class="e62f">&#xe62f;</span>
-        <span class="e630">&#xe630;</span>
-        <span class="e631">&#xe631;</span>
-        <span class="e632">&#xe632;</span>
-        <span class="e633">&#xe633;</span>
-        <span class="e634">&#xe634;</span>
-        <span class="e635">&#xe635;</span>
-        <span class="e636">&#xe636;</span>
-        <span class="e637">&#xe637;</span>
-        <span class="e638">&#xe638;</span>
-        <span class="e639">&#xe639;</span>
-        <span class="e63a">&#xe63a;</span>
-        <span class="e63b">&#xe63b;</span>
-        <span class="e63c">&#xe63c;</span>
-        <span class="e63d">&#xe63d;</span>
-        <span class="e63e">&#xe63e;</span>
-        <span class="e63f">&#xe63f;</span>
-        <span class="e640">&#xe640;</span>
-        <span class="e641">&#xe641;</span>
-        <span class="e642">&#xe642;</span>
-        <span class="e643">&#xe643;</span>
-        <span class="e644">&#xe644;</span>
-        <span class="e645">&#xe645;</span>
-        <span class="e646">&#xe646;</span>
-        <span class="e647">&#xe647;</span>
-        <span class="e648">&#xe648;</span>
-        <span class="e649">&#xe649;</span>
-        <span class="e64a">&#xe64a;</span>
-        <span class="e64b">&#xe64b;</span>
-      </div>
-      <h2>400%</h2>
-      <div class="symbols" style="font-size: 400%; line-height: 1.5em">
-        <span class="e600">&#xe600;</span>
-        <span class="e601">&#xe601;</span>
-        <span class="e602">&#xe602;</span>
-        <span class="e603">&#xe603;</span>
-        <span class="e604">&#xe604;</span>
-        <span class="e605">&#xe605;</span>
-        <span class="e606">&#xe606;</span>
-        <span class="e607">&#xe607;</span>
-        <span class="e608">&#xe608;</span>
-        <span class="e609">&#xe609;</span>
-        <span class="e60a">&#xe60a;</span>
-        <span class="e60b">&#xe60b;</span>
-        <span class="e60c">&#xe60c;</span>
-        <span class="e60d">&#xe60d;</span>
-        <span class="e60e">&#xe60e;</span>
-        <span class="e60f">&#xe60f;</span>
-        <span class="e610">&#xe610;</span>
-        <span class="e611">&#xe611;</span>
-        <span class="e612">&#xe612;</span>
-        <span class="e613">&#xe613;</span>
-        <span class="e614">&#xe614;</span>
-        <span class="e615">&#xe615;</span>
-        <span class="e616">&#xe616;</span>
-        <span class="e617">&#xe617;</span>
-        <span class="e618">&#xe618;</span>
-        <span class="e619">&#xe619;</span>
-        <span class="e61a">&#xe61a;</span>
-        <span class="e61b">&#xe61b;</span>
-        <span class="e61c">&#xe61c;</span>
-        <span class="e61d">&#xe61d;</span>
-        <span class="e61e">&#xe61e;</span>
-        <span class="e61f">&#xe61f;</span>
-        <span class="e620">&#xe620;</span>
-        <span class="e621">&#xe621;</span>
-        <span class="e622">&#xe622;</span>
-        <span class="e623">&#xe623;</span>
-        <span class="e624">&#xe624;</span>
-        <span class="e625">&#xe625;</span>
-        <span class="e626">&#xe626;</span>
-        <span class="e627">&#xe627;</span>
-        <span class="e628">&#xe628;</span>
-        <span class="e629">&#xe629;</span>
-        <span class="e62a">&#xe62a;</span>
-        <span class="e62b">&#xe62b;</span>
-        <span class="e62c">&#xe62c;</span>
-        <span class="e62d">&#xe62d;</span>
-        <span class="e62e">&#xe62e;</span>
-        <span class="e62f">&#xe62f;</span>
-        <span class="e630">&#xe630;</span>
-        <span class="e631">&#xe631;</span>
-        <span class="e632">&#xe632;</span>
-        <span class="e633">&#xe633;</span>
-        <span class="e634">&#xe634;</span>
-        <span class="e635">&#xe635;</span>
-        <span class="e636">&#xe636;</span>
-        <span class="e637">&#xe637;</span>
-        <span class="e638">&#xe638;</span>
-        <span class="e639">&#xe639;</span>
-        <span class="e63a">&#xe63a;</span>
-        <span class="e63b">&#xe63b;</span>
-        <span class="e63c">&#xe63c;</span>
-        <span class="e63d">&#xe63d;</span>
-        <span class="e63e">&#xe63e;</span>
-        <span class="e63f">&#xe63f;</span>
-        <span class="e640">&#xe640;</span>
-        <span class="e641">&#xe641;</span>
-        <span class="e642">&#xe642;</span>
-        <span class="e643">&#xe643;</span>
-        <span class="e644">&#xe644;</span>
-        <span class="e645">&#xe645;</span>
-        <span class="e646">&#xe646;</span>
-        <span class="e647">&#xe647;</span>
-        <span class="e648">&#xe648;</span>
-        <span class="e649">&#xe649;</span>
-        <span class="e64a">&#xe64a;</span>
-        <span class="e64b">&#xe64b;</span>
-      </div>
-      <h2>500%</h2>
-      <div class="symbols" style="font-size: 500%; line-height: 1.5em">
-        <span class="e600">&#xe600;</span>
-        <span class="e601">&#xe601;</span>
-        <span class="e602">&#xe602;</span>
-        <span class="e603">&#xe603;</span>
-        <span class="e604">&#xe604;</span>
-        <span class="e605">&#xe605;</span>
-        <span class="e606">&#xe606;</span>
-        <span class="e607">&#xe607;</span>
-        <span class="e608">&#xe608;</span>
-        <span class="e609">&#xe609;</span>
-        <span class="e60a">&#xe60a;</span>
-        <span class="e60b">&#xe60b;</span>
-        <span class="e60c">&#xe60c;</span>
-        <span class="e60d">&#xe60d;</span>
-        <span class="e60e">&#xe60e;</span>
-        <span class="e60f">&#xe60f;</span>
-        <span class="e610">&#xe610;</span>
-        <span class="e611">&#xe611;</span>
-        <span class="e612">&#xe612;</span>
-        <span class="e613">&#xe613;</span>
-        <span class="e614">&#xe614;</span>
-        <span class="e615">&#xe615;</span>
-        <span class="e616">&#xe616;</span>
-        <span class="e617">&#xe617;</span>
-        <span class="e618">&#xe618;</span>
-        <span class="e619">&#xe619;</span>
-        <span class="e61a">&#xe61a;</span>
-        <span class="e61b">&#xe61b;</span>
-        <span class="e61c">&#xe61c;</span>
-        <span class="e61d">&#xe61d;</span>
-        <span class="e61e">&#xe61e;</span>
-        <span class="e61f">&#xe61f;</span>
-        <span class="e620">&#xe620;</span>
-        <span class="e621">&#xe621;</span>
-        <span class="e622">&#xe622;</span>
-        <span class="e623">&#xe623;</span>
-        <span class="e624">&#xe624;</span>
-        <span class="e625">&#xe625;</span>
-        <span class="e626">&#xe626;</span>
-        <span class="e627">&#xe627;</span>
-        <span class="e628">&#xe628;</span>
-        <span class="e629">&#xe629;</span>
-        <span class="e62a">&#xe62a;</span>
-        <span class="e62b">&#xe62b;</span>
-        <span class="e62c">&#xe62c;</span>
-        <span class="e62d">&#xe62d;</span>
-        <span class="e62e">&#xe62e;</span>
-        <span class="e62f">&#xe62f;</span>
-        <span class="e630">&#xe630;</span>
-        <span class="e631">&#xe631;</span>
-        <span class="e632">&#xe632;</span>
-        <span class="e633">&#xe633;</span>
-        <span class="e634">&#xe634;</span>
-        <span class="e635">&#xe635;</span>
-        <span class="e636">&#xe636;</span>
-        <span class="e637">&#xe637;</span>
-        <span class="e638">&#xe638;</span>
-        <span class="e639">&#xe639;</span>
-        <span class="e63a">&#xe63a;</span>
-        <span class="e63b">&#xe63b;</span>
-        <span class="e63c">&#xe63c;</span>
-        <span class="e63d">&#xe63d;</span>
-        <span class="e63e">&#xe63e;</span>
-        <span class="e63f">&#xe63f;</span>
-        <span class="e640">&#xe640;</span>
-        <span class="e641">&#xe641;</span>
-        <span class="e642">&#xe642;</span>
-        <span class="e643">&#xe643;</span>
-        <span class="e644">&#xe644;</span>
-        <span class="e645">&#xe645;</span>
-        <span class="e646">&#xe646;</span>
-        <span class="e647">&#xe647;</span>
-        <span class="e648">&#xe648;</span>
-        <span class="e649">&#xe649;</span>
-        <span class="e64a">&#xe64a;</span>
-        <span class="e64b">&#xe64b;</span>
-      </div>
-    </article>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/tablet.html b/dist/projects/html-experimente/tablet.html
deleted file mode 100644 (file)
index e364820..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Layout für Tablets', uri='/projects/html-experimente/tablet.html'"
-    >
-  <head layout:fragment="head">
-    <title>HTML-Experimente - Layout TABLET</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tablet.css" th:href="@{/css/tablet.css}"/>
-    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
-  </head>
-  <body>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/testlab.html b/dist/projects/html-experimente/testlab.html
deleted file mode 100644 (file)
index 8a78efc..0000000
+++ /dev/null
@@ -1,271 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/testlab"
-    th:with="title='Media-Query-Test: BEISPIEL', uri='/projects/html-experimente/testlab.html'"
-    >
-  <head>
-    <title>HTML-Experimente - Media-Query-Test: BEISPIEL</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
-    <script src="../../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body>
-    <div layout:fragment="content" th:remove="tag">
-      <form class="testlab form" action="#" method="get">
-        <h2 class="f">Anzeigetext</h2>
-        <div class="f textarea">
-          <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
-          <textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
-          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
-        </div>
-      </form>
-      <form class="testlab form" action="#" method="get">
-        <h2 class="f">Textformatierung</h2>
-        <fieldset class="f radiobutton cf">
-          <legend class="f info">
-            Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
-            Online erscheint die Anzeige als normaler Fließtext.
-          </legend>
-          <hr class="f" />
-          <div class="col2">
-            <div class="f">
-              <input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_01">normaler Fließtext</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_02">Text zentriert</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_04">Text fett</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_05">Text fett und rot</label>
-            </div>
-          </div>
-          <div class="col2">
-            <div class="f">
-              <input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
-              <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-      <form class="testlab form" action="#" method="get">
-        <h2 class="f">Einspaltige Radiobuttons...</h2>
-        <fieldset class="f radiobutton">
-          <div class="f">
-            <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
-            <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
-          </div>
-          <div class="f">
-            <input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
-            <label class="f" for="radio_tbox_b02">Option X</label>
-          </div>
-          <div class="f">
-            <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
-            <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
-          </div>
-        </fieldset>
-        <hr class="f" />
-        <div class="f submit">
-          <input class="f" type="submit" value="&gt; zur Übersicht" />
-          <input class="f left" type="submit" value="&lt; zurück" />
-          <input class="f" type="submit" value="&gt; weiter" />
-        </div>
-      </form>
-      <form class="testlab form" action="#" method="get">
-        <h2 class="f">Bild</h2>
-        <fieldset class="f checkbox">
-          <legend class="f">
-            Du kannst Deiner Anzeige ein Bild hinzufügen.
-            Das Bild erscheint nur online.
-            Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
-          </legend>
-          <hr class="f" />
-          <div class="f">
-            <input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
-            <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
-          </div>
-          <div class="f">
-            <input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
-            <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
-          </div>
-        </fieldset>
-      </form>
-      <form class="testlab form" action="#" method="get">
-        <h2 class="f">Alleinstehende Checkbox</h2>
-        <div class="f checkbox">
-          <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
-          <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
-        </div>
-      </form>
-      <form class="testlab form" action="#" method="get">
-        <h2 class="f">Kundendaten</h2>
-        <p class="f required">
-          <strong class="r">Pflichtfelder</strong> sind mit einem
-          <strong class="r symbol">*</strong> markiert.
-        </p>
-        <div class="f text required">
-          <label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
-          <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
-        </div>
-        <div class="f text required">
-          <label for="text_tbox_02" class="f">Vorname</label>
-          <input class="f" id="text_tbox_02" type="text" value="Max" />
-        </div>
-        <div class="f select required">
-          <label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
-          <select class="f" id="text_tbox_03">
-            <option>Dortmund</option>
-            <option>Bochum</option>
-            <option>Essen</option>
-            <option>Mönchengladbach</option>
-            <option>Oberhausen</option>
-            <option>Castrop-Rauxel</option>
-            <option>Düsseldorf</option>
-          </select>
-        </div>
-        <div class="f text required">
-          <label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
-          <input class="f error" id="text_tbox_04" type="text" value="" />
-          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
-        </div>
-        <div class="f text required">
-          <label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
-          <input class="f" id="text_tbox_05" type="text" value="" />
-        </div>
-        <div class="f text required">
-          <label for="text_tbox_06" class="f">Telefon</label>
-          <input class="f" id="text_tbox_06" type="text" value="" />
-        </div>
-        <hr class="f" />
-        <div class="f submit">
-          <input class="f" type="submit" value="&gt; weiter" />
-        </div>
-      </form>
-      <form class="testlab form" action="#" method="get">
-        <h2 class="f">Anzeige regionalisieren</h2>
-        <p class="f">
-          Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
-          diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
-          bestimmten Städten suchen.
-          Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
-          diesen Interessenten aber auch nicht gefunden.
-        </p>
-        <hr class="f" />
-        <div class="f text">
-          <label class="f" for="city">Stadt</label>
-          <input id="city" type="text" class="f" />
-          <p class="f info">
-            Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
-          </p>
-        </div>
-      </form>
-      <form class="testlab form" action="#" method="get">
-        <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
-        <div class="f text required">
-          <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
-          <input class="f" id="text_tbox_05" type="password" value="t" />
-        </div>
-      </form>
-      <form class="testlab form" action="#" method="get">
-        <h2 class="f">Lade das Bild hoch</h2>
-        <p class="f info">
-          Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
-          Das Bild darf nicht größer als 8 MByte sein.
-        </p>
-        <div class="f file required">
-          <label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
-          <input class="f" id="file_tbox_01" type="file" />
-        </div>
-        <hr class="f" />
-        <div class="f submit">
-          <input class="f" type="submit" value="&gt; Doch kein Bild" />
-          <input class="f" type="submit" value="&gt; Bild hochladen" />
-        </div>
-      </form>
-      <div class="testlab form">
-        <h2 class="f">Antworten</h2>
-        <p class="f required">
-          <strong class="r">Pflichtfelder</strong> sind mit einem
-          <strong class="r symbol">*</strong> markiert.
-        </p>
-        <div class="f text required">
-          <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
-          <input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
-        </div>
-        <div class="f text required">
-          <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
-          <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
-        </div>
-        <div class="f text required">
-          <label class="f" for="subject"><span class="required">*</span> Betreff</label>
-          <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
-        </div>
-        <div class="f textarea required">
-          <label class="f" for="text"><span class="required">*</span> Nachricht</label>
-          <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
-        </div>
-        <div class="f checkbox">
-          <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
-          <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
-        </div>
-        <div class="f checkbox">
-          <input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
-          <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
-        </div>
-      </div>
-      <div class="testlab form cf">
-        <div class="col2 left">
-          <h2 class="f">Weiter mit Anmeldung</h2>
-          <div class="f text">
-            <label class="f" for="username">Benutzername</label>
-            <input class="f" name="username" id="username" type="text" tabindex="6" />
-          </div>
-          <div class="f text">
-            <label class="f" for="password">Passwort</label>
-            <input class="f" name="password" id="password" type="password" tabindex="7" />
-          </div>
-        </div>
-        <div class="col2 right">
-          <h2 class="f">Weiter ohne Anmeldung</h2>
-          <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
-          <div class="f captcha cf">
-            <span class="f">Was steht da?</span>
-            <img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
-          </div>
-          <div class="f text">
-            <label class="f" for="captcha">Lösung</label>
-            <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/dist/projects/html-experimente/tiny.html b/dist/projects/html-experimente/tiny.html
deleted file mode 100644 (file)
index d7a789a..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    xmlns:th="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="title='Layout für sehr kleine Bildschirmgrößen', uri='/projects/html-experimente/tiny.html'"
-    >
-  <head layout:fragment="head">
-    <title>HTML-Experimente - Layout TINY</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
-    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tiny.css" th:href="@{/css/tiny.css}"/>
-    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
-  </head>
-  <body>
-    <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
-  </body>
-</html>
diff --git a/dist/projects/typo.html b/dist/projects/typo.html
deleted file mode 100644 (file)
index 3205c1e..0000000
+++ /dev/null
@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:layout="http://www.thymeleaf.org"
-    layout:decorator="templates/layout"
-    th:with="uri='/projects/typo.html'"
-    >
-  <head>
-    <title>Typography</title>
-    <!--/*-->
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
-    <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
-    <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
-    <script src="../js/prettify.js" th:src="@{/js/prettify.js}"></script>
-    <script src="../js/less-1.7.0.min.js"></script>
-    <!--*/-->
-  </head>
-  <body onload="prettyPrint()">
-    <article layout:fragment="maincontent">
-      <header><h1>Typography</h1></header>
-      <p>
-        Lorem ipsum dolor <a href="#da">sit amet</a>, consectetur adipisicing elit,
-        sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud
-        <a href="#dort">exercitation</a> ullamco laboris nisi ut aliquip
-        <em>ex ea</em> commodo consequat. Duis aute irure dolor in reprehenderit
-        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        <strong>Excepteur sint <em>occaecat</em> cupidatat non proident</strong>,
-        sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h2>Ein Link <a href="#link">im Titel</a></h2>
-      <p>Ein Link <a href="#link">im Text</a>.</p>
-      <h2>Normal / Italic / Bold / Bold+Italic</h2>
-      <ul>
-        <li>normal</li>
-        <li><em>italic</em></li>
-        <li><strong>bold</strong></li>
-        <li><strong><em>bold italic</em></strong></li>
-      </ul>
-      <p>
-        ÄäÖöÜüß@€¢
-        <strong>ÄäÖöÜüß@€¢</strong>
-        <em>ÄäÖöÜüß@€¢</em>
-        <strong><em>ÄäÖöÜüß@€¢</em></strong>
-      </p>
-      <h1>H1: Heading</h1>
-      <h2>H2: Heading</h2>
-      <h3>H3: Heading</h3>
-      <h4>H4: Heading</h4>
-      <h1>H1: Heading</h1>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h2>H2: Heading</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h3>H3: Heading</h3>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h4>H4: Heading</h4>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h1>Preformatted code</h1>
-      <p>
-        <em>Juplo Branding</em> uses
-        <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" title="Visit prettify's README">google-code-prettify</a> for automatic
-        syntax highlighting.
-      </p>
-      <pre class="prettyprint linenums"><code class="language-xml">&lt;plugin&gt;
-  &lt;groupId&gt;ro.isdc.wro4j&lt;/groupId&gt;
-  &lt;artifactId&gt;wro4j-maven-plugin&lt;/artifactId&gt;
-  &lt;version&gt;${wro4j.version}&lt;/version&gt;
-  &lt;configuration&gt;
-    &lt;wroManagerFactory&gt;ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory&lt;/wroManagerFactory&gt;
-    &lt;cssDestinationFolder&gt;${project.build.directory}/${project.build.finalName}/css/&lt;/cssDestinationFolder&gt;
-  &lt;/configuration&gt;
-  &lt;executions&gt;
-    &lt;execution&gt;
-      &lt;phase&gt;package&lt;/phase&gt;
-      &lt;goals&gt;
-        &lt;goal&gt;run&lt;/goal&gt;
-      &lt;/goals&gt;
-    &lt;/execution&gt;
-  &lt;/executions&gt;
-&lt;/plugin&gt;
-</code></pre>
-    </article>
-  </body>
-</html>
index d7d592d..36b9535 100644 (file)
           <div th:fragment="maincontent">
             <p>
               <strong>Lorem ipsum</strong> dolor
           <div th:fragment="maincontent">
             <p>
               <strong>Lorem ipsum</strong> dolor
-              <a href="../projects/typo.html" th:href="@{/projects/typo.html}">sit amet</a>,
+              <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
               consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
               labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
               consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
               labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-              <a href="#" th:href="@{/projects/html-experimente.html}">exercitation</a>
+              <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
               ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
               irure dolor in reprehenderit in voluptate velit esse cillum dolore
               eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
               ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
               irure dolor in reprehenderit in voluptate velit esse cillum dolore
               eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                   class="s sub"
                   th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
                   >
                   class="s sub"
                   th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
                   >
-                <a  href="../projects/fix-swf.html"
+                <a  href="../potemkin/fix-swf.html"
                     th:href="@{${entry.key}}"
                     class="s selected"
                     th:class="${selected} ? 's selected' : 's'"
                     th:href="@{${entry.key}}"
                     class="s selected"
                     th:class="${selected} ? 's selected' : 's'"
                     <strong class="s">Overview</strong>
                   </li>
                   <!--/*-->
                     <strong class="s">Overview</strong>
                   </li>
                   <!--/*-->
-                  <li class="s"><a href="../projects/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+                  <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
                   <li class="s"><a href="#" class="s">FAQ</a></li>
                   <li class="s"><a href="#" class="s">Documentation</a></li>
                   <!--*/-->
                   <li class="s"><a href="#" class="s">FAQ</a></li>
                   <li class="s"><a href="#" class="s">Documentation</a></li>
                   <!--*/-->
               <!--/*-->
               <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
               <!--/*-->
               <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
-              <li class="s sub off"><a href="../projects/html-experimente.html" th:href="@{/projects/html-experimente.html}" class="s">HTML-Experimente</a></li>
+              <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
-              <li class="s off"><a href="../projects/typo.html" th:href="@{/projects/typo.html}" class="s">Typography</a></li>
+              <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
               <!--*/-->
             </ul>
             <hr class="n"/>
               <!--*/-->
             </ul>
             <hr class="n"/>
index 25ba629..59af33a 100644 (file)
         { "uri": "/blog.html", "name": "Blog" }
       ]
     },
         { "uri": "/blog.html", "name": "Blog" }
       ]
     },
+    "/projects.html": {
+      "name": "Projects",
+      "childs": {
+        "/simple-mapper/index.html": "Simple Mapper 4 JSON",
+        "/maven-thymeleaf-skin/index.html": "Apache-Maven Thymeleaf-Skin"
+      },
+      "crumbs": [
+        { "uri": "/projects.html", "name": "Projects" }
+      ]
+    },
     "/blog/article.html": {
       "name": "An Article",
       "crumbs": [
     "/blog/article.html": {
       "name": "An Article",
       "crumbs": [
         { "uri": "/blog/comments.html", "name": "Comments" }
       ]
     },
         { "uri": "/blog/comments.html", "name": "Comments" }
       ]
     },
-    "/projects.html": {
+    "/potemkin.html": {
       "name": "Projects",
       "childs": {
         "#hibernate4-maven-plugin": "Hibernate 4 Maven Plugin",
       "name": "Projects",
       "childs": {
         "#hibernate4-maven-plugin": "Hibernate 4 Maven Plugin",
-        "/projects/fix-swf/overview.html": "Fix SWF",
+        "/potemkin/fix-swf/overview.html": "Fix SWF",
         "#jquery.openx": "jQuery OpenX",
         "#jquery.openx": "jQuery OpenX",
-        "/projects/html-experimente.html": "HTML-Experimente",
+        "/potemkin/html-experimente.html": "HTML-Experimente",
         "#accelerator": "accelerator",
         "#accelerator": "accelerator",
-        "/simple-mapper/index.html": "Simple Mapper 4 JSON",
-        "/maven-thymeleaf-skin/index.html": "Apache-Maven Thymeleaf-Skin",
-        "/projects/typo.html": "Typography"
+        "/potemkin/typo.html": "Typography"
       },
       "crumbs": [
       },
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" }
       ]
     },
     "#hibernate4-maven-plugin": {
       "name": "Overview",
       "childs": {}
     },
       ]
     },
     "#hibernate4-maven-plugin": {
       "name": "Overview",
       "childs": {}
     },
-    "/projects/fix-swf/overview.html": {
+    "/potemkin/fix-swf/overview.html": {
       "name": "Overview",
       "childs": {
       "name": "Overview",
       "childs": {
-        "/projects/fix-swf/overview.html": "Overview",
-        "/projects/fix-swf/getting-started.html": "Getting Started",
+        "/potemkin/fix-swf/overview.html": "Overview",
+        "/potemkin/fix-swf/getting-started.html": "Getting Started",
         "#faq": "FAQ",
         "#documentation": "Documentation"
       },
       "crumbs": [
         "#faq": "FAQ",
         "#documentation": "Documentation"
       },
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/fix-swf/overview.html", "name": "Fix SWF" },
-        { "uri": "/projects/fix-swf/overview.html", "name": "Overview" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/fix-swf/overview.html", "name": "Fix SWF" },
+        { "uri": "/potemkin/fix-swf/overview.html", "name": "Overview" }
       ]
     },
     "#faq": { "name": "FAQ" },
       ]
     },
     "#faq": { "name": "FAQ" },
         { "uri": "/maven-thymeleaf-skin/index.html", "name": "Apache-Maven Thymeleaf-Skin" }
       ]
     },
         { "uri": "/maven-thymeleaf-skin/index.html", "name": "Apache-Maven Thymeleaf-Skin" }
       ]
     },
-    "/projects/typo.html": {
+    "/potemkin/typo.html": {
       "name": "Typography",
       "crumbs": [
       "name": "Typography",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/typo.html", "name": "Typography" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/typo.html", "name": "Typography" }
       ]
     },
       ]
     },
-    "/projects/html-experimente.html": {
+    "/potemkin/html-experimente.html": {
       "name": "HTML-Experimente",
       "childs": {
       "name": "HTML-Experimente",
       "childs": {
-        "/projects/html-experimente/formulare.html": "Formulare",
-        "/projects/html-experimente/symbole.html": "Symbol-Font",
+        "/potemkin/html-experimente/formulare.html": "Formulare",
+        "/potemkin/html-experimente/symbole.html": "Symbol-Font",
         "/templates/404.html": "404-Template",
         "/templates/404.html": "404-Template",
-        "/projects/html-experimente/gibts-ja-gar-nicht.html": "404-Fehlerseite",
+        "/potemkin/html-experimente/gibts-ja-gar-nicht.html": "404-Fehlerseite",
         "/templates/error.html": "5xx-Template",
         "/templates/error.html": "5xx-Template",
-        "/projects/html-experimente/error.html": "5xx-Fehlerseite",
-        "/projects/html-experimente/fast-leer-mit-menü.html": "Leer, mit Menü, ohne Marginal",
-        "/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html": "Leer, mit Menü, mit Marginal",
-        "/projects/html-experimente/fast-leer-kein-menü.html": "Leer, ohne Menü, ohne Marginal",
-        "/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html": "Leer, ohne Menü, mit Marginal",
-        "/projects/html-experimente/fast-leer-einspaltig.html": "Leer, einspaltig",
-        "/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html": "Leer, einspaltig, mit Marginal",
-        "/projects/html-experimente/breadcrumb.html": "Langer Breadcrumb",
-        "/projects/html-experimente/kein-layout.html": "Alle Stylings deaktiviert",
-        "/projects/html-experimente/basis-layout.html": "Nur das Basis-Layout",
-        "/projects/html-experimente/druck-layout.html": "Druck-Layout",
-        "/projects/html-experimente/tiny.html": "Layout TINY",
-        "/projects/html-experimente/phone.html": "Layout PHONE",
-        "/projects/html-experimente/tablet.html": "Layout TABLET",
-        "/projects/html-experimente/seitenaufteilung.html": "Basis-Layout & Seitenaufteilung",
-        "/projects/html-experimente/seitenkopf.html": "Basis-Layout & Seitenkopf",
-        "/projects/html-experimente/testlab.html": "Media-Query-Test (Beispiel)"
+        "/potemkin/html-experimente/error.html": "5xx-Fehlerseite",
+        "/potemkin/html-experimente/fast-leer-mit-menü.html": "Leer, mit Menü, ohne Marginal",
+        "/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html": "Leer, mit Menü, mit Marginal",
+        "/potemkin/html-experimente/fast-leer-kein-menü.html": "Leer, ohne Menü, ohne Marginal",
+        "/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html": "Leer, ohne Menü, mit Marginal",
+        "/potemkin/html-experimente/fast-leer-einspaltig.html": "Leer, einspaltig",
+        "/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html": "Leer, einspaltig, mit Marginal",
+        "/potemkin/html-experimente/breadcrumb.html": "Langer Breadcrumb",
+        "/potemkin/html-experimente/kein-layout.html": "Alle Stylings deaktiviert",
+        "/potemkin/html-experimente/basis-layout.html": "Nur das Basis-Layout",
+        "/potemkin/html-experimente/druck-layout.html": "Druck-Layout",
+        "/potemkin/html-experimente/tiny.html": "Layout TINY",
+        "/potemkin/html-experimente/phone.html": "Layout PHONE",
+        "/potemkin/html-experimente/tablet.html": "Layout TABLET",
+        "/potemkin/html-experimente/seitenaufteilung.html": "Basis-Layout & Seitenaufteilung",
+        "/potemkin/html-experimente/seitenkopf.html": "Basis-Layout & Seitenkopf",
+        "/potemkin/html-experimente/testlab.html": "Media-Query-Test (Beispiel)"
       },
       "crumbs": [
       },
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" }
       ]
     },
       ]
     },
-    "/projects/fix-swf/getting-started.html": {
+    "/potemkin/fix-swf/getting-started.html": {
       "name": "Getting Started",
       "crumbs": [
       "name": "Getting Started",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/fix-swf/overview.html", "name": "Fix SWF" },
-        { "uri": "/projects/fix-swf/getting-started.html", "name": "Getting Started" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/fix-swf/overview.html", "name": "Fix SWF" },
+        { "uri": "/potemkin/fix-swf/getting-started.html", "name": "Getting Started" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/formulare.html": {
+    "/potemkin/html-experimente/formulare.html": {
       "name": "Formulare",
       "crumbs": [
       "name": "Formulare",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/formulare.html", "name": "Formulare" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/formulare.html", "name": "Formulare" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/symbole.html": {
+    "/potemkin/html-experimente/symbole.html": {
       "name": "Symbol-Font",
       "crumbs": [
       "name": "Symbol-Font",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/symbole.html", "name": "Symbol-Font" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/symbole.html", "name": "Symbol-Font" }
       ]
     },
     "/templates/404.html": {
       "name": "404-Template",
       "crumbs": [
       ]
     },
     "/templates/404.html": {
       "name": "404-Template",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
         { "uri": "/templates/404.html", "name": "404-Template" }
       ]
     },
         { "uri": "/templates/404.html", "name": "404-Template" }
       ]
     },
-    "/projects/html-experimente/gibts-ja-gar-nicht.html": {
+    "/potemkin/html-experimente/gibts-ja-gar-nicht.html": {
       "name": "404-Fehlerseite",
       "crumbs": [
       "name": "404-Fehlerseite",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/gibts-ja-gar-nicht.html", "name": "404-Fehlerseite" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/gibts-ja-gar-nicht.html", "name": "404-Fehlerseite" }
       ]
     },
     "/templates/error.html": {
       "name": "5xx-Template",
       "crumbs": [
       ]
     },
     "/templates/error.html": {
       "name": "5xx-Template",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
         { "uri": "/templates/error.html", "name": "5xx-Template" }
       ]
     },
         { "uri": "/templates/error.html", "name": "5xx-Template" }
       ]
     },
-    "/projects/html-experimente/error.html": {
+    "/potemkin/html-experimente/error.html": {
       "name": "5xx-Fehlerseite",
       "crumbs": [
       "name": "5xx-Fehlerseite",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/error.html", "name": "5xx-Fehlerseite" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/error.html", "name": "5xx-Fehlerseite" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/fast-leer-mit-menü.html": {
+    "/potemkin/html-experimente/fast-leer-mit-menü.html": {
       "name": "Leer, mit Menü, ohne Marginal",
       "crumbs": [
       "name": "Leer, mit Menü, ohne Marginal",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/fast-leer-mit-menü.html", "name": "Leer, mit Menü, ohne Marginal" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/fast-leer-mit-menü.html", "name": "Leer, mit Menü, ohne Marginal" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html": {
+    "/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html": {
       "name": "Leer, mit Menü, mit Marginal",
       "crumbs": [
       "name": "Leer, mit Menü, mit Marginal",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html", "name": "Leer, mit Menü, mit Marginal" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html", "name": "Leer, mit Menü, mit Marginal" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/fast-leer-kein-menü.html": {
+    "/potemkin/html-experimente/fast-leer-kein-menü.html": {
       "name": "Leer, ohne Menü, ohne Marginal",
       "crumbs": [
       "name": "Leer, ohne Menü, ohne Marginal",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/fast-leer-kein-menü.html", "name": "Leer, ohne Menü, ohne Marginal" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/fast-leer-kein-menü.html", "name": "Leer, ohne Menü, ohne Marginal" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html": {
+    "/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html": {
       "name": "Leer, ohne Menü, mit Marginal",
       "crumbs": [
       "name": "Leer, ohne Menü, mit Marginal",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html", "name": "Leer, ohne Menü, mit Marginal" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html", "name": "Leer, ohne Menü, mit Marginal" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/fast-leer-einspaltig.html": {
+    "/potemkin/html-experimente/fast-leer-einspaltig.html": {
       "name": "Leer, einspaltig",
       "crumbs": [
       "name": "Leer, einspaltig",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/fast-leer-einspaltig.html", "name": "Leer, einspaltig" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/fast-leer-einspaltig.html", "name": "Leer, einspaltig" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html": {
+    "/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html": {
       "name": "Leer, einspaltig, mit Marginal",
       "crumbs": [
       "name": "Leer, einspaltig, mit Marginal",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html", "name": "Leer, einspaltig, mit Marginal" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html", "name": "Leer, einspaltig, mit Marginal" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/breadcrumb.html": {
+    "/potemkin/html-experimente/breadcrumb.html": {
       "name": "Langer Breadcrumb",
       "crumbs": [
       "name": "Langer Breadcrumb",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/breadcrumb.html", "name": "Langer Breadcrumb" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/breadcrumb.html", "name": "Langer Breadcrumb" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/kein-layout.html": {
+    "/potemkin/html-experimente/kein-layout.html": {
       "name": "Alle Stylings deaktiviert",
       "crumbs": [
       "name": "Alle Stylings deaktiviert",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/kein-layout.html", "name": "Alle Stylings deaktiviert" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/kein-layout.html", "name": "Alle Stylings deaktiviert" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/basis-layout.html": {
+    "/potemkin/html-experimente/basis-layout.html": {
       "name": "Nur das Basis-Layout",
       "crumbs": [
       "name": "Nur das Basis-Layout",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/basis-layout.html", "name": "Nur das Basis-Layout" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/basis-layout.html", "name": "Nur das Basis-Layout" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/druck-layout.html": {
+    "/potemkin/html-experimente/druck-layout.html": {
       "name": "Druck-Layout",
       "crumbs": [
       "name": "Druck-Layout",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/druck-layout.html", "name": "Druck-Layout" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/druck-layout.html", "name": "Druck-Layout" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/tiny.html": {
+    "/potemkin/html-experimente/tiny.html": {
       "name": "Layout TINY",
       "crumbs": [
       "name": "Layout TINY",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/tiny.html", "name": "Layout TINY" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/tiny.html", "name": "Layout TINY" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/phone.html": {
+    "/potemkin/html-experimente/phone.html": {
       "name": "Layout PHONE",
       "crumbs": [
       "name": "Layout PHONE",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/phone.html", "name": "Layout PHONE" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/phone.html", "name": "Layout PHONE" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/tablet.html": {
+    "/potemkin/html-experimente/tablet.html": {
       "name": "Layout TABLET",
       "crumbs": [
       "name": "Layout TABLET",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/tablet.html", "name": "Layout TABLET" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/tablet.html", "name": "Layout TABLET" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/seitenaufteilung.html": {
+    "/potemkin/html-experimente/seitenaufteilung.html": {
       "name": "Basis-Layout & Seitenaufteilung",
       "crumbs": [
       "name": "Basis-Layout & Seitenaufteilung",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/seitenaufteilung.html", "name": "Basis-Layout & Seitenaufteilung" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/seitenaufteilung.html", "name": "Basis-Layout & Seitenaufteilung" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/seitenkopf.html": {
+    "/potemkin/html-experimente/seitenkopf.html": {
       "name": "Basis-Layout & Seitenkopf",
       "crumbs": [
       "name": "Basis-Layout & Seitenkopf",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/seitenkopf.html", "name": "Basis-Layout & Seitenkopf" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/seitenkopf.html", "name": "Basis-Layout & Seitenkopf" }
       ]
     },
       ]
     },
-    "/projects/html-experimente/testlab.html": {
+    "/potemkin/html-experimente/testlab.html": {
       "name": "Media-Query-Test (Beispiel)",
       "crumbs": [
       "name": "Media-Query-Test (Beispiel)",
       "crumbs": [
-        { "uri": "/projects.html", "name": "Projects" },
-        { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
-        { "uri": "/projects/html-experimente/testlab.html", "name": "Media-Query-Test (Beispiel)" }
+        { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+        { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+        { "uri": "/potemkin/html-experimente/testlab.html", "name": "Media-Query-Test (Beispiel)" }
       ]
     },
     "/about.html": {
       ]
     },
     "/about.html": {