diff --git a/src/layouts/PublishedContentLayout.astro b/src/layouts/PublishedContentLayout.astro
index 8785f6b..8ef3593 100644
--- a/src/layouts/PublishedContentLayout.astro
+++ b/src/layouts/PublishedContentLayout.astro
@@ -112,7 +112,7 @@ const thumbnail =
</Fragment>
<div
id="top"
- class="min-w-screen relative min-h-screen bg-radial from-bm-300 to-bm-600 px-1 pb-16 pt-20 dark:from-green-700 dark:to-green-950 print:bg-none print:pb-0 print:pt-0"
+ class="min-w-screen relative min-h-screen bg-radial from-bm-300 to-bm-600 px-1 pb-24 pt-28 sm:px-4 md:px-6 lg:pt-32 dark:from-green-700 dark:to-green-950 print:bg-none print:pb-0 print:pt-0"
>
<div
id="toolbox-buttons"
@@ -159,23 +159,23 @@ const thumbnail =
</div>
</div>
<main
- class="h-entry mx-auto max-w-3xl rounded-lg bg-stone-50 px-2 pb-4 pt-1 shadow-sm dark:bg-stone-900 print:max-w-full print:bg-none print:shadow-none"
+ class="h-entry mx-auto max-w-5xl rounded-lg bg-stone-50 px-2 pb-10 pt-12 shadow-sm sm:px-6 md:px-20 lg:px-36 dark:bg-stone-900 print:max-w-full print:bg-none print:shadow-none"
data-pagefind-body={props.isDraft ? undefined : ""}
data-pagefind-meta={`type:${props.publishedContentType}`}
>
{
props.prev || props.next ? (
<div class="print:hidden">
- <div id="nav-top" class="my-4 grid grid-cols-2 justify-items-stretch gap-2">
+ <div id="nav-top" class="my-4 grid grid-cols-2 justify-items-stretch gap-2 text-lg font-light">
{props.prev ? (
<a
href={props.prev.link}
rel="prev"
- class="text-link flex items-center justify-center border-r border-stone-400 px-1 py-3 font-light underline dark:border-stone-600"
+ class="text-link flex items-center justify-center border-r border-stone-400 px-1 py-3 underline dark:border-stone-600"
aria-label={props.labelPreviousContent}
>
<IconChevronLeft width="1.25rem" height="1.25rem" />
- <span>{props.prev.title}</span>
+ <span class="ml-1">{props.prev.title}</span>
</a>
) : (
<div class="h-full border-r border-stone-400 dark:border-stone-600" aria-hidden="true" />
@@ -184,10 +184,10 @@ const thumbnail =
<a
href={props.next.link}
rel="next"
- class="text-link flex items-center justify-center px-1 py-3 font-light underline"
+ class="text-link flex items-center justify-center px-1 py-3 underline"
aria-label={props.labelNextContent}
>
- <span>{props.next.title}</span>
+ <span class="mr-1">{props.next.title}</span>
<IconChevronRight width="1.25rem" height="1.25rem" />
</a>
) : (
@@ -200,7 +200,7 @@ const thumbnail =
}
<h1
id="section-title"
- class="p-name px-2 pt-2 font-serif text-3xl font-semibold text-stone-800 dark:text-stone-100"
+ class="p-name px-1 pt-4 font-serif text-4xl font-semibold text-stone-800 dark:text-stone-100"
aria-label={props.labelTitleSection}
>
{props.title}
@@ -230,7 +230,7 @@ const thumbnail =
alt={t(props.lang, "published_content/cover_art_alt", props.title)}
width={props.thumbnailWidth}
height={props.thumbnailHeight}
- class="u-photo mx-auto my-5 shadow-lg"
+ class="u-photo mx-auto my-10 shadow-lg sm:my-16"
/>
</Fragment>
) : null
@@ -302,32 +302,32 @@ const thumbnail =
props.prev || props.next ? (
<Fragment>
<hr class="mx-auto mt-5 w-full max-w-2xl border-stone-400 dark:border-stone-600" />
- <div id="nav-top" class="my-4 grid grid-cols-2 justify-items-stretch gap-2">
+ <div id="nav-bottom" class="my-4 grid grid-cols-2 justify-items-stretch gap-2 text-lg font-light">
{props.prev ? (
<a
href={props.prev.link}
rel="prev"
- class="text-link flex items-center justify-center border-r border-stone-400 px-1 py-3 font-light underline dark:border-stone-600"
+ class="text-link flex items-center justify-center border-r border-stone-400 px-1 py-3 underline dark:border-stone-600"
aria-label={props.labelPreviousContent}
>
<IconChevronLeft width="1.25rem" height="1.25rem" />
- <span>{props.prev.title}</span>
+ <span class="ml-1">{props.prev.title}</span>
</a>
) : (
- <div class="h-full border-r border-stone-400 dark:border-stone-600" />
+ <div class="h-full border-r border-stone-400 dark:border-stone-600" aria-hidden="true" />
)}
{props.next ? (
<a
href={props.next.link}
rel="next"
- class="text-link flex items-center justify-center px-1 py-3 font-light underline"
+ class="text-link flex items-center justify-center px-1 py-3 underline"
aria-label={props.labelNextContent}
>
- <span>{props.next.title}</span>
+ <span class="mr-1">{props.next.title}</span>
<IconChevronRight width="1.25rem" height="1.25rem" />
</a>
) : (
- <div />
+ <div aria-hidden="true" />
)}
</div>
<hr class="mx-auto mb-5 w-full max-w-2xl border-stone-400 dark:border-stone-600" />
@@ -394,7 +394,7 @@ const thumbnail =
{props.posts.mastodon ? <MastodonComments lang={props.lang} {...props.posts.mastodon} /> : null}
</main>
<div
- class="pt-6 text-center text-xs text-black dark:text-white"
+ class="pt-14 text-center text-xs text-black dark:text-white"
aria-label={t(props.lang, "published_content/copyright_aria_label")}
>
<span