hippie/source/screens/demo/index.liquid

---
permalink: "{{ hippie.permalink }}"
title: Index
---
{% assign pageId = page.fileSlug -%}
{% assign pageClass = 'h_full_view' -%}
{% layout 'hippie/full.liquid' %}

{% block body %}
<div class="wrap">
	<div class="hello">
		<h2>This is {{ hippie.brand | upcase }}</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="block link">
				{% assign indexByOrder = collections.demoIndex | sort: 'data.order' %}
				{% for link in indexByOrder %}
					<li>
						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
					</li>
				{% endfor %}
			</ul>
		</nav>
		<div class="responsive">
			<section>
				<h3>Page</h3>
				<ul class="block link">
					{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
					{% for link in pagesByTitle %}
						<li>
							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
						</li>
					{% endfor %}
				</ul>
			</section>
			<section>
				<h3>Example</h3>
				<ul class="block link">
					{% assign examplesByTitle = collections.demoExample | sort: 'data.title' %}
					{% for link in examplesByTitle %}
						<li>
							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
						</li>
					{% endfor %}
				</ul>
			</section>
		</div>
	</div>
</div>
{% endblock %}