WIP:bulma:neu

diff --git a/dist/templates/layout.html b/dist/templates/layout.html
index 6e12044..e94fd0f 100644 (file)
--- a/dist/templates/layout.html
+++ b/dist/templates/layout.html
@@ -33,16 +33,28 @@
             <img src="/img/logo.svg" alt="juplo" class="logo">
           </a>
 <span class="icon">
-    <i class="fas fa-home"></i>
+  <i class="fas fa-home"></i>
+</span>
+<button class="button is-primary is-rounded">
+  <span class="icon">
+    <i class="fas fa-arrow-circle-down fa-2x"></i>
   </span>
+  <span class="ml-2 has-text-weight-bold">Primary</span>
+</button>
+<button class="button is-primary is-rounded">
+  <span class="mr-3 has-text-weight-bold">Primary</span>
+  <span class="icon">
+    <i class="fas fa-arrow-circle-down fa-2x"></i>
+  </span>
+</button>
           <ul th:with="
                 len=${crumbs == null} ? 0 : ${crumbs.size()},
                 parent=${crumbs == null} ? '' : ${crumbs[0]},
                 submenu=${_childs.get(parent)},
                 pos=1"
               id="navigation"
-              class="s"
-              th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')">
+              class="s has-text-right"
+              th:class="'has-text-right s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')">
             <li th:fragment="submenu(submenu, parent, pos)"
                 th:each="entry : ${submenu}"
                 th:with="

diff --git a/package.json b/package.json
index 0eabdec..432b51f 100644 (file)
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "juplo.de",
   "description": "Thymeleaf-Layout and static content for http://juplo.de",
   "version": "0.0.1",
+  "main": "sass/juplo.scss",
   "devDependencies": {
     "autoprefixer": "^9.7.6",
     "bulma": "^0.9.2",

diff --git a/sass/juplo.scss b/sass/juplo.scss
index f5fe8f7..8e5c97d 100644 (file)
--- a/sass/juplo.scss
+++ b/sass/juplo.scss
@@ -26,6 +26,11 @@ $primary-invert: $pink-invert;
 // 4. Import the rest of Bulma
 */
 
+$primary: #0ACF00;
+$button-text-color: #FFF !important;
+$button-border-color: #000 !important;
+$button-hover-border-color: #000 !important;
+
 @import "../node_modules/bulma/bulma";
 @import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
 @import "../node_modules/@fortawesome/fontawesome-free/scss/regular";
@@ -47,8 +52,26 @@ $primary-invert: $pink-invert;
 #navigation li.s > a.s.selected
 {
   @extend .button;
+  @extend .is-primary;
+  @extend .is-rounded;
+  @extend .has-text-weight-bold;
   @extend .mb-3;
 }
+#navigation li.s > a.s.selected:after
+{
+  content: "\f0ab";
+  padding-left: .5em;
+  margin-right: -.5em;
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  font-size: 2em;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
 #navigation li.s > a.s.selected,
 #navigation li.s > strong.s
 {