From 54964ea99c292eaba7f4dad3d0308f0e656cf6d9 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Wed, 17 Feb 2021 23:11:37 +0100 Subject: [PATCH] WIP:bulma:neu --- dist/potemkin.json | 27 +++ dist/potemkin/accelerator.html | 4 +- dist/sitemap.json | 22 +- dist/templates/layout-alt.html | 373 ++++++++++++++++++++++++++++++ dist/templates/layout.html | 405 +++++---------------------------- sass/juplo.scss | 2 + 6 files changed, 473 insertions(+), 360 deletions(-) create mode 100644 dist/templates/layout-alt.html diff --git a/dist/potemkin.json b/dist/potemkin.json index a53ef5ff..c3765e93 100644 --- a/dist/potemkin.json +++ b/dist/potemkin.json @@ -72,132 +72,159 @@ }, "_crumbs": { "/projects.html": [ + "/index.html", "/projects.html" ], "/potemkin/fix-swf/overview.html": [ + "/index.html", "/projects.html", "/potemkin/fix-swf/overview.html", "/potemkin/fix-swf/overview.html" ], "/potemkin/typo.html": [ + "/index.html", "/projects.html", "/potemkin/typo.html" ], "/potemkin/html-experimente.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html" ], "/potemkin/fix-swf/getting-started.html": [ + "/index.html", "/projects.html", "/potemkin/fix-swf/overview.html", "/potemkin/fix-swf/getting-started.html" ], "/potemkin/html-experimente/formulare.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/formulare.html" ], "/potemkin/html-experimente/symbole.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/symbole.html" ], "/templates/404.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/templates/404.html" ], "/potemkin/html-experimente/gibts-ja-gar-nicht.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/gibts-ja-gar-nicht.html" ], "/templates/error.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/templates/error.html" ], "/potemkin/html-experimente/error.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/error.html" ], "/potemkin/html-experimente/fast-leer-mit-menü.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/fast-leer-mit-menü.html" ], "/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" ], "/potemkin/html-experimente/fast-leer-kein-menü.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/fast-leer-kein-menü.html" ], "/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" ], "/potemkin/html-experimente/fast-leer-einspaltig.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/fast-leer-einspaltig.html" ], "/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" ], "/potemkin/html-experimente/breadcrumb.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/breadcrumb.html" ], "/potemkin/html-experimente/kein-layout.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/kein-layout.html" ], "/potemkin/html-experimente/basis-layout.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/basis-layout.html" ], "/potemkin/html-experimente/druck-layout.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/druck-layout.html" ], "/potemkin/html-experimente/tiny.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/tiny.html" ], "/potemkin/html-experimente/phone.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/phone.html" ], "/potemkin/html-experimente/tablet.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/tablet.html" ], "/potemkin/html-experimente/seitenaufteilung.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/seitenaufteilung.html" ], "/potemkin/html-experimente/seitenkopf.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/seitenkopf.html" ], "/potemkin/html-experimente/testlab.html": [ + "/index.html", "/projects.html", "/potemkin/html-experimente.html", "/potemkin/html-experimente/testlab.html" diff --git a/dist/potemkin/accelerator.html b/dist/potemkin/accelerator.html index 91b1fdfe..36bfff04 100644 --- a/dist/potemkin/accelerator.html +++ b/dist/potemkin/accelerator.html @@ -31,12 +31,10 @@ }, "_crumbs": { "\/potemkin\/accelerator.html": [ + "\/index.html", "\/projects.html", "\/potemkin\/accelerator.html", "\/potemkin\/accelerator.html" - ], - "\/projects.html": [ - "\/projects.html" ] } } diff --git a/dist/sitemap.json b/dist/sitemap.json index 36895655..77357830 100644 --- a/dist/sitemap.json +++ b/dist/sitemap.json @@ -1,9 +1,4 @@ { - "_sections": { - "blog": "/blog/", - "projects": "/projects.html", - "about": "/about.html" - }, "_titles": { "/index.html": "Home", "/blog/": "Blog", @@ -22,6 +17,11 @@ "/templates/error.html": "5xx-Template" }, "_childs": { + "/index.html": [ + "/blog/", + "/projects.html", + "/about.html" + ], "/blog/": [], "/projects.html": [ "/hibernate-maven-plugin/index.html", @@ -45,53 +45,65 @@ }, "_crumbs": { "/about.html": [ + "/index.html", "/about.html" ], "/expertise.html": [ + "/index.html", "/about.html", "/expertise.html" ], "/references.html": [ + "/index.html", "/about.html", "/references.html" ], "/impressum.html": [ + "/index.html", "/about.html", "/impressum.html" ], "/contact.html": [ + "/index.html", "/about.html", "/contact.html" ], "/agb.html": [ + "/index.html", "/about.html", "/impressum.html", "/agb.html" ], "/haftung-inhalte.html": [ + "/index.html", "/about.html", "/impressum.html", "/haftung-inhalte.html" ], "/haftung-links.html": [ + "/index.html", "/about.html", "/impressum.html", "/haftung-links.html" ], "/urheberrechte.html": [ + "/index.html", "/about.html", "/impressum.html", "/urheberrechte.html" ], "/datenschutz.html": [ + "/index.html", "/about.html", "/impressum.html", "/datenschutz.html" ], "/templates/404.html": [ + "/index.html", "/templates/404.html" ], "/templates/error.html": [ + "/index.html", "/templates/error.html" ] } diff --git a/dist/templates/layout-alt.html b/dist/templates/layout-alt.html new file mode 100644 index 00000000..53cae5ef --- /dev/null +++ b/dist/templates/layout-alt.html @@ -0,0 +1,373 @@ + + + + + + + juplo - BASISTEMPLATE + + + + + +
+
+
+ +
+

Title

+
+

+ Lorem ipsum dolor + sit amet, + 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. +

+

Duis aute irure dolor

+
    +
  • Operators and other mathematical stuff: -+/*
    • +
  • + Characters offten used in programming languages: + {(<>)}@$?%*#;:&/\!^"'`~ +
    • +
  • Special german characters: ÄäÖöÜü
    • +
  • Other special characters: @?¢§%°
    • +
+

Excepteur sint occaecat cupidatat

+

+ Lorem ipsum dolor sit amet, 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. +

+

+ Lorem ipsum dolor sit amet, 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. +

+ +

+ Apart from package.json, the following files are included: +

+
    +
  • + .babelrc configuration file for Babel +
    • +
  • + .gitignore common Git ignored files +
    • +
  • + index.html this HTML5 file +
    • +
  • + _sass/main.scss a basic SCSS file that imports Bulma and explains how to customize your styles, and compiles to css/main.css +
    • +
  • + _javascript/main.js an ES6 JavaScript that compiles to lib/main.js +
    • +
+

Try it out!

+

+ To see if your setup works, follow these steps: +

+
    +
  1. +

    + Move to this directory: +
    + 

    cd bulma-start
    +

    +
    2. +
  2. +

    + Install all dependencies: +
    + 

    npm install
    +

    +
    3. +
  3. +

    + Start the CSS and JS watchers: +
    + 

    npm start
    +

    +
    4. +
  4. +

    + Edit _sass/main.scss by adding the following rule at the end of the file: +
    + 

    html {
+    background-color: $green;
+  }
    +

    +
    5. +
+

+ The page background should turn green! +

+

Get started

+

+ You're ready to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one! +
+ For example, this page is only built with the following Bulma elements: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeCSS class
Columns + columns + column +
Layout + section + container + footer +
Elements + button + content + title + subtitle +
Form + field + control +
Helpers + has-text-centered + has-text-weight-semibold +
+
+

+ If you want to learn more, follow these links: +

+
+
+

+ + Bulma homepage + +

+

+ + Documentation + +

+
+ +
+ + +
+
+
+ + + + diff --git a/dist/templates/layout.html b/dist/templates/layout.html index 46f8c3ff..9ffb638f 100644 --- a/dist/templates/layout.html +++ b/dist/templates/layout.html @@ -16,364 +16,65 @@ - -
-
-
-
- You are here: - - Jump to navigation -
-
+ th:with="crumbs=${_crumbs.get(uri)}"> +
-
-
-
- -
-

Title

-
-

- Lorem ipsum dolor - sit amet, - 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. -

-

Duis aute irure dolor

-
    -
  • Operators and other mathematical stuff: -+/*
    • -
  • - Characters offten used in programming languages: - {(<>)}@$?%*#;:&/\!^"'`~ -
    • -
  • Special german characters: ÄäÖöÜü
    • -
  • Other special characters: @?¢§%°
    • -
-

Excepteur sint occaecat cupidatat

-

- Lorem ipsum dolor sit amet, 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. -

-

- Lorem ipsum dolor sit amet, 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. -

- -

- Apart from package.json, the following files are included: -

-
    -
  • - .babelrc configuration file for Babel -
    • -
  • - .gitignore common Git ignored files -
    • -
  • - index.html this HTML5 file -
    • -
  • - _sass/main.scss a basic SCSS file that imports Bulma and explains how to customize your styles, and compiles to css/main.css -
    • -
  • - _javascript/main.js an ES6 JavaScript that compiles to lib/main.js -
    • -
-

Try it out!

-

- To see if your setup works, follow these steps: -

-
    -
  1. -

    - Move to this directory: -
    - 

    cd bulma-start
    -

    -
    2. -
  2. -

    - Install all dependencies: -
    - 

    npm install
    -

    -
    3. -
  3. -

    - Start the CSS and JS watchers: -
    - 

    npm start
    -

    -
    4. -
  4. -

    - Edit _sass/main.scss by adding the following rule at the end of the file: -
    - 

    html {
-    background-color: $green;
-  }
    -

    -
    5. -
-

- The page background should turn green! -

-

Get started

-

- You're ready to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one! -
- For example, this page is only built with the following Bulma elements: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeCSS class
Columns - columns - column -
Layout - section - container - footer -
Elements - button - content - title - subtitle -
Form - field - control -
Helpers - has-text-centered - has-text-weight-semibold -
-
-

- If you want to learn more, follow these links: -

-
-
-

- - Bulma homepage - -

-

- - Documentation - -

-
- -
- - -
-
-
- - + diff --git a/sass/juplo.scss b/sass/juplo.scss index 2d2a0f4f..89948e76 100644 --- a/sass/juplo.scss +++ b/sass/juplo.scss @@ -32,3 +32,5 @@ $primary-invert: $pink-invert; { max-height: none; } + +@import "navigation"; -- 2.20.1