CSS-Effekt drop-shadow für das Logo eingebaut
[website] / dist / thymeleaf / templates / layout.html
index 2351163..8257155 100644 (file)
@@ -3,31 +3,41 @@
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:th="http://www.thymeleaf.org"
     xmlns:layout="http://www.thymeleaf.org"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:th="http://www.thymeleaf.org"
     xmlns:layout="http://www.thymeleaf.org"
-    juplo:variables="templates/variables"
+    thymeproxy:variables="SET:/thymeleaf/sitemap.json"
     >
   <head th:fragment="head" layout:fragment="head">
     <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE" th:text="'juplo'">juplo - BASISTEMPLATE</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     >
   <head th:fragment="head" layout:fragment="head">
     <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE" th:text="'juplo'">juplo - BASISTEMPLATE</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="../../css/base.min.css" th:href="@{/css/base.min.css}"/>
-    <style type="text/css" th:remove="all">
-      @import '../../css/screen.min.css' screen;
-      @import '../../css/print.min.css' print;
-    </style>
-    <style type="text/css" th:inline="text">
-      @import '[[@{/css/screen.min.css}]]' screen;
-      @import '[[@{/css/print.min.css}]]' print;
-    </style>
+    <!-- Default / Responsive -->
+    <link rel="stylesheet" th:rel="stylesheet" media="all" title="Responsive" type="text/css" href="../../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="stylesheet" th:rel="stylesheet" media="only screen" title="Responsive" type="text/css" href="../../css/screen.css" th:href="@{/css/screen.min.css}"/>
+    <link rel="stylesheet" th:rel="stylesheet" media="print" title="Responsive" type="text/css" href="../../css/print.css" th:href="@{/css/print.min.css}"/>
+    <!-- Legacy -->
+    <link rel="alternate stylesheet" title="Legacy" type="text/css" href="../../css/base.css" th:href="@{/css/base.min.css}"/>
+    <!-- Tablet -->
+    <link rel="alternate stylesheet" title="Tablet" type="text/css" href="../../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Tablet" type="text/css" href="../../css/tablet.css" th:href="@{/css/tablet.min.css}"/>
+    <!-- Phone -->
+    <link rel="alternate stylesheet" title="Phone" type="text/css" href="../../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Phone" type="text/css" href="../../css/phone.css" th:href="@{/css/phone.min.css}"/>
+    <!-- Tiny -->
+    <link rel="alternate stylesheet" title="Tiny" type="text/css" href="../../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Tiny" type="text/css" href="../../css/tiny.css" th:href="@{/css/tiny.min.css}"/>
+    <!-- Print -->
+    <link rel="alternate stylesheet" title="Print" type="text/css" href="../../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Print" type="text/css" href="../../css/print.css" th:href="@{/css/print.min.css}"/>
     <script src="../../js/prettify.js" th:src="@{/js/prettify.js}"></script>
     <!--[if lt IE 9]>
       <script src="../../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
     <![endif]-->
     <!--[if IE 8]>
     <script src="../../js/prettify.js" th:src="@{/js/prettify.js}"></script>
     <!--[if lt IE 9]>
       <script src="../../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
     <![endif]-->
     <!--[if IE 8]>
-      <link rel="stylesheet" type="text/css" href="../../css/ie8.min.css" th:href="@{/css/ie8.min.css}"/>
+      <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/ie8.css" th:href="@{/css/ie8.min.css}"/>
     <![endif]-->
   </head>
   <body
     <![endif]-->
   </head>
   <body
-      th:with="crumbs=${crumbs.get(uri)}"
+      thymeproxy:variables="${json}"
+      th:with="page=${pages.get(uri)},crumbs=${page['crumbs']}"
       id="top"
       class="menu"
       th:class="${contentclass}?:'menu'"
       id="top"
       class="menu"
       th:class="${contentclass}?:'menu'"
       >
     <div id="page" class="cf">
       <header id="header">
       >
     <div id="page" class="cf">
       <header id="header">
-        <h1 id="logo" layout:fragment="header"><a href="../index.html" th:href="@{/}" title="Home" class="l">juplo</a></h1>
+        <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>
         <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
         <hr class="h" />
       </header>
       <div id="breadcrumb">
         <strong class="b title">You are here:</strong>
         <ol class="b" layout:fragment="breadcrumb">
         <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
         <hr class="h" />
       </header>
       <div id="breadcrumb">
         <strong class="b title">You are here:</strong>
         <ol class="b" layout:fragment="breadcrumb">
-          <li class="b"><a class="b" href="../../index.html" th:href="@{/index.html}">Home</a></li>
+          <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
           <li class="b" th:each="crumb: ${crumbs}">
           <li class="b" th:each="crumb: ${crumbs}">
-            <a class="b" href="../../projects.html" th:href="@{${crumb.uri}}" th:text="${crumb.name}">Projects</a>
+            <a class="b" href="../projects.html" th:href="@{${crumb.uri}}" th:text="${crumb.name}">Projects</a>
           </li>
           <!--/*-->
           </li>
           <!--/*-->
-          <li class="b"><strong class="b" th:text="${title}"">Fix SWF</strong></li>
+          <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
           <!--*/-->
         </ol>
         <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
           <!--*/-->
         </ol>
         <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
           <div th:fragment="maincontent">
             <p>
               <strong>Lorem ipsum</strong> dolor
           <div th:fragment="maincontent">
             <p>
               <strong>Lorem ipsum</strong> dolor
-              <a href="../projects/typo.html" th:href="@{/projects/typo.html}">sit amet</a>,
+              <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
               consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
               labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
               consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
               labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-              <a href="#" th:href="@{/projects/html-experimente.html}">exercitation</a>
