feat: Changes to style and logic for ui parts

- Update hippie styles
- Move top element for new page to header macro
- Reassign ui and example collections

source/templates/demo/_app.njk

@@ -25,6 +25,5 @@
 			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 			<script src="{{ pageBase }}js/variables.js"></script>
 		{% endblock %}
-
 	</body>
 </html>

source/templates/hippie/macros/_header.njk

@@ -2,4 +2,29 @@
 	<header class="header_site">
 		<div id="begin"></div>
 	</header>
+{% endmacro %}
+
+{% macro status(hippie, page) %}
+	{% import "hippie/macros/_state.njk" as state %}
+	<div id="top">
+		<h1 class="brand">
+			<a href="#">{{ hippie.brand | upper }}</a>
+		</h1>
+		<nav>
+			<ul>
+				{% for link in page %}
+					<li>
+						<a href="{{ link.href }}">{{ link.text }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</nav>
+		<div class="state">
+			<p>{{ state.coord("log")}}
+        /
+        {{ state.date("date")}}
+        /
+        {{ state.time("time")}}</p>
+		</div>
+	</div>
 {% endmacro %}

source/templates/hippie/macros/_state.njk

@@ -1,10 +1,12 @@
 {% macro coord(id, text = 'X: #, Y: ##') %}
 	<span id="{{ id }}">{{ text }}</span>
 {% endmacro %}
+
 {% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
 	<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
 {% endmacro %}
-{% macro date() %}
+
+{% macro date(id) %}
 	<span id="{{ id }}">
 		<span id="day">Wochentag</span>,
 		<span id="dayNumb">##</span>.