new style for the post-it

postit/static/css/postit.css

@@ -3,9 +3,15 @@
 	margin: 5mm;
 }
 
+:root {
+	--background: rgba(143, 0, 255, 0.2);
+	--color: #8f00ff;
+}
+
 html,
 body {
 	margin: 0;
+	color: var(--color);
 }
 
 * {
@@ -28,6 +34,17 @@ body {
 	line-height: 1.4;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	display: inline-flex;
+	justify-content: end;
+	flex-direction: column;
+}
+
+footer {
+	width: 100%;
+	position: relative;
+	/* position: absolute; */
+	/* bottom: 0; */
+	border-top: 1px solid var(--background);
 }
 
 img {
@@ -41,9 +58,9 @@ img {
 }
 
 .title {
-	position: absolute;
-	bottom: 0;
-	margin: 4mm;
+	/* position: absolute; */
+	/* bottom: 0; */
+	margin: 0.25em 4mm;
 	font-weight: normal;
 	text-transform: uppercase;
 	font-size: 14px;
@@ -55,7 +72,8 @@ img {
 	font-size: 28px;
 	line-height: 1.2;
 	white-space: pre-line;
-	margin-top: calc(4mm - 1em);
+	/* margin-top: calc(4mm - 1em); */
+	vertical-align: bottom;
 }
 
 figcaption {
@@ -82,6 +100,15 @@ a {
 .page-number {
 	position: absolute;
 	right: 4mm;
-	bottom: 4mm;
+	bottom: 0.25em;
 	font-size: 14px;
 }
+
+.progress-bar {
+	height: 100%;
+	background-color: var(--background);
+	z-index: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+}

postit/templates/postit-single.html

@@ -49,13 +49,20 @@
 				<div class="category">{{content['start']}} {{content['category']}}</div>
 
 				{%else%}
-				<h2 class="title">{{content['title']}}</h2>
-				<div class="page-number">{{loop.index}}/{{contents|length}}</div>
+
 				<p
 					class="description {% if content['description']|length > 200 %} long-text {%endif%}"
 				>
 					{{content['description']}}
 				</p>
+
+				<footer>
+					<h2 class="title">{{content['title']}}</h2>
+					<span
+						class="progress-bar"
+						style="width: {{  100 / contents|length * loop.index}}%"
+					></span>
+				</footer>
 				{%endif%}
 			</div>
 			{% endfor %}