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

   1 <!DOCTYPE html>
   2 <html
   3     xmlns="http://www.w3.org/1999/xhtml"
   4     xmlns:th="http://www.thymeleaf.org"
   5     xmlns:layout="http://www.thymeleaf.org"
   6     thymeproxy:variables="SET:/thymeleaf/sitemap.json"
   7     >
   8   <head th:fragment="head" layout:fragment="head">
   9     <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE" th:text="'juplo'">juplo - BASISTEMPLATE</title>
  10     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  11     <meta name="viewport" content="width=device-width, initial-scale=1" />
  12     <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.min.css}"/>
  13     <link rel="stylesheet" type="text/css" href="../../css/screen.css" media="screen" th:remove="all"/>
  14     <link rel="stylesheet" type="text/css" href="../../css/print.css" media="print" th:remove="all"/>
  15     <style type="text/css" th:inline="text">
  16       @import '[[@{/css/screen.min.css}]]' screen;
  17       @import '[[@{/css/print.min.css}]]' print;
  18     </style>
  19     <script src="../../js/prettify.js" th:src="@{/js/prettify.js}"></script>
  20     <!--[if lt IE 9]>
  21       <script src="../../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
  22     <![endif]-->
  23     <!--[if IE 8]>
  24       <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/ie8.css" th:href="@{/css/ie8.min.css}"/>
  25     <![endif]-->
  26   </head>
  27   <body
  28       thymeproxy:variables="${json}"
  29       th:with="page=${pages.get(uri)},crumbs=${page['crumbs']}"
  30       id="top"
  31       class="menu"
  32       th:class="${contentclass}?:'menu'"
  33       onload="prettyPrint()"
  34       >
  35     <div id="page" class="cf">
  36       <header id="header">
  37         <h1 id="logo" layout:fragment="header"><a href="../index.html" th:href="@{/}" title="Home" class="l">juplo</a></h1>
  38         <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
  39         <hr class="h" />
  40       </header>
  41       <div id="breadcrumb">
  42         <strong class="b title">You are here:</strong>
  43         <ol class="b" layout:fragment="breadcrumb">
  44           <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
  45           <li class="b" th:each="crumb: ${crumbs}">
  46             <a class="b" href="../projects.html" th:href="@{${crumb.uri}}" th:text="${crumb.name}">Projects</a>
  47           </li>
  48           <!--/*-->
  49           <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
  50           <!--*/-->
  51         </ol>
  52         <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
  53         <hr class="b" />
  54       </div>
  55       <main class="content cf">
  56         <article id="content" class="main" layout:fragment="maincontent" th:class="'main'">
  57           <header><h1 th:text="${title}">juplo - BASISTEMPLATE</h1></header>
  58           <div th:fragment="maincontent">
  59             <p>
  60               <strong>Lorem ipsum</strong> dolor
  61               <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
  62               consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
  63               labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  64               <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
  65               ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
  66               irure dolor in reprehenderit in voluptate velit esse cillum dolore
  67               eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  68               proident, sunt in culpa qui officia deserunt mollit anim id est
  69               laborum.
  70             </p>
  71             <h2>Duis aute irure dolor</h2>
  72             <ul>
  73               <li>Operators and other mathematical stuff: -+/*</li>
  74               <li>
  75                 Characters offten used in programming languages:
  76                 {(&lt;&gt;)}@$?%*#;:&amp;/\!^&#034;&#039;`~
  77               </li>
  78               <li>Special german characters: ÄäÖöÜü</li>
  79               <li>Other special characters: @?¢§%°</li>
  80             </ul>
  81             <h2>Excepteur sint occaecat cupidatat</h2>
  82             <p>
  83               Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit,
  84               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  85               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  86               nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  87               reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  88               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  89               culpa qui officia deserunt mollit anim id est laborum.
  90             </p>
  91             <p>
  92               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  93               eiusmod tempor incididunt ut labore et dolore magna aliqua.
  94               <strong>Ut enim ad minim veniam, quis nostrud <em>exercitation
  95               ullamco</em> laboris nisi ut aliquip ex ea commodo consequat</strong>.
  96               Duis aute irure dolor in reprehenderit in voluptate velit esse
  97               cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
  98               cupidatat non proident, sunt in culpa qui officia deserunt mollit
  99               anim id est laborum.
 100             </p>
 101           </div>
 102         </article>
 103         <div class="marginal">
 104           <nav id="nav"
 105               layout:fragment="navigation"
 106               th:with="section=${crumbs != null ? crumbs[0] : null}"
 107               >
 108             <hr class="n"/>
 109             <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
 110             <h1 class="nav">Navigation</h1>
 111             <h2 class="nav menu">Section-Menu</h2>
 112             <ul id="menu" class="cf">
 113               <li class="m blog" th:each="entry : ${sections}" th:class="'m ' + ${entry.key}">
 114                 <a href="../blog.html" th:href="@{${entry.value}}" class="m" th:class="${entry.value == section.uri} ? 'm selected' : 'm'" th:text="${pages.get(entry.value).name}">Blog</a>
 115               </li>
 116               <!--/*-->
 117               <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
 118               <li class="m about"><a href="../about.html" class="m">About</a></li>
 119               <!--*/-->
 120             </ul>
 121             <h2 class="nav submenu">
 122               <span class="s">Submenu for section</span>
 123               <a class="s selected" href="../projects.html" th:href="@{${section.uri}}" th:text="${section.name}">Projects</a>
 124             </h2>
 125             <ul layout:fragment="submenu"
 126                 th:with="
 127                   len=${crumbs.size()},
 128                   submenu=${pages[section.uri]['childs']},
 129                   parent=${crumbs[0].uri},
 130                   pos=1"
 131                 id="submenu"
 132                 class="s"
 133                 th:class="'s' + (${len == 1 or (len == 2 and page['childs'] == null)} ? ' selected' : '')"
 134                 >
 135               <li th:fragment="submenu(submenu, parent, pos)"
 136                   th:each="entry : ${submenu}"
 137                   th:with="
 138                       child=${pos == len},
 139                       selected=${!child and crumbs.get(pos).uri == entry.key},
 140                       sibling=${pos + 1 == len and (page['childs'] == null or uri == parent)},
 141                       childs=${entry.key == parent ? null : pages[entry.key]['childs']}
 142                       "
 143                   class="s sub"
 144                   th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
 145                   >
 146                 <a  href="../potemkin/fix-swf.html"
 147                     th:href="@{${entry.key}}"
 148                     class="s selected"
 149                     th:class="${selected} ? 's selected' : 's'"
 150                     th:text="${entry.value}"
 151                     >fix-swf</a>
 152                 <ul th:if="${selected and childs != null}"
 153                     class="s active"
 154                     th:class="'s' + (${selected &amp;&amp; pos == crumbs.size()-1} ? ' active' : '') + (${entry.key == uri or (len &gt; 1 and entry.key == crumbs.get(len-2).uri and page['childs'] == null)} ? ' selected' : '')"
 155                     >
 156                   <li th:replace="templates/layout :: submenu(submenu=${childs}, parent=${entry.key}, pos=${pos + 1})"
 157                       class="s"
 158                       >
 159                     <strong class="s">Overview</strong>
 160                   </li>
 161                   <!--/*-->
 162                   <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
 163                   <li class="s"><a href="#" class="s">FAQ</a></li>
 164                   <li class="s"><a href="#" class="s">Documentation</a></li>
 165                   <!--*/-->
 166                 </ul>
 167               </li>
 168               <!--/*-->
 169               <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
 170               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
 171               <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
 172               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
 173               <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
 174               <!--*/-->
 175             </ul>
 176             <hr class="n"/>
 177           </nav>
 178           <aside class="m" layout:fragment="marginalcontent" th:remove="tag">
 179           <!--/* the following  is only visible during natural templating -->
 180             <h1>Other nasty but marginal stuff</h1>
 181             <p>
 182               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 183               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
 184               ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 185               aliquip ex ea commodo consequat. Duis aute irure dolor in
 186               reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 187               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 188               culpa qui officia deserunt mollit anim id est laborum.
 189             </p>
 190           </aside>
 191           <aside class="m">
 192             <h1>More nasty stuff</h1>
 193             <p>
 194               This one is really short!
 195             </p>
 196           <!--*/-->
 197           </aside>
 198         </div>
 199       </main>
 200       <footer id="footer">
 201         <hr class="f" />
 202         <ul id="footerlinks" layout:fragment="footer">
 203           <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
 204           <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
 205           <li class="f about"><a class="f" href="../about.html" th:href="@{/about.html}">About</a></li>
 206         </ul>
 207       </footer>
 208     </div>
 209   </body>
 210 </html>