site: remove view transitions from blog (#9201)

pull/9227/head
Ben McCann 1 year ago committed by GitHub
parent effeb7abba
commit a5cde37bc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -5,18 +5,6 @@ declare global {
// interface PageData {} // interface PageData {}
// interface Platform {} // interface Platform {}
} }
// add these lines
interface ViewTransition {
updateCallbackDone: Promise<void>;
ready: Promise<void>;
finished: Promise<void>;
skipTransition: () => void;
}
interface Document {
startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
}
} }
export {}; export {};

@ -1,16 +0,0 @@
<script>
import { onNavigate } from '$app/navigation';
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
</script>
<slot />

@ -22,8 +22,8 @@
{#if !post.draft} {#if !post.draft}
<article class="post" data-pubdate={post.date}> <article class="post" data-pubdate={post.date}>
<a class="no-underline" href="/blog/{post.slug}" title="Read the article »"> <a class="no-underline" href="/blog/{post.slug}" title="Read the article »">
<h2 style:--name="post-title-{post.slug}">{post.title}</h2> <h2>{post.title}</h2>
<p class="description" style:--name="post-description-{post.slug}">{post.description}</p> <p>{post.description}</p>
</a> </a>
</article> </article>
{/if} {/if}
@ -49,13 +49,6 @@
font-weight: 400; font-weight: 400;
} }
@media (prefers-reduced-motion: no-preference) {
h2,
.description {
view-transition-name: var(--name);
}
}
.post:first-child { .post:first-child {
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
padding: 0 0 4rem 0; padding: 0 0 4rem 0;

@ -20,10 +20,8 @@
</svelte:head> </svelte:head>
<article class="post listify text"> <article class="post listify text">
<h1 style:--name="post-title-{$page.params.slug}">{data.post.title}</h1> <h1>{data.post.title}</h1>
<p class="standfirst" style:--name="post-description-{$page.params.slug}"> <p class="standfirst">{data.post.description}</p>
{data.post.description}
</p>
<p class="byline"> <p class="byline">
<a href={data.post.author.url}>{data.post.author.name}</a> <a href={data.post.author.url}>{data.post.author.name}</a>
@ -54,13 +52,6 @@
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
@media (prefers-reduced-motion: no-preference) {
h1,
.standfirst {
view-transition-name: var(--name);
}
}
.byline { .byline {
margin: 0 0 6rem 0; margin: 0 0 6rem 0;
padding: 1.6rem 0 0 0; padding: 1.6rem 0 0 0;

Loading…
Cancel
Save