From 253462978ba29461f9a370e19ddf37aa29a354a6 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 26 Sep 2018 14:31:10 +0100
Subject: [PATCH] Simplify colour scheme

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/scss/_icons.scss     | 16 ++++++----------
 src/scss/_variables.scss | 37 +++++++++++++------------------------
 src/scss/style.scss      | 32 ++++++++++++++++++--------------
 3 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/scss/_icons.scss b/src/scss/_icons.scss
index 1a420bb2..1b4550a4 100644
--- 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 fa74d8c4..7bc0841a 100644
--- 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 8843e85f..28da0823 100644
--- 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;
-- 
2.47.3