Visually separate page links

This commit is contained in:
pancakes 2024-06-18 15:56:26 +10:00
parent f20550929a
commit a104db5120

View file

@ -60,31 +60,33 @@
</p>
</div>
<dl>
<ol class="page-links">
{#each pages as page}
<h3>
<a href={"/" + page.slug + "/"}>
{page.title}
</a>
</h3>
<p>{page.description}</p>
{#if page.published}
<p>
<small>
Published:
<DateTime datetime={page.published} />
{#if page.edited}
&bull; Last edited:
<DateTime
datetime={page.edited}
display="dateTime"
/>
{/if}
</small>
</p>
{/if}
<li>
<h3>
<a href={"/" + page.slug + "/"}>
{page.title}
</a>
</h3>
<p>{page.description}</p>
{#if page.published}
<p>
<small>
Published:
<DateTime datetime={page.published} />
{#if page.edited}
&bull; Last edited:
<DateTime
datetime={page.edited}
display="dateTime"
/>
{/if}
</small>
</p>
{/if}
</li>
{/each}
</dl>
</ol>
<h2 id="projects">Projects</h2>
@ -339,6 +341,30 @@
</main>
<style>
ol.page-links {
padding-left: 0.5rem;
list-style: none;
}
ol.page-links li {
padding: 0.5rem;
background-color: var(--background-2);
border-left: 2px solid var(--accent);
}
ol.page-links li {
margin-top: 1rem;
}
ol.page-links li > *:first-child {
margin-top: 0;
}
ol.page-links li > *:last-child {
margin-bottom: 0;
}
ul.buttons {
display: flex;
flex-direction: row;