Merge branch 'main' into cascadelayer

estelle · web-flow · commit bc4ca9ae7520 · 2022-07-20T15:55:32.000-07:00
diff --git a/flow/block-inline/flex.html b/flow/block-inline/flex.html
@@ -92,7 +92,7 @@
       </textarea>
   <textarea id="code" class="playable-html">
 <div class="container">
-    <div>FLex Item</div>
+    <div>Flex Item</div>
     <div>Flex Item</div>
     <div>
         <div>Children</div>
diff --git a/learn/cascade/cascade-layers.html b/learn/cascade/cascade-layers.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>cascade layers demo</title>
+    <link rel="stylesheet" href="../styles.css">
+    <style>
+        
+    </style>
+
+    <style class="editable">
+@layer firstLayer, secondLayer;
+
+p { /* 0-0-1 */
+  background-color: red;
+  color: grey !important;
+  border: 5px inset purple;
+  margin: 15px;
+}
+p#addSpecificity { /* 1-0-1 */
+  border-style: solid !important;
+}
+
+@layer firstLayer {
+  #addSpecificity { /* 1-0-0 */
+    background-color: blue;
+    color: white !important;
+    border-width: 5px;
+    border-style: dashed !important;
+  }
+}
+
+@layer secondLayer {
+  p#addSpecificity { /* 1-0-1 */
+    background-color: green;
+    color: orange !important;
+    border-width: 10px;
+    border-style: dotted !important;
+  }
+}
+
+    </style>
+</head>
+
+<body>
+  <section class="preview">
+        <p id="addSpecificity">
+          A paragraph with a border and background
+        </p>
+  </section>
+
+    <textarea class="playable playable-css" style="height: 280px;">
+@layer firstLayer, secondLayer;
+
+p { /* 0-0-1 */
+  background-color: red;
+  color: grey !important;
+  border: 5px inset purple;
+}
+p#addSpecificity { /* 1-0-1 */
+  border-style: solid !important;
+}
+
+@layer firstLayer {
+  #addSpecificity { /* 1-0-0 */
+    background-color: blue;
+    color: white !important;
+    border-width: 5px;
+    border-style: dashed !important;
+  }
+}
+
+@layer secondLayer {
+  p#addSpecificity { /* 1-0-1 */
+    background-color: green;
+    color: orange !important;
+    border-width: 10px;
+    border-style: dotted !important;
+  }
+}     
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 140px;">
+<p id="addSpecificity">
+  A paragraph with a border and background
+</p>
+    </textarea>
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../playable.js"></script>
+
+</html>
diff --git a/learn/cascade/specificity-boxes.html b/learn/cascade/specificity-boxes.html
@@ -10,37 +10,37 @@
     </style>
 
     <style class="editable">
-/* specificity: 0101 */
+/* 1. specificity: 1-0-1 */
 #outer a {
   background-color: red;
 }
 
-/* specificity: 0201 */
+/* 2. specificity: 2-0-1 */
 #outer #inner a {
   background-color: blue;
 }
 
-/* specificity: 0104 */
+/* 3. specificity: 1-0-4 */
 #outer div ul li a {
   color: yellow;
 }
 
-/* specificity: 0113 */
+/* 4. specificity: 1-1-3 */
 #outer div ul .nav a {
   color: white;
 }
 
-/* specificity: 0024 */
+/* 5. specificity: 0-2-4 */
 div div li:nth-child(2) a:hover {
   border: 10px solid black;
 }
 
-/* specificity: 0023 */
+/* 6. specificity: 0-2-3 */
 div li:nth-child(2) a:hover {
   border: 10px dashed black;
 }
 
-/* specificity: 0033 */
+/* 7. specificity: 0-3-3 */
 div div .nav:nth-child(2) a:hover {
   border: 10px double black;
 }
@@ -81,37 +81,37 @@
 
     <textarea class="playable playable-css" style="height: 280px;">
 
