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