SASS: Move variables into an extra file

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/Makefile.am b/Makefile.am
index 377128ad123843d055a3fc79f741f198b1a925c6..b9520dfdd7f21c5a87d28a4c9f5a116b68fbb2e4 100644 (file)
--- 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 (file)
index 0000000..533cbf9
--- /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 e959f7cb8589265bbe77d1c56eafcfaacef57526..ffcef4c5be640a62a0c7111157bb72c9bfec21ab 100644 (file)
--- 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"