Make components RTL compatible

This commit is contained in:
prototypa
2023-08-10 14:47:19 -04:00
parent 0d7f2eb683
commit c0c4cd1ccf
20 changed files with 43 additions and 37 deletions

View File

@@ -25,13 +25,13 @@ const Content = post?.Content || null;
<div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
<p>
<Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time>
<time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
{
post.category && (
<>
{' '}
·{' '}
<a class="capitalize hover:underline" href={getPermalink(post.category, 'category')}>
<a class="capitalize hover:underline inline-block" href={getPermalink(post.category, 'category')}>
{post.category.replaceAll('-', ' ')}
</a>
</>
@@ -86,7 +86,7 @@ const Content = post?.Content || null;
}
</div>
<div class="mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
<PostTags tags={post.tags} class="mr-5" />
<PostTags tags={post.tags} class="mr-5 rtl:mr-0 rtl:ml-5" />
<SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
</div>
</article>