hippie/source/screens/demo.njk
Stephan 8dc9724a3e Update everything
gulpjs
 * new spritesmith plugin
 * reworked exports
 * new nunjucks-render version fixing dependency issues!

File structure
New naming scheme for nunjucks files. Underscore used for files which 
are imported and not directly displayed.

Nunjucks blocks where renamed and are placed differently.

New macro for navigational elements.
2019-03-21 20:22:22 +01:00

52 lines
1.9 KiB
Text

<!-- page-index.njk -->
{% set pageId = "index" %}
{% set pageClass = "height_full" %}
{% 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 open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</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 <code>/source/pages/demo</code>.</p>
<p>The <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
<h3>Overview</h3>
<nav>
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</nav>
<div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
<h3>Demo Pages</h3>
</div>
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in data.demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
});
</script>
{% endblock %}