dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-19 04:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved post styles

Browse source
This commit is contained in:
Daniel Bulant 2023-03-03 23:11:56 +01:00
parent 1f27722c29
commit f0acc64141
1 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/layouts/post.svelte
View file

@ -39,7 +39,10 @@
<main class:dark={$darkmode} class="post-layout"> <main class:dark={$darkmode} class="post-layout">
<span><a href="/posts">Posts</a> /</span> <span><a href="/posts">Posts</a> /</span>
<h1>{title}</h1> <h1>{title}</h1>
<span>Written {dt.toRelativeCalendar()} ({dt.toLocaleString(DateTime.DATE_FULL)})</span> <div class="flex justify-between flex-wrap">
<span>Written {dt.toRelativeCalendar()} ({dt.toLocaleString(DateTime.DATE_FULL)})</span>
<span>{categories.join(", ")}</span>
</div>
<slot /> <slot />
<noscript>Although the page mostly works without Javascript, you won't be able to comment. Also, I acknowledge the privacy flaws, but Javascript is a fundamental part of modern web, and shouldn't be disabled. Maybe use an adblock instead of disabling it for everything?</noscript> <noscript>Although the page mostly works without Javascript, you won't be able to comment. Also, I acknowledge the privacy flaws, but Javascript is a fundamental part of modern web, and shouldn't be disabled. Maybe use an adblock instead of disabling it for everything?</noscript>
<script src="https://utteranc.es/client.js" <script src="https://utteranc.es/client.js"
@ -134,11 +137,18 @@
} }
:global(body .post-layout p img) { :global(body .post-layout p img) {
@apply inline; @apply inline;
}
:global(body .post-layout pre) {
@apply rounded-lg bg-dark-400;
}
:global(body .post-layout ul) {
@apply list-disc list-inside;
}
:global(body .post-layout ul li) {
@apply my-0.5;
} }
main { main {
margin: 0 auto; @apply m-auto max-w-3xl p-4 py-6;
max-width: 800px;
padding: 0 20px 20px;
} }
h1 { h1 {
@apply text-4xl font-bold; @apply text-4xl font-bold;