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