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