---
title: New
tags:
  - ui
---
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_new" %}

{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_header.njk" as header %}

{% block title %}{{ title }}
{% endblock %}

{% block links %}
  {{ super() }}
  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}

{% block head %}
  {{ super() }}
{% endblock %}

{% block body %}
  {{ header.status(hippie, new) }}
  <header class="area menu io">
    <nav>
      <ul>
        <li>
          <a href="" class="a_button">Func 1</a>
        </li>
        <li>
          <a href="" class="a_button">Func 2</a>
        </li>
      </ul>
    </nav>
  </header>
  <div class="area grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
{% endblock %}

{%- block script %}
  {{ super() }}
  <script>
    let clock = new Clock('time');

    document.addEventListener('mousemove', (event) => {
      document
        .getElementById('log')
        .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
    });
  </script>
{% endblock %}