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