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