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