hippie/source/pages/demo/os.njk

<!-- page-os.njk -->
{% set pageId = "os" %}
{% set pageClass = "" %}

{% extends "hippie/demo-extended.njk" %}

{% block title %}demo{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}

{% block body_content %}
{# {% include "partials/page-hover.njk" %} #}
<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>
{% include "hippie/partials/footer.njk" %}
{% endblock %}

{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/all.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
  console.log('HIPPIE');
});
</script>
{% endblock %}