WIP:bulma
authorKai Moritz <kai@juplo.de>
Tue, 16 Feb 2021 18:12:21 +0000 (19:12 +0100)
committerKai Moritz <kai@juplo.de>
Tue, 16 Feb 2021 18:12:21 +0000 (19:12 +0100)
dist/templates/layout.html

index b210c32..94e1b5e 100644 (file)
         </div>
       </div>
     </nav>
+    <section class="section">
+      <div class="container">
+        <div class="columns">
+          <div class="column is-8-desktop is-offset-2-desktop breadcrumb" aria-label="breadcrumbs">
+            <strong>You are here:</strong>
+            <ul>
+              <li><a href="../index.html" th:href="@{/index.html}">Home</a></li>
+              <li th:each="crumb: ${crumbs}"><a href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a></li>
+              <!--/*-->
+              <li class="is-active"><a class="b" th:text="${title}">Fix SWF</a></li>
+              <!--*/-->
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
     <section class="section">
       <div class="container">
         <div class="columns">
           <div class="column is-8-desktop is-offset-2-desktop">
             <div class="content">
-              <h3>Title</h3>
-              <p>
-              </p>
-                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
-              <ul>
-                <li>
-                  <code><a href="https://github.com/jgthms/bulma">bulma</a></code>
-                </li>
-                <li>
-                  <code><a href="https://github.com/sass/node-sass">node-sass</a></code> to compile your own Sass file
-                </li>
-                <li>
-                  <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
-                </li>
-                <li>
-                  <code><a href="https://babeljs.io/docs/usage/cli/">babel-cli</a></code>,
-                  <code><a href="https://github.com/babel/babel-preset-env">babel-preset-env</a></code>
-                  and
-                  <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code>
-                  for compiling ES6 JavaScript files
-                </li>
-              </ul>
-              <p>
-                Apart from <code>package.json</code>, the following files are included:
-              </p>
-              <ul>
-                <li>
-                  <code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a>
-                </li>
-                <li>
-                  <code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files
-                </li>
-                <li>
-                  <code>index.html</code> this HTML5 file
-                </li>
-                <li>
-                  <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>
-                </li>
-                <li>
-                  <code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code>
-                </li>
-              </ul>
-              <h3>Try it out!</h3>
-              <p>
-                To see if your setup works, follow these steps:
-              </p>
-              <ol>
-                <li>
-                  <p>
-                    <strong>Move</strong> to this directory:
-                    <br>
-                    <pre><code>cd bulma-start</code></pre>
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Install</strong> all dependencies:
-                    <br>
-                    <pre><code>npm install</code></pre>
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Start</strong> the CSS and JS watchers:
-                    <br>
-                    <pre><code>npm start</code></pre>
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Edit</strong> <code>_sass/main.scss</code> by adding the following rule at the <strong>end</strong> of the file:
-                    <br>
-                    <pre><span style="color: #22863a;">html</span> {
-  <span style="color: #005cc5;"><span style="color: #005cc5;">background-color</span></span>: <span style="color: #24292e">$green</span>;
-}</pre>
-                  </p>
-                </li>
-              </ol>
-              <p>
-                The page background should turn <strong class="has-text-success">green</strong>!
-              </p>
-              <h3>Get started</h3>
-              <p>
-                You're <strong>ready</strong> to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one!
-                <br>
-                For example, this page is <strong>only</strong> built with the following <strong>Bulma elements</strong>:
-              </p>
+              <h1 class="title" th:include="${title}">Title</h1>
+              <div th:fragment="maincontent">
+                <p>
+                  <strong>Lorem ipsum</strong> dolor
+                  <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
+                  consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
+                  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum dolore
+                  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                  proident, sunt in culpa qui officia deserunt mollit anim id est
+                  laborum.
+                </p>
+                <h2 class="title">Duis aute irure dolor</h2>
+                <ul>
+                  <li>Operators and other mathematical stuff: -+/*</li>
+                  <li>
+                    Characters offten used in programming languages:
+                    {(&lt;&gt;)}@$?%*#;:&amp;/\!^&#034;&#039;`~
+                  </li>
+                  <li>Special german characters: ÄäÖöÜü</li>
+                  <li>Other special characters: @?¢§%°</li>
+                </ul>
+                <h2 class="title">Excepteur sint occaecat cupidatat</h2>
+                <p>
+                  Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit,
+                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                  culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+                  eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  <strong>Ut enim ad minim veniam, quis nostrud <em>exercitation
+                  ullamco</em> laboris nisi ut aliquip ex ea commodo consequat</strong>.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                  cupidatat non proident, sunt in culpa qui officia deserunt mollit
+                  anim id est laborum.
+                </p>
+                <ul>
+                  <li>
+                    <code><a href="https://github.com/jgthms/bulma">bulma</a></code>
+                  </li>
+                  <li>
+                    <code><a href="https://github.com/sass/node-sass">node-sass</a></code> to compile your own Sass file
+                  </li>
+                  <li>
+                    <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
+                  </li>
+                  <li>
+                    <code><a href="https://babeljs.io/docs/usage/cli/">babel-cli</a></code>,
+                    <code><a href="https://github.com/babel/babel-preset-env">babel-preset-env</a></code>
+                    and
+                    <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code>
+                    for compiling ES6 JavaScript files
+                  </li>
+                </ul>
+                <p>
+                  Apart from <code>package.json</code>, the following files are included:
+                </p>
+                <ul>
+                  <li>
+                    <code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a>
+                  </li>
+                  <li>
+                    <code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files
+                  </li>
+                  <li>
+                    <code>index.html</code> this HTML5 file
+                  </li>
+                  <li>
+                    <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>
+                  </li>
+                  <li>
+                    <code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code>
+                  </li>
+                </ul>
+                <h3>Try it out!</h3>
+                <p>
+                  To see if your setup works, follow these steps:
+                </p>
+                <ol>
+                  <li>
+                    <p>
+                      <strong>Move</strong> to this directory:
+                      <br>
+                      <pre><code>cd bulma-start</code></pre>
+                    </p>
+                  </li>
+                  <li>
+                    <p>
+                      <strong>Install</strong> all dependencies:
+                      <br>
+                      <pre><code>npm install</code></pre>
+                    </p>
+                  </li>
+                  <li>
+                    <p>
+                      <strong>Start</strong> the CSS and JS watchers:
+                      <br>
+                      <pre><code>npm start</code></pre>
+                    </p>
+                  </li>
+                  <li>
+                    <p>
+                      <strong>Edit</strong> <code>_sass/main.scss</code> by adding the following rule at the <strong>end</strong> of the file:
+                      <br>
+                      <pre><span style="color: #22863a;">html</span> {
+    <span style="color: #005cc5;"><span style="color: #005cc5;">background-color</span></span>: <span style="color: #24292e">$green</span>;
+  }</pre>
+                    </p>
+                  </li>
+                </ol>
+                <p>
+                  The page background should turn <strong class="has-text-success">green</strong>!
+                </p>
+                <h3>Get started</h3>
+                <p>
+                  You're <strong>ready</strong> to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one!
+                  <br>
+                  For example, this page is <strong>only</strong> built with the following <strong>Bulma elements</strong>:
+                </p>
+              </div>
             </div>
             <table class="table is-bordered is-fullwidth">
               <thead>
       <main class="content cf">
         <article id="content" class="main" th:include="${maincontent}">
           <header><h1 th:include="${title}">juplo - BASISTEMPLATE</h1></header>
-          <div th:fragment="maincontent">
-            <p>
-              <strong>Lorem ipsum</strong> dolor
-              <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
-              consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
-              labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-              <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
-              ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-              irure dolor in reprehenderit in voluptate velit esse cillum dolore
-              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-              proident, sunt in culpa qui officia deserunt mollit anim id est
-              laborum.
-            </p>
-            <h2>Duis aute irure dolor</h2>
-            <ul>
-              <li>Operators and other mathematical stuff: -+/*</li>
-              <li>
-                Characters offten used in programming languages:
-                {(&lt;&gt;)}@$?%*#;:&amp;/\!^&#034;&#039;`~
-              </li>
-              <li>Special german characters: ÄäÖöÜü</li>
-              <li>Other special characters: @?¢§%°</li>
-            </ul>
-            <h2>Excepteur sint occaecat cupidatat</h2>
-            <p>
-              Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit,
-              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-              culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              <strong>Ut enim ad minim veniam, quis nostrud <em>exercitation
-              ullamco</em> laboris nisi ut aliquip ex ea commodo consequat</strong>.
-              Duis aute irure dolor in reprehenderit in voluptate velit esse
-              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-              cupidatat non proident, sunt in culpa qui officia deserunt mollit
-              anim id est laborum.
-            </p>
-          </div>
         </article>
         <div class="marginal">
           <nav id="nav"