-/* specificity: 0101 */
+/* 1. specificity: 1-0-1 */
 #outer a {
     background-color: red;
 }
         
-/* specificity: 0201 */
+/* 2. specificity: 2-0-1 */
 #outer #inner a {
     background-color: blue;
 }
 
-/* specificity: 0104 */
+/* 3. specificity: 1-0-4 */
 #outer div ul li a {
     color: yellow;
 }
 
-/* specificity: 0113 */
+/* 4. specificity: 1-1-3 */
 #outer div ul .nav a {
     color: white;
 }
 
-/* specificity: 0024 */
+/* 5. specificity: 0-2-4 */
 div div li:nth-child(2) a:hover {
     border: 10px solid black;
 }
 
-/* specificity: 0023 */
+/* 6. specificity: 0-2-3 */
 div li:nth-child(2) a:hover {
     border: 10px dashed black;
 }
 
-/* specificity: 0033 */
+/* 7. specificity: 0-3-3 */
 div div .nav:nth-child(2) a:hover {
     border: 10px double black;
 }
diff --git a/learn/tasks/cascade/cascade-download.html b/learn/tasks/cascade/cascade-download.html
@@ -15,14 +15,14 @@
         margin: 0;
       }
       #outer div ul .nav a {
-        background-color: blue;
+        background-color: yellow;
         padding: 5px;
         display: inline-block;
         margin-bottom: 10px;
       }
 
       div div li a {
-        color: yellow;
+        color: rebeccapurple;
       }
     </style>
   </head>
diff --git a/learn/tasks/cascade/cascade.html b/learn/tasks/cascade/cascade.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="../styles.css">
 
 
+
   <style class="editable">
   #outer div ul .nav a {
     background-color: blue;
@@ -19,6 +20,7 @@
     color: yellow;
   }
   </style>
+
 </head>
 
 <body>
@@ -32,7 +34,6 @@
         </div>
       </div>
     </section>
-
 <textarea class="playable playable-css" style="height: 250px;">
   #outer div ul .nav a {
     background-color: blue;
@@ -63,4 +64,4 @@
 </body>
 <script src="../playable.js"></script>
 
-</html>
+</html>
diff --git a/learn/tasks/float/float1-download.html b/learn/tasks/float/float1-download.html
@@ -23,7 +23,8 @@
         width: 150px;
         height: 150px;
         border-radius: 5px;
-        background-color: rgb(207,232,220);
+        background-color: rebeccapurple;
+        color: #fff;
         padding: 1em;
       }
 
diff --git a/learn/tasks/float/float1.html b/learn/tasks/float/float1.html
@@ -17,7 +17,8 @@
         width: 150px;
         height: 150px;
         border-radius: 5px;
-        background-color: rgb(207,232,220);
+        background-color: rebeccapurple;
+        color: #fff;
         padding: 1em;
       }
     </style>
diff --git a/learn/tasks/float/float2-download.html b/learn/tasks/float/float2-download.html
@@ -23,7 +23,8 @@
         width: 150px;
         height: 150px;
         border-radius: 5px;
-        background-color: rgb(207,232,220);
+        background-color: rebeccapurple;
+        color: #fff;
         padding: 1em;
       }
       .float {
diff --git a/learn/tasks/float/float2.html b/learn/tasks/float/float2.html
@@ -17,7 +17,8 @@
         width: 150px;
         height: 150px;
         border-radius: 5px;
-        background-color: rgb(207,232,220);
+        background-color: rebeccapurple;
+        color: #fff;
         padding: 1em;
       }
     </style>
diff --git a/learn/tasks/float/float3-download.html b/learn/tasks/float/float3-download.html
@@ -30,7 +30,7 @@
       }
 
       .box {
-        background-color: rgb(79,185,227);
+        background-color: rebeccapurple;
         padding: 10px;
         color: #fff;
       }
