From 38c70a6905b21b57bcc97cf6d142cd505d459611 Mon Sep 17 00:00:00 2001
From: Adem ilter <ademilter@gmail.com>
Date: Mon, 15 Apr 2024 10:55:21 +0300
Subject: [PATCH 1/2] add support info

---
 example/app/layout.js |  1 +
 example/app/style.css | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/example/app/layout.js b/example/app/layout.js
index 6c10439..68e45ab 100644
--- a/example/app/layout.js
+++ b/example/app/layout.js
@@ -32,6 +32,7 @@ export default function RootLayout({ children }) {
               Source Code ↗
             </a>
           </p>
+          <p className="support"/>
           <p></p>
           <div>{children}</div>
           <footer>
diff --git a/example/app/style.css b/example/app/style.css
index b7023d0..508cf8e 100644
--- a/example/app/style.css
+++ b/example/app/style.css
@@ -4,6 +4,7 @@
 *::after {
   box-sizing: border-box;
 }
+
 * {
   margin: 0;
 }
@@ -42,9 +43,9 @@ h6 {
 /** Styles */
 body {
   font-family: var(--font-geist-sans), system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
-    Noto Color Emoji;
+  BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
+  sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+  Noto Color Emoji;
   font-feature-settings: 'liga', 'clig', 'calt';
   font-variant: common-ligatures contextual;
   letter-spacing: -0.01em;
@@ -131,3 +132,19 @@ footer {
 .demo-box h2:first-child {
   margin-top: 0;
 }
+
+.support:before {
+  content: '️You do not have support for view transitions.';
+  padding: 4px 6px;
+  color: rgba(200, 0, 0, 1);
+  background-color: rgba(200, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+@supports (view-transition-name: figure-caption) {
+  .support:before {
+    content: '️You have support for view transitions.';
+    color: rgb(0, 120, 0);
+    background-color: rgba(0, 120, 0, 0.1);
+  }
+}

From 32ae4705cbfc333e388c10a1e1b331e93c328604 Mon Sep 17 00:00:00 2001
From: Adem ilter <ademilter@gmail.com>
Date: Mon, 15 Apr 2024 14:43:31 +0300
Subject: [PATCH 2/2] move content, from css to html

---
 example/app/layout.js |  5 ++++-
 example/app/style.css | 23 ++++++++++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/example/app/layout.js b/example/app/layout.js
index 68e45ab..e30a9b9 100644
--- a/example/app/layout.js
+++ b/example/app/layout.js
@@ -32,7 +32,10 @@ export default function RootLayout({ children }) {
               Source Code ↗
             </a>
           </p>
-          <p className="support"/>
+          <p className="support">
+            <span className="no">️🔴 You do not have support for view transitions.</span>
+            <span className="yes">️🟢 You have support for view transitions.</span>
+          </p>
           <p></p>
           <div>{children}</div>
           <footer>
diff --git a/example/app/style.css b/example/app/style.css
index 508cf8e..5523fba 100644
--- a/example/app/style.css
+++ b/example/app/style.css
@@ -133,18 +133,27 @@ footer {
   margin-top: 0;
 }
 
-.support:before {
-  content: '️You do not have support for view transitions.';
+.support span {
   padding: 4px 6px;
+  border-radius: 8px;
+}
+
+.support .no {
   color: rgba(200, 0, 0, 1);
   background-color: rgba(200, 0, 0, 0.1);
-  border-radius: 8px;
+}
+
+.support .yes {
+  display: none;
+  color: rgb(0, 120, 0);
+  background-color: rgba(0, 120, 0, 0.1);
 }
 
 @supports (view-transition-name: figure-caption) {
-  .support:before {
-    content: '️You have support for view transitions.';
-    color: rgb(0, 120, 0);
-    background-color: rgba(0, 120, 0, 0.1);
+  .support .yes {
+    display: inline;
+  }
+  .support .no {
+    display: none;
   }
 }