Use Karla instead of Ubuntu font

[ipfire.org.git] / src / scss / _variables.scss

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 6c5b598cad470ffc934bbf60d6568fa550b4658d..780493bd955dabc796844b96c6412a5cb490a586 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,35 +1,47 @@
 // Global Settings
-$enable-shadows: true;
+$enable-shadows:                       true;
+$shadow-1:                                     0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+$shadow-2:                                     0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
+$shadow-3:                                     0 3px 6px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
+$shadow-4:                                     0 10px 20px 0 rgba(0, 0, 0, 0.19), 0 6px 6px 0 rgba(0, 0, 0, 0.26);
+$shadow-5:                                     0 14px 28px 0 rgba(0, 0, 0, 0.25), 0 10px 10px 0 rgba(0, 0, 0, 0.26);
+$shadow-6:                                     0 19px 38px 0 rgba(0, 0, 0, 0.3), 0 15px 12px 0 rgba(0, 0, 0, 0.22);
 
 /*
        Colours
 */
-$red-900:      #b71c1c;
-$red-600:      #e53935;
+$red-900:                              #b71c1c;
+$red-600:                              #e53935;
 
-$amber-800:    #ff8f00;
-$yellow-700:   #fbc02d;
+$amber-800:                            #ff8f00;
+$yellow-700:                           #fbc02d;
 
-$blue-700:             #1976d2;
-$blue-400:             #42a5f5;
+$blue-700:                                     #1976d2;
+$blue-400:                                     #42a5f5;
 
-$green-600:            #43a047;
-$green-400:            #66bb6a;
+$green-600:                                    #43a047;
+$green-400:                                    #66bb6a;
 
-$blue-grey-900:        #263238;
-$blue-grey-700:        #455a64;
-$blue-grey-600:        #546e7a;
-$blue-grey-300:        #90a4ae;
-$blue-grey-50: #eceff1;
+$blue-grey-900:                                #263238;
+$blue-grey-700:                                #455a64;
+$blue-grey-600:                                #546e7a;
+$blue-grey-300:                                #90a4ae;
+$blue-grey-50:                         #eceff1;
 
-$orange-a400:  #ff3d00;
+$orange-a400:                          #ff3d00;
 
-$cyan:                 #00bcd4;
+$cyan:                                         #00bcd4;
 
 // Theme
-$primary:              $red-900;
-$secondary:            white;
-$dark:                 $blue-grey-900;
+$primary:                                      $red-900;
+$secondary:                                    white;
+$dark:                                         $blue-grey-900;
+
+$yiq-text-dark:                                $primary;
+$yiq-text-light:                       $secondary;
+
+$body-bg:                                      $blue-grey-50;
+$body-color:                           $blue-grey-900;
 
 // Breakpoints
 $grid-breakpoints: (
@@ -44,14 +56,34 @@ $border-radius:                             2px;
 $border-radius-lg:                     2px;
 
 // Fonts
-$font-family-sans-serif:       "Ubuntu", sans-serif;
+$font-family-sans-serif:       "Karla", sans-serif;
 
-$font-weight-light:                    300;
-$font-weight-normal:           500;
+$font-weight-light:                    200;
+$font-weight-normal:           400;
 $font-weight-bold:                     700;
 
 // Typo
-$font-size-base:                       0.875rem;
+$font-size-base:                       1rem;
+$lead-font-size:                       1.5rem;
+$small-font-size:                      87.5%;
+
+// Headings
+$headings-font-weight:         300;
+$headings-line-height:         1.5;
+$headings-margin-bottom:       1.5rem;
+$headings-color:                       $blue-grey-900;
+
+$h1-font-size:                         3rem;
+$h2-font-size:                         2.5rem;
+$h3-font-size:                         2.25rem;
+$h4-font-size:                         2rem;
+$h5-font-size:                         1.5rem;
+$h6-font-size:                         1.25rem;
+
+$display1-size:                                7.5rem;
+
+// Links
+$link-color:                           $primary;
 
 // Navbar
 $navbar-brand-font-size:       36px;
@@ -66,13 +98,12 @@ $navbar-padding-y:                  1.1rem;
 $input-btn-padding-x:          1rem;
 $input-btn-padding-y:          .5rem;
 
-$input-btn-focus-box-shadow:
-                                                       0 3px 6px 0 rgba(black, .16), 0 3px 6px 0 rgba(black, .23);
+$input-btn-focus-box-shadow:   $shadow-3;
 
 // Shadows
-$box-shadow:                           0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .2);
+$box-shadow:                           $shadow-1;
 $box-shadow-sm:                                $box-shadow;
-$box-shadow-lg:                                0 19px 38px 0 rgba(0, 0, 0, .3), 0 15px 12px 0 rgba(0, 0, 0, .22);
+$box-shadow-lg:                                $shadow-6;
 
 // Buttons
 $btn-border-width:                     2px;