polished

vtbag · Nov 7, 2024 · 31857ce · 31857ce
1 parent 84d2600
commit 31857ce
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 8 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -62,7 +62,7 @@ export default defineConfig({
     },
     social: {
       github: 'https://github.com/vtbag/website',
-      blueSky:'https://bsky.app/profile/martr.app'
+      blueSky: 'https://bsky.app/profile/martr.app'
     },
     editLink: {
       baseUrl: "https://github.com/vtbag/website/edit/main/"
@@ -101,6 +101,7 @@ function sidebar() {
   }, {
     label: 'Basics',
     items: [
+      { label: 'Browser Support', link: "/basics/testpage/" },
       { label: 'View Transition API', link: "/basics/api/" },
       { label: 'View Transition Examples', link: "/basics/examples/" },
       { label: 'Structure of Pseudo-Elements', link: "/basics/pseudos/" },

diff --git a/public/social.png b/public/social.png
diff --git a/src/assets/cards/bag.png b/src/assets/cards/bag.png
diff --git a/src/content/docs/basics/testpage.mdx b/src/content/docs/basics/testpage.mdx
@@ -0,0 +1,67 @@
+---
+title: "Test Your Browser's View Transition Capabilities"
+description: Check what part of the View Transition API is supported by your browser
+---
+
+This page shows whether your current browser has native support for view transitions.
+
+|Feature|Support?|
+|-------|---------|
+|View Transition API Level 1|<span id="level1"/>|
+|View Transition API Level 2|<span id="level2"/>|
+|Nested transition groups|<span id="level2b"/>|
+
+The W3C Draft for [Level 1](https://drafts.csswg.org/css-view-transitions-1/) of the View Transition API defines view transitions within th same document.\
+The W3C Draft for [Level 2]( https://drafts.csswg.org/css-view-transitions-2/) of the View Transition API covers cross-document view transitions.
+
+Find more pointers to interesting reads at the [astro-vtbot website](https://events-3bg.pages.dev/jotter/api/references/).
+
+
+
+Browser compatibility data: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility
+
+<style>{`
+	#level1::before {
+			content: 'Not supported';
+		}
+	#level2::before {
+			content: 'Not supported';
+		}
+	#level2b::before {
+			content: 'Not supported';
+		}
+
+	@supports (view-transition-name: a) {
+		#level1::before {
+			content: 'Supported';
+			background-color: lightgreen;
+			color: black;
+			display: inline-block;
+			margin: auto;
+			padding: 0.5ex 1ex;
+			width: 100%;
+		}
+	}
+	@supports (view-transition-class: b) {
+		#level2::before {
+			content: 'Supported';
+			background-color: lightgreen;
+			color: black;
+			display: inline-block;
+			margin: auto;
+			padding: 0.5ex 1ex;
+			width: 100%;
+		}
+	}
+	@supports (view-transition-group: normal) {
+		#level2b::before {
+			content: 'Supported';
+			background-color: lightgreen;
+			color: black;
+			display: inline-block;
+			margin: auto;
+			padding: 0.5ex 1ex;
+			width: 100%;
+		}
+	}
+`}</style>
diff --git a/src/content/docs/vtbag.mdx b/src/content/docs/vtbag.mdx
@@ -12,7 +12,7 @@ import crossing from "../../assets/crossing.png";
 import signal from "../../assets/signal.png"
 import shaft from "../../assets/shaft.png"
 
-@vtbag is a comprehensive suite of tools, tips, and tricks to make your experience with the View Transition API smoother and more efficient.
+@vtbag is a comprehensive suite of tools, tips, and tricks to make your experience with the View Transition API smoother and more efficient. [Check how well your current browser supports the view transition API.](/basics/testpage/)
 
 ### Tools
 The site already got some interesting tools to offer:

diff --git a/src/pages/cards/Bag.astro b/src/pages/cards/Bag.astro
@@ -7,7 +7,7 @@ import bag from "../../assets/bag.png?url"
       <img src={bag} alt="bag" />
     </div>
     <div style="width:57vw">
-      <h2><hr>Tools, Tips, and Tricks<br>to Enhance your Development Skills<br>with View Transitions!<hr>
+      <h2><hr><span class="effect">Tools, Tips, and Tricks</span><br>to E  with the<br><span class="effect2">View Transition API!</span><hr>
       </h2>
     </div>
     <h1>The Bag of Tricks for View Transitions</h1>
@@ -22,16 +22,16 @@ import bag from "../../assets/bag.png?url"
     }
     h1 {
       padding: 3vh 3vw;
-      color: #f5e3d5;
+      color: #a98b6c;
       font-size: 66px;
       font-family: Arial, Helvetica, sans-serif;
-      transform: translate(0, -140vh)
+      transform: translate(0, -135vh)
     }
     h2 {
-      color:#c5b3a5;
+      color:#a98b6ccc;
       font-size: 56px;
       font-family: Arial, Helvetica, sans-serif;
-      transform: translate(-4vw, -15vh);
+      transform: translate(-4vw, -12vh);
       text-align: right;
     }
     body {
@@ -40,7 +40,7 @@ import bag from "../../assets/bag.png?url"
     img {
       display: block;
       margin: auto;
-      transform: rotate(-10deg) translate(0vw, 19vh);
+      transform: rotate(-10deg) translate(0vw, 18vh);
       mask-image: radial-gradient(
         ellipse at center,
         white 35%,
@@ -51,5 +51,24 @@ import bag from "../../assets/bag.png?url"
       display: inline-block;
       height: 100vh;
     }
+    .effect {
+      background: linear-gradient(90deg, #c5b3a5, #a98b6c);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-shadow: 2px 2px 4px rgba(64,64,64, 0.5);
+      font-weight: 700;
+      font-size: 66px;
+    }
+    .effect2 {
+      background: linear-gradient(90deg, #a98b6c, #c5b3a5);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-shadow: 2px 2px 4px rgba(64,64,64, 0.5);
+      font-weight: 700;
+      font-size: 66px;
+    }
+    hr {
+      border-color: #ffc4;
+    }
   </style>
 </html>