multistage donation counter

needs some clean up

_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
+  donated: 256315
-  goal: 250000
+  goal1: 100000
+  goal2: 250000
+  goal3: 400000
 
 # multilanguage support
 languages:          ["da", "en"]

_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  

_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

_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">
+			<div class="donationContainer">
-				<span>
+				<div class="total">
-				{{ site.donationCounter.donated | intcomma: '.' }}{{ global.donation.currency }} {{ global.donation.text }} {{ site.donationCounter.goal | intcomma: '.' }}{{ global.donation.currency }} 
+					{{ site.donationCounter.donated | intcomma: '.' }}{{ global.donation.currency }} {{ global.donation.text }}
 					<sub>{{ global.donation.sub }}</sub>
-				</span>
+				</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">

_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!
 ---

_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;
     }
 }

_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;

_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 {
+$goal1_width: $donationCounter_goal1 / $donationCounter_goal3 * 100;
-	width: 100%;
+$goal2_width: ($donationCounter_goal2 - $donationCounter_goal1) / $donationCounter_goal3 * 100;
-    height: 100px;
+$goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCounter_goal3 * 100;
-    font-size: 1.3rem;
+
-    background: linear-gradient(to right, #49a540 50%, #407b3b 50%);
+.donationContainer {
 	position: absolute;
-    background-size: 200%;
+    bottom: 0;
-    background-position: 100%;
+    left: 0;
-    bottom: 0px;
+    right: 0;
-    left: 0px;
+    height: 100px;
-    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 {
+	.donationContainer {
-		height: 80px;
+		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;
+			}
+		}
 	}
 }

_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,

_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, 

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";