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

{% extends "demo/_app.njk" %}
{% import "hippie/macros/_state.njk" as state %}

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

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

{% block head %}
  {{ super() }}
{% 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>
  <div class="container">
    <div class="area menu">
      <nav class="nav_horizontal">
        <ul>
          <li>
            <a href="" class="a_button">Func 1</a>
          </li>
          <li>
            <a href="" class="a_button">Func 2</a>
          </li>
        </ul>
      </nav>
    </div>
    <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>
  </div>
{% endblock %}

{%- block script %}
  {{ super() }}
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="{{ pageBase }}js/app.js"></script>
  <script>
    let clock = new Clock('time');

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