diff --git a/learn/tasks/float/float3.html b/learn/tasks/float/float3.html
@@ -25,7 +25,7 @@
       }
 
       .box {
-        background-color: rgb(79,185,227);
+        background-color: rebeccapurple;
         padding: 10px;
         color: #fff;
       }
diff --git a/learn/tasks/rwd/marking.md b/learn/tasks/rwd/marking.md
@@ -19,11 +19,11 @@ There is no one right answer however the following code demontrates how simply t
   }
 
   header li {
-    margin: 0; / *remove the margin used in the mobile design */
+    margin: 0; /* remove the margin used in the mobile design */
   }
 
   header a {
-    border: 0; /*remove the border used in the mobile design */
+    border: 0; /* remove the border used in the mobile design */
   }
 
   main {
diff --git a/learn/tasks/values/color-download.html b/learn/tasks/values/color-download.html
@@ -43,7 +43,7 @@
       <li class="hex">hex color</li>
       <li class="rgb">RGB color</li>
       <li class="hsl">HSL color</li>
-      <li class="transparency">Alpha value .2</li>
+      <li class="transparency">Alpha value 0.6</li>
     </ul>
 
   </body>
diff --git a/learn/tasks/values/color.html b/learn/tasks/values/color.html
@@ -43,7 +43,7 @@
           <li class="hex">hex color</li>
           <li class="rgb">RGB color</li>
           <li class="hsl">HSL color</li>
-          <li class="transparency">Alpha value .2</li>
+          <li class="transparency">Alpha value 0.6</li>
         </ul>
     </section>
 
@@ -70,7 +70,7 @@
   <li class="hex">hex color</li>
   <li class="rgb">RGB color</li>
   <li class="hsl">HSL color</li>
-  <li class="transparency">Alpha value .2</li>
+  <li class="transparency">Alpha value 0.6</li>
 </ul>
     </textarea>
 

Original file line number	Diff line number	Diff line change
`@@ -10,37 +10,37 @@`
`10`	`10`	`</style>`
`11`	`11`
`12`	`12`	`<style class="editable">`
`13`		`-/* specificity: 0101 */`
	`13`	`+/* 1. specificity: 1-0-1 */`
`14`	`14`	`#outer a {`
`15`	`15`	`background-color: red;`
`16`	`16`	`}`
`17`	`17`
`18`		`-/* specificity: 0201 */`
	`18`	`+/* 2. specificity: 2-0-1 */`
`19`	`19`	`#outer #inner a {`
`20`	`20`	`background-color: blue;`
`21`	`21`	`}`
`22`	`22`
`23`		`-/* specificity: 0104 */`
	`23`	`+/* 3. specificity: 1-0-4 */`
`24`	`24`	`#outer div ul li a {`
`25`	`25`	`color: yellow;`
`26`	`26`	`}`
`27`	`27`
`28`		`-/* specificity: 0113 */`
	`28`	`+/* 4. specificity: 1-1-3 */`
`29`	`29`	`#outer div ul .nav a {`
`30`	`30`	`color: white;`
`31`	`31`	`}`
`32`	`32`
`33`		`-/* specificity: 0024 */`
	`33`	`+/* 5. specificity: 0-2-4 */`
`34`	`34`	`div div li:nth-child(2) a:hover {`
`35`	`35`	`border: 10px solid black;`
`36`	`36`	`}`
`37`	`37`
`38`		`-/* specificity: 0023 */`
	`38`	`+/* 6. specificity: 0-2-3 */`
`39`	`39`	`div li:nth-child(2) a:hover {`
`40`	`40`	`border: 10px dashed black;`
`41`	`41`	`}`
`42`	`42`
`43`		`-/* specificity: 0033 */`
	`43`	`+/* 7. specificity: 0-3-3 */`
`44`	`44`	`div div .nav:nth-child(2) a:hover {`
`45`	`45`	`border: 10px double black;`
`46`	`46`	`}`
`@@ -81,37 +81,37 @@`
`81`	`81`
`82`	`82`	`<textarea class="playable playable-css" style="height: 280px;">`
`83`	`83`
`84`		`-/* specificity: 0101 */`
	`84`	`+/* 1. specificity: 1-0-1 */`
`85`	`85`	`#outer a {`
`86`	`86`	`background-color: red;`
`87`	`87`	`}`
`88`	`88`
`89`		`-/* specificity: 0201 */`
	`89`	`+/* 2. specificity: 2-0-1 */`
`90`	`90`	`#outer #inner a {`
`91`	`91`	`background-color: blue;`
`92`	`92`	`}`
`93`	`93`
`94`		`-/* specificity: 0104 */`
	`94`	`+/* 3. specificity: 1-0-4 */`
`95`	`95`	`#outer div ul li a {`
`96`	`96`	`color: yellow;`
`97`	`97`	`}`
`98`	`98`
`99`		`-/* specificity: 0113 */`
	`99`	`+/* 4. specificity: 1-1-3 */`
`100`	`100`	`#outer div ul .nav a {`
`101`	`101`	`color: white;`
`102`	`102`	`}`
`103`	`103`
`104`		`-/* specificity: 0024 */`
	`104`	`+/* 5. specificity: 0-2-4 */`
`105`	`105`	`div div li:nth-child(2) a:hover {`
`106`	`106`	`border: 10px solid black;`
`107`	`107`	`}`
`108`	`108`
`109`		`-/* specificity: 0023 */`
	`109`	`+/* 6. specificity: 0-2-3 */`
`110`	`110`	`div li:nth-child(2) a:hover {`
`111`	`111`	`border: 10px dashed black;`
`112`	`112`	`}`
`113`	`113`
`114`		`-/* specificity: 0033 */`
	`114`	`+/* 7. specificity: 0-3-3 */`
`115`	`115`	`div div .nav:nth-child(2) a:hover {`
`116`	`116`	`border: 10px double black;`
`117`	`117`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,14 +15,14 @@`
`15`	`15`	`margin: 0;`
`16`	`16`	`}`
`17`	`17`	`#outer div ul .nav a {`
`18`		`- background-color: blue;`
	`18`	`+ background-color: yellow;`
