--- /dev/null
+@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;
+ }
+}
+++ /dev/null
-@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;
- }
-}