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"
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}?:~{}">
17 th:fragment="body(uri, maincontent, marginalcontent)"
18 thymeproxy:variables="${json}"
19 th:with="crumbs=${_crumbs.get(uri)}"
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">
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>
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>
39 <a class="navbar-item" href="../projects.html">Projects</a>
40 <a class="navbar-item" href="../about.html">About</a>
43 <div class="navbar-end">
44 <a class="navbar-item" href="../about.html">About</a>
49 <section class="section">
50 <div class="container">
52 <div class="column is-8-desktop is-offset-2-desktop breadcrumb" aria-label="breadcrumbs">
53 <strong>You are here:</strong>
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>
58 <li class="is-active"><a class="b" th:text="${title}">Fix SWF</a></li>
65 <section class="section">
66 <div class="container">
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">
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
83 <h2 class="title">Duis aute irure dolor</h2>
85 <li>Operators and other mathematical stuff: -+/*</li>
87 Characters offten used in programming languages:
88 {(<>)}@$?%*#;:&/\!^"'`~
90 <li>Special german characters: ÄäÖöÜü</li>
91 <li>Other special characters: @?¢§%°</li>
93 <h2 class="title">Excepteur sint occaecat cupidatat</h2>
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.
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
115 <code><a href="https://github.com/jgthms/bulma">bulma</a></code>
118 <code><a href="https://github.com/sass/node-sass">node-sass</a></code> to compile your own Sass file
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
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>
127 <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code>
128 for compiling ES6 JavaScript files
132 Apart from <code>package.json</code>, the following files are included:
136 <code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a>
139 <code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files
142 <code>index.html</code> this HTML5 file
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>
148 <code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code>
153 To see if your setup works, follow these steps:
158 <strong>Move</strong> to this directory:
160 <pre><code>cd bulma-start</code></pre>
165 <strong>Install</strong> all dependencies:
167 <pre><code>npm install</code></pre>
172 <strong>Start</strong> the CSS and JS watchers:
174 <pre><code>npm start</code></pre>
179 <strong>Edit</strong> <code>_sass/main.scss</code> by adding the following rule at the <strong>end</strong> of the file:
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>;
188 The page background should turn <strong class="has-text-success">green</strong>!
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!
194 For example, this page is <strong>only</strong> built with the following <strong>Bulma elements</strong>:
198 <table class="table is-bordered is-fullwidth">
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>
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>
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>
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>
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>
246 <div class="content">
248 If you want to <strong>learn more</strong>, follow these links:
251 <div class="field is-grouped">
253 <a class="button is-medium is-primary" href="http://bulma.io">
254 <strong class="has-text-weight-semibold">Bulma homepage</strong>
258 <a class="button is-medium is-link" href="http://bulma.io/documentation/overview/start/">
259 <strong class="has-text-weight-semibold">Documentation</strong>
268 <footer class="footer">
269 <div class="container">
270 <div class="columns">
271 <div class="column is-8-desktop is-offset-2-desktop">
273 <div class="level-left">
274 <span class="level-item">© <strong>mo</strong> 2021</span>
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>
285 <div id="page" class="cf">
286 <main class="content cf">
287 <div class="marginal">
289 th:include="~{::#navigation}?:_"
290 th:with="section=${crumbs != null ? crumbs[0] : null}"
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>
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>
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>
309 <ul th:include="${submenu}?:_"
311 len=${crumbs.size()},
312 submenu=${_childs.get(section)},
317 th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
319 <li th:fragment="submenu(submenu, parent, pos)"
320 th:each="entry : ${submenu}"
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)}
328 th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
330 <a href="../potemkin/fix-swf/overview.html"
331 th:if="${entry != parent}"
332 th:href="@{${entry}}"
334 th:class="${selected} ? 's selected' : 's'"
335 th:text="${_titles.get(entry)}"
337 <ul th:if="${selected and childs != null}"
339 th:class="'s' + (${selected && pos == crumbs.size()-1} ? ' active' : '') + (${entry == uri or (len > 1 and entry == crumbs.get(len-2) and _childs.get(uri) == null)} ? ' selected' : '')"
341 <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
344 <strong class="s">Overview</strong>
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>
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>
363 <aside class="m" th:insert="${marginalcontent}?:~{}">
364 <!--/* the following is only visible during natural templating -->
365 <h1>Other nasty but marginal stuff</h1>
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.
377 <h1>More nasty stuff</h1>
379 This one is really short!