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