]> git.ipfire.org Git - pbs.git/commitdiff
CSS: Migrate to Bulma 1.0.3
authorMichael Tremer <michael.tremer@ipfire.org>
Wed, 12 Feb 2025 14:24:58 +0000 (14:24 +0000)
committerMichael Tremer <michael.tremer@ipfire.org>
Wed, 12 Feb 2025 14:24:58 +0000 (14:24 +0000)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
Makefile.am
configure.ac
src/scss/_fonts.scss [moved from src/static/css/_fonts.scss with 100% similarity]
src/scss/_icons.scss [new file with mode: 0644]
src/scss/site.scss [new file with mode: 0644]
src/static/css/_icons.scss [deleted file]
src/static/css/site.scss [deleted file]
src/third-party/bulma

index c83d66369ce7bf521a25c69bfe1496d084139bbb..c13afb36b2e9d6f7f4d692e707d01f91f1686794 100644 (file)
@@ -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)
index 6c1d88dde9d2967fd47a83d8e298ef8e97348da5..e25498193bca217b78964ed851eaa34a1f9ae471 100644 (file)
@@ -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/scss/_icons.scss b/src/scss/_icons.scss
new file mode 100644 (file)
index 0000000..d69a128
--- /dev/null
@@ -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 (file)
index 0000000..5575927
--- /dev/null
@@ -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 (file)
index 997d171..0000000
+++ /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 (file)
index 8230902..0000000
+++ /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;
-       }
-}
index 16f1b768818af9cfc217e8112ad38b14afc46a44..785418143e186f5513b485db0695dece2ccf9bf1 160000 (submodule)
@@ -1 +1 @@
-Subproject commit 16f1b768818af9cfc217e8112ad38b14afc46a44
+Subproject commit 785418143e186f5513b485db0695dece2ccf9bf1