]> git.ipfire.org Git - ipfire.org.git/commitdiff
Commit because I need to do something else now... bulma-v1
authorMichael Tremer <michael.tremer@ipfire.org>
Sun, 31 Mar 2024 17:44:51 +0000 (17:44 +0000)
committerMichael Tremer <michael.tremer@ipfire.org>
Sun, 31 Mar 2024 17:44:51 +0000 (17:44 +0000)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
src/scss/_icons.scss
src/scss/_variables.scss
src/scss/listing.scss
src/scss/main.scss

index 31f38c0cba9f66974716f1edb773d6cd79159a72..44eac628ffadda2b11ef51914e25a7caeabff7e0 100644 (file)
@@ -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";
index b7019ebe868e8d589c0b72a7503f390d080b831e..9aa03d76cffe1d9cffdf91a3070715c1f525c4c4 100644 (file)
@@ -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;
index 6e9d69042e9be51ee8b7e966770ba5d68b72ed3a..0bbd449af200b4daff0c58dbc1cdcc9a3811d121 100644 (file)
@@ -1,4 +1,4 @@
-@use "main.sass";
+@use "main";
 
 // Make the body stretch over the entire screen
 body {
index 3cb28584b1fa4c218823bb06619f3caf67852271..2786f4cb302b58c7a3364f69af94d8581b7086e4 100644 (file)
@@ -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 {