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>
<div class="flex flex-grow flex-col justify-between gap-y-4">
<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>
{
pronouns && (

10
src/components/PostNavigation.astro
View file

@ -7,12 +7,12 @@ import { ArrowLeft, ArrowRight } from 'lucide-react'
const { prevPost, nextPost } = Astro.props
---
<div class="flex justify-between gap-4">
<div class="flex flex-col gap-4 sm:flex-row">
<Link
href={prevPost ? `/blog/${prevPost.slug}` : '#'}
class={cn(
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',
)}
aria-disabled={!prevPost}
@ -24,7 +24,7 @@ const { prevPost, nextPost } = Astro.props
</div>
<div class="flex flex-col items-start overflow-hidden">
<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
>
</div>
@ -33,14 +33,14 @@ const { prevPost, nextPost } = Astro.props
href={nextPost ? `/blog/${nextPost.slug}` : '#'}
class={cn(
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',
)}
aria-disabled={!nextPost}
>
<div class="flex flex-col items-end overflow-hidden">
<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
>
</div>

2
src/styles/global.css
View file

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