X-Git-Url: https://juplo.de/gitweb/?a=blobdiff_plain;f=sass%2Fjuplo.scss;h=45389f3cedc89ca611326c567674f185cb4a8896;hb=a930331e6eff15504cc29d0bd402ee03d8d69638;hp=f5fe8f70405b9f1ef34452eadd61bdcaaeb2e733;hpb=f6262fd7fb79c74f81161d4883639c0b18640b9b;p=website diff --git a/sass/juplo.scss b/sass/juplo.scss index f5fe8f70..45389f3c 100644 --- 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"; @@ -44,13 +49,70 @@ $primary-invert: $pink-invert; { display: none; } -#navigation li.s > a.s.selected +#navigation li.s > a.selected, +#navigation li.s > a.leaf, +#navigation li.s > strong.selected, +#navigation li.s > strong.leaf { @extend .button; + @extend .is-primary; + @extend .is-rounded; + @extend .has-text-weight-bold; @extend .mb-3; } -#navigation li.s > a.s.selected, -#navigation li.s > strong.s +#navigation li.s > a.leaf, +#navigation li.s > strong.leaf +{ + color: #ccc; + background-color: #fff; +} +#navigation li.s > a.selected:after, +#navigation li.s > a.leaf:after, +#navigation li.s > strong.selected:after, +#navigation li.s > strong.leaf:after +{ + content: "\f0a8"; + 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.leaf:after, +#navigation li.s > strong.leaf:after +{ + color: #fff; +} +#navigation li.s.sub > a.selected:after, +#navigation li.s.sub > a.selected:after, +#navigation li.s.sub > strong.leaf:after, +#navigation li.s.sub > strong.leaf:after +{ + content: "\f0ab"; +} + + +html +{ + height: 100%; +} +body +{ + height: 100%; + display: flex; + flex-direction: column; +} +#page +{ + flex: 1 0 auto; +} +footer { - color: $primary; + flex-shrink: 0; }