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