From f8cf452049bbfa4c6b65975d5b042406247eab02 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Sun, 31 Mar 2024 17:44:51 +0000 Subject: [PATCH] Commit because I need to do something else now... Signed-off-by: Michael Tremer --- src/scss/_icons.scss | 22 ++++++------ src/scss/_variables.scss | 27 ++++----------- src/scss/listing.scss | 2 +- src/scss/main.scss | 75 +++++++++++++++++++++++++++++++++++++--- 4 files changed, 89 insertions(+), 37 deletions(-) diff --git a/src/scss/_icons.scss b/src/scss/_icons.scss index 31f38c0c..44eac628 100644 --- a/src/scss/_icons.scss +++ b/src/scss/_icons.scss @@ -1,23 +1,23 @@ // Font Awesome -$fa-font-path: "fonts" +$fa-font-path: "fonts"; -$fa-font-base-size: 1rem +$fa-font-base-size: 1rem; -@import "../font-awesome/scss/fontawesome" -@import "../font-awesome/scss/solid" -@import "../font-awesome/scss/regular" -@import "../font-awesome/scss/brands" +@import "../font-awesome/scss/fontawesome"; +@import "../font-awesome/scss/solid"; +@import "../font-awesome/scss/regular"; +@import "../font-awesome/scss/brands"; // PaymentFont -$pf-font-path: "fonts" +$pf-font-path: "fonts"; -$pf-font-size-base: 1rem +$pf-font-size-base: 1rem; -@import "../payment-font/sass/paymentfont" +@import "../payment-font/sass/paymentfont"; // Flags -$flag-icon-css-path: "flags" +$flag-icon-css-path: "flags"; -@import "../flag-icons/sass/flag-icon" +@import "../flag-icons/sass/flag-icon"; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index b7019ebe..9aa03d76 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,8 +1,5 @@ // Import some basic variables from Bulma -@use "../third-party/bulma/sass/utilities/initial-variables"; - -// Global Settings -$family-sans-serif: "Prompt, sans-serif"; +@use "../third-party/bulma/sass/utilities/initial-variables" as iv; $size-1: 3rem; $size-2: 2.5rem; @@ -15,15 +12,7 @@ $size-7: 0.75rem; // Make titles slightly larger $title-size: $size-2; -// Colour Palette -$primary: #ff2e52; -$primary-invert: #ffffff; -$secondary: #46ffc0; -$secondary-invert: #000000; -$success: #1ae210; -$success-invert: #ffffff; -$danger: #ac001a; -$warning: #f3ff50; +$grey: iv.$grey; // Pride Colours $pride-red: #e40303; @@ -36,31 +25,29 @@ $pride-purple: #732982; // Custom Colours $lwl: #6534C8; -$custom-colors: ("secondary" : ($secondary, $secondary-invert), "lwl" : ($lwl, $white), "pride-red" : ($pride-red, $white), "pride-orange" : ($pride-orange, $black), "pride-yellow" : ($pride-yellow, $black), "pride-green" : ($pride-green, $white), "pride-blue" : ($pride-blue, $white), "pride-purple" : ($pride-purple, $white)); +//$custom-colors: ("secondary" : ($secondary, $secondary-invert), "lwl" : ($lwl, $white), "pride-red" : ($pride-red, $white), "pride-orange" : ($pride-orange, $black), "pride-yellow" : ($pride-yellow, $black), "pride-green" : ($pride-green, $white), "pride-blue" : ($pride-blue, $white), "pride-purple" : ($pride-purple, $white)); // Use the primary colour for links $link: $primary; // Use black for titles -$title-color: $grey-darker; +$title-color: iv.$grey-darker; // Use dark grey for text -$text: $grey-darker; +$text: iv.$grey-darker; // Use the primary color for code $code: $primary; -@use "../third-party/bulma/sass/utilities/derived-variables"; - // Notifications $notification-padding: 1.25rem 1.5rem; $notification-padding-ltr: $notification-padding; $notification-padding-rtl: $notification-padding; // Breadcrumbs -$breadcrumb-item-color: $primary; +/* $breadcrumb-item-color: $primary; $breadcrumb-item-hover-color: $primary-dark; -$breadcrumb-item-active-color: $primary; +$breadcrumb-item-active-color: $primary; */ // section $section-padding: 3rem 1.5rem; diff --git a/src/scss/listing.scss b/src/scss/listing.scss index 6e9d6904..0bbd449a 100644 --- a/src/scss/listing.scss +++ b/src/scss/listing.scss @@ -1,4 +1,4 @@ -@use "main.sass"; +@use "main"; // Make the body stretch over the entire screen body { diff --git a/src/scss/main.scss b/src/scss/main.scss index 3cb28584..2786f4cb 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,8 +1,69 @@ // Import variables -@use "_variables"; +//@use "_variables"; + +// Brand Colours +$primary: #ff2e52; +$secondary: #46ffc0; +$lwl: #6534C8; + +$black: #000000; +$white: #ffffff; + +// Pride Colours +$pride-red: #e40303; +$pride-orange: #ff8c00; +$pride-yellow: #ffed00; +$pride-green: #008026; +$pride-blue: #24408e; +$pride-purple: #732982; // Import Bulma -@use "../third-party/bulma/sass"; +@use "../third-party/bulma/sass" with ( + // Fonts + $family-primary: "Prompt, sans-serif", + + // Colour Palette + $primary: $primary, + $success: #1ae210, + $danger: #ac001a, + $warning: #f3ff50, + + $custom-colors: ( + "lwl" : ($lwl, $white), + "secondary" : ($secondary, $black), + "pride-red" : ($pride-red, $white), + "pride-orange" : ($pride-orange, $black), + "pride-yellow" : ($pride-yellow, $black), + "pride-green" : ($pride-green, $white), + "pride-blue" : ($pride-blue, $white), + "pride-purple" : ($pride-purple, $white) + ), + + // Use the primary colour for links + $link: $primary, + + // Sizes + $size-1: 3rem, + $size-2: 2.5rem, + $size-3: 2rem, + $size-4: 1.5rem, + $size-5: 1.25rem, + $size-6: 1rem, + $size-7: 0.75rem, + + // Sections + $section-padding: 3rem 1.5rem, + $section-padding-desktop: 3rem 0.5rem, + + // Footer + $footer-padding: 3rem 1.5rem 3rem, + + // Images + $dimensions: 16 24 32 48 64 96 128 192 256 512, + + // Notifications + $notification-padding: 1.25rem 1.5rem, +); // Import fonts @use "_fonts"; @@ -11,7 +72,7 @@ @use "_icons"; // Import Code Highlighting -@use "_code-highlighting"; +//@use "_code-highlighting"; // Custom CSS @@ -30,16 +91,19 @@ html, body { } } +/* .footer { a { - color: $grey; + color: iv.$grey; &:hover { - color: $black; + color: iv.$black; } } } +*/ +/* .modal { &.is-large { .modal-content { @@ -50,6 +114,7 @@ html, body { } } } +*/ // The PDF Viewer .pdf-viewer { -- 2.47.2