X-Git-Url: https://juplo.de/gitweb/?a=blobdiff_plain;f=dist%2Ftemplates%2Flayout.html;h=0f3d1f00f0370c0685a8197de1ec2bb3b7271d86;hb=065e1152e880038e7404532260598595b04ec028;hp=9ffb638f8d873fc43a80de2e0248574dccf9c33b;hpb=54964ea99c292eaba7f4dad3d0308f0e656cf6d9;p=website

diff --git a/dist/templates/layout.html b/dist/templates/layout.html
index 9ffb638f..0f3d1f00 100644
--- a/dist/templates/layout.html
+++ b/dist/templates/layout.html
@@ -17,30 +17,28 @@
       th:fragment="body(uri, maincontent, marginalcontent)"
       thymeproxy:variables="${json}"
       th:with="crumbs=${_crumbs.get(uri)}">
-    <nav>
-      <div class="section breadcrumb" aria-label="breadcrumbs">
-        <ul>
-          <li th:each="crumb: ${crumbs}" class="${uri == crumb}?'is_active':_">
-            <a href="../index.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Home</a></li>
-          <!--/*-->
-          <li class="is-active"><a href="#">Fix SWF</a></li>
-          <!--*/-->
-        </ul>
-      </div>
-      <div class="section">
+    <div class="columns">
+      <main class="column content" th:fragment="maincontent">
+      </main>
+      <nav class="column is-3 has-text-right">
+        <a href="../index.html" th:href="@{/}" title="Home">
+          <img src="/img/logo.svg" alt="juplo" class="logo">
+        </a>
         <ul th:with="
               len=${crumbs == null} ? 0 : ${crumbs.size()},
               parent=${crumbs == null} ? '' : ${crumbs[0]},
               submenu=${_childs.get(parent)},
               pos=1"
             id="navigation"
-            class="s"
-            th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')">
+            class="s mr-4"
+            th:class="'mr-4 s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')">
           <li th:fragment="submenu(submenu, parent, pos)"
               th:each="entry : ${submenu}"
               th:with="
                   child=${pos == len},
                   selected=${!child and crumbs.get(pos) == entry},
+                  leaf=${pos >= (len - 1) and not selected},
+                  active=${entry == uri},
                   sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
                   childs=${entry == parent ? null : _childs.get(entry)}
                   "
@@ -50,7 +48,7 @@
                 th:if="${entry != parent}"
                 th:href="@{${entry}}"
                 class="s selected"
-                th:class="${selected} ? 's selected' : 's'"
+                th:class="(${selected} ? 's selected' : 's') + ' len_' + ${len} + ' pos_' + ${pos} + (${leaf}?' leaf':'') + (${active} ? ' active' : '')"
                 th:text="${_titles.get(entry)}">fix-swf</a>
             <ul th:if="${selected and childs != null}"
                 class="s active"
@@ -74,7 +72,7 @@
           <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
           <!--*/-->
         </ul>
-      </div>
-    </nav>
+      </nav>
+    </div>
   </body>
 </html>