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