custom karaoke progress bar

postit/contents.json

@@ -1 +1 @@
-{"outro": [{"title": "Outro", "pic": "fagenotpound.png", "alt": "pzwiki.wdka.nl/mediadesign/Fage_Not_Pound"}]}
+{"karaoke": [{"title": "Can Gaming Make a Better World?", "pic": "can_gaming_make_a_better_world.jpg"}, {"title": "Can Gaming Make a Better World?", "pic": "karaoke.png", "alt": "hub.xpub.nl/soupboat/si17/\ud83c\udfa4/"}, {"title": "Can Gaming Make a Better World?", "description": "Let's get straight into it!"}, {"title": "Can Gaming Make a Better World?", "description": "PLACEHOLDER IMAGE?? (BONUS)"}, {"title": "Can Gaming Make a Better World?", "description": "I wake up early every day to be the best"}, {"title": "Can Gaming Make a Better World?", "description": "Don't close the mac cuz there's no need for me to rest"}, {"title": "Can Gaming Make a Better World?", "description": "My job is like a game\nthat's why I feel\nso blessed"}, {"title": "Can Gaming Make a Better World?", "description": "Oh, a, oh"}, {"title": "Can Gaming Make a Better World?", "description": "They took the fun out\nof my creativity\n(BUT)"}, {"title": "Can Gaming Make a Better World?", "description": "I'm responsible for\nmy stability \n(AND)"}, {"title": "Can Gaming Make a Better World?", "description": "My mentor said 'Self-motivation is the key!'"}, {"title": "Can Gaming Make a Better World?", "description": "20 points"}, {"title": "Can Gaming Make a Better World?", "description": "I did a good job!"}, {"title": "Can Gaming Make a Better World?", "description": "50 points"}, {"title": "Can Gaming Make a Better World?", "description": "I did a better job!"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming could make a promising world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming should make a fulfilling world"}, {"title": "Can Gaming Make a Better World?", "description": "Gamify your entire day"}, {"title": "Can Gaming Make a Better World?", "description": "Oh-a-a-a oh"}, {"title": "Can Gaming Make a Better World?", "description": "Waiting the host to let me enter the zoom call"}, {"title": "Can Gaming Make a Better World?", "description": "Checking my emails \nwhile I'm having\nhealthy lunch"}, {"title": "Can Gaming Make a Better World?", "description": "My job is like a game\nbut why I feel\nso stressed"}, {"title": "Can Gaming Make a Better World?", "description": "Oh-a oh-a"}, {"title": "Can Gaming Make a Better World?", "description": "Is this my leisure time?"}, {"title": "Can Gaming Make a Better World?", "description": "Oh-a oh-a"}, {"title": "Can Gaming Make a Better World?", "description": "Is this my working time?"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming could make a healthier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming should make a happier world"}, {"title": "Can Gaming Make a Better World?", "description": "Manage life through all your apps"}, {"title": "Can Gaming Make a Better World?", "description": "Get some rest and back to work"}, {"title": "Can Gaming Make a Better World?", "description": "Oh-a-aho oh x2"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming could make an easier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming should make a better world"}, {"title": "Can Gaming Make a Better World?", "description": "If you fail then don't complain"}, {"title": "Can Gaming Make a Better World?", "description": "Try your best and play the game"}, {"title": "Can Gaming Make a Better World?", "description": "Life is better when\nyou may"}, {"title": "Can Gaming Make a Better World?", "description": "gamify all the way"}, {"title": "Can Gaming Make a Better World?", "description": "Can't go on anymore x2"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a promising world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a healthier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a happier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make an easier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a better world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a fulfilling world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a healthier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a happier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make an easier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a better world"}]}

postit/static/css/contents.css

@@ -144,3 +144,24 @@
 .outro figcaption {
 	font-size: 14px;
 }
+
+.karaoke footer {
+	height: 27.6px;
+}
+
+.karaoke .title {
+	margin: 0;
+	width: auto;
+	position: absolute;
+	top: 50%;
+	left: 4mm;
+	transform: translate(0, -50%);
+	white-space: nowrap;
+	/* text-align: center; */
+	font-weight: bold;
+	color: var(--background);
+}
+
+.karaoke .fill {
+	color: var(--color);
+}

postit/templates/postit.html

@@ -162,13 +162,23 @@
 				{{content['description']}}
 			</p>
 
-			<footer>
-				<h2 class="title">{{content['title']}}</h2>
-				<span
-					class="progress-bar"
-					style="width: {{  100 / contents|length * loop.index}}%"
-				></span>
-			</footer>
+
+				<!-- Karaoke style progress bar -->
+				{% if contribution == 'karaoke' %}
+				<footer>
+					<h2 class="title">{{content['title']}}</h2>
+					<h2 class="title fill" style="clip-path: polygon(0 0, {{  100 / contents|length * loop.index}}% 0, {{  100 / contents|length * loop.index}}% 100%, 0% 100%)">{{content['title']}}</h2>
+				</footer>
+				{% else %}
+				<!-- Regular progress bar, using the length of each contribution to calculate the percentage -->
+				<footer>
+					<h2 class="title">{{content['title']}}</h2>
+					<span
+						class="progress-bar"
+						style="width: {{  100 / contents|length * loop.index}}%"
+					></span>
+				</footer>
+				{%endif%}
 			{%endif%}
 		</div>
 		{% endfor %}