krnr/ulovliglogning.dk
1
0
Fork 0
forked from ulovliglogning/ulovliglogning.dk
Code Issues Pull requests Releases Wiki Activity

new goal: "one million!" - Dr. Evil

Browse source
This commit is contained in:
Jeppe Ernst 2018-07-07 14:59:13 +02:00
parent 8df67e6233
commit 788af8a5b0
4 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_config.yml
View file

@ -25,6 +25,7 @@ donationCounter:
goal1: 100000
goal2: 250000
goal3: 400000
goal4: 1000000
# multilanguage support
languages: ["da", "en"]

2
_layouts/indexpage.html
View file

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

28
_scss/module/_donationCounter.scss
View file

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

1
assets/style/main.scss
View file

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