Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor ltr variants for tailwind 3.3.x #67

Merged
merged 3 commits into from
Apr 19, 2023
Merged

refactor ltr variants for tailwind 3.3.x #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dfc5a78
refactor ltr variants for tailwind 3.3.x
Apr 19, 2023
588e7d8
use custom prop without var
Apr 19, 2023
a3c64fe
use flex-basis, remove default margin on quote
Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/Paginator.astro
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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