Simplify colour scheme

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/_icons.scss b/src/scss/_icons.scss
index 1a420bb2a9e9f620c1c1d052ec401af015208b90..1b4550a460bf29d61eac248a9c6eacb7d1ce426e 100644 (file)
--- a/src/scss/_icons.scss
+++ b/src/scss/_icons.scss
@@ -27,7 +27,7 @@
        height: 2.5rem;
        margin: 0;
        transform: translateY(-.35rem);
-       fill: $red_900;
+       fill: $red;
 }
 
 .i_white {
@@ -54,27 +54,23 @@
 }
 
 .i_verified {
-       fill: $green-600;
+       fill: $green;
 }
 
 .i_warning {
-       fill: $red_900;
+       fill: $red;
 }
 
 .i_wifi {
-       fill: $blue-700;
-}
-
-.i_server {
-       fill: $amber-800;
+       fill: $blue;
 }
 
 .i_secure {
-       fill: $blue_grey_300;
+       fill: $black;
 }
 
 .i_arrow_down_2 {
        fill: white;
        opacity: .75;
        transform: translateY(3px);
-}
\ No newline at end of file
+}

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index fa74d8c4a9ef89e4679ad15f22f52c06a8c68583..7bc0841ad041e7ae9afeedb56701908db28394b6 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,36 +1,25 @@
 /*
        Colours
 */
-$red-900:                              #b71c1c;
-$red-600:                              #e53935;
+$black:                                                #000000;
+$white:                                                #ffffff;
 
-$amber-800:                            #ff8f00;
-$yellow-700:                           #fbc02d;
+// Grays
+$gray-400:                                     #6a788b;
+$gray-800:                                     #31353c;
 
-$blue-700:                                     #1976d2;
-$blue-400:                                     #42a5f5;
-
-$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;
-
-$orange-a400:                          #ff3d00;
-
-$cyan:                                         #00bcd4;
+$red:                                          #ee2e31;
+$yellow:                                       #e7e247;
+$cyan:                                         #32ffdc;
 
 // Lightning Wire Labs colour
 $lwl:                                          #4b0082;
 
 // Theme
-$primary:                                      $red-900;
-$secondary:                                    white;
-$light:                                                $blue-grey-50;
-$dark:                                         $blue-grey-900;
+$primary:                                      $red;
+$secondary:                                    $gray-400;
+$light:                                                $gray-400;
+$dark:                                         $gray-800;
 
 $theme-colors: (
        "lwl"                                   : $lwl,
@@ -72,7 +61,7 @@ $small-font-size:                     87.5%;
 $headings-font-weight:         500;
 $headings-line-height:         1.5;
 $headings-margin-bottom:       1.5rem;
-$headings-color:                       $blue-grey-900;
+$headings-color:                       $white;
 
 $h1-font-size:                         3rem;
 $h2-font-size:                         2.5rem;

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 8843e85fed6624a75e99940957bf418fcb8c7580..28da08232d749170335e663490d02a63de93b99a 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -76,9 +76,13 @@ h6 {
        line-height: 1.75rem;
 }
 
+.card {
+       color: $dark;
+}
+
 .nav {
        .nav-link {
-               color: $blue-grey-900;
+               color: $white;
 
                &.active {
                        color: $link-color;
@@ -96,7 +100,7 @@ h6 {
 
        .navbar-nav {
                .nav-link {
-                       color: $blue-grey-900;
+                       color: $white;
 
                        &.active {
                                border-bottom: 2px solid $link-color;
@@ -109,7 +113,7 @@ footer {
        .btn-toolbar .icon {
                height: 2.25rem;
                width: 2.25rem;
-               fill: rgba($blue-grey-900, .6);
+               fill: rgba($gray-400, .6);
        }
        .i_heart {
                vertical-align: top;
@@ -187,7 +191,7 @@ footer {
                        }
 
                        h5 {
-                               color: $blue-grey-600;
+                               color: $white;
 
                                @include media-breakpoint-down(xs) {
                                        font-size: 14px;
@@ -198,15 +202,15 @@ footer {
        }
 
        section#news, section#support, footer {
-               background-color: rgba($blue-grey-900, .06);
+               background-color: rgba($gray-800, .06);
        }
 
        section#news {
-               color: rgba($blue-grey-900, .6);
+               color: rgba($gray-800, .6);
        }
 
        section#fireinfo {
-               border-bottom: 1px solid rgba($blue-grey-900, .2);
+               border-bottom: 1px solid rgba($gray-800, .2);
        }
 
        section#appliances {
@@ -302,7 +306,7 @@ footer {
        .btn {
                width: 36px;
                height: 36px;
-               fill: $red_900;
+               fill: $red;
                @include media-breakpoint-up(sm) {
                        width: 64px;
                        height: 64px;
@@ -327,7 +331,7 @@ footer {
 .circle {
        position: relative;
        p.fireinfo_per {
-               color: $blue-grey-600;
+               color: $gray-800;
                position: absolute;
                top: calc(50% - 18px);
                width: 100%;
@@ -356,7 +360,7 @@ footer {
        width: 128px;
        height: 4px;
        border-radius: 2px;
-       background-image: linear-gradient(to right, $red-900, $orange-a400);
+       background-image: linear-gradient(to right, $red, $gray-400);
        margin: 40px auto 24px auto;
        @include media-breakpoint-up(sm) {
                margin: 56px auto 40px auto;
@@ -370,7 +374,7 @@ footer {
        }
        h4 {
                margin-bottom: 1.25rem;
-               color: rgba($blue-grey-900, .6);
+               color: rgba($gray-400, .6);
                font-size: 20px;
                line-height: 28px;
        }
@@ -379,10 +383,10 @@ footer {
                        font-size: 14px;
                        margin-bottom: .75rem;
                        a {
-                               color: rgba($blue-grey-900, .6);
+                               color: rgba($gray-400, .6);
                                text-decoration: none;
                                &:hover {
-                                       color: $blue-grey-900;
+                                       color: $gray-400;
                                        text-decoration: underline;
                                }
                        }
@@ -393,7 +397,7 @@ footer {
        }
 
        .copyright {
-               background-color: rgba($blue-grey-900, .06);
+               background-color: rgba($gray-400, .06);
                padding: $spacer 0;
 
                font-size: $small-font-size;