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/screens/demo/examples/ui/new.njk

@@ -1,14 +1,14 @@
 ---
 title: New
 tags:
-  - demoExample
+  - ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_new" %}
 
 {% extends "demo/_app.njk" %}
-{% import "hippie/macros/_state.njk" as state %}
+{% import "hippie/macros/_header.njk" as header %}
 
 {% block title %}{{ title }}
 {% endblock %}
@@ -23,27 +23,7 @@ tags:
 {% endblock %}
 
 {% block body %}
-  <div id="top">
-    <h1 class="brand">
-      <a href="#">{{ hippie.brand | upper }}</a>
-    </h1>
-    <nav>
-      <ul>
-        {% for link in new %}
-          <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>
+  {{ header.status(hippie, new) }}
   <div class="container">
     <div class="area menu">
       <nav class="nav_horizontal">
@@ -74,8 +54,9 @@ tags:
     let clock = new Clock('time');
 
     document.addEventListener('mousemove', (event) => {
-      document.getElementById('log')
-      .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+      document
+        .getElementById('log')
+        .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
     });
   </script>
 {% endblock %}