src/sass/main.sass

   1 @charset "utf-8"
   2
   3 // Import some basic variables from Bulma
   4 @import "../third-party/bulma/sass/utilities/initial-variables.sass"
   5
   6 // Global Settings
   7 $family-sans-serif:                             Prompt, sans-serif
   8
   9 $size-1:                                                3rem
  10 $size-2:                                                2.5rem
  11 $size-3:                                                2rem
  12 $size-4:                                                1.5rem
  13 $size-5:                                                1.25rem
  14 $size-6:                                                1rem
  15 $size-7:                                                0.75rem
  16
  17 // Make titles slightly larger
  18 $title-size:                                    $size-2
  19
  20 // Colour Palette
  21 $primary:                                               #ff2e52
  22 $primary-invert:                                #ffffff
  23 $secondary:                                             #46ffc0
  24 $secondary-invert:                              #000000
  25 $success:                                               #1ae210
  26 $success-invert:                #ffffff
  27 $danger:                                                #ac001a
  28 $warning:                                               #f3ff50
  29
  30 // Pride Colours
  31 $pride-red:                                             #e40303
  32 $pride-orange:                                  #ff8c00
  33 $pride-yellow:                                  #ffed00
  34 $pride-green:                                   #008026
  35 $pride-blue:                                    #24408e
  36 $pride-purple:                                  #732982
  37
  38 // Custom Colours
  39 $lwl:                                                   #6534C8
  40
  41 $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))
  42
  43 // Use the primary colour for links
  44 $link:                                                  $primary
  45
  46 // Use black for titles
  47 $title-color:                   $grey-darker
  48
  49 // Use dark grey for text
  50 $text:                          $grey-darker
  51
  52 // Use the primary color for code
  53 $code:                                                  $primary
  54
  55 @import "../third-party/bulma/sass/utilities/derived-variables.sass"
  56
  57 // Controls
  58 $control-border-width:                                  4px
  59
  60 // Notifications
  61 $notification-padding:          1.25rem 1.5rem
  62 $notification-padding-ltr:      $notification-padding
  63 $notification-padding-rtl:      $notification-padding
  64
  65 // Breadcrumbs
  66 $breadcrumb-item-color:         $primary
  67 $breadcrumb-item-hover-color:   $primary-dark
  68 $breadcrumb-item-active-color:  $primary
  69
  70 // section
  71 $section-padding:               3rem 1.5rem
  72 $section-padding-desktop:       3rem 0.5rem
  73
  74 // Footer
  75 $footer-padding:                                3rem 1.5rem 3rem
  76
  77 // Import Bulma
  78 @import "../third-party/bulma/sass/utilities/_all.sass"
  79 @import "../third-party/bulma/sass/base/_all.sass"
  80 @import "../third-party/bulma/sass/components/_all.sass"
  81 @import "../third-party/bulma/sass/elements/_all.sass"
  82 @import "../third-party/bulma/sass/form/_all.sass"
  83 @import "../third-party/bulma/sass/grid/_all.sass"
  84 @import "../third-party/bulma/sass/helpers/_all.sass"
  85 @import "../third-party/bulma/sass/layout/_all.sass"
  86
  87 // Import fonts
  88 @import "_fonts"
  89
  90 // Import icons
  91 @import "_icons"
  92
  93 // Custom CSS
  94
  95 html, body
  96         min-height: 100vh;
  97
  98 #hero-index
  99         position: relative
 100         video
 101                 width: 100%;
 102                 height: 100%;
 103                 position: absolute;
 104                 object-fit: cover;
 105                 z-index: 0;
 106
 107 .footer
 108         a
 109                 color: $grey
 110                 &:hover
 111                         color: $black
 112
 113 .modal
 114         &.is-large
 115                 .modal-content
 116                         +from($modal-breakpoint)
 117                                 width: $widescreen
 118                                 max-height: 100%
 119
 120 // Used to wrap text on buttons
 121 .wrap-text
 122     height: max-content;
 123     white-space: inherit;
 124
 125 .map
 126         width: 100%;
 127         height: 100%;
 128         min-height: 24rem;