From f567a4ce928efe3308d2581110e604e7db7c9496 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Tue, 9 Jan 2024 16:29:32 +0000 Subject: [PATCH] SASS: Move variables into an extra file Signed-off-by: Michael Tremer --- Makefile.am | 3 +- src/sass/_variables.sass | 73 ++++++++++++++++++++++++++++++++++++++ src/sass/main.sass | 75 ++-------------------------------------- 3 files changed, 77 insertions(+), 74 deletions(-) create mode 100644 src/sass/_variables.sass diff --git a/Makefile.am b/Makefile.am index 377128ad..b9520dfd 100644 --- a/Makefile.am +++ b/Makefile.am @@ -374,7 +374,8 @@ SASS_FILES = \ src/sass/main.sass \ src/sass/_code-highlighting.sass \ src/sass/_fonts.sass \ - src/sass/_icons.sass + src/sass/_icons.sass \ + src/sass/_variables.sass EXTRA_DIST += \ src/sass/listing.sass \ diff --git a/src/sass/_variables.sass b/src/sass/_variables.sass new file mode 100644 index 00000000..533cbf9c --- /dev/null +++ b/src/sass/_variables.sass @@ -0,0 +1,73 @@ +// Import some basic variables from Bulma +@import "../third-party/bulma/sass/utilities/initial-variables.sass" + +// Global Settings +$family-sans-serif: Prompt, sans-serif + +$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 + +// 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 + +// Pride Colours +$pride-red: #e40303 +$pride-orange: #ff8c00 +$pride-yellow: #ffed00 +$pride-green: #008026 +$pride-blue: #24408e +$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)) + +// Use the primary colour for links +$link: $primary + +// Use black for titles +$title-color: $grey-darker + +// Use dark grey for text +$text: $grey-darker + +// Use the primary color for code +$code: $primary + +@import "../third-party/bulma/sass/utilities/derived-variables.sass" + +// Notifications +$notification-padding: 1.25rem 1.5rem +$notification-padding-ltr: $notification-padding +$notification-padding-rtl: $notification-padding + +// Breadcrumbs +$breadcrumb-item-color: $primary +$breadcrumb-item-hover-color: $primary-dark +$breadcrumb-item-active-color: $primary + +// section +$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 diff --git a/src/sass/main.sass b/src/sass/main.sass index e959f7cb..ffcef4c5 100644 --- a/src/sass/main.sass +++ b/src/sass/main.sass @@ -1,78 +1,7 @@ @charset "utf-8" -// Import some basic variables from Bulma -@import "../third-party/bulma/sass/utilities/initial-variables.sass" - -// Global Settings -$family-sans-serif: Prompt, sans-serif - -$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 - -// 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 - -// Pride Colours -$pride-red: #e40303 -$pride-orange: #ff8c00 -$pride-yellow: #ffed00 -$pride-green: #008026 -$pride-blue: #24408e -$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)) - -// Use the primary colour for links -$link: $primary - -// Use black for titles -$title-color: $grey-darker - -// Use dark grey for text -$text: $grey-darker - -// Use the primary color for code -$code: $primary - -@import "../third-party/bulma/sass/utilities/derived-variables.sass" - -// Notifications -$notification-padding: 1.25rem 1.5rem -$notification-padding-ltr: $notification-padding -$notification-padding-rtl: $notification-padding - -// Breadcrumbs -$breadcrumb-item-color: $primary -$breadcrumb-item-hover-color: $primary-dark -$breadcrumb-item-active-color: $primary - -// section -$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 +// Import variables +@import "_variables.sass" // Import Bulma @import "../third-party/bulma/sass/utilities/_all.sass" -- 2.47.3