updates

vtbag · Nov 21, 2024 · 3bdd63f · 3bdd63f
1 parent 0dbbb70
commit 3bdd63f
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 43 deletions.
diff --git a/src/components/NHead.astro b/src/components/NHead.astro
@@ -132,7 +132,7 @@ import "./vtbag-bar.css";
       filter: blur(10px);
     }
   }
-  ::view-transition-image-pair(main) {
+  ::view-transition-group(main) {
     overflow: hidden;
   }
 

diff --git a/src/components/SidePicture.astro b/src/components/SidePicture.astro
@@ -0,0 +1,5 @@
+---
+---
+<div>
+  <span style="float:left"><slot name="pic"/></span><slot />
+</div>
diff --git a/src/pages/crossing/over-the-top/_Description.astro b/src/pages/crossing/over-the-top/_Description.astro
@@ -1,24 +1,35 @@
 ---
 import AnimatedSvg from "@/components/AnimatedSvg.astro";
-
-
 ---
-<p>This is a demonstration of the <b>over-the-top flavor</b> of the element crossing. This flavor is experimental technology and it is not certain whether it will ever be mature enough for production.</p>
+
+<p>
+  This is a demonstration of the <b>over-the-top flavor</b> of the element
+  crossing. This flavor is experimental technology and it is not certain whether
+  it will ever be mature enough for production.
+</p>
 <p>
   Enter data in the form fields, resize the text area, change the checkmarks,
   switch the color-scheme, collapse a group in the navigation sidebar on the
   left and reposition its scrollbar.
 </p>
 <p>
-  Then select the other page from the navigation sidebar to see whether your changes got preserved. Also check the playback time of the video and the animated SVG as well as the animation in the footer.
+  Then select the other page from the navigation sidebar to see whether your
+  changes got preserved. Also check the playback time of the video and the
+  animated SVG as well as the animation in the footer.
 </p>
 
-
 <div class="animations">
-  <video controls width="200" loop autoplay
-  data-vtbag-x="#video @currentTime">
-    <source src="/video.mp4" type="video/mp4" />Your browser does not support the
-    video tag.</video
+  <video
+    width="200"
+    height="112.5"
+    controls
+    loop
+    autoplay
+    playsinline
+    data-vtbag-x="#video @currentTime"
+  >
+    <source src="/video.mp4" type="video/mp4" />Your browser does not support
+    the video tag.</video
   >
   <AnimatedSvg expression="#svg ~/svg" />
 </div>
@@ -55,21 +66,11 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro";
       <label for="interest1">Coding</label>
     </div>
     <div>
-      <input
-        type="checkbox"
-        id="interest2"
-        name="interests"
-        value="music"
-      />
+      <input type="checkbox" id="interest2" name="interests" value="music" />
       <label for="interest2">Music</label>
     </div>
     <div>
-      <input
-        type="checkbox"
-        id="interest3"
-        name="interests"
-        value="sports"
-      />
+      <input type="checkbox" id="interest3" name="interests" value="sports" />
       <label for="interest3">Sports</label>
     </div>
   </div>
@@ -86,21 +87,14 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro";
       <label for="subscribeYes">Yes</label>
     </div>
     <div>
-      <input
-        type="radio"
-        id="subscribeNo"
-        name="subscribe"
-        value="no"
-      />
+      <input type="radio" id="subscribeNo" name="subscribe" value="no" />
       <label for="subscribeNo">No</label>
     </div>
   </div>
   <div class="form-group">
     <label for="comments">Comments:</label>
-    <textarea
-      id="comments"
-      name="comments"
-      placeholder="Enter your comments">This is a sample comment.</textarea
+    <textarea id="comments" name="comments" placeholder="Enter your comments"
+      >This is a sample comment.</textarea
     >
   </div>
 </form>

diff --git a/src/pages/crossing/over-the-top/_OverTheTopLayout.astro b/src/pages/crossing/over-the-top/_OverTheTopLayout.astro
@@ -86,7 +86,7 @@ const { title } = Astro.props;
             <a href="/crossing/over-the-top/2/">Page 2</a>
           </details>
         </nav>
-        <main>
+        <main data-vtbag-x="#main @scrollTop">
           <slot />
         </main>
       </div>

diff --git a/src/pages/crossing/plain/_Description.astro b/src/pages/crossing/plain/_Description.astro
@@ -1,7 +1,5 @@
 ---
 import AnimatedSvg from "@/components/AnimatedSvg.astro";
-
-
 ---
 
 <p>
@@ -10,11 +8,10 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro";
   single-page applications to your multi-page app.
 </p>
 
-
 <div class="animations">
-  <video controls width="200" loop autoplay>
-    <source src="/video.mp4" type="video/mp4" />Your browser does not support the
-    video tag.</video
+  <video width="200" height="112.5" controls loop autoplay playsinline>
+    <source src="/video.mp4" type="video/mp4" />Your browser does not support
+    the video tag.</video
   >
   <AnimatedSvg />
 </div>
@@ -40,7 +37,10 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro";
     <li>
       The current playback time of media elements, including audio and video.
     </li>
-    <li>The current playback time of CSS animations, transitions and animated SVGs.</li>
+    <li>
+      The current playback time of CSS animations, transitions and animated
+      SVGs.
+    </li>
     <li>The state and content of input fields.</li>
     <li>The content of iframes.</li>
   </ul>

diff --git a/src/pages/crossing/vanilla/_Description.astro b/src/pages/crossing/vanilla/_Description.astro
@@ -18,7 +18,7 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro"
 </p>
 
 <div class="animations">
-  <video controls width="200" loop autoplay data-vtbag-x="#video @currentTime">
+  <video  width="200" height="112.5" controls loop autoplay playsinline data-vtbag-x="#video @currentTime">
     <source src="/video.mp4" type="video/mp4" />Your browser does not support the
     video tag.</video
   >

diff --git a/src/pages/crossing/vanilla/_VanillaLayout.astro b/src/pages/crossing/vanilla/_VanillaLayout.astro
@@ -85,7 +85,7 @@ const { title } = Astro.props;
             <a href="/crossing/vanilla/2/">Page 2</a>
           </details>
         </nav>
-        <main>
+        <main data-vtbag-x="#main @scrollTop">
           <slot />
         </main>
       </div>

diff --git a/src/pages/tips/hide-and-seek/problem.astro b/src/pages/tips/hide-and-seek/problem.astro
@@ -101,7 +101,7 @@ import Bsky from "../../../components/Bsky.astro";
   <body id="body">
     <div id="other">
       <div id="d1">
-        <h1>CYBER<span class="glitch-effect">TECH</span> INVENTORY</h1>
+        <h1>INVENTORY</h1>
         <ul class="cyber-list"></ul>
         <button class="-glitch-effect">RANDOMIZE</button>
         <p style="max-width:640px">