new cover for karaoke (with progress bar)

postit/static/contents

@@ -1 +1 @@
-Subproject commit 08d68b497fb2fa47d7d9f74c86600a0b01b7566b
+Subproject commit df22d340f6cc22de9e13ec24c52a1911f09d137e

postit/static/css/contents.css

@@ -150,6 +150,7 @@
 }
 
 .karaoke .title {
+	/* text-transform: lowercase; */
 	margin: 0;
 	width: auto;
 	position: absolute;
@@ -158,7 +159,7 @@
 	transform: translate(0, -50%);
 	white-space: nowrap;
 	/* text-align: center; */
-	font-weight: bold;
+	/* font-weight: bold; */
 	color: var(--background);
 }
 

postit/static/css/postit.css

@@ -34,7 +34,7 @@ img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
-	z-index: 50;
+	/* z-index: 50; */
 }
 
 .title {

postit/templates/postit.html

@@ -42,6 +42,17 @@
 			{% if content["alt"] %}
 			<figcaption>{{content['alt']}}</figcaption>
 			{% endif %} 
+
+
+			{% if contribution == 'karaoke' and loop.index == 1 %}
+				<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>
+			{%endif%}
+
+
+
 			
 			<!-- post-it with img attribute it's a image that doesn't follow the color scheme -->
 			{%elif content['img'] %} 
@@ -154,7 +165,7 @@
 				></span>
 			</footer>
 
-			<!-- progress bar easter egg -->
+			<!-- progress bar with cursor easter egg -->
 			{%elif content['cursor']%}
 
 				<p class="description {% if content['cursor']|length > 200 %} long-text {%endif%}">