From 788af8a5b02786b7f7d9d4b6ea3f3f448758eb6f Mon Sep 17 00:00:00 2001
From: Jeppe Ernst <impala.lowrider@gmail.com>
Date: Sat, 7 Jul 2018 14:59:13 +0200
Subject: [PATCH] new goal: "one million!" - Dr. Evil

---
 _config.yml                        |  1 +
 _layouts/indexpage.html            |  2 +-
 _scss/module/_donationCounter.scss | 28 +++++++++++++++++++++-------
 assets/style/main.scss             |  1 +
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/_config.yml b/_config.yml
index f52a36f..bb91078 100644
--- a/_config.yml
+++ b/_config.yml
@@ -25,6 +25,7 @@ donationCounter:
   goal1: 100000
   goal2: 250000
   goal3: 400000
+  goal4: 1000000
 
 # multilanguage support
 languages:          ["da", "en"]
diff --git a/_layouts/indexpage.html b/_layouts/indexpage.html
index eb20968..96e9a9d 100644
--- a/_layouts/indexpage.html
+++ b/_layouts/indexpage.html
@@ -11,7 +11,7 @@ layout: default
 					<sub>{{ global.donation.sub }}</sub>
 				</div>
 				<div class="donationCounter goal">
-					<div class="overlay goal1">{{ site.donationCounter.goal1 | slice: 0,3 }}K</div><div class="overlay goal2">{{ site.donationCounter.goal2 | slice: 0,3 }}K</div><div class="overlay goal3">{{ site.donationCounter.goal3 | slice: 0,3 }}K</div>
+					<div class="overlay goal1">{{ site.donationCounter.goal1 | slice: 0,3 }}K</div><div class="overlay goal2">{{ site.donationCounter.goal2 | slice: 0,3 }}K</div><div class="overlay goal3">{{ site.donationCounter.goal3 | slice: 0,3 }}K</div><div class="overlay goal4">{{ site.donationCounter.goal4 | slice: 0,1 }} Million</div>
 				</div>								
 			</div>
 			 <nav id="navElm">
diff --git a/_scss/module/_donationCounter.scss b/_scss/module/_donationCounter.scss
index e8e99e6..60c502f 100644
--- a/_scss/module/_donationCounter.scss
+++ b/_scss/module/_donationCounter.scss
@@ -1,10 +1,14 @@
 $donationCounter_percentFromGoal1: 100 - ($donationCounter_donated / $donationCounter_goal1 * 100);
 $donationCounter_percentFromGoal2: 100 - ($donationCounter_donated / $donationCounter_goal2 * 100);
 $donationCounter_percentFromGoal3: 100 - ($donationCounter_donated / $donationCounter_goal3 * 100);
+$donationCounter_percentFromGoal4: 100 - ($donationCounter_donated / $donationCounter_goal4 * 100);
+
+
+$goal1_width: $donationCounter_goal1 / $donationCounter_goal4 * 100;
+$goal2_width: ($donationCounter_goal2 - $donationCounter_goal1) / $donationCounter_goal4 * 100;
+$goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCounter_goal4 * 100;
+$goal4_width: ($donationCounter_goal4 - $donationCounter_goal3) / $donationCounter_goal4 * 100;
 
-$goal1_width: $donationCounter_goal1 / $donationCounter_goal3 * 100;
-$goal2_width: ($donationCounter_goal2 - $donationCounter_goal1) / $donationCounter_goal3 * 100;
-$goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCounter_goal3 * 100;
 
 .donationContainer {
 	position: absolute;
@@ -60,7 +64,7 @@ $goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCount
 
 		&.goal1 {
 			width: $goal1_width + unquote("%");
-			line-height: 100 - ($goal1_width/2) + unquote("px");
+			line-height: 74px;
 			@if $donationCounter_donated > $donationCounter_goal1 {
 				animation: donationCounterCelebrate 5s linear 1s forwards;
 			}
@@ -68,6 +72,7 @@ $goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCount
 
 		&.goal2 {
 			width: $goal2_width + unquote("%");
+			line-height: 84px;
 			@if $donationCounter_donated > $donationCounter_goal2 {
 				animation: donationCounterCelebrate 5s linear 1.5s forwards;
 			}
@@ -75,11 +80,19 @@ $goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCount
 
 		&.goal3 {
 			width: $goal3_width + unquote("%");
-			line-height: 100 + ($goal3_width/2) + unquote("px");
+			line-height: 95px;
 			@if $donationCounter_donated > $donationCounter_goal3 {
 				animation: donationCounterCelebrate 5s linear 2s forwards;
 			}
 		}
+
+		&.goal4 {
+			width: $goal4_width + unquote("%");
+			line-height: 116px;
+			@if $donationCounter_donated > $donationCounter_goal4 {
+				animation: donationCounterCelebrate 5s linear 2s forwards;
+			}
+		}
 	}
 }
 
@@ -139,7 +152,7 @@ $goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCount
 	}
 
 	to {
-		background-position: $donationCounter_percentFromGoal3 + unquote("%");
+		background-position: $donationCounter_percentFromGoal4 + unquote("%");
 	}
 }
 
@@ -159,7 +172,7 @@ $goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCount
 			transform: none;
 			text-align: center;
 			width: 100%;
-			background: rgba($alternate-bg, .8);
+			background: rgba($body-bg, .8);
 			padding: 5px;
     		margin: -10px;
 		}
@@ -167,6 +180,7 @@ $goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCount
 		.overlay {
 			&.goal1, &.goal2, &.goal3 {
 				line-height: 40px;
+				font-size: .9rem;
 			}
 		}
 	}
diff --git a/assets/style/main.scss b/assets/style/main.scss
index d7ffcfe..a495efc 100644
--- a/assets/style/main.scss
+++ b/assets/style/main.scss
@@ -5,6 +5,7 @@ $donationCounter_donated: {{ site.donationCounter.donated }};
 $donationCounter_goal1: {{ site.donationCounter.goal1 }};
 $donationCounter_goal2: {{ site.donationCounter.goal2 }};
 $donationCounter_goal3: {{ site.donationCounter.goal3 }};
+$donationCounter_goal4: {{ site.donationCounter.goal4 }};
 
 // Import base styles
 @import "base/reset.scss";