src/scss/_variables.scss

   1 /*
   2         Colours
   3 */
   4 $black:                                         #000000;
   5 $white:                                         #ffffff;
   6
   7 // Grays
   8 $gray-400:                                      #ede8e8;
   9 $gray-800:                                      #31353c;
  10
  11 $red:                                           #ee2e31;
  12 $yellow:                                        #e7e247;
  13 $cyan:                                          #2ee8c8;
  14
  15 // Lightning Wire Labs colour
  16 $lwl:                                           #4b0082;
  17
  18 // Theme
  19 $primary:                                       $red;
  20 $secondary:                                     $cyan;
  21 $light:                                         $gray-400;
  22 $dark:                                          $gray-800;
  23
  24 $theme-colors: (
  25         "lwl"                                   : $lwl,
  26 );
  27
  28 $yiq-text-dark:                         $dark;
  29 $yiq-text-light:                        $white;
  30
  31 $body-bg:                                       $dark;
  32 $body-color:                            $white;
  33
  34 // Breakpoints
  35 $grid-breakpoints: (
  36         xs: 0,
  37         sm: 600px,
  38         md: 768px,
  39         lg: 1024px,
  40         xl: 1280px
  41 );
  42
  43 $grid-gutter-width:                     24px;
  44
  45 $border-radius:                         5px;
  46 $border-radius-lg:                      5px;
  47
  48 // Fonts
  49 $font-family-sans-serif:        "Mukta", sans-serif;
  50
  51 $font-weight-light:                     200;
  52 $font-weight-normal:            400;
  53 $font-weight-bold:                      700;
  54
  55 // Typo
  56 $font-size-base:                        1.125rem;
  57 $lead-font-size:                        1.5rem;
  58 $small-font-size:                       87.5%;
  59
  60 // Headings
  61 $headings-font-weight:          500;
  62 $headings-line-height:          1.15;
  63 $headings-margin-bottom:        1.25rem;
  64 $headings-color:                        $white;
  65
  66 $h1-font-size:                          3rem;
  67 $h2-font-size:                          2.5rem;
  68 $h3-font-size:                          2.25rem;
  69 $h4-font-size:                          2rem;
  70 $h5-font-size:                          1.5rem;
  71 $h6-font-size:                          1.25rem;
  72
  73 $display1-size:                         4rem;
  74
  75 // Links
  76 $link-color:                            $primary;
  77
  78 // Navbar
  79 $navbar-brand-font-size:        36px;
  80 $navbar-brand-height:           32px;
  81
  82 $nav-link-height:                       24px;
  83 $navbar-nav-link-padding-x:     16px;
  84
  85 $navbar-padding-y:                      1.1rem;
  86
  87 // Input
  88 $input-btn-padding-x:           1rem;
  89 $input-btn-padding-y:           .5rem;
  90
  91 // Buttons
  92 $btn-border-width:                      3px;