Merge branch 'main' into fix-26970

bsmth · web-flow · commit 22ccd002df61 · 2023-07-24T13:57:59.000+02:00
diff --git a/flexbox/use-cases/split-navigation.html b/flexbox/use-cases/split-navigation.html
@@ -79,15 +79,12 @@
   </style>
   <style class="editable">
     nav ul {
-        display: flex;
-        margin: 0 -10px;
-      }
-    nav li {
-        margin: 0 10px;
+      display: flex;
+      gap: 20px;
+    }
+    .push-right {
+      margin-left: auto;
     }
-      .push-right {
-          margin-left: auto;
-      }
   </style>
 </head>
 
@@ -107,11 +104,7 @@
   <textarea class="playable-css">
 nav ul {
   display: flex;
-  margin: 0 -10px;
-}
-
-nav li {
-  margin: 0 10px;
+  gap: 20px;
 }
 
 .push-right {
diff --git a/grid/docs/autoplacement.html b/grid/docs/autoplacement.html
@@ -30,7 +30,7 @@
     <style class="editable">
       .wrapper {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        grid-template-columns: repeat(3, minmax(120px, 1fr));
         gap: 10px;
         grid-auto-flow: dense;
       }
@@ -48,19 +48,17 @@
             <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
             <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
             <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
-            <li><img src="portrait.jpg" alt="placeholder"></li>
-            <li><img src="portrait.jpg" alt="placeholder"></li>
             <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
             <li><img src="portrait.jpg" alt="placeholder"></li>
             <li><img src="portrait.jpg" alt="placeholder"></li>
             <li><img src="portrait.jpg" alt="placeholder"></li>
-         </ul>>
+         </ul>
     </section>
 
     <textarea class="playable playable-css" style="height: 200px;">
 .wrapper {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-template-columns: repeat(3, minmax(120px, 1fr));
   gap: 10px;
   grid-auto-flow: dense;
 }
@@ -72,13 +70,10 @@
 
     <textarea class="playable playable-html" style="height: 300px;">
 <ul class="wrapper">
-    <li><img src="./portrait.jpg" alt="placeholder"></li>
-    <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
     <li><img src="portrait.jpg" alt="placeholder"></li>
     <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
     <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
-    <li><img src="portrait.jpg" alt="placeholder"></li>
-    <li><img src="portrait.jpg" alt="placeholder"></li>
+    <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
     <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
     <li><img src="portrait.jpg" alt="placeholder"></li>
     <li><img src="portrait.jpg" alt="placeholder"></li>
diff --git a/learn/overflow/auto.html b/learn/overflow/auto.html
@@ -11,7 +11,7 @@
     <style class="editable">
       .box {
         border: 1px solid #333333;
-        width: 200px;
+        width: 350px;
         height: 100px;
         overflow: auto;
       }
@@ -26,7 +26,7 @@
     <textarea class="playable playable-css" style="height: 120px;">
 .box {
   border: 1px solid #333333;
-  width: 200px;
+  width: 350px;
   height: 100px;
   overflow: auto;
 }
diff --git a/learn/overflow/block-overflow.html b/learn/overflow/block-overflow.html
@@ -11,7 +11,7 @@
     <style class="editable">
       .box {
         border: 1px solid #333333;
-        width: 200px;
+        width: 350px;
         height: 100px;
       }
     </style>
@@ -25,7 +25,7 @@
     <textarea class="playable playable-css" style="height: 120px;">
 .box {
   border: 1px solid #333333;
-  width: 200px;
+  width: 350px;
   height: 100px;
 }
     </textarea>
diff --git a/learn/overflow/hidden.html b/learn/overflow/hidden.html
@@ -11,7 +11,7 @@
     <style class="editable">
       .box {
         border: 1px solid #333333;
-        width: 200px;
+        width: 350px;
         height: 100px;
         overflow: hidden;
       }
@@ -26,7 +26,7 @@
     <textarea class="playable playable-css" style="height: 120px;">
 .box {
   border: 1px solid #333333;
-  width: 200px;
+  width: 350px;
   height: 100px;
   overflow: hidden;
 }
diff --git a/learn/overflow/scroll-y.html b/learn/overflow/scroll-y.html
@@ -11,7 +11,7 @@
     <style class="editable">
       .box {
         border: 1px solid #333333;
-        width: 200px;
+        width: 350px;
         height: 100px;
         overflow-y: scroll;
       }
@@ -26,7 +26,7 @@
     <textarea class="playable playable-css" style="height: 120px;">
 .box {
   border: 1px solid #333333;
-  width: 200px;
+  width: 350px;
   height: 100px;
   overflow-y: scroll;
 }
diff --git a/learn/overflow/scroll.html b/learn/overflow/scroll.html
@@ -11,7 +11,7 @@
     <style class="editable">
       .box {
         border: 1px solid #333333;
-        width: 200px;
+        width: 350px;
         height: 100px;
         overflow: scroll;
       }
@@ -26,7 +26,7 @@
     <textarea class="playable playable-css" style="height: 120px;">
 .box {
   border: 1px solid #333333;
-  width: 200px;
+  width: 350px;
   height: 100px;
   overflow: scroll;
 }
diff --git a/learn/tasks/values/marking.md b/learn/tasks/values/marking.md
@@ -20,7 +20,7 @@ They have a link to [a color conversion tool](https://convertingcolors.com/hex-c
 }
 
 .transparency {
-  background-color: rgba(134, 222, 250, .2);
+  background-color: rgba(134, 222, 250, .6);
 }
 ```
 
diff --git a/modules/multicol.html b/modules/multicol.html
diff --git a/tools/color-picker/script.js b/tools/color-picker/script.js

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ They have a link to [a color conversion tool](https://convertingcolors.com/hex-c`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.transparency {`
`23`		`- background-color: rgba(134, 222, 250, .2);`
	`23`	`+ background-color: rgba(134, 222, 250, .6);`
`24`	`24`	`}`
`25`	`25`	```
`26`	`26`