hippie/source/screens/demo.njk
sthag ef9d665849 Introduced 11ty
Set new version based on all changes since last version change, which was 0.4.2.

Removed obsolete devDependencies, now only using 11ty and sass.

Update to package.json fields

- New sass version
- Update to project links
- Rearranged fields
- New commands for 'scripts' that include changes from branch testing-npm-scripts
- Added field 'private' to prevent publishing by mistake

Added configuration for 11ty to reflect previous behaviour from gulp.

- Moved source/templates/demo/data.json to source/screens/demo.json so it can be used
- Fixed demo template so it can use the data source
- Removed source/data/demo.json which was not used
2023-10-25 20:25:09 +02:00

80 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">
<!-- Loops through "demoadditionallinks" array -->
{% for link in demoadditionallinks %}
<li>
<a href="{{ link.href }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</nav>
<h3>Demo Pages</h3>
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in demolinks %}
<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 %}