new style for the post-it

master
km0 2 years ago
parent 06a1f1ec41
commit a24e19c89e

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

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

Loading…
Cancel
Save