cursor easter egg

postit/static/css/postit.css

@@ -93,6 +93,17 @@ a {
 	left: 0;
 }
 
+img.cursor {
+	position: absolute;
+	/* bottom: 0; */
+	top: 0;
+	transform: translate(10%,8%);
+	width: 20px;
+	height: 20px;
+	z-index: 1000;
+	object-fit: contain;
+}
+
 @media screen {
 	.post-it {
 		border: 1px solid #ddd;

postit/static/js/bleed.js

@@ -7,7 +7,7 @@ class BleedHandler extends Paged.Handler {
 		let img = pageFragment.querySelector("img");
 		let bar = pageFragment.querySelector('.progress-bar')
 			
-		if (img) {
+		if (img && !img.hasAttribute("data-nobleed")) {
 			moveImage(img);
 		} 
 

postit/templates/postit.html

@@ -154,6 +154,26 @@
 				></span>
 			</footer>
 
+			<!-- progress bar easter egg -->
+			{%elif content['cursor']%}
+
+				<p class="description {% if content['cursor']|length > 200 %} long-text {%endif%}">
+					{{content['cursor']}}
+				</p>
+				
+				<footer>
+					<h2 class="title">{{content['title']}}</h2>
+
+					{% if content['cursor']%}
+					<img class="cursor" src="{{url_for('static', filename='img/cursor.svg')}}" style="left: {{  100 / contents|length * loop.index}}%" data-nobleed />
+					{% endif%}
+
+					<span
+						class="progress-bar"
+						style="width: {{  100 / contents|length * loop.index}}%"
+					></span>
+				</footer>
+
 
 			<!-- standard text postit -->
 			{%else%}
@@ -173,6 +193,7 @@
 				<!-- 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}}%"