Skip to content

Commit b5733bb

Browse files
martrappmartrapp
committed
small demo
1 parent 55dbc77 commit b5733bb

4 files changed

Lines changed: 111 additions & 1 deletion

File tree

‎src/pages/backdrop-demo/_layout.astro‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html>
2+
<head>
3+
<style is:global>
4+
@view-transition {
5+
navigation: auto;
6+
}
7+
:root {
8+
view-transition-name: none;
9+
}
10+
h1 {
11+
view-transition-name: h1;
12+
width: fit-content;
13+
}
14+
15+
a {
16+
view-transition-name: a;
17+
}
18+
dialog::backdrop {
19+
backdrop-filter: blur(8px);
20+
}
21+
p {
22+
font-size: 40px;
23+
}
24+
</style>
25+
</head>
26+
<body
27+
><slot />
28+
<script is:inline>
29+
document.querySelector("dialog").showModal();
30+
</script>
31+
</body>
32+
</html>

‎src/pages/backdrop-demo/page1.astro‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
import XL from "./_layout.astro";
3+
---
4+
5+
<XL>
6+
<p>
7+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, rem,
8+
consequatur earum debitis sapiente sequi ratione fuga totam tenetur, tempore
9+
reprehenderit assumenda autem minus nisi voluptatum incidunt cum vel
10+
delectus.
11+
</p>
12+
<dialog>
13+
<h1>This is X1</h1>
14+
<a href="/backdrop-demo/page2/">Go to page 2</a>
15+
</dialog>
16+
<p>
17+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dolore
18+
doloribus commodi culpa debitis. Ipsum dolor asperiores distinctio! Odit
19+
commodi necessitatibus perferendis ab nobis earum voluptas? Consequatur
20+
explicabo necessitatibus iusto!
21+
</p>
22+
<p>
23+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, laborum!
24+
Saepe aliquid sint minima, adipisci modi asperiores nostrum, nesciunt velit
25+
ea illo inventore quam non facere accusantium aliquam. Nisi, expedita!
26+
</p>
27+
<style>
28+
dialog {
29+
view-transition-name: dialog;
30+
position: fixed;
31+
inset: 30%;
32+
width: 40%;
33+
height: 40%;
34+
border: 5px solid darkslateblue;
35+
padding: 20px;
36+
font-size: 20px;
37+
}
38+
</style>
39+
</XL>

‎src/pages/backdrop-demo/page2.astro‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
import XL from "./_layout.astro";
3+
---
4+
5+
<XL>
6+
<p>
7+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, rem,
8+
consequatur earum debitis sapiente sequi ratione fuga totam tenetur, tempore
9+
reprehenderit assumenda autem minus nisi voluptatum incidunt cum vel
10+
delectus.
11+
</p>
12+
<dialog>
13+
<h1>This is X2</h1>
14+
<a href="/backdrop-demo/page1/">Go to page 1</a>
15+
</dialog>
16+
<p>
17+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dolore
18+
doloribus commodi culpa debitis. Ipsum dolor asperiores distinctio! Odit
19+
commodi necessitatibus perferendis ab nobis earum voluptas? Consequatur
20+
explicabo necessitatibus iusto!
21+
</p>
22+
<p>
23+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, laborum!
24+
Saepe aliquid sint minima, adipisci modi asperiores nostrum, nesciunt velit
25+
ea illo inventore quam non facere accusantium aliquam. Nisi, expedita!
26+
</p>
27+
<style>
28+
dialog {
29+
view-transition-name: dialog;
30+
position: fixed;
31+
inset: 20%;
32+
width: 60%;
33+
height: 60%;
34+
border: 5px solid darkolivegreen;
35+
padding: 20px;
36+
font-size: 20px;
37+
}
38+
</style>
39+
</XL>

‎src/pages/tests/x.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@ import Crossing from "astro-vtbot/components/ElementCrossing.astro";
1717
);
1818
</script>
1919
<p id="p">no color</p>
20-
<a href="/test/y/">goto y</a>
20+
<a href="/tests/y/">goto y</a>
2121
</body>
2222
</html>

0 commit comments

Comments
 (0)