From 50577a22477d488c30b6c82c26aeab9aed65d799 Mon Sep 17 00:00:00 2001
From: Jeppe Ernst <impala.lowrider@gmail.com>
Date: Mon, 30 Apr 2018 15:03:08 +0200
Subject: [PATCH] multistage donation counter

needs some clean up
---
 _config.yml                        |   6 +-
 _data/da/common.yml                |   2 +-
 _data/en/common.yml                |   2 +-
 _layouts/indexpage.html            |  13 ++-
 _pages/index-da.md                 |  14 ++-
 _scss/base/_typography.scss        |  23 +++-
 _scss/base/_variables.scss         |   3 +
 _scss/module/_donationCounter.scss | 163 ++++++++++++++++++++++++-----
 _scss/module/_indexpage.scss       |   3 +-
 _scss/module/_sections.scss        |   2 +-
 assets/style/main.scss             |   4 +-
 11 files changed, 193 insertions(+), 42 deletions(-)

diff --git a/_config.yml b/_config.yml
index b26b2d6..6b1bc59 100644
--- a/_config.yml
+++ b/_config.yml
@@ -21,8 +21,10 @@ description: >- # this means to ignore newlines until "baseurl:"
 baseurl:            "" # the subpath of your site, e.g. /blog
 url:                "https://ulovliglogning.dk" # the base hostname & protocol for your site, e.g. http://example.com
 donationCounter:
-  donated: 249315
-  goal: 250000
+  donated: 256315
+  goal1: 100000
+  goal2: 250000
+  goal3: 400000
 
 # multilanguage support
 languages:          ["da", "en"]
diff --git a/_data/da/common.yml b/_data/da/common.yml
index 21d3091..4b3e8ea 100644
--- a/_data/da/common.yml
+++ b/_data/da/common.yml
@@ -13,7 +13,7 @@ global:
     da: Dansk
     en: Engelsk
   donation:
-    text: doneret af
+    text: doneret i alt
     currency: ",-"
     sub: Donationer opdateres pt. manuelt
   mobilepayLink: https://mobilepay.dk/da-dk/pages/betal.aspx?phone=004540456&comment=Til%20kampen%20imod%20den%20Ulovlige%20Logning!&t=d  
\ No newline at end of file
diff --git a/_data/en/common.yml b/_data/en/common.yml
index 3aa5c11..a500e69 100644
--- a/_data/en/common.yml
+++ b/_data/en/common.yml
@@ -13,6 +13,6 @@ global:
     da: Danish
     en: English
   donation:
-    text: donated of
+    text: donated in total
     currency: " DKK"
     sub: Donations are updated manually
\ No newline at end of file
diff --git a/_layouts/indexpage.html b/_layouts/indexpage.html
index a9ddda6..ee20aa9 100644
--- a/_layouts/indexpage.html
+++ b/_layouts/indexpage.html
@@ -5,11 +5,14 @@ layout: default
 {% for section in page.sections %}
 	<section id="{{ section.id }}" class="{% cycle 'odd', 'even' %}">
 		{% if forloop.first %}
-			<div class="donationCounter">
-				<span>
-				{{ site.donationCounter.donated | intcomma: '.' }}{{ global.donation.currency }} {{ global.donation.text }} {{ site.donationCounter.goal | intcomma: '.' }}{{ global.donation.currency }} 
-				<sub>{{ global.donation.sub }}</sub>
-				</span>
+			<div class="donationContainer">
+				<div class="total">
+					{{ site.donationCounter.donated | intcomma: '.' }}{{ global.donation.currency }} {{ global.donation.text }}
+					<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>								
 			</div>
 			 <nav id="navElm">
 			 	<div class="langSwitcher left">
diff --git a/_pages/index-da.md b/_pages/index-da.md
index f29d76d..fd8bdc7 100644
--- a/_pages/index-da.md
+++ b/_pages/index-da.md
@@ -4,7 +4,13 @@ lang: da
 permalink: /
 sections:
   - id: intro
