hippie/source/screens/index.njk

86 lines
No EOL
2.6 KiB
Text

<!-- index.screen -->
{% set pageBase = hippie.pageBase %}
{% set pageId = "index" %}
{% set pageClass = "h_full_view" %}
{% extends "demo/_default.njk" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<div class="wrap">
<div class="hello">
<h2>This is
{{ hippie.brand | upper }}</h2>
<p>You can start using it by replacing this file with your own index page.</p>
<p>To do this you need to create a file
<code>/index.njk</code>
inside the
<i>source/screens</i>
folder. You can also create a
<code>data.json</code>
file inside the
<i>source/templates</i>
folder as a data source for your nunjucks files.</p>
<p>For a very basic start you can make a copy of the demo page
<code>blank.njk</code>. You can find it at
<i>/source/screens/demo</i>.</p>
<p>The
<i>source/demo</i>
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
<div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
<h3>Overview</h3>
</div>
<nav>
<ul class="list_link">
{% for link in index %}
<li>
<a href="{{ link.href }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</nav>
<h3>Pages</h3>
<ul class="list_link">
{% for link in pages %}
<li>
<a href="{{ link.href }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
<h3>Demo</h3>
<ul class="list_link">
{% for link in demo %}
<li>
<a href="{{ link.href }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
{# <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script> #}
<!-- build:js js/main.concat.min.js -->
<script src="{{ pageBase }}js/variables.js"></script>
<script src="{{ pageBase }}js/functions.js"></script>
<script src="{{ pageBase }}js/global.js"></script>
<!-- endbuild -->
<script>
// Page specific
// ------------------------------------------------------------------------------
assetsLoaded = true;
logPerf('BODY :: Assets loaded, running page specific script...');
$(document).ready(function () {
logPerf('EVENT :: jQuery \'ready\' event fired.');
setup();
logPerf('Application ready.');
});
</script>
{% endblock %}