feat: restructure screens, new todos

- Move files and folders
- Rename pages
- New todos

TODO.md

@@ -1,19 +1,19 @@
 # General
 
 - Remove gulp and legacy files
+- Update README
+- Explain eleventy usage
+- Better README with more info for the content section
+- Complete CHANGELOG
+- Automatic versioning for package.json and CHANGELOG
 - Add dynamic content to robots.txt during build process
 - Add dynamic content to sitemap.xml
 - Add build process for normalize.css from github.com/necolas/normalize.css
 - Add build process for bourbon from https://github.com/thoughtbot/bourbon
-- Better README with more info for the content section
-- Complete CHANGELOG
-- Automatic versioning for package.json and CHANGELOG
 
 # Content
 
 - Complete *Intro* with description for all basic elements, according to [HTML Standard - The elements of HTML](https://html.spec.whatwg.org/multipage/semantics.html#semantics)
-	- Documents metadata
-		- [ ] head
 	- Sections
 		- [x] body
 		- [x] article

source/screens/basics.njk

@@ -1,10 +1,10 @@
-<!-- intro.screen -->
+<!-- basics.screen -->
 {% set pageBase = "../" %}
-{% set pageId = "intro" %}
+{% set pageId = "basics" %}
 
 {% extends "demo/_extended.njk" %}
 
-{% block title %}Intro{% endblock %}
+{% block title %}Grundlagen{% endblock %}
 {% block head %}
   {{ super() }}
 {% endblock %}
@@ -21,7 +21,7 @@
       <h1 id="sections">Bereiche</h1>
       {# // body // article // section // nav // aside // h1-h6 // header // footer #}
       <section>
-        <p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch
+        <p>Ein Abschnitt, welcher für sich alleine stehen kann, definiert sich durch
           <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
         <p>Noch allgemeiner ist das
           <code>&lt;section&gt;</code>
@@ -945,21 +945,11 @@
     <section>
       <header class="header_txt">
         <h1>Ende der Einführung</h1>
-        <p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
+        <p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen Komponenten mit Kombinationen und erweiterten Formatierungen.</p>
       </header>
     </section>
   </div>
 
-  <section class="sec_main_center">
-    <header>
-      <h1>HIPPIE Erklärung</h1>
-      <p>Aufbau, Standardwerte</p>
-    </header>
-    <article>
-      <p>&hellip;</p>
-    </article>
-  </section>
-
 {% endblock %}
 
 {% block script %}

source/screens/components.njk

@@ -1,10 +1,10 @@
-<!-- elements.page -->
+<!-- components.page -->
 {% set pageBase = "../" %}
-{% set pageId = "elements" %}
+{% set pageId = "components" %}
 
 {% extends "demo/_extended.njk" %}
 
-{% block title %}Elements{% endblock %}
+{% block title %}Komponenten{% endblock %}
 {% block head %}
   {{ super() }}
 {% endblock %}

source/screens/demo.json

@@ -1,66 +0,0 @@
-{
-  "demoadditionallinks": [
-    {
-      "href": "demo.html",
-      "text": "Index"
-    },
-    {
-      "href": "demo/intro.html",
-      "text": "Intro"
-    },
-    {
-      "href": "demo/elements.html",
-      "text": "Elements"
-    },
-    {
-      "href": "demo/examples.html",
-      "text": "Examples"
-    }
-  ],
-  "demolinks": [
-    {
-      "href": "demo/blank.html",
-      "text": "Blank"
-    },
-    {
-      "href": "demo/card.html",
-      "text": "Card"
-    },
-    {
-      "href": "demo/portal.html",
-      "text": "Portal"
-    },
-    {
-      "href": "demo/maintenance.html",
-      "text": "Maintenance"
-    },
-    {
-      "href": "demo/error/304.html",
-      "text": "304"
-    },
-    {
-      "href": "demo/error/400.html",
-      "text": "400"
-    },
-    {
-      "href": "demo/error/401.html",
-      "text": "401"
-    },
-    {
-      "href": "demo/error/403.html",
-      "text": "403"
-    },
-    {
-      "href": "demo/error/404.html",
-      "text": "404"
-    },
-    {
-      "href": "demo/error/408.html",
-      "text": "408"
-    },
-    {
-      "href": "demo/error/500.html",
-      "text": "500"
-    }
-  ]
-}

source/screens/index.json

@@ -0,0 +1,70 @@
+{
+  "index": [
+    {
+      "href": "index.html",
+      "text": "Index"
+    },
+    {
+      "href": "introduction.html",
+      "text": "Introduction"
+    },
+    {
+      "href": "basics.html",
+      "text": "Basics"
+    },
+    {
+      "href": "components.html",
+      "text": "Components"
+    },
+    {
+      "href": "layouts.html",
+      "text": "Layouts"
+    }
+  ],
+  "pages": [
+    {
+      "href": "pages/blank.html",
+      "text": "Blank"
+    },
+    {
+      "href": "pages/card.html",
+      "text": "Card"
+    },
+    {
+      "href": "pages/portal.html",
+      "text": "Portal"
+    },
+    {
+      "href": "pages/maintenance.html",
+      "text": "Maintenance"
+    },
+    {
+      "href": "pages/error/304.html",
+      "text": "304"
+    },
+    {
+      "href": "pages/error/400.html",
+      "text": "400"
+    },
+    {
+      "href": "pages/error/401.html",
+      "text": "401"
+    },
+    {
+      "href": "pages/error/403.html",
+      "text": "403"
+    },
+    {
+      "href": "pages/error/404.html",
+      "text": "404"
+    },
+    {
+      "href": "pages/error/408.html",
+      "text": "408"
+    },
+    {
+      "href": "pages/error/500.html",
+      "text": "500"
+    }
+  ]
+}

source/screens/index.njk

@@ -38,17 +38,17 @@
       <nav>
         <ul class="list_link">
           <!-- Loops through "demoadditionallinks" array -->
-          {% for link in demoadditionallinks %}
+          {% for link in index %}
             <li>
               <a href="{{ link.href }}">{{ link.text }}</a>
             </li>
           {% endfor %}
         </ul>
       </nav>
-      <h3>Demo Pages</h3>
+      <h3>Pages</h3>
       <ul class="list_link">
         <!-- Loops through "demo-links" array -->
-        {% for link in demolinks %}
+        {% for link in pages %}
           <li>
             <a href="{{ link.href }}">{{ link.text }}</a>
           </li>

source/screens/introduction.njk

@@ -0,0 +1,56 @@
+<!-- introduction.screen -->
+{% set pageBase = "../" %}
+{% set pageId = "intro" %}
+
+{% extends "demo/_extended.njk" %}
+
+{% block title %}Einführung{% endblock %}
+{% block head %}
+  {{ super() }}
+{% endblock %}
+
+{% block main %}
+  {% include "hippie/partials/_body_nav.njk" %}
+
+  <section class="sec_main_center">
+    <header>
+      <hgroup>
+        <h1>Introduction to HIPPIE</h1>
+        <p>Hippie interweaves preeminent personal interface elements.</p>
+      </hgroup>
+    </header>
+    <article>
+      <p>&hellip;</p>
+    </article>
+  </section>
+
+
+{% endblock %}
+
+{% block script %}
+  {{ super() }}
+  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
+  <!-- build:js js/main.concat.min.js -->
+  <script src="{{ pageBase }}js/variables.js"></script>
+  <script src="{{ pageBase }}js/functions.js"></script>
+  <script src="{{ pageBase }}js/global.js"></script>
+  <!-- endbuild -->
+  <script>
+    // Page specific
+    // ------------------------------------------------------------------------------
+    assetsLoaded = true;
+    logPerf('Assets loaded.', assetsLoaded);
+    // Create instance of object made by contructor function
+    var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
+    var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
+
+    $(document).ready(function () {
+      logPerf('JQ document ready event fired.');
+    });
+
+    $(document).scroll(function () {
+      scrollUi.check();
+    });
+    logPerf('Application ready.');
+  </script>
+{% endblock %}

source/screens/layouts.njk

@@ -1,10 +1,10 @@
-<!-- elements.page -->
+<!-- layouts.page -->
 {% set pageBase = "../" %}
-{% set pageId = "examples" %}
+{% set pageId = "layouts" %}
 
 {% extends "demo/_extended.njk" %}
 
-{% block title %}Examples{% endblock %}
+{% block title %}Gestaltungen{% endblock %}
 {% block head %}
   {{ super() }}
 {% endblock %}