-    heading: Lad os stoppe overvågningen!
+    heading: TAK! TUSIND TAK!
+    content: |
+      Vi har nået vores andet delmål på 250.000,- 🎉 Nu har vi råd til at stævne Justistsministeren! Det sker den 9. maj kl 12. Desværre kender vi ikke sagens fulde omkostninger endnu, vi sætter derfor et nyt delmål på 400.000,- [læs mere om delmål](#delmaal).  
+      mvh. [Rasmus](https://twitter.com/RasmusMalver), [Denis](https://twitter.com/dsdeniso), [Peter](https://twitter.com/peterkofod), [Jeppe](https://twitter.com/ern_st) & [Christoffer](https://twitter.com/netravnen)
+  - id: ny
+    link: Hvorfor?
+    heading: ny sektion?
     content: |
       Den europæiske totalovervågning af dine internetvaner og bevægemønstre er ved flere lejligheder kendt ulovlig. Det bryder de danske politikere sig ikke om, så mens andre lande er stoppet, har de bedt telebranchen fortsætte ulovlighederne. Branchen er splittet. De fire store, [TDC](https://www.version2.dk/artikel/tdc-totalovervaager-tre-millioner-mobilbrugeres-faerden-1020856), [3](https://www.version2.dk/artikel/teleselskabet-3-logger-million-kunders-faerden-konstant-1072068), [Telenor](https://www.version2.dk/artikel/telenor-stopper-logning-svenske-kunders-trafik-fortsaetter-hidtil-danmark-1071306) og [Telia](https://www.version2.dk/artikel/forskel-paa-databeskyttelsen-hos-danske-teleoperatoerer-58142) logger stadig. Også [mere end de må](https://www.version2.dk/artikel/3-skal-bede-kunderne-lov-masseovervaagning-standard-hos-tdc-1077873).
 
@@ -120,4 +126,10 @@ sections:
         Folketinget kan også stille Søren Pape foran en dommer, iht. [Grundlovens § 13](https://www.retsinformation.dk/Forms/R0710.aspx?id=45902#P13). Men kun en dommer i Rigsretten, iht. [Grundlovens § 16](https://www.retsinformation.dk/Forms/R0710.aspx?id=45902#P16). Og det skal ske i [Udvalget for Forretningsordenen](https://www.retsinformation.dk/Forms/R0710.aspx?id=186146#idf4f8c639-b3b8-4850-a0e5-18273ab31d25), hvor alle partier er repræsenteret. Men ingen har foreslået det. En folketingsbeslutning vil hverken gøre til eller fra. Den vil bare blive makuleret, fordi det ikke er sådan man stiller ministre til ansvar.
 
         Vi har kontakt til alle Folketingets partier, og vi gør hvad vi kan for at holde offentlighedens fokus. Underskriftindsamlinger og borgerforslag er en velment kæp i hjulet. Hvis du har lyst til at hjælpe os, kan du skrive til folketingets partier, medierne, dine venner og din familie. Hver dag bliver der opsamlet data på ulovlig vis, og det sætter uskyldige bag tremmer [eller værre](https://www.youtube.com/watch?v=UdQiz0Vavmc).
+    - heading: Økonomi & Delmål
+      id: delmaal
+      content: |
+        Da vi nåede vores første delmål, 100.000 kr, skrev vores advokater en udførlig stævning. Med pengene fra det næste delmål, 250.000 kr, har vi nu råd til at stævne justitsminister Søren Pape. Det kommer til at ske onsdag d. 9. maj kl. 12.
+
+        Vi ved ikke hvor meget det vil ende med at koste, så vores næste mål er 400.000 kr. Selvom det lyder af meget, er det kun en brøkdel af hvad staten vil bruge. Det er dyrt at sikre vores rettigheder, og vi har tænkt os at gå hele vejen!
 ---
diff --git a/_scss/base/_typography.scss b/_scss/base/_typography.scss
index c3f21f5..debe6c4 100644
--- a/_scss/base/_typography.scss
+++ b/_scss/base/_typography.scss
@@ -51,13 +51,34 @@ p {
 		font-size: 1rem;
 		line-height: 1.4rem;
 	}
+
+	&.box {
+		padding: 7px;
+	    margin: -7px -7px 2rem;
+	    background: $alternate-bg;
+	    color: #333;
+	    border-radius: 5px;
+
+	    a {
+	    	box-shadow: 0 2px 0 #FFF;
+	    }
+
+	    &.green {
+	    	background: $donationCounter_dark;
+	    	color: white;
+	    }
+	}
+}
+
+strong {
+	font-weight: 700;
 }
 
 a {
 	color: #FFF;
 	text-decoration: none;
 	box-shadow: 0 2px 0 #ff5800;
-    .even & {
+    .odd & {
     	box-shadow: 0 2px 0 #FFF;
     }
 }
\ No newline at end of file
diff --git a/_scss/base/_variables.scss b/_scss/base/_variables.scss
index 422a683..bcb78d0 100644
--- a/_scss/base/_variables.scss
+++ b/_scss/base/_variables.scss
@@ -9,6 +9,9 @@ $background-primary: $color-mine-shaft;
 $background-alternative: $color-international-orange;
 $background-alternative-dark: darken($background-alternative, 20);
 
+$donationCounter_light: #49a540;
+$donationCounter_dark: #407b3b;
+
 /* Size */
 $screen-xs: 600px !default;
 $screen-xs-min: $screen-xs !default;
diff --git a/_scss/module/_donationCounter.scss b/_scss/module/_donationCounter.scss
index 4034bcd..4c4b046 100644
--- a/_scss/module/_donationCounter.scss
+++ b/_scss/module/_donationCounter.scss
@@ -1,27 +1,17 @@
-$donationCounter_percentFromGoal: 100 - ($donationCounter_donated / $donationCounter_goal * 100);
+$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 {
-	width: 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;
+    bottom: 0;
+    left: 0;
+    right: 0;
     height: 100px;
-    font-size: 1.3rem;
-    background: linear-gradient(to right, #49a540 50%, #407b3b 50%);
-    position: absolute;
-    background-size: 200%;
-    background-position: 100%;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-    animation: donationCounterSlideIn .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) .5s forwards;
-
-    sub {
-    	display: block;
-	    font-size: .8rem;
-	    opacity: .5;
-    }
 
     &:before, &:after {
     	content: "";
@@ -29,18 +19,118 @@ $donationCounter_percentFromGoal: 100 - ($donationCounter_donated / $donationCou
 	    width: 100%;
 	    display: block;
 	    position: absolute;
+    	z-index: 1;
     }
 
     &:before {
-	    background: linear-gradient(to left bottom, #2A2A2A 49%, transparent 50%);
+	    background: linear-gradient(to left bottom, $alternate-bg 49%, transparent 50%);
 	    top: 0px;
 	}
 
 	&:after {
-	    background: linear-gradient(to left bottom, transparent 49%, #ff5802 50%);
+	    background: linear-gradient(to left bottom, transparent 49%, $body-bg 50%);
 	    bottom: 0;
 	}
 
+	.total {
+		display: block;
+		position: absolute;
+		left: 50%;
+		top: -35px;
+		transform: translate3d(-50%,0,0);
+		font-size: 1.5rem;
+		text-align: center;
+
+		sub {
+			display: block;
+			font-size: .7rem;
+			opacity: .5;
+		}
+	}
+
+	.overlay {
+		display: inline-block;
+		height: 100%;
+		border-right: 2px solid rgba(0,0,0,.3);
+		line-height: 100px;
+
+		&:last-child {
+			border-right: none;
+		}
+
+		&.goal1 {
+			width: $goal1_width + unquote("%");
+			line-height: 100 - ($goal1_width/2) + unquote("px");
+			@if $donationCounter_donated > $donationCounter_goal1 {
+				animation: donationCounterCelebrate 5s linear 1s forwards;
+			}
+		}
+
+		&.goal2 {
+			width: $goal2_width + unquote("%");
+			@if $donationCounter_donated > $donationCounter_goal2 {
+				animation: donationCounterCelebrate 5s linear 1.5s forwards;
+			}
+		}
+
+		&.goal3 {
+			width: $goal3_width + unquote("%");
+			line-height: 100 + ($goal3_width/2) + unquote("px");
+			@if $donationCounter_donated > $donationCounter_goal3 {
+				animation: donationCounterCelebrate 5s linear 2s forwards;
+			}
+		}
+	}
+}
+
+.donationCounter {
+	width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-size: 1.3rem;
+    background: linear-gradient(to right, $donationCounter_light 50%, $donationCounter_dark 50%);
+    background-size: 200%;
+    background-position: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    text-align: center;
+    animation: donationCounterSlideIn .5s linear .5s forwards;
+
+    sub {
+    	display: block;
+	    font-size: .8rem;
+	    opacity: .5;
+    }
+
+}
+
+@keyframes donationCounterCelebrate {
+    0% {
+        background: $donationCounter_light;
+        //ransform: scale(1);
+    }
+
+    20% {
+        background: #efcc3d;
+    }
+
+    40% {
+        background: #5670de;
+        //transform: scale(1.4);
+    }
+
+    60% {
+        background: #de41b2;
+    }
+
+    80% {
+        background: #49ca61;
+    }
+
+    100% {
+        background: $donationCounter_light;
+    }
 }
 
 @keyframes donationCounterSlideIn {
@@ -49,18 +139,35 @@ $donationCounter_percentFromGoal: 100 - ($donationCounter_donated / $donationCou
 	}
 
 	to {
-		background-position: $donationCounter_percentFromGoal + unquote("%");
+		background-position: $donationCounter_percentFromGoal3 + unquote("%");
 	}
 }
 
 @include media-breakpoint-down(sm) {
 	#intro {
-		padding-bottom: 6rem;
+		padding-bottom: 8rem;
 	}
-	.donationCounter {
-		height: 80px;
+	.donationContainer {
+		position: fixed;
+		height: 40px;
 		&:before, &:after {
 			display: none;
 		}
+
+		.total {
+			left:0;
+			transform: none;
+			text-align: center;
+			width: 100%;
+			background: rgba($alternate-bg, .8);
+			padding: 5px;
+    		margin: -10px;
+		}
+
+		.overlay {
+			&.goal1, &.goal2, &.goal3 {
+				line-height: 40px;
+			}
+		}
 	}
 }
\ No newline at end of file
diff --git a/_scss/module/_indexpage.scss b/_scss/module/_indexpage.scss
index d2a836c..4718edd 100644
--- a/_scss/module/_indexpage.scss
+++ b/_scss/module/_indexpage.scss
@@ -5,6 +5,7 @@
 @media screen and (min-width: 1200px) and (orientation:landscape) {
     #intro {
         position: relative;
+        padding-bottom: 8rem;
     }
     .cta {
         display: inline;
@@ -58,7 +59,7 @@ nav {
     label:after {
         display: inline-block;
         padding: 10px;
-        box-shadow: none;
+        box-shadow: none !important;
         font-weight: normal;
     }
     .left,
diff --git a/_scss/module/_sections.scss b/_scss/module/_sections.scss
index 01e6e97..c39a49d 100644
--- a/_scss/module/_sections.scss
+++ b/_scss/module/_sections.scss
@@ -19,7 +19,7 @@ section {
       $background-primary 49%, 
       $background-alternative 50%
   );
-	&:nth-of-type(even) {
+	&:nth-of-type(odd) {
 		background-color: $background-alternative;
 		background-image: linear-gradient(
 			to left bottom, 
diff --git a/assets/style/main.scss b/assets/style/main.scss
index 5af1408..d7ffcfe 100644
--- a/assets/style/main.scss
+++ b/assets/style/main.scss
@@ -2,7 +2,9 @@
 ---
 //import Jekyll variables
 $donationCounter_donated: {{ site.donationCounter.donated }};
-$donationCounter_goal: {{ site.donationCounter.goal }};
+$donationCounter_goal1: {{ site.donationCounter.goal1 }};
+$donationCounter_goal2: {{ site.donationCounter.goal2 }};
+$donationCounter_goal3: {{ site.donationCounter.goal3 }};
 
 // Import base styles
 @import "base/reset.scss";