badmanners/gallery.badmanners.xyz
badmanners/gallery.badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Start touching up layout

Browse source
This commit is contained in:
Bad Manners 2024-09-07 15:03:37 -03:00
parent 6cdd20eedc
commit 379287af36
Signed by: badmanners
GPG key ID: 8C88292CCB075609
1 changed files with 17 additions and 17 deletions

34
src/layouts/PublishedContentLayout.astro
View file

@ -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