CSS: Add CSS for file listings

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

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 95d183090d93858e9b7dd1ad8a12f2a260eff0d9..fadbb1504bb5fda6bd4534224f39c9fbb6d6bcca 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,35 +1,32 @@
-// Global Settings
-$enable-shadows:                       true;
-
 /*
        Colours
 */
-$red-900:                              #b71c1c;
-$red-600:                              #e53935;
+$black:                                                #000000;
+$white:                                                #ffffff;
 
-$amber-800:                            #ff8f00;
-$yellow-700:                           #fbc02d;
+// Grays
+$gray-400:                                     #ede8e8;
+$gray-800:                                     #31353c;
 
-$blue-700:                                     #1976d2;
-$blue-400:                                     #42a5f5;
+$red:                                          #ee2e31;
+$yellow:                                       #e7e247;
+$cyan:                                         #2ee8c8;
 
-$green-600:                                    #43a047;
-$green-400:                                    #66bb6a;
+// Lightning Wire Labs colour
+$lwl:                                          #4b0082;
 
-$blue-grey-900:                                #263238;
-$blue-grey-700:                                #455a64;
-$blue-grey-600:                                #546e7a;
-$blue-grey-300:                                #90a4ae;
-$blue-grey-50:                         #eceff1;
+// Theme
+$primary:                                      $red;
+$secondary:                                    #757575;
+$light:                                                $gray-400;
+$dark:                                         $gray-800;
 
-$orange-a400:                          #ff3d00;
+$theme-colors: (
+       "lwl"                                   : $lwl,
+);
 
-$cyan:                                         #00bcd4;
-
-// Theme
-$primary:                                      $red-900;
-$secondary:                                    white;
-$dark:                                         $blue-grey-900;
+$body-bg:                                      $dark;
+$body-color:                           $white;
 
 // Breakpoints
 $grid-breakpoints: (
@@ -40,42 +37,56 @@ $grid-breakpoints: (
        xl: 1280px
 );
 
-$border-radius:                                2px;
-$border-radius-lg:                     2px;
+$grid-gutter-width:                    24px;
+
+$border-radius:                                5px;
+$border-radius-lg:                     5px;
 
 // Fonts
-$font-family-sans-serif:       "Ubuntu", sans-serif;
+$font-family-sans-serif:       "Mukta", 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:                       1.125rem;
+$lead-font-size:                       1.5rem;
+$small-font-size:                      87.5%;
 
-// Navbar
-$navbar-brand-font-size:       36px;
-$navbar-brand-height:          32px;
+$line-height-base:                     1.5;
 
-$nav-link-height:                      24px;
-$navbar-nav-link-padding-x:    16px;
+// Headings
+$headings-font-weight:         500;
+$headings-line-height:         1.15;
+$headings-margin-bottom:       1.25rem;
 
-$navbar-padding-y:                     1.1rem;
+$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;
 
-// Input
-$input-btn-padding-x:          1rem;
-$input-btn-padding-y:          .5rem;
+$display1-size:                                4rem;
 
-$input-btn-focus-box-shadow:
-                                                       0 3px 6px 0 rgba(black, .16), 0 3px 6px 0 rgba(black, .23);
+// Links
+$link-color:                           $primary;
+
+// Navbar
+$navbar-brand-font-size:       3rem;
+$navbar-brand-height:          5rem;
+$navbar-brand-padding-y:       1rem;
+$navbar-height:                                $navbar-brand-height + ($navbar-brand-padding-y * 2);
 
-// Shadows
-$box-shadow:                           0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .2);
-$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);
+$navbar-nav-link-padding-x:    1rem;
+
+// Input
+$input-btn-padding-x:          1.5rem;
+$input-btn-padding-y:          .5rem;
 
 // Buttons
-$btn-border-width:                     2px;
+$btn-border-width:                     3px;
 
-$btn-box-shadow:                       0 2px 0 rgba(black, .16), 0 1px 2px rgba(black, .23);
-$btn-active-box-shadow:                $input-btn-focus-box-shadow;
+// Progress
+$progress-height:                      1rem * $line-height-base;