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             <h1 class="title" th:include="${title}">Title</h1>
  70             <div class="content" 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 class="title">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 class="title">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               <ul>
 114                 <li>
 115                   <code><a href="https://github.com/jgthms/bulma">bulma</a></code>
 116                 </li>
 117                 <li>
 118                   <code><a href="https://github.com/sass/node-sass">node-sass</a></code> to compile your own Sass file
 119                 </li>
 120                 <li>
 121                   <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
 122                 </li>
 123                 <li>
 124                   <code><a href="https://babeljs.io/docs/usage/cli/">babel-cli</a></code>,
 125                   <code><a href="https://github.com/babel/babel-preset-env">babel-preset-env</a></code>
 126                   and
 127                   <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code>
 128                   for compiling ES6 JavaScript files
 129                 </li>
 130               </ul>
 131               <p>
 132                 Apart from <code>package.json</code>, the following files are included:
 133               </p>
 134               <ul>
 135                 <li>
 136                   <code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a>
 137                 </li>
 138                 <li>
 139                   <code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files
 140                 </li>
 141                 <li>
 142                   <code>index.html</code> this HTML5 file
 143                 </li>
 144                 <li>
 145                   <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>
 146                 </li>
 147                 <li>
 148                   <code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code>
 149                 </li>
 150               </ul>
 151               <h3>Try it out!</h3>
 152               <p>
 153                 To see if your setup works, follow these steps:
 154               </p>
 155               <ol>
 156                 <li>
 157                   <p>
 158                     <strong>Move</strong> to this directory:
 159                     <br>
 160                     <pre><code>cd bulma-start</code></pre>
 161                   </p>
 162                 </li>
 163                 <li>
 164                   <p>
 165                     <strong>Install</strong> all dependencies:
 166                     <br>
 167                     <pre><code>npm install</code></pre>
 168                   </p>
 169                 </li>
 170                 <li>
 171                   <p>
 172                     <strong>Start</strong> the CSS and JS watchers:
 173                     <br>
 174                     <pre><code>npm start</code></pre>
 175                   </p>
 176                 </li>
 177                 <li>
 178                   <p>
 179                     <strong>Edit</strong> <code>_sass/main.scss</code> by adding the following rule at the <strong>end</strong> of the file:
 180                     <br>
 181                     <pre><span style="color: #22863a;">html</span> {
 182     <span styl"color: #005cc5;"><span style="color: #005cc5;">background-color</span></span>: <span style="color: #24292e">$green</span>;
 183   }</pre>
 184                   </p>
 185                 </li>
 186               </ol>
 187               <p>
 188                 The page background should turn <strong class="has-text-success">green</strong>!
 189               </p>
 190               <h3>Get started</h3>
 191               <p>
 192                 You're <strong>ready</strong> to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one!
 193                 <br>
 194                 For example, this page is <strong>only</strong> built with the following <strong>Bulma elements</strong>:
 195               </p>
 196             </div>
 197             <!--/*-->
 198             <table class="table is-bordered is-fullwidth">
 199               <thead>
 200                 <tr>
 201                   <th>Type</th>
 202                   <th>CSS class</th>
 203                 </tr>
 204               </thead>
 205               <tbody>
 206                 <tr>
 207                   <th>Columns</th>
 208                   <td>
 209                     <code><a href="http://bulma.io/documentation/columns/basics">columns</a></code>
 210                     <code><a href="http://bulma.io/documentation/columns/basics">column</a></code>
 211                   </td>
 212                 </tr>
 213                 <tr>
 214                   <th>Layout</th>
 215                   <td>
 216                     <code><a href="http://bulma.io/documentation/layout/section">section</a></code>
 217                     <code><a href="http://bulma.io/documentation/layout/container">container</a></code>
 218                     <code><a href="http://bulma.io/documentation/layout/footer">footer</a></code>
 219                   </td>
 220                 </tr>
 221                 <tr>
 222                   <th>Elements</th>
 223                   <td>
 224                     <code><a href="http://bulma.io/documentation/elements/button">button</a></code>
 225                     <code><a href="http://bulma.io/documentation/elements/content">content</a></code>
 226                     <code><a href="http://bulma.io/documentation/elements/title">title</a></code>
 227                     <code><a href="http://bulma.io/documentation/elements/title">subtitle</a></code>
 228                   </td>
 229                 </tr>
 230                 <tr>
 231                   <th>Form</th>
 232                   <td>
 233                     <code><a href="http://bulma.io/documentation/form/general">field</a></code>
 234                     <code><a href="http://bulma.io/documentation/form/general">control</a></code>
 235                   </td>
 236                 </tr>
 237                 <tr>
 238                   <th>Helpers</th>
 239                   <td>
 240                     <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-centered</a></code>
 241                     <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-weight-semibold</a></code>
 242                   </td>
 243                 </tr>
 244               </tbody>
 245             </table>
 246             <div class="content">
 247               <p>
 248                 If you want to <strong>learn more</strong>, follow these links:
 249               </p>
 250             </div>
 251             <div class="field is-grouped">
 252               <p class="control">
 253                 <a class="button is-medium is-primary" href="http://bulma.io">
 254                   <strong class="has-text-weight-semibold">Bulma homepage</strong>
 255                 </a>
 256               </p>
 257               <p class="control">
 258                 <a class="button is-medium is-link" href="http://bulma.io/documentation/overview/start/">
 259                   <strong class="has-text-weight-semibold">Documentation</strong>
 260                 </a>
 261               </p>
 262             </div>
 263             <!--*/-->
 264           </div>
 265         </div>
 266       </div>
 267     </section>
 268     <footer class="footer">
 269       <div class="container">
 270         <div class="columns">
 271           <div class="column is-8-desktop is-offset-2-desktop">
 272             <div class="level">
 273               <div class="level-left">
 274                 <span class="level-item">© <strong>mo</strong> 2021</span>
 275               </div>
 276               <div class="level-right" id="footerlinks" th:include="~{::#links}?:_">
 277                 <a class="level-item" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a>
 278                 <a class="level-item" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a>
 279               </div>
 280             </div>
 281           </div>
 282         </div>
 283       </div>
 284     </footer>
 285     <div id="page" class="cf">
 286       <main class="content cf">
 287         <div class="marginal">
 288           <nav id="nav"
 289               th:include="~{::#navigation}?:_"
 290               th:with="section=${crumbs != null ? crumbs[0] : null}"
 291               >
 292             <hr class="n"/>
 293             <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
 294             <h1 class="nav">Navigation</h1>
 295             <h2 class="nav menu">Section-Menu</h2>
 296             <ul id="menu" class="cf">
 297               <li class="m blog" th:each="entry : ${_sections}" th:class="'m ' + ${entry.key}">
 298                 <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>
 299               </li>
 300               <!--/*-->
 301               <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
 302               <li class="m about"><a href="../about.html" class="m">About</a></li>
 303               <!--*/-->
 304             </ul>
 305             <h2 class="nav submenu">
 306               <span class="s">Submenu for section</span>
 307               <a class="s selected" href="../projects.html" th:href="@{${section}}" th:text="${_titles.get(section)}">Projects</a>
 308             </h2>
 309             <ul th:include="${submenu}?:_"
 310                 th:with="
 311                   len=${crumbs.size()},
 312                   submenu=${_childs.get(section)},
 313                   parent=${crumbs[0]},
 314                   pos=1"
 315                 id="submenu"
 316                 class="s"
 317                 th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
 318                 >
 319               <li th:fragment="submenu(submenu, parent, pos)"
 320                   th:each="entry : ${submenu}"
 321                   th:with="
 322                       child=${pos == len},
 323                       selected=${!child and crumbs.get(pos) == entry},
 324                       sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
 325                       childs=${entry == parent ? null : _childs.get(entry)}
 326                       "
 327                   class="s sub"
 328                   th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
 329                   >
 330                 <a  href="../potemkin/fix-swf/overview.html"
 331                     th:if="${entry != parent}"
 332                     th:href="@{${entry}}"
 333                     class="s selected"
 334                     th:class="${selected} ? 's selected' : 's'"
 335                     th:text="${_titles.get(entry)}"
 336                     >fix-swf</a>
 337                 <ul th:if="${selected and childs != null}"
 338                     class="s active"
 339                     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' : '')"
 340                     >
 341                   <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
 342                       class="s"
 343                       >
 344                     <strong class="s">Overview</strong>
 345                   </li>
 346                   <!--/*-->
 347                   <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
 348                   <li class="s"><a href="#" class="s">FAQ</a></li>
 349                   <li class="s"><a href="#" class="s">Documentation</a></li>
 350                   <!--*/-->
 351                 </ul>
 352               </li>
 353               <!--/*-->
 354               <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
 355               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
 356               <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
 357               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
 358               <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
 359               <!--*/-->
 360             </ul>
 361             <hr class="n"/>
 362           </nav>
 363           <aside class="m" th:insert="${marginalcontent}?:~{}">
 364           <!--/* the following  is only visible during natural templating -->
 365             <h1>Other nasty but marginal stuff</h1>
 366             <p>
 367               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 368               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
 369               ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 370               aliquip ex ea commodo consequat. Duis aute irure dolor in
 371               reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 372               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 373               culpa qui officia deserunt mollit anim id est laborum.
 374             </p>
 375           </aside>
 376           <aside class="m">
 377             <h1>More nasty stuff</h1>
 378             <p>
 379               This one is really short!
 380             </p>
 381           <!--*/-->
 382           </aside>
 383         </div>
 384       </main>
 385     </div>
 386   </body>
 387 </html>