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)"
   6     thymeproxy:variables="SET:sitemap.json"
   7     >
   8   <head>
   9     <meta charset="utf-8">
  10     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  11     <meta name="viewport" content="width=device-width, initial-scale=1">
  12     <title th:replace="${title}">juplo - BASISTEMPLATE</title>
  13     <link rel="stylesheet" href="../css/juplo.css" th:href="@{/css/juplo.css}">
  14     <link rel="caononical" href="layout.html" th:replace="${scripts_head}?:~{}">
  15   </head>
  16   <body
  17       th:fragment="body(uri, maincontent, marginalcontent)"
  18       thymeproxy:variables="${json}"
  19       th:with="crumbs=${_crumbs.get(uri)}"
  20       >
  21     <nav class="column is-8-desktop is-offset-2-desktop">
  22       <div class="navbar" role="navigation" aria-label="main navigation">
  23         <div class="navbar-brand">
  24           <a class="navbar-item" href="../index.html" th:href="@{/}" title="Home">
  25             <img src="/img/logo.svg" alt="juplo">
  26           </a>
  27
  28           <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
  29             <span aria-hidden="true"></span>
  30             <span aria-hidden="true"></span>
  31             <span aria-hidden="true"></span>
  32           </a>
  33         </div>
  34
  35         <div id="navbar" class="navbar-menu">
  36           <div class="navbar-start">
  37             <a class="navbar-item" href="../blog/" th:href="@{${entry.value}}">Blog</a>
  38             <!--/*-->
  39             <a class="navbar-item" href="../projects.html">Projects</a>
  40             <a class="navbar-item" href="../about.html">About</a>
  41             <!--*/-->
  42           </div>
  43           <div class="navbar-end">
  44             <a class="navbar-item" href="../about.html">About</a>
  45           </div>
  46         </div>
  47       </div>
  48     </nav>
  49     <section class="section">
  50       <div class="container">
  51         <div class="columns">
  52           <div class="column is-8-desktop is-offset-2-desktop breadcrumb" aria-label="breadcrumbs">
  53             <strong>You are here:</strong>
  54             <ul>
  55               <li><a href="../index.html" th:href="@{/index.html}">Home</a></li>
  56               <li th:each="crumb: ${crumbs}"><a href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a></li>
  57               <!--/*-->
  58               <li class="is-active"><a class="b" th:text="${title}">Fix SWF</a></li>
  59               <!--*/-->
  60             </ul>
  61           </div>
  62         </div>
  63       </div>
  64     </section>
  65     <section class="section">
  66       <div class="container">
  67         <div class="columns">
  68           <div class="column is-8-desktop is-offset-2-desktop">
  69             <div class="content">
  70               <h1 class="title" th:include="${title}">Title</h1>
  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 class="title">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 class="title">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                 <ul>
 115                   <li>
 116                     <code><a href="https://github.com/jgthms/bulma">bulma</a></code>
 117                   </li>
 118                   <li>
 119                     <code><a href="https://github.com/sass/node-sass">node-sass</a></code> to compile your own Sass file
 120                   </li>
 121                   <li>
 122                     <code><a href="https://github.com/postcss/postcss-cli">postcss-cli</a></code> and <code><a href="https://github.com/postcss/autoprefixer">autoprefixer</a></code> to add support for older browsers
 123                   </li>
 124                   <li>
 125                     <code><a href="https://babeljs.io/docs/usage/cli/">babel-cli</a></code>,
 126                     <code><a href="https://github.com/babel/babel-preset-env">babel-preset-env</a></code>
 127                     and
 128                     <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code>
 129                     for compiling ES6 JavaScript files
 130                   </li>
 131                 </ul>
 132                 <p>
 133                   Apart from <code>package.json</code>, the following files are included:
 134                 </p>
 135                 <ul>
 136                   <li>
 137                     <code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a>
 138                   </li>
 139                   <li>
 140                     <code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files
 141                   </li>
 142                   <li>
 143                     <code>index.html</code> this HTML5 file
 144                   </li>
 145                   <li>
 146                     <code>_sass/main.scss</code> a basic SCSS file that <strong>imports Bulma</strong> and explains how to <strong>customize</strong> your styles, and compiles to <code>css/main.css</code>
 147                   </li>
 148                   <li>
 149                     <code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code>
 150                   </li>
 151                 </ul>
 152                 <h3>Try it out!</h3>
 153                 <p>
 154                   To see if your setup works, follow these steps:
 155                 </p>
 156                 <ol>
 157                   <li>
 158                     <p>
 159                       <strong>Move</strong> to this directory:
 160                       <br>
 161                       <pre><code>cd bulma-start</code></pre>
 162                     </p>
 163                   </li>
 164                   <li>
 165                     <p>
 166                       <strong>Install</strong> all dependencies:
 167                       <br>
 168                       <pre><code>npm install</code></pre>
 169                     </p>
 170                   </li>
 171                   <li>
 172                     <p>
 173                       <strong>Start</strong> the CSS and JS watchers:
 174                       <br>
 175                       <pre><code>npm start</code></pre>
 176                     </p>
 177                   </li>
 178                   <li>
 179                     <p>
 180                       <strong>Edit</strong> <code>_sass/main.scss</code> by adding the following rule at the <strong>end</strong> of the file:
 181                       <br>
 182                       <pre><span style="color: #22863a;">html</span> {
 183     <span style="color: #005cc5;"><span style="color: #005cc5;">background-color</span></span>: <span style="color: #24292e">$green</span>;
 184   }</pre>
 185                     </p>
 186                   </li>
 187                 </ol>
 188                 <p>
 189                   The page background should turn <strong class="has-text-success">green</strong>!
 190                 </p>
 191                 <h3>Get started</h3>
 192                 <p>
 193                   You're <strong>ready</strong> to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one!
 194                   <br>
 195                   For example, this page is <strong>only</strong> built with the following <strong>Bulma elements</strong>:
 196                 </p>
 197               </div>
 198             </div>
 199             <table class="table is-bordered is-fullwidth">
 200               <thead>
 201                 <tr>
 202                   <th>Type</th>
 203                   <th>CSS class</th>
 204                 </tr>
 205               </thead>
 206               <tbody>
 207                 <tr>
 208                   <th>Columns</th>
 209                   <td>
 210                     <code><a href="http://bulma.io/documentation/columns/basics">columns</a></code>
 211                     <code><a href="http://bulma.io/documentation/columns/basics">column</a></code>
 212                   </td>
 213                 </tr>
 214                 <tr>
 215                   <th>Layout</th>
 216                   <td>
 217                     <code><a href="http://bulma.io/documentation/layout/section">section</a></code>
 218                     <code><a href="http://bulma.io/documentation/layout/container">container</a></code>
 219                     <code><a href="http://bulma.io/documentation/layout/footer">footer</a></code>
 220                   </td>
 221                 </tr>
 222                 <tr>
 223                   <th>Elements</th>
 224                   <td>
 225                     <code><a href="http://bulma.io/documentation/elements/button">button</a></code>
 226                     <code><a href="http://bulma.io/documentation/elements/content">content</a></code>
 227                     <code><a href="http://bulma.io/documentation/elements/title">title</a></code>
 228                     <code><a href="http://bulma.io/documentation/elements/title">subtitle</a></code>
 229                   </td>
 230                 </tr>
 231                 <tr>
 232                   <th>Form</th>
 233                   <td>
 234                     <code><a href="http://bulma.io/documentation/form/general">field</a></code>
 235                     <code><a href="http://bulma.io/documentation/form/general">control</a></code>
 236                   </td>
 237                 </tr>
 238                 <tr>
 239                   <th>Helpers</th>
 240                   <td>
 241                     <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-centered</a></code>
 242                     <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-weight-semibold</a></code>
 243                   </td>
 244                 </tr>
 245               </tbody>
 246             </table>
 247             <div class="content">
 248               <p>
 249                 If you want to <strong>learn more</strong>, follow these links:
 250               </p>
 251             </div>
 252             <div class="field is-grouped">
 253               <p class="control">
 254                 <a class="button is-medium is-primary" href="http://bulma.io">
 255                   <strong class="has-text-weight-semibold">Bulma homepage</strong>
 256                 </a>
 257               </p>
 258               <p class="control">
 259                 <a class="button is-medium is-link" href="http://bulma.io/documentation/overview/start/">
 260                   <strong class="has-text-weight-semibold">Documentation</strong>
 261                 </a>
 262               </p>
 263             </div>
 264           </div>
 265         </div>
 266       </div>
 267     </section>
 268     <footer class="footer has-text-centered">
 269       <div class="container">
 270          <div class="columns">
 271           <div class="column is-8-desktop is-offset-2-desktop">
 272             <p>
 273               <strong class="has-text-weight-semibold">
 274                 <a href="https://www.npmjs.com/package/bulma-start">bulma-start@0.0.4</a>
 275               </strong>
 276             </p>
 277             <p>
 278               <small>
 279                 Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>
 280               </small>
 281             </p>
 282             <p style="margin-top: 1rem;">
 283               <a href="http://bulma.io">
 284                 <img src="made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
 285               </a>
 286             </p>
 287           </div>
 288         </div>
 289       </div>
 290     </footer>
 291     <div id="page" class="cf">
 292       <header id="header"><!-- TODO: Vereinfachung -> für uri == index.html a gegen strong ausstauschen -->
 293         <hr class="h" />
 294       </header>
 295       <div id="breadcrumb">
 296         <strong class="b title">You are here:</strong>
 297         <ol class="b" th:include="~{::#crumbs}?:_">
 298           <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
 299           <li class="b" th:each="crumb: ${crumbs}">
 300             <a class="b" href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a>
 301           </li>
 302           <!--/*-->
 303           <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
 304           <!--*/-->
 305         </ol>
 306         <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
 307         <hr class="b" />
 308       </div>
 309       <main class="content cf">
 310         <article id="content" class="main" th:include="${maincontent}">
 311           <header><h1 th:include="${title}">juplo - BASISTEMPLATE</h1></header>
 312         </article>
 313         <div class="marginal">
 314           <nav id="nav"
 315               th:include="~{::#navigation}?:_"
 316               th:with="section=${crumbs != null ? crumbs[0] : null}"
 317               >
 318             <hr class="n"/>
 319             <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
 320             <h1 class="nav">Navigation</h1>
 321             <h2 class="nav menu">Section-Menu</h2>
 322             <ul id="menu" class="cf">
 323               <li class="m blog" th:each="entry : ${_sections}" th:class="'m ' + ${entry.key}">
 324                 <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>
 325               </li>
 326               <!--/*-->
 327               <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
 328               <li class="m about"><a href="../about.html" class="m">About</a></li>
 329               <!--*/-->
 330             </ul>
 331             <h2 class="nav submenu">
 332               <span class="s">Submenu for section</span>
 333               <a class="s selected" href="../projects.html" th:href="@{${section}}" th:text="${_titles.get(section)}">Projects</a>
 334             </h2>
 335             <ul th:include="${submenu}?:_"
 336                 th:with="
 337                   len=${crumbs.size()},
 338                   submenu=${_childs.get(section)},
 339                   parent=${crumbs[0]},
 340                   pos=1"
 341                 id="submenu"
 342                 class="s"
 343                 th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
 344                 >
 345               <li th:fragment="submenu(submenu, parent, pos)"
 346                   th:each="entry : ${submenu}"
 347                   th:with="
 348                       child=${pos == len},
 349                       selected=${!child and crumbs.get(pos) == entry},
 350                       sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
 351                       childs=${entry == parent ? null : _childs.get(entry)}
 352                       "
 353                   class="s sub"
 354                   th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
 355                   >
 356                 <a  href="../potemkin/fix-swf/overview.html"
 357                     th:if="${entry != parent}"
 358                     th:href="@{${entry}}"
 359                     class="s selected"
 360                     th:class="${selected} ? 's selected' : 's'"
 361                     th:text="${_titles.get(entry)}"
 362                     >fix-swf</a>
 363                 <ul th:if="${selected and childs != null}"
 364                     class="s active"
 365                     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' : '')"
 366                     >
 367                   <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
 368                       class="s"
 369                       >
 370                     <strong class="s">Overview</strong>
 371                   </li>
 372                   <!--/*-->
 373                   <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
 374                   <li class="s"><a href="#" class="s">FAQ</a></li>
 375                   <li class="s"><a href="#" class="s">Documentation</a></li>
 376                   <!--*/-->
 377                 </ul>
 378               </li>
 379               <!--/*-->
 380               <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
 381               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
 382               <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
 383               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
 384               <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
 385               <!--*/-->
 386             </ul>
 387             <hr class="n"/>
 388           </nav>
 389           <aside class="m" th:insert="${marginalcontent}?:~{}">
 390           <!--/* the following  is only visible during natural templating -->
 391             <h1>Other nasty but marginal stuff</h1>
 392             <p>
 393               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 394               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
 395               ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 396               aliquip ex ea commodo consequat. Duis aute irure dolor in
 397               reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 398               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 399               culpa qui officia deserunt mollit anim id est laborum.
 400             </p>
 401           </aside>
 402           <aside class="m">
 403             <h1>More nasty stuff</h1>
 404             <p>
 405               This one is really short!
 406             </p>
 407           <!--*/-->
 408           </aside>
 409         </div>
 410       </main>
 411       <footer id="footer">
 412         <hr class="f" />
 413         <ul id="footerlinks" th:include="~{::#links}?:_">
 414           <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
 415           <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
 416           <li class="f"><a class="f" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a></li>
 417         </ul>
 418       </footer>
 419     </div>
 420   </body>
 421 </html>