edited changelog entry style attributes to be more responsive

This commit is contained in:
2026-02-03 22:49:04 +01:00
parent 4739326cb2
commit 12dd9c30dc
2 changed files with 41 additions and 6 deletions

View File

@@ -14,8 +14,13 @@
} = $props();
</script>
<div class="changelog-entry">
<span class="changelog-entry-timestamp">{entry.date}, {entry.time} ::</span>
<div class="changelog-entry">
<div class="changelog-entry-timestamp-container">
<span>{entry.date}</span>
<span class="changelog-entry-timestamp-comma">,&nbsp;</span>
<span>{entry.time}</span>
</div>
<span class="changelog-entry-timestamp-divider">::</span>
<p>
{entry.content}
{#if entry.link}
@@ -36,22 +41,47 @@
margin: 4px 0;
}
.changelog-entry-timestamp {
.changelog-entry p {
font-size: 1.0rem;
line-height: 1.3rem;
}
.changelog-entry-timestamp-container {
display: flex;
flex-direction: row;
}
.changelog-entry-timestamp-container *, .changelog-entry-timestamp-divider {
font-family: var(--font-mono);
font-size: 0.9rem;
font-size: 0.8rem;
line-height: 1.3rem;
font-weight: 500;
color: var(--color-highlight);
min-width: fit-content;
}
.changelog-entry-link {
font-family: var(--font-mono);
font-size: 1.3rem;
font-size: 1.2rem;
color: var(--color-highlight);
text-decoration: none;
line-height: 1rem;
line-height: 1.3rem;
}
.changelog-entry-link:hover {
font-weight: 700;
}
@media screen and (max-width: 550px) {
/* Align timestamp texts vertically */
.changelog-entry-timestamp-container {
flex-direction: column;
align-items: end;
}
/* Hide separating comma */
.changelog-entry-timestamp-comma {
display: none;
}
}
</style>