juplo.de Git - website/blob - dist/templates/layout.html

   1 <!DOCTYPE html>
   2 <html
   3     xmlns="http://www.w3.org/1999/xhtml"
   4     xmlns:th="http://www.thymeleaf.org"
   5     th:fragment="layout(uri,maincontent)"
   6     thymeproxy:variables="SET:sitemap.json"
   7     >
   8   <head thymeproxy:variables="${json}">
   9     <meta charset="utf-8">
  10     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  11     <meta name="viewport" content="width=device-width, initial-scale=1">
  12     <title th:replace="${title}">juplo - BASISTEMPLATE</title>
  13     <link rel="stylesheet" href="../css/juplo.css" th:href="@{/css/juplo.css}">
  14     <link rel="canonical" href="layout.html" th:href="${_canonical.get(uri)}?:${uri}">
  15     <script th:replace="${scripts_head}?:~{}"></script>
  16   </head>
  17   <body
  18       th:fragment="body(uri, maincontent, marginalcontent)"
  19       th:with="crumbs=${_crumbs.get(uri)}">
  20     <div id="page" class="">
  21       <main class="content section" th:include="${maincontent}" th:fragment="maincontent">
  22         <h1 th:text="${_titles.get(uri)}">TEMPLATE: Layout</h1>
  23         <p>
  24           <strong>Lorem ipsum</strong> dolor
  25           <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
  26           consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
  27           labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  28           <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
  29           ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
  30           irure dolor in reprehenderit in voluptate velit esse cillum dolore
  31           eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  32           proident, sunt in culpa qui officia deserunt mollit anim id est
  33           laborum.
  34         </p>
  35         <h2 class="title">Duis aute irure dolor</h2>
  36         <ul>
  37           <li>Operators and other mathematical stuff: -+/*</li>
  38           <li>
  39             Characters offten used in programming languages:
  40             {(&lt;&gt;)}@$?%*#;:&amp;/\!^&#034;&#039;`~
  41           </li>
  42           <li>Special german characters: ÄäÖöÜü</li>
  43           <li>Other special characters: @?¢§%°</li>
  44         </ul>
  45         <h2 class="title">Excepteur sint occaecat cupidatat</h2>
  46         <p>
  47           Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit,
  48           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  49           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  50           nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  51           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  52           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  53           culpa qui officia deserunt mollit anim id est laborum.
  54         </p>
  55         <p>
  56           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  57           eiusmod tempor incididunt ut labore et dolore magna aliqua.
  58           <strong>Ut enim ad minim veniam, quis nostrud <em>exercitation
  59           ullamco</em> laboris nisi ut aliquip ex ea commodo consequat</strong>.
  60           Duis aute irure dolor in reprehenderit in voluptate velit esse
  61           cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
  62           cupidatat non proident, sunt in culpa qui officia deserunt mollit
  63           anim id est laborum.
  64         </p>
  65       </main>
  66       <nav class="section has-text-right">
  67         <a href="../index.html" th:href="@{/}" title="Home">
  68           <img src="/img/logo.svg" alt="juplo" class="logo">
  69         </a>
  70         <ul th:with="
  71               len=${crumbs == null} ? 0 : ${crumbs.size()},
  72               parent=${crumbs == null} ? '' : ${crumbs[0]},
  73               submenu=${_childs.get(parent)},
  74               pos=1"
  75             id="navigation"
  76             class="s mr-4 mt-4"
  77             th:class="'mr-4 mt-4 s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')">
  78           <!--/*-->
  79           <li class="s sub off"><a href="../blog/" class="s">Blog</a></li>
  80           <!--*/-->
  81           <li th:fragment="submenu(submenu, parent, pos)"
  82               th:each="entry : ${submenu}"
  83               th:with="
  84                   child=${pos == len},
  85                   selected=${!child and crumbs.get(pos) == entry},
  86                   leaf=${pos >= (len - 1) and not selected},
  87                   sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
  88                   childs=${entry == parent ? null : _childs.get(entry)}
  89                   "
  90               class="s sub"
  91               th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')">
  92             <a  href="../projects.html"
  93                 th:if="${entry != parent}"
  94                 th:href="@{${entry}}"
  95                 class="s selected"
  96                 th:class="(${selected} ? 's selected' : 's') + ' len_' + ${len} + ' pos_' + ${pos} + (${leaf}?' leaf':'')"
  97                 th:text="${_titles.get(entry)}">Projekte</a>
  98             <ul th:if="${selected and childs != null}"
  99                 class="s"
 100                 th:class="'s' + (${entry == uri or (len &gt; 1 and entry == crumbs.get(len-2) and _childs.get(uri) == null)} ? ' selected' : '')">
 101               <!--/*-->
 102               <li class="s sub">
 103                 <a class="s selected" href="../potemkin/fix-swf/overview.html">fix swf</a>
 104                 <ul class="s">
 105                   <li class="s"><strong class="s selected">Overview</strong></li>
 106                   <li class="s"><a class="s leaf" href="../potemkin/fix-swf/getting-started.html">Getting Started</a></li>
 107                   <li class="s"><a class="s leaf" href="#">FAQ</a></li>
 108                   <li class="s"><a class="s leaf" href="#">Documentation</a></li>
 109                 </ul>
 110               </li>
 111               <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
 112               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
 113               <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
 114               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
 115               <!--*/-->
 116               <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})" class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
 117             </ul>
 118           </li>
 119           <!--/*-->
 120           <li class="s sub off"><a href="../about.html" class="s">About</a></li>
 121           <!--*/-->
 122         </ul>
 123       </nav>
 124     </div>
 125     <footer>
 126       <div id="copyright" class="section">
 127         <span>© <strong>mo</strong> 2021</span>
 128       </div>
 129       <div id="footerlinks" class="section has-text-right" th:include="~{::#links}?:_">
 130         <a href="../impressum.html" th:href="@{/impressum.html}">Impressum</a>
 131         <span class="spacer">|</span>
 132         <a href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a>
 133       </div>
 134     </footer>
 135   </body>
 136 </html>