typos

Author: martrapp

src/content/docs/basics/default-animations.mdx

@@ -45,7 +45,7 @@ In our example, the group's outline gradually gets wider  and shortens in height
 <style>{`td {vertical-align: top; text-align: right;}`}</style>
 <div style="margin-left:calc(50% - 14em); width: fit-content"><table><tbody class="not-content"><tr><td>&nbsp;</td><td>0%</td><td>50%</td><td>100%</td></tr><tr><td>group</td><td><svg width="60" height="80"><g><rect x="10" y="10" width="40" height="60" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none"/></g></svg></td><td><svg width="70" height="70"><g><rect x="10" y="10" width="50" height="50" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /></g></svg></td><td><svg width="80" height="60"><g><rect x="10" y="10" width="60" height="40" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /></g></svg></td></tr><tr><td>group & old</td><td><svg width="60" height="80"><g><rect x="10" y="10" width="40" height="60" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none"/><rect x="10" y="10" width="40" height="60" stroke="#532476" stroke-width="2" stroke-dasharray="8 6" fill="none"/></g></svg></td><td><svg width="70" height="95"><g><rect x="10" y="10" width="50" height="50" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="50" height="75" stroke="#532476" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td><td><svg width="80" height="110"><g><rect x="10" y="10" width="60" height="40" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="60" height="90" stroke="#532476" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td></tr><tr><td>group & new</td><td><svg width="60" height="80"><g><rect x="10" y="10" width="40" height="60" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none"/><rect x="10" y="10" width="40" height="27" stroke="#275317" stroke-width="2" stroke-dasharray="8 6" fill="none"/></g></svg></td><td><svg width="70" height="70"><g><rect x="10" y="10" width="50" height="50" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="50" height="33" stroke="#275317" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td><td><svg width="80" height="60"><g><rect x="10" y="10" width="60" height="40" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="60" height="40" stroke="#275317" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td></tr><tr><td>group & old & new</td><td><svg width="60" height="80"><g><rect x="10" y="10" width="40" height="60" stroke="#B0860044" stroke-width="2" stroke-dasharray="2 4" fill="none"/><rect x="10" y="10" width="40" height="60" stroke="#532476" stroke-width="2" stroke-dasharray="8 6" fill="none"/><rect x="10" y="10" width="40" height="27" stroke="#27531744" stroke-width="2" stroke-dasharray="8 6" fill="none"/></g></svg></td><td><svg width="70" height="95"><g><rect x="10" y="10" width="50" height="50" stroke="#B0860088" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="50" height="75" stroke="#53247688" stroke-width="2" stroke-dasharray="8 6" fill="none"/><rect x="10" y="10" width="50" height="33" stroke="#27531788" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td><td><svg width="80" height="110"><g><rect x="10" y="10" width="60" height="40" stroke="#B0860044" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="60" height="90" stroke="#53247644" stroke-width="2" stroke-dasharray="8 6" fill="none"/><rect x="10" y="10" width="60" height="40" stroke="#275317" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td></tr></tbody></table></div>
 
-The next row demonstrates the transition of the old image (purple) as if it didn't fade out. By default, the View Transition API sets the old image's width to match the group shown in the first row, but it doesn't adjust the height to the group's height, as that would distort the image. Instead, it calculates a new hight that preserves the image's aspect ratio.
+The second row demonstrates the transition of the old image (purple) as if it didn't fade out. By default, the View Transition API sets the old image's width to match the group shown in the first row, but it doesn't adjust the height to the group's height, as that would distort the image. Instead, it calculates a new hight that preserves the image's aspect ratio.
 
 The browser generated CSS that is responsible for this trick is this:
 

src/pages/demo-explainer/BasicAC.mdx

@@ -11,17 +11,17 @@ We want to shrink the current image as the new one grows in. The smaller the ima
 We built on the [former example showing default animations](/demo/BasicC1/). The extensions are CSS only.
 
 #### View Transition Names
-We do not want to shrink the whole viewport but only the image. Therefore the first thing is to assign a transition name to the image. We could add the property using inline styling to the `<img>` element, but with a new rule like this
+We do not want to shrink the whole viewport but only the image. Therefore the first thing is to assign a view transition name to the image. We could add the property using inline styling to the `<img>` element, but also with a new rule like this
 ```html ins={1-3}
 h2 + img {
   view-transition-name: img
 }
 ```
-This also has to be done on the second page for the `<img>` there.
+This has to be done for the `<img>` on the second page, too.
 
 #### Custom Animations
 
-For the shrining and growing, we use the same `zoom-out` keyframes, but for the zoom-in effect they are run in reveres order.  The `forwards` definition says that the old image should stay hidden at the end of the transition. Both animation run for a second in parallel without any delays.
+For the shrinking and growing, we use the same `zoom-out` keyframes, but for the zoom-in effect we run them in reveres order.  The `forwards` definition says that the old image should stay hidden at the end of the transition. Both animation run for a second in parallel without any delays.
 
 ```css ins={1-6}
 ::view-transition-old(img) {

src/pages/demo/BasicIM5.astro

@@ -11,7 +11,7 @@ import Demo from "@/layouts/DemoLayout.astro";
   image="/bag-og.png"
 >
   <p>
-    In this example. the same picture is shown with different aspect ratio values.
+    In this example, the same picture is shown with different aspect ratio values.
   </p>
 
   <div id="DOM1" class="active">