z0x/blog.z0x.ca
Code Actions

fix: break-words on prose

Browse source
This commit is contained in:
enscribe 2024-09-15 13:23:03 -07:00
parent 05daa7025e
commit 5e616ac2e0
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
3 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/AuthorCard.astro
View file

@ -54,7 +54,7 @@ const socialLinks: SocialLink[] = [
</Link> </Link>
<div class="flex flex-grow flex-col justify-between gap-y-4"> <div class="flex flex-grow flex-col justify-between gap-y-4">
<div> <div>
<div class="flex items-center gap-2"> <div class="flex flex-wrap items-center gap-x-2">
<h3 class="text-lg font-semibold">{name}</h3> <h3 class="text-lg font-semibold">{name}</h3>
{ {
pronouns && ( pronouns && (

10
src/components/PostNavigation.astro
View file

@ -7,12 +7,12 @@ import { ArrowLeft, ArrowRight } from 'lucide-react'
const { prevPost, nextPost } = Astro.props const { prevPost, nextPost } = Astro.props
--- ---
<div class="flex justify-between gap-4"> <div class="flex flex-col gap-4 sm:flex-row">
<Link <Link
href={prevPost ? `/blog/${prevPost.slug}` : '#'} href={prevPost ? `/blog/${prevPost.slug}` : '#'}
class={cn( class={cn(
buttonVariants({ variant: 'outline' }), buttonVariants({ variant: 'outline' }),
'rounded-xl group flex items-center justify-start w-1/2 h-fit', 'rounded-xl group flex items-center justify-start w-full sm:w-1/2 h-fit',
!prevPost && 'pointer-events-none opacity-50 cursor-not-allowed', !prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
)} )}
aria-disabled={!prevPost} aria-disabled={!prevPost}
@ -24,7 +24,7 @@ const { prevPost, nextPost } = Astro.props
</div> </div>
<div class="flex flex-col items-start overflow-hidden"> <div class="flex flex-col items-start overflow-hidden">
<span class="text-left text-xs text-muted-foreground">Previous Post</span> <span class="text-left text-xs text-muted-foreground">Previous Post</span>
<span class="w-full truncate text-left" <span class="w-full truncate text-left text-sm"
>{prevPost?.data.title || 'Latest post!'}</span >{prevPost?.data.title || 'Latest post!'}</span
> >
</div> </div>
@ -33,14 +33,14 @@ const { prevPost, nextPost } = Astro.props
href={nextPost ? `/blog/${nextPost.slug}` : '#'} href={nextPost ? `/blog/${nextPost.slug}` : '#'}
class={cn( class={cn(
buttonVariants({ variant: 'outline' }), buttonVariants({ variant: 'outline' }),
'rounded-xl group flex items-center justify-end w-1/2 h-fit', 'rounded-xl group flex items-center justify-end w-full sm:w-1/2 h-fit',
!nextPost && 'pointer-events-none opacity-50 cursor-not-allowed', !nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
)} )}
aria-disabled={!nextPost} aria-disabled={!nextPost}
> >
<div class="flex flex-col items-end overflow-hidden"> <div class="flex flex-col items-end overflow-hidden">
<span class="text-right text-xs text-muted-foreground">Next Post</span> <span class="text-right text-xs text-muted-foreground">Next Post</span>
<span class="w-full truncate text-right" <span class="w-full truncate text-right text-sm"
>{nextPost?.data.title || 'Last post!'}</span >{nextPost?.data.title || 'Last post!'}</span
> >
</div> </div>

2
src/styles/global.css
View file

@ -67,7 +67,7 @@
@layer components { @layer components {
article { article {
@apply prose-headings:scroll-mt-20; @apply prose-headings:scroll-mt-20 prose-headings:break-words prose-p:break-words;
.katex-display { .katex-display {
@apply overflow-x-auto overflow-y-hidden py-4; @apply overflow-x-auto overflow-y-hidden py-4;