+              <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
               ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
               irure dolor in reprehenderit in voluptate velit esse cillum dolore
               eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
               ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
               irure dolor in reprehenderit in voluptate velit esse cillum dolore
               eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
             <h1 class="nav">Navigation</h1>
             <h2 class="nav menu">Section-Menu</h2>
             <ul id="menu" class="cf">
             <h1 class="nav">Navigation</h1>
             <h2 class="nav menu">Section-Menu</h2>
             <ul id="menu" class="cf">
-              <li class="m blog" th:each="entry : ${sections}" th:class="'m ' + ${entry.value.key}">
-                <a href="../blog.html" th:href="@{${entry.key}}" class="m" th:class="${entry.key == section.uri} ? 'm selected' : 'm'" th:text="${entry.value.name}">Blog</a>
+              <li class="m blog" th:each="entry : ${sections}" th:class="'m ' + ${entry.key}">
+                <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>
               </li>
               <!--/*-->
               </li>
               <!--/*-->
-              <li class="m projects"><a href="../projects" class="m selected">Projects</a></li>
+              <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
               <li class="m about"><a href="../about.html" class="m">About</a></li>
               <!--*/-->
             </ul>
               <li class="m about"><a href="../about.html" class="m">About</a></li>
               <!--*/-->
             </ul>
               <a class="s selected" href="../projects.html" th:href="@{${section.uri}}" th:text="${section.name}">Projects</a>
             </h2>
             <ul layout:fragment="submenu"
               <a class="s selected" href="../projects.html" th:href="@{${section.uri}}" th:text="${section.name}">Projects</a>
             </h2>
             <ul layout:fragment="submenu"
-                th:with="parent=${(crumbs.size() == 2 and submenu.get(uri)['childs'] == null) ? crumbs[0].uri : null}, pos=1"
+                th:with="
+                  len=${crumbs.size()},
+                  submenu=${pages[section.uri]['childs']},
+                  parent=${crumbs[0].uri},
+                  pos=1"
                 id="submenu"
                 class="s"
                 id="submenu"
                 class="s"
+                th:class="'s' + (${len == 1 or (len == 2 and page['childs'] == null)} ? ' selected' : '')"
                 >
               <li th:fragment="submenu(submenu, parent, pos)"
                   th:each="entry : ${submenu}"
                   th:with="
                 >
               <li th:fragment="submenu(submenu, parent, pos)"
                   th:each="entry : ${submenu}"
                   th:with="
-                      child=${pos == crumbs.size()},
+                      child=${pos == len},
                       selected=${!child and crumbs.get(pos).uri == entry.key},
                       selected=${!child and crumbs.get(pos).uri == entry.key},
-                      last=${crumbs.get(pos-1).uri == parent and crumbs.size() &gt; pos},
-                      childs=${entry.value['childs']}
+                      sibling=${pos + 1 == len and (page['childs'] == null or uri == parent)},
+                      childs=${entry.key == parent ? null : pages[entry.key]['childs']}
                       "
                   class="s sub"
                       "
                   class="s sub"
-                  th:class="'s' + (${childs} ? ' sub' : '') + (${selected or last or child} ? '' : ' off')"
+                  th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
                   >
                   >
-                <a  href="../projects/fix-swf.html"
+                <a  href="../potemkin/fix-swf.html"
                     th:href="@{${entry.key}}"
                     class="s selected"
                     th:class="${selected} ? 's selected' : 's'"
                     th:href="@{${entry.key}}"
                     class="s selected"
                     th:class="${selected} ? 's selected' : 's'"
-                    th:text="${entry.value.name}"
+                    th:text="${entry.value}"
                     >fix-swf</a>
                 <ul th:if="${selected and childs != null}"
                     class="s active"
                     >fix-swf</a>
                 <ul th:if="${selected and childs != null}"
                     class="s active"
-                    th:class="${selected} ? 's active' : 's'"
+                    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' : '')"
                     >
                   <li th:replace="templates/layout :: submenu(submenu=${childs}, parent=${entry.key}, pos=${pos + 1})"
                       class="s"
                     >
                   <li th:replace="templates/layout :: submenu(submenu=${childs}, parent=${entry.key}, pos=${pos + 1})"
                       class="s"
                     <strong class="s">Overview</strong>
                   </li>
                   <!--/*-->
                     <strong class="s">Overview</strong>
                   </li>
                   <!--/*-->
-                  <li class="s"><a href="../projects/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+                  <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
                   <li class="s"><a href="#" class="s">FAQ</a></li>
                   <li class="s"><a href="#" class="s">Documentation</a></li>
                   <!--*/-->
                   <li class="s"><a href="#" class="s">FAQ</a></li>
                   <li class="s"><a href="#" class="s">Documentation</a></li>
                   <!--*/-->
               <!--/*-->
               <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
               <!--/*-->
               <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
-              <li class="s sub off"><a href="../projects/html-experimente.html" th:href="@{/projects/html-experimente.html}" class="s">HTML-Experimente</a></li>
+              <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
-              <li class="s off"><a href="../projects/typo.html" th:href="@{/projects/typo.html}" class="s">Typography</a></li>
+              <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
               <!--*/-->
             </ul>
             <hr class="n"/>
               <!--*/-->
             </ul>
             <hr class="n"/>
         <ul id="footerlinks" layout:fragment="footer">
           <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
           <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
         <ul id="footerlinks" layout:fragment="footer">
           <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
           <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
-          <li class="f about"><a class="f" href="../about.html" th:href="@{/about.html}">About</a></li>
+          <li class="f"><a class="f" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a></li>
         </ul>
       </footer>
     </div>
         </ul>
       </footer>
     </div>