8dc9724a3e
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.
146 lines
4.3 KiB
Text
146 lines
4.3 KiB
Text
<!-- page-os.njk -->
|
|
{% set pageId = "os" %}
|
|
{% set pageClass = "" %}
|
|
|
|
{% extends "demo/_extended.njk" %}
|
|
|
|
{% block title %}OS{% endblock %}
|
|
{% block head %}
|
|
{{ super() }}
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<div class="height_full">
|
|
<div class="flex_wrap">
|
|
<button class="demo__button_32"></button>
|
|
<button class="demo__button_32"></button>
|
|
<button class="demo__button_32"></button>
|
|
<button class="demo__button_32"></button>
|
|
<button class="demo__button_32"></button>
|
|
<button class="demo__button_32"></button>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="flex_child">
|
|
<!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
|
|
<nav>
|
|
<ul class="list_files">
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 1</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 2</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 3</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 4</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 5</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 6</p>
|
|
</a></li>
|
|
</ul>
|
|
</nav>
|
|
<nav>
|
|
<ul class="list_files">
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 1</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 2</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 3</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 4</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 5</p>
|
|
</a></li>
|
|
<li><a href="">
|
|
<img src="" alt="">
|
|
<p>Punkt 6</p>
|
|
</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="flex_child_one flex_row">
|
|
<!-- div.flex_child.box_file_wrp>(div.box_file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex_child>table.table_file_simple>(tr>td>img^+td{Objektname $}+td.cell_file_path{Objektpfad $})*2 -->
|
|
<div class="flex_child box_file_wrp">
|
|
<div class="flex_wrap box_file_tile">
|
|
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
|
<div class="box_flex_one">
|
|
<p>Dateiname 1</p>
|
|
<p>Auszeichnung 1</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex_wrap box_file_tile">
|
|
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
|
<div class="box_flex_one">
|
|
<p>Dateiname 2</p>
|
|
<p>Auszeichnung 2</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex_wrap box_file_tile">
|
|
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
|
<div class="box_flex_one">
|
|
<p>Dateiname 3</p>
|
|
<p>Auszeichnung 3</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex_wrap box_file_tile">
|
|
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
|
|
<div class="box_flex_one">
|
|
<p>Dateiname 4</p>
|
|
<p>Auszeichnung 4</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex_child_one">
|
|
<table class="table_file_simple">
|
|
<tr>
|
|
<td><img src="" alt=""></td>
|
|
<td>Objektname 1</td>
|
|
<td class="cell_file_path">Objektpfad 1</td>
|
|
</tr>
|
|
<tr>
|
|
<td><img src="" alt=""></td>
|
|
<td>Objektname 2</td>
|
|
<td class="cell_file_path">Objektpfad 2</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="flex_child">
|
|
<p>Status</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
{{ super() }}
|
|
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
|
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
// Page specific
|
|
// ------------------------------------------------------------------------------
|
|
$( document ).ready(function() {
|
|
});
|
|
</script>
|
|
{% endblock %}
|