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> </p>
</div> </div>
<dl> <ol class="page-links">
{#each pages as page} {#each pages as page}
<h3> <li>
<a href={"/" + page.slug + "/"}> <h3>
{page.title} <a href={"/" + page.slug + "/"}>
</a> {page.title}
</h3> </a>
<p>{page.description}</p> </h3>
{#if page.published} <p>{page.description}</p>
<p> {#if page.published}
<small> <p>
Published: <small>
<DateTime datetime={page.published} /> Published:
{#if page.edited} <DateTime datetime={page.published} />
&bull; Last edited: {#if page.edited}
<DateTime &bull; Last edited:
datetime={page.edited} <DateTime
display="dateTime" datetime={page.edited}
/> display="dateTime"
{/if} />
</small> {/if}
</p> </small>
{/if} </p>
{/if}
</li>
{/each} {/each}
</dl> </ol>
<h2 id="projects">Projects</h2> <h2 id="projects">Projects</h2>
@ -339,6 +341,30 @@
</main> </main>
<style> <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 { ul.buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;