Fixed transitions and blend modes in Chrome

skyeto · Jan 12, 2024 · e45f516 · e45f516
1 parent 2ec188d
commit e45f516
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -52,7 +52,7 @@ const { title, description, pubDate } = Astro.props;
     </div>
 
 
-    <span class="bg-blend-luminosity mix-blend-luminosity">
+    <span class="">
     <slot />
     </span>
 

diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
@@ -10,8 +10,8 @@ const { frontmatter } = Astro.props;
     description={frontmatter.description}
     pubDate={frontmatter.pubDate}>
   <Navbar />
+    <h1 class="px-[2rem] container justify-center gap-2 bg-blend-luminosity mix-blend-luminosity" transition:name="title">{ frontmatter.title }</h1>
   <article class="container justify-center gap-2 text-base" transition:name="content">
-    <h1 transition:name="title">{ frontmatter.title }</h1>
     <p class="pubdate">published { frontmatter.pubDate.slice(0, 10) }</p>
     <p class="ingress">{ frontmatter.description }</p>
     <slot />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,8 +12,8 @@ const posts = await Astro.glob("./p/*.{md,mdx}");
 
   <Navbar />
 
-  <main class="container justify-center" transition:name="content" transition:type="slide">
-    <h1 transition:name="title">hi there!</h1>
+    <h1 transition:name="title" transition:animate="fade" class="px-[2rem] container justify-center gap-2 bg-blend-luminosity mix-blend-luminosity">hi there!</h1>
+  <main class="container justify-center gap-2 text-base" transition:name="content">
     <p>I'm <span class="italic">/skaɪ-tuː/</span>. This blog is mostly a rambly collection of posts on different topics.</p>
 
     <p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,7 +52,7 @@ const { title, description, pubDate } = Astro.props; @@
         </div>
-        <span class="bg-blend-luminosity mix-blend-luminosity">
+        <span class="">
         <slot />
         </span>
@@ Expand Down @@