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 7bc0841ad041e7ae9afeedb56701908db28394b6..fadbb1504bb5fda6bd4534224f39c9fbb6d6bcca 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -5,19 +5,19 @@ $black:                                               #000000;
 $white:                                                #ffffff;
 
 // Grays
-$gray-400:                                     #6a788b;
+$gray-400:                                     #ede8e8;
 $gray-800:                                     #31353c;
 
 $red:                                          #ee2e31;
 $yellow:                                       #e7e247;
-$cyan:                                         #32ffdc;
+$cyan:                                         #2ee8c8;
 
 // Lightning Wire Labs colour
 $lwl:                                          #4b0082;
 
 // Theme
 $primary:                                      $red;
-$secondary:                                    $gray-400;
+$secondary:                                    #757575;
 $light:                                                $gray-400;
 $dark:                                         $gray-800;
 
@@ -25,11 +25,8 @@ $theme-colors: (
        "lwl"                                   : $lwl,
 );
 
-$yiq-text-dark:                                $primary;
-$yiq-text-light:                       $secondary;
-
-$body-bg:                                      $blue-grey-50;
-$body-color:                           $blue-grey-900;
+$body-bg:                                      $dark;
+$body-color:                           $white;
 
 // Breakpoints
 $grid-breakpoints: (
@@ -42,8 +39,8 @@ $grid-breakpoints: (
 
 $grid-gutter-width:                    24px;
 
-$border-radius:                                2px;
-$border-radius-lg:                     2px;
+$border-radius:                                5px;
+$border-radius-lg:                     5px;
 
 // Fonts
 $font-family-sans-serif:       "Mukta", sans-serif;
@@ -53,15 +50,16 @@ $font-weight-normal:                400;
 $font-weight-bold:                     700;
 
 // Typo
-$font-size-base:                       1rem;
+$font-size-base:                       1.125rem;
 $lead-font-size:                       1.5rem;
 $small-font-size:                      87.5%;
 
+$line-height-base:                     1.5;
+
 // Headings
 $headings-font-weight:         500;
-$headings-line-height:         1.5;
-$headings-margin-bottom:       1.5rem;
-$headings-color:                       $white;
+$headings-line-height:         1.15;
+$headings-margin-bottom:       1.25rem;
 
 $h1-font-size:                         3rem;
 $h2-font-size:                         2.5rem;
@@ -70,23 +68,25 @@ $h4-font-size:                              2rem;
 $h5-font-size:                         1.5rem;
 $h6-font-size:                         1.25rem;
 
-$display1-size:                                7.5rem;
+$display1-size:                                4rem;
 
 // Links
 $link-color:                           $primary;
 
 // Navbar
-$navbar-brand-font-size:       36px;
-$navbar-brand-height:          32px;
+$navbar-brand-font-size:       3rem;
+$navbar-brand-height:          5rem;
+$navbar-brand-padding-y:       1rem;
+$navbar-height:                                $navbar-brand-height + ($navbar-brand-padding-y * 2);
 
-$nav-link-height:                      24px;
-$navbar-nav-link-padding-x:    16px;
-
-$navbar-padding-y:                     1.1rem;
+$navbar-nav-link-padding-x:    1rem;
 
 // Input
-$input-btn-padding-x:          1rem;
+$input-btn-padding-x:          1.5rem;
 $input-btn-padding-y:          .5rem;
 
 // Buttons
-$btn-border-width:                     2px;
+$btn-border-width:                     3px;
+
+// Progress
+$progress-height:                      1rem * $line-height-base;