Skip to content

Commit

Permalink
Merge pull request #67 from chrismwilliams/use-logical-properties
Browse files Browse the repository at this point in the history 
refactor ltr variants for tailwind 3.3.x
  • Loading branch information
Chris Williams authored Apr 19, 2023
2 parents 7472180 + a3c64fe commit fade392
Show file tree
Hide file tree
Showing 9 changed files with 31 additions and 30 deletions.
4 changes: 2 additions & 2 deletions src/components/Paginator.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ const { prevUrl, nextUrl } = Astro.props;
(prevUrl || nextUrl) && (
<nav class="flex items-center gap-x-4">
{prevUrl && (
<a class="mr-auto py-2 sm:hover:text-accent" href={prevUrl.url} rel="prefetch">
<a class="sm:hover:text-accent me-auto py-2" href={prevUrl.url} rel="prefetch">
{prevUrl.srLabel && <span class="sr-only">{prevUrl.srLabel}</span>}
{prevUrl.text ? prevUrl.text : "Previous"}
</a>
)}
{nextUrl && (
<a class="ml-auto py-2 sm:hover:text-accent" href={nextUrl.url} rel="prefetch">
<a class="sm:hover:text-accent ms-auto py-2" href={nextUrl.url} rel="prefetch">
{nextUrl.srLabel && <span class="sr-only">{nextUrl.srLabel}</span>}
{nextUrl.text ? nextUrl.text : "Next"}
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/components/SkipLink.astro
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-1.5 focus:left-1"
<a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:start-1 focus:top-1.5"
>skip to content
</a>
6 changes: 3 additions & 3 deletions src/components/ThemeToggle.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
customElements.define("theme-toggle", ThemeToggle);
</script>

<theme-toggle class="ml-auto">
<theme-toggle class="ms-auto">
<button
type="button"
id="toggle-theme"
Expand All @@ -36,7 +36,7 @@
>
<svg
id="sun-svg"
class="absolute top-1/2 left-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 scale-0 opacity-0 transition-all group-aria-pressed:scale-100 group-aria-pressed:opacity-100"
class="absolute start-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 scale-0 opacity-0 transition-all group-aria-pressed:scale-100 group-aria-pressed:opacity-100"
aria-hidden="true"
focusable="false"
stroke-width="1.5"
Expand Down Expand Up @@ -67,7 +67,7 @@
</svg>
<svg
id="moon-svg"
class="absolute top-1/2 left-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 scale-0 opacity-0 transition-all group-aria-[pressed=false]:scale-100 group-aria-[pressed=false]:opacity-100"
class="absolute start-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 scale-0 opacity-0 transition-all group-aria-[pressed=false]:scale-100 group-aria-[pressed=false]:opacity-100"
aria-hidden="true"
focusable="false"
stroke-width="1.5"
Expand Down
2 changes: 1 addition & 1 deletion src/components/blog/PostPreview.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@ const postDate = getFormattedDate(date);
{post.data.title}
</a>
</Element>
{withDesc && <q class="line-clamp-3 mt-2 block italic">{post.data.description}</q>}
{withDesc && <q class="line-clamp-3 block italic">{post.data.description}</q>}
6 changes: 3 additions & 3 deletions src/components/layout/Footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ const year = new Date().getFullYear();
---

<footer
class="mt-auto flex w-full flex-col items-center justify-center gap-y-2 pt-20 pb-4 text-center align-top text-gray-500 sm:flex-row sm:justify-between sm:text-xs"
class="mt-auto flex w-full flex-col items-center justify-center gap-y-2 pb-4 pt-20 text-center align-top text-gray-500 sm:flex-row sm:justify-between sm:text-xs"
>
<div class="mr-0 sm:mr-4">
<div class="me-0 sm:me-4">
Copyright &copy; {year}
<span aria-label="rocket emoji">🚀</span>
Astro Cactus
Expand All @@ -20,7 +20,7 @@ const year = new Date().getFullYear();
MENU_LINKS.map((link) => (
<a
href={link.path}
class="px-4 py-2 sm:py-0 sm:px-2 sm:hover:text-textColor sm:hover:underline"
class="sm:hover:text-textColor px-4 py-2 sm:px-2 sm:py-0 sm:hover:underline"
>
{link.title}
</a>
Expand Down
14 changes: 7 additions & 7 deletions src/components/layout/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ const url = new URL(Astro.request.url);
});
</script>

<header id="main-header" class="group relative mb-28 flex items-center sm:pl-[4.5rem]">
<header id="main-header" class="group relative mb-28 flex items-center sm:ps-[4.5rem]">
<div class="flex sm:flex-col">
<a
href="/"
class="inline-flex items-center grayscale hover:filter-none sm:relative sm:inline-block"
aria-current={url.pathname === "/" ? "page" : false}
>
<svg
class="mr-3 h-10 w-6 sm:absolute sm:left-[-4.5rem] sm:mr-0 sm:h-20 sm:w-12"
class="me-3 h-10 w-6 sm:absolute sm:start-[-4.5rem] sm:me-0 sm:h-20 sm:w-12"
aria-hidden="true"
focusable="false"
fill="none"
Expand All @@ -52,14 +52,14 @@ const url = new URL(Astro.request.url);
</a>
<nav
id="navigation-menu"
class="absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md bg-[color:var(--theme-menu-bg)] py-4 text-accent shadow backdrop-blur group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:mt-1 sm:-ml-4 sm:flex sm:flex-row sm:items-center sm:divide-x sm:divide-dashed sm:divide-accent sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"
class="absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md bg-[--theme-menu-bg] py-4 text-accent shadow backdrop-blur group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:-ms-4 sm:mt-1 sm:flex sm:flex-row sm:items-center sm:divide-x sm:divide-dashed sm:divide-accent sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"
aria-label="Main menu"
>
{
MENU_LINKS.map((link) => (
<a
href={link.path}
class="py-4 px-4 sm:py-0 sm:hover:underline"
class="px-4 py-4 sm:py-0 sm:hover:underline"
aria-current={url.pathname === link.path ? "page" : false}
rel="prefetch"
>
Expand All @@ -72,15 +72,15 @@ const url = new URL(Astro.request.url);
<ThemeToggle />
<button
id="toggle-navigation-menu"
class="group relative ml-8 h-7 w-7 sm:invisible sm:hidden"
class="group relative ms-8 h-7 w-7 sm:invisible sm:hidden"
type="button"
aria-label="Open main menu"
aria-expanded="false"
aria-haspopup="menu"
>
<svg
id="line-svg"
class="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 transition-all group-aria-expanded:scale-0 group-aria-expanded:opacity-0"
class="absolute start-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 transition-all group-aria-expanded:scale-0 group-aria-expanded:opacity-0"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -93,7 +93,7 @@ const url = new URL(Astro.request.url);
</svg>
<svg
id="cross-svg"
class="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-0 text-accent opacity-0 transition-all group-aria-expanded:scale-100 group-aria-expanded:opacity-100"
class="absolute start-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-0 text-accent opacity-0 transition-all group-aria-expanded:scale-100 group-aria-expanded:opacity-100"
class="text-accent"
aria-hidden="true"
focusable="false"
Expand Down
10 changes: 5 additions & 5 deletions src/layouts/BlogPost.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,13 @@ const { headings } = await post.render();
<div class="gap-x-10 lg:flex lg:items-start">
{
!!headings.length && (
<aside class="sticky top-20 order-2 -mr-32 hidden basis-64 lg:block">
<aside class="sticky top-20 order-2 -me-32 hidden basis-64 lg:block">
<h2 class="font-semibold">Table of Contents</h2>
<ul class="mt-4 text-xs">
{headings.map(({ depth, slug, text }) => (
<li class="line-clamp-2 hover:text-accent">
<li class="hover:text-accent line-clamp-2">
<a
class={`block ${depth <= 2 ? "mt-3" : "mt-2 pl-3 text-[0.6875rem]"}`}
class={`block ${depth <= 2 ? "mt-3" : "mt-2 ps-3 text-[0.6875rem]"}`}
href={`#${slug}`}
aria-label={`Scroll to section: ${text}`}
>
Expand All @@ -62,15 +62,15 @@ const { headings } = await post.render();
<article class="flex-grow break-words">
<div id="blog-hero"><BlogHero content={post} /></div>
<div
class="prose prose-sm prose-cactus mt-12 prose-headings:font-semibold prose-headings:before:absolute prose-headings:before:-ml-4 prose-headings:before:text-accent prose-headings:before:content-['#'] prose-th:before:content-none"
class="prose prose-sm prose-cactus mt-12 prose-headings:font-semibold prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-accent prose-headings:before:content-['#'] prose-th:before:content-none"
>
<slot />
</div>
</article>
</div>
<button
id="to-top-btn"
class="z-90 fixed bottom-8 right-4 flex h-10 w-10 translate-y-28 items-center justify-center rounded-full border-2 border-transparent bg-zinc-200 text-3xl opacity-0 transition-all duration-300 hover:border-zinc-400 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 dark:bg-zinc-700 sm:right-8 sm:h-12 sm:w-12"
class="z-90 fixed bottom-8 end-4 flex h-10 w-10 translate-y-28 items-center justify-center rounded-full border-2 border-transparent bg-zinc-200 text-3xl opacity-0 transition-all duration-300 hover:border-zinc-400 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 dark:bg-zinc-700 sm:end-8 sm:h-12 sm:w-12"
aria-label="Back to Top"
data-show="false"
><svg
Expand Down
10 changes: 5 additions & 5 deletions src/pages/posts/[...page].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ const paginationProps = {
<h1 class="title mb-6">Posts</h1>
<div class="grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8">
<section aria-label="Blog post list">
<ul class="space-y-8 text-left">
<ul class="space-y-8 text-start">
{
page.data.map((p) => (
<li class="flex flex-col flex-wrap gap-x-2 sm:flex-row [&_q]:w-full">
<li class="flex flex-col flex-wrap gap-2 sm:flex-row [&_q]:basis-full">
<PostPreview post={p} as="h2" withDesc />
</li>
))
Expand Down Expand Up @@ -79,11 +79,11 @@ const paginationProps = {
</svg>
Tags
</h2>
<ul class="flex flex-wrap gap-2 text-bgColor">
<ul class="text-bgColor flex flex-wrap gap-2">
{uniqueTags.map((tag) => (
<li>
<a
class="flex items-center justify-center rounded-lg bg-accent p-1"
class="bg-accent flex items-center justify-center rounded-lg p-1"
href={`/tags/${tag}`}
aria-label={`View all posts with the tag: ${tag}`}
>
Expand All @@ -92,7 +92,7 @@ const paginationProps = {
</li>
))}
</ul>
<span class="mt-4 block sm:text-right">
<span class="mt-4 block sm:text-end">
<a class="sm:hover:text-accent" href="/tags" aria-label="View all blog categories">
View all →
</a>
Expand Down
7 changes: 4 additions & 3 deletions src/pages/tags/[tag]/[...page].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,15 @@ const paginationProps = {

<PageLayout meta={meta}>
<h1 class="title mb-6 flex items-center">
<a href="/tags/" class="text-accent sm:hover:underline">Tags</a><span class="ml-2 mr-3">→</span>
<a href="/tags/" class="text-accent sm:hover:underline">Tags</a>
<span class="me-3 ms-2">→</span>
<span class="text-xl">#{tag}</span>
</h1>
<section aria-label="Blog post list">
<ul class="space-y-8 text-left">
<ul class="space-y-8">
{
page.data.map((p) => (
<li class="flex flex-col flex-wrap gap-x-2 sm:flex-row [&_q]:w-full">
<li class="flex flex-col flex-wrap gap-2 sm:flex-row [&_q]:basis-full">
<PostPreview post={p} as="h2" withDesc />
</li>
))
Expand Down

0 comments on commit fade392

Please sign in to comment.