hippie/source/screens/demo/examples/ui/new.njk
sthag 8b7241c4da feat: Change styles and ui
- Change to hippie styles
- Remove unused styles and components
- Change colors for ui pages
2025-06-21 13:39:36 +02:00

62 lines
No EOL
1.4 KiB
Text
Executable file

---
title: New
tags:
- ui
---
{% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %}
{% set bodyClass = "body_new" %}
{% extends "demo/_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) }}
<div id="frame">
<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>
</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 %}