`19`	`19`	`padding: 5px;`
`20`	`20`	`display: inline-block;`
`21`	`21`	`margin-bottom: 10px;`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`div div li a {`
`25`		`- color: yellow;`
	`25`	`+ color: rebeccapurple;`
`26`	`26`	`}`
`27`	`27`	`</style>`
`28`	`28`	`</head>`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,8 @@`
`23`	`23`	`width: 150px;`
`24`	`24`	`height: 150px;`
`25`	`25`	`border-radius: 5px;`
`26`		`- background-color: rgb(207,232,220);`
	`26`	`+ background-color: rebeccapurple;`
	`27`	`+ color: #fff;`
`27`	`28`	`padding: 1em;`
`28`	`29`	`}`
`29`	`30`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.box {`
`33`		`- background-color: rgb(79,185,227);`
	`33`	`+ background-color: rebeccapurple;`
`34`	`34`	`padding: 10px;`
`35`	`35`	`color: #fff;`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.box {`
`28`		`- background-color: rgb(79,185,227);`
	`28`	`+ background-color: rebeccapurple;`
`29`	`29`	`padding: 10px;`
`30`	`30`	`color: #fff;`
`31`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,11 +19,11 @@ There is no one right answer however the following code demontrates how simply t`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`header li {`
`22`		`- margin: 0; / remove the margin used in the mobile design /`
	`22`	`+ margin: 0; /* remove the margin used in the mobile design */`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`header a {`
`26`		`- border: 0; /remove the border used in the mobile design /`
	`26`	`+ border: 0; /* remove the border used in the mobile design */`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`main {`