From: Michael Tremer Date: Wed, 12 Feb 2025 14:24:58 +0000 (+0000) Subject: CSS: Migrate to Bulma 1.0.3 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=2b9179fd8b28e4212d91c353cb210768d88980f7;p=pbs.git CSS: Migrate to Bulma 1.0.3 Signed-off-by: Michael Tremer --- diff --git a/Makefile.am b/Makefile.am index c83d6636..c13afb36 100644 --- a/Makefile.am +++ b/Makefile.am @@ -338,10 +338,13 @@ static_css_DATA = \ static_cssdir = $(staticdir)/css +SASS_FILES = \ + src/scss/_fonts.scss \ + src/scss/_icons.scss \ + src/scss/site.scss + EXTRA_DIST += \ - src/static/css/_fonts.scss \ - src/static/css/_icons.scss \ - src/static/css/site.scss + $(SASS_FILES) CLEANFILES += \ src/static/css/site.css @@ -440,9 +443,9 @@ UGLIFYJS_PROCESS = \ %: %.in Makefile $(SED_PROCESS) -%.css: %.scss +src/static/css/site.css: $(SASS_FILES) $(AM_V_GEN)$(MKDIR_P) $(dir $@) && \ - $(SASS) --style compressed $< > $@ + $(SASS) --style compressed src/scss/site.scss > $@ %.min.js: %.js $(UGLIFYJS_PROCESS) diff --git a/configure.ac b/configure.ac index 6c1d88dd..e2549819 100644 --- a/configure.ac +++ b/configure.ac @@ -58,7 +58,7 @@ AC_PROG_SED AM_PATH_PYTHON([3.9]) # SASS -AC_CHECK_PROGS(SASS, [sass node-sass]) +AC_CHECK_PROGS(SASS, [sass]) if test -z "${SASS}"; then AC_MSG_ERROR([sass is required]) fi diff --git a/src/static/css/_fonts.scss b/src/scss/_fonts.scss similarity index 100% rename from src/static/css/_fonts.scss rename to src/scss/_fonts.scss diff --git a/src/scss/_icons.scss b/src/scss/_icons.scss new file mode 100644 index 00000000..d69a1288 --- /dev/null +++ b/src/scss/_icons.scss @@ -0,0 +1,10 @@ +/* + Import Font-Awesome +*/ + +$fa-font-path: "../fonts"; + +@import "../third-party/Font-Awesome/scss/fontawesome"; +@import "../third-party/Font-Awesome/scss/regular"; +@import "../third-party/Font-Awesome/scss/solid"; +@import "../third-party/Font-Awesome/scss/brands"; diff --git a/src/scss/site.scss b/src/scss/site.scss new file mode 100644 index 00000000..5575927b --- /dev/null +++ b/src/scss/site.scss @@ -0,0 +1,188 @@ +@charset "utf-8"; + +/* + Global Settings +*/ + +$black: hsl(221, 14%, 4%); +$black-bis: hsl(221, 14%, 9%); +$black-ter: hsl(221, 14%, 14%); + +$grey-darker: hsl(221, 14%, 21%); +$grey-dark: hsl(221, 14%, 29%); +$grey: hsl(221, 14%, 48%); +$grey-light: hsl(221, 14%, 71%); +$grey-lighter: hsl(221, 14%, 86%); +$grey-lightest: hsl(221, 14%, 93%); + +$white-ter: hsl(221, 14%, 96%); +$white-bis: hsl(221, 14%, 98%); +$white: hsl(221, 14%, 100%); + +// Our primary color +$primary: hsl(349, 100%, 59%); + +$blue: hsl(233, 100%, 63%); +$cyan: hsl(198, 100%, 70%); +$green: hsl(153, 53%, 53%); +$orange: hsl(14, 100%, 53%); +$purple: hsl(271, 100%, 71%); +$red: hsl(348, 100%, 70%); +$turquoise: hsl(171, 100%, 41%); +$yellow: hsl(42, 100%, 53%); + +@use "../third-party/bulma/sass/utilities" with ( + // Font Family + $family-sans-serif: "Prompt, sans-serif", + + // Colour Palette + $primary: $primary, + $blue: $blue, + $cyan: $cyan, + $green: $green, + $orange: $orange, + $purple: $purple, + $red: $red, + $turquoise: $turquoise, + $yellow: $yellow, + + // Use the primary colour for links + $link: $primary, + + // Define colors for architectures + $custom-colors: ( + "aarch64" : $red, + "riscv64" : $yellow, + "x86_64" : $blue, + "noarch" : $grey, + ), +); + +@use "../third-party/bulma/sass/layout" with ( + // Section + $section-padding: 3rem 1.5rem, + $section-padding-desktop: 3rem 0.5rem, + + // Footer + $footer-padding: 3rem 1.5rem 3rem, +); + +/* + Import Bulma +*/ +@forward "../third-party/bulma/sass/base"; +@forward "../third-party/bulma/sass/components"; +@forward "../third-party/bulma/sass/elements"; +@forward "../third-party/bulma/sass/form"; +@forward "../third-party/bulma/sass/grid"; +@forward "../third-party/bulma/sass/helpers"; +@forward "../third-party/bulma/sass/utilities"; + +// Load the theme +@forward "../third-party/bulma/sass/themes"; + +@use "../third-party/bulma/sass/utilities/initial-variables" as iv; +@use "../third-party/bulma/sass/utilities/derived-variables" as dv; +@use "../third-party/bulma/sass/utilities/functions" as fn; + +// Import fonts +@forward "fonts"; + +// Import icons +@forward "icons"; + +/* + Custom CSS +*/ + +html, body { + min-height: 100vh; +} + +.log { + .media-left { + min-width: 64px; + } +} + +.jobs-log-stream { + // Use the code font + font-family: dv.$family-code; + + // Break loglines like a terminal would + overflow-wrap: break-word; + + // Keep any whitespace + white-space: pre; + + p.DEBUG { + background-color: iv.$grey; + color: bulmaFindColorInvert(iv.$grey); + } + + p.INFO { + // Use the default text color + } + + p.WARNING { + background-color: dv.$warning; + color: bulmaFindColorInvert(dv.$warning); + } + + p.ERROR { + background-color: dv.$danger; + color: bulmaFindColorInvert(dv.$danger); + } + + &.is-small { + font-size: dv.$size-small; + text-overflow: ellipsis; + } +} + +/* + Code Highlighting +*/ + +.highlight { + .hll { + background-color: iv.$grey; + } + + // Keywords + .k, .kc, .kd, .kn, .kp, .kr, .kt { + color: iv.$grey-dark; + font-weight: bold; + } + + // Literals + .l, .ld { + color: iv.$blue; + } + + // Literal Number + .m, .mb, .mf, .mh, .mi, .mo, .il { + color: iv.$red; + } + + // Literal Strings + .s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss { + color: iv.$blue; + } + + // Names + .n, .na, .nb, .nc, .no, .nd, .ni, .ne, .nf, .nl, .nn, .nx, .py, .nt, .nv, .bp, + .fm, .vc, .vg, .vi, .vm { + color: dv.$text; + } + + // Operators + .o, .ow { + color: dv.$text; + } + + // Comments + .c, .ch, .cm, .cp, .cpf, .c1, .cs { + color: iv.$grey; + } +} diff --git a/src/static/css/_icons.scss b/src/static/css/_icons.scss deleted file mode 100644 index 997d1719..00000000 --- a/src/static/css/_icons.scss +++ /dev/null @@ -1,10 +0,0 @@ -/* - Import Font-Awesome -*/ - -$fa-font-path: "../fonts"; - -@import "../../third-party/Font-Awesome/scss/fontawesome"; -@import "../../third-party/Font-Awesome/scss/regular"; -@import "../../third-party/Font-Awesome/scss/solid"; -@import "../../third-party/Font-Awesome/scss/brands"; diff --git a/src/static/css/site.scss b/src/static/css/site.scss deleted file mode 100644 index 82309028..00000000 --- a/src/static/css/site.scss +++ /dev/null @@ -1,149 +0,0 @@ -@charset "utf-8"; - -// Import some basic variables from Bulma -@import "../../third-party/bulma/sass/utilities/initial-variables"; -@import "../../third-party/bulma/sass/utilities/functions"; - -/* - Global Settings -*/ -$family-sans-serif: Prompt, sans-serif; - -// Colour Palette -$primary: #ff2e53; -$green: #3adb76; -$yellow: #e7e247; -//$red: #cc4b47; - -// Use the primary colour for links -$link: $primary; - -// Define colors for architectures -$custom-colors: ( - "aarch64" : ($red, findColorInvert($red)), - "riscv64" : ($yellow, findColorInvert($yellow)), - "x86_64" : ($blue, findColorInvert($blue)), - "noarch" : ($grey, findColorInvert($grey)), -); - -@import "../../third-party/bulma/sass/utilities/derived-variables"; - -// section -$section-padding: 3rem 1.5rem; -$section-padding-desktop: 3rem 0.5rem; - -// Footer -$footer-padding: 3rem 1.5rem 3rem; - -/* - Import Bulma -*/ -@import "../../third-party/bulma/sass/utilities/_all"; -@import "../../third-party/bulma/sass/base/_all"; -@import "../../third-party/bulma/sass/components/_all"; -@import "../../third-party/bulma/sass/elements/_all"; -@import "../../third-party/bulma/sass/form/_all"; -@import "../../third-party/bulma/sass/grid/_all"; -@import "../../third-party/bulma/sass/helpers/_all"; -@import "../../third-party/bulma/sass/layout/_all"; - -// Import fonts -@import "fonts"; - -// Import icons -@import "icons"; - -/* - Custom CSS -*/ - -html, body { - min-height: 100vh; -} - -.log { - .media-left { - min-width: 64px; - } -} - -.jobs-log-stream { - // Use the code font - font-family: $family-code; - - // Break loglines like a terminal would - overflow-wrap: break-word; - - // Keep any whitespace - white-space: pre; - - p.DEBUG { - background-color: $light; - color: $light-invert; - } - - p.INFO { - // Use the default text color - } - - p.WARNING { - background-color: $warning; - color: $warning-invert; - } - - p.ERROR { - background-color: $danger; - color: $danger-invert; - } - - &.is-small { - font-size: $size-small; - text-overflow: ellipsis; - } -} - -/* - Code Highlighting -*/ -.highlight { - .hll { - background-color: $grey; - } - - // Keywords - .k, .kc, .kd, .kn, .kp, .kr, .kt { - color: $grey-dark; - font-weight: bold; - } - - // Literals - .l, .ld { - color: $blue; - } - - // Literal Number - .m, .mb, .mf, .mh, .mi, .mo, .il { - color: $red; - } - - // Literal Strings - .s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss { - color: $blue; - } - - // Names - .n, .na, .nb, .nc, .no, .nd, .ni, .ne, .nf, .nl, .nn, .nx, .py, .nt, .nv, .bp, - .fm, .vc, .vg, .vi, .vm { - color: $text; - } - - // Operators - .o, .ow { - color: $text; - } - - // Comments - .c, .ch, .cm, .cp, .cpf, .c1, .cs { - color: $grey; - } -} diff --git a/src/third-party/bulma b/src/third-party/bulma index 16f1b768..78541814 160000 --- a/src/third-party/bulma +++ b/src/third-party/bulma @@ -1 +1 @@ -Subproject commit 16f1b768818af9cfc217e8112ad38b14afc46a44 +Subproject commit 785418143e186f5513b485db0695dece2ccf9bf1