multistage donation counter

needs some clean up
This commit is contained in:
Jeppe Ernst 2018-04-30 15:03:08 +02:00
parent bda04128a9
commit 50577a2247
11 changed files with 193 additions and 42 deletions

View file

@ -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"]

View file

@ -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

View file

@ -13,6 +13,6 @@ global:
da: Danish
en: English
donation:
text: donated of
text: donated in total
currency: " DKK"
sub: Donations are updated manually

View file

@ -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 }}
<div class="donationContainer">
<div class="total">
{{ 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">

View file

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

View file

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

View file

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

View file

@ -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%;
height: 100px;
font-size: 1.3rem;
background: linear-gradient(to right, #49a540 50%, #407b3b 50%);
$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;
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;
}
bottom: 0;
left: 0;
right: 0;
height: 100px;
&: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;
}
}
}
}

View file

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

View file

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

View file

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