change to timeline list

This commit is contained in:
qilinz 2023-07-15 19:51:42 +02:00 committed by Henri Dickson
parent 5d9320905e
commit 1ce267f006
2 changed files with 31 additions and 15 deletions

View file

@ -172,13 +172,8 @@
<ul class="log-list">
{% for log in mark.logs %}
<li>
<span class="action">
<span>
<a target="_blank" rel="noopener"></a>
</span>
<span class="timestamp">{{ log.timestamp|date }}</span>
</span>
<p>{{ log.action_label }}</p>
<span class="log-info">{{ log.timestamp|date }}</span>
<span class="log-info">{{ log.action_label }}</span>
</li>
{% endfor %}
</ul>

View file

@ -11,18 +11,39 @@
}
}
// make log list like a timeline list
// source: https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem
ul.log-list {
padding-left: 20px;
li {
list-style-type: disc;
.log-info {
margin-right: 0.5rem;
}
}
list-style: disc;
// You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on the page
position: relative;
// Use padding to space things out rather than margins as the line would get broken up otherwise
margin: 0;
padding-bottom: 0.5em;
padding-left: 0.8em;
}
// The actual line being placed before each list item, tweak width and color as appropriate
li:before {
background-color: var(--pico-color);
width: 2px;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -0.75em;
}
// Start the line further down on the first list item
li:first-child:before { top: 15px; }
// Stop the line short on the final list item
li:last-child:before { height: 15px; }
}
footer.log-command {
display: flex;