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/drag.njk

@@ -1,7 +1,7 @@
 ---
 title: Drag
 tags:
-  - demoExample
+  - ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}

source/screens/demo/examples/ui/form.njk

@@ -1,10 +1,9 @@
 ---
 title: Form
 tags: 
-  - demoExample
   - ui
 ---
-{% set bodyClass = "body_form" %}
+{% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
 

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

source/screens/demo/examples/ui/settings.njk

@@ -1,7 +1,6 @@
 ---
 title: Settings
 tags:
-  - demoExample
   - ui
 ---
 {% set pageId = page.fileSlug %}
@@ -25,8 +24,8 @@ tags:
 {% block body %}
 <div id="frame" class="frame-flex">
   <div class="title-bar">
-    <div>title-bar<button class="io_button">menu</button class="io_button"><button class="io_button">search</button class="io_button"></div>
-    <div><button class="io_button">minimize</button class="io_button"><button class="io_button">maximize</button class="io_button"><button class="io_button">close</button class="io_button"></div>
+    <div>title-bar<button class="button_io">menu</button class="button_io"><button class="button_io">search</button class="button_io"></div>
+    <div><button class="button_io">minimize</button class="button_io"><button class="button_io">maximize</button class="button_io"><button class="button_io">close</button class="button_io"></div>
   </div>
   <main>
     <aside class="left">aside