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