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" th:each="entry : ${_sections}">
  37             <a class="navbar-item" href="../blog/" th:href="@{${entry.value}}" th:text="${_titles.get(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             <a href="#nav" title="Show navigation menu">Jump to navigation</a>
  62           </div>
  63         </div>
  64       </div>
  65     </section>
  66     <section class="section" id="top">
  67       <div class="container">
  68         <div class="columns">
  69           <div class="column is-8-desktop is-offset-2-desktop">
  70             <h1 class="title" th:include="${title}">Title</h1>
  71             <div class="content" 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             <!--/*-->
 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             <!--*/-->
 265           </div>
 266         </div>
 267       </div>
 268     </section>
 269     <nav id="nav"
 270         th:include="~{::#navigation}?:_"
 271         th:with="section=${crumbs != null ? crumbs[0] : null}"
 272         >
 273       <hr class="n"/>
 274       <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
 275       <h1 class="nav">Navigation</h1>
 276       <h2 class="nav menu">Section-Menu</h2>
 277       <ul id="menu" class="cf">
 278         <li class="m blog" th:each="entry : ${_sections}" th:class="'m ' + ${entry.key}">
 279           <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>
 280         </li>
 281         <!--/*-->
 282         <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
 283         <li class="m about"><a href="../about.html" class="m">About</a></li>
 284         <!--*/-->
 285       </ul>
 286       <h2 class="nav submenu">
 287         <span class="s">Submenu for section</span>
 288         <a class="s selected" href="../projects.html" th:href="@{${section}}" th:text="${_titles.get(section)}">Projects</a>
 289       </h2>
 290       <ul th:include="${submenu}?:_"
 291           th:with="
 292             len=${crumbs.size()},
 293             submenu=${_childs.get(section)},
 294             parent=${crumbs[0]},
 295             pos=1"
 296           id="submenu"
 297           class="s"
 298           th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
 299           >
 300         <li th:fragment="submenu(submenu, parent, pos)"
 301             th:each="entry : ${submenu}"
 302             th:with="
 303                 child=${pos == len},
 304                 selected=${!child and crumbs.get(pos) == entry},
 305                 sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
 306                 childs=${entry == parent ? null : _childs.get(entry)}
 307                 "
 308             class="s sub"
 309             th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
 310             >
 311           <a  href="../potemkin/fix-swf/overview.html"
 312               th:if="${entry != parent}"
 313               th:href="@{${entry}}"
 314               class="s selected"
 315               th:class="${selected} ? 's selected' : 's'"
 316               th:text="${_titles.get(entry)}"
 317               >fix-swf</a>
 318           <ul th:if="${selected and childs != null}"
 319               class="s active"
 320               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' : '')"
 321               >
 322             <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
 323                 class="s"
 324                 >
 325               <strong class="s">Overview</strong>
 326             </li>
 327             <!--/*-->
 328             <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
 329             <li class="s"><a href="#" class="s">FAQ</a></li>
 330             <li class="s"><a href="#" class="s">Documentation</a></li>
 331             <!--*/-->
 332           </ul>
 333         </li>
 334         <!--/*-->
 335         <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
 336         <li class="s off"><a href="#" class="s">jquery.openx</a></li>
 337         <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
 338         <li class="s sub off"><a href="#" class="s">accelerator</a></li>
 339         <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
 340         <!--*/-->
 341       </ul>
 342       <hr class="n"/>
 343     </nav>
 344     <aside class="m" th:insert="${marginalcontent}?:~{}">
 345     <!--/* the following  is only visible during natural templating -->
 346       <h1>Other nasty but marginal stuff</h1>
 347       <p>
 348         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 349         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
 350         ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 351         aliquip ex ea commodo consequat. Duis aute irure dolor in
 352         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 353         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 354         culpa qui officia deserunt mollit anim id est laborum.
 355       </p>
 356     </aside>
 357     <aside class="m">
 358       <h1>More nasty stuff</h1>
 359       <p>
 360         This one is really short!
 361       </p>
 362     <!--*/-->
 363     </aside>
 364     <footer class="footer">
 365       <div class="container">
 366         <div class="columns">
 367           <div class="column is-8-desktop is-offset-2-desktop">
 368             <div class="level">
 369               <div class="level-left">
 370                 <span class="level-item">© <strong>mo</strong> 2021</span>
 371               </div>
 372               <div class="level-right" id="footerlinks" th:include="~{::#links}?:_">
 373                 <a class="level-item" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a>
 374                 <a class="level-item" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a>
 375               </div>
 376             </div>
 377           </div>
 378         </div>
 379       </div>
 380     </footer>
 381     </div>
 382   </body>
 383 </html>