Start touching up layout
This commit is contained in:
parent
6cdd20eedc
commit
379287af36
1 changed files with 17 additions and 17 deletions
|
@ -112,7 +112,7 @@ const thumbnail =
|
||||||
</Fragment>
|
</Fragment>
|
||||||
<div
|
<div
|
||||||
id="top"
|
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
|
<div
|
||||||
id="toolbox-buttons"
|
id="toolbox-buttons"
|
||||||
|
@ -159,23 +159,23 @@ const thumbnail =
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<main
|
<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-body={props.isDraft ? undefined : ""}
|
||||||
data-pagefind-meta={`type:${props.publishedContentType}`}
|
data-pagefind-meta={`type:${props.publishedContentType}`}
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
props.prev || props.next ? (
|
props.prev || props.next ? (
|
||||||
<div class="print:hidden">
|
<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 ? (
|
{props.prev ? (
|
||||||
<a
|
<a
|
||||||
href={props.prev.link}
|
href={props.prev.link}
|
||||||
rel="prev"
|
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}
|
aria-label={props.labelPreviousContent}
|
||||||
>
|
>
|
||||||
<IconChevronLeft width="1.25rem" height="1.25rem" />
|
<IconChevronLeft width="1.25rem" height="1.25rem" />
|
||||||
<span>{props.prev.title}</span>
|
<span class="ml-1">{props.prev.title}</span>
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
<div class="h-full border-r border-stone-400 dark:border-stone-600" aria-hidden="true" />
|
<div class="h-full border-r border-stone-400 dark:border-stone-600" aria-hidden="true" />
|
||||||
|
@ -184,10 +184,10 @@ const thumbnail =
|
||||||
<a
|
<a
|
||||||
href={props.next.link}
|
href={props.next.link}
|
||||||
rel="next"
|
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}
|
aria-label={props.labelNextContent}
|
||||||
>
|
>
|
||||||
<span>{props.next.title}</span>
|
<span class="mr-1">{props.next.title}</span>
|
||||||
<IconChevronRight width="1.25rem" height="1.25rem" />
|
<IconChevronRight width="1.25rem" height="1.25rem" />
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
|
@ -200,7 +200,7 @@ const thumbnail =
|
||||||
}
|
}
|
||||||
<h1
|
<h1
|
||||||
id="section-title"
|
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}
|
aria-label={props.labelTitleSection}
|
||||||
>
|
>
|
||||||
{props.title}
|
{props.title}
|
||||||
|
@ -230,7 +230,7 @@ const thumbnail =
|
||||||
alt={t(props.lang, "published_content/cover_art_alt", props.title)}
|
alt={t(props.lang, "published_content/cover_art_alt", props.title)}
|
||||||
width={props.thumbnailWidth}
|
width={props.thumbnailWidth}
|
||||||
height={props.thumbnailHeight}
|
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>
|
</Fragment>
|
||||||
) : null
|
) : null
|
||||||
|
@ -302,32 +302,32 @@ const thumbnail =
|
||||||
props.prev || props.next ? (
|
props.prev || props.next ? (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<hr class="mx-auto mt-5 w-full max-w-2xl border-stone-400 dark:border-stone-600" />
|
<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 ? (
|
{props.prev ? (
|
||||||
<a
|
<a
|
||||||
href={props.prev.link}
|
href={props.prev.link}
|
||||||
rel="prev"
|
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}
|
aria-label={props.labelPreviousContent}
|
||||||
>
|
>
|
||||||
<IconChevronLeft width="1.25rem" height="1.25rem" />
|
<IconChevronLeft width="1.25rem" height="1.25rem" />
|
||||||
<span>{props.prev.title}</span>
|
<span class="ml-1">{props.prev.title}</span>
|
||||||
</a>
|
</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 ? (
|
{props.next ? (
|
||||||
<a
|
<a
|
||||||
href={props.next.link}
|
href={props.next.link}
|
||||||
rel="next"
|
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}
|
aria-label={props.labelNextContent}
|
||||||
>
|
>
|
||||||
<span>{props.next.title}</span>
|
<span class="mr-1">{props.next.title}</span>
|
||||||
<IconChevronRight width="1.25rem" height="1.25rem" />
|
<IconChevronRight width="1.25rem" height="1.25rem" />
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
<div />
|
<div aria-hidden="true" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<hr class="mx-auto mb-5 w-full max-w-2xl border-stone-400 dark:border-stone-600" />
|
<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}
|
{props.posts.mastodon ? <MastodonComments lang={props.lang} {...props.posts.mastodon} /> : null}
|
||||||
</main>
|
</main>
|
||||||
<div
|
<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")}
|
aria-label={t(props.lang, "published_content/copyright_aria_label")}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue