Restoring numbering on pseudo-code sections lost in previous change to start using post-processor. Wrapping pre-formatted examples sooner to avoid overflow with the new stylesheet.

Author: BoCupp-Microsoft

css3-grid-align/Overview.html

@@ -19,16 +19,16 @@
           text-align:left
       }
 
-      code > ol {
+      .pseudo-code > ol {
           list-style-type:decimal
       }
-      code > ol > li > ol {
+      .pseudo-code > ol > li > ol {
           list-style-type:lower-latin
       }
-      code > ol > li > ol > li > ol {
+      .pseudo-code > ol > li > ol > li > ol {
           list-style-type:lower-roman
       }
-      code ul {
+      .pseudo-code ul {
           list-style-type:disc
       }
 
@@ -460,14 +460,15 @@ <h3 id=adapting-layouts-to-available-space><span class=secno>2.2.
         /* occupy this column. */
         grid-columns: auto minmax(min-content, 1fr);
 
-        /* Three rows: the first and last sized to content, the middle row receives the remaining */
-        /* space, but is never smaller than the minimum height of the board or stats areas.       */
+        /* Three rows: the first and last sized to content, the middle row receives the        */
+        /* remaining space, but is never smaller than the minimum height of the board or stats */
+        /* areas. */
         grid-rows: auto minmax(min-content, 1fr) auto
     }
 
-    /* Each part of the game is positioned between grid lines by referencing the starting grid line and */
-    /* then specifying, if more than one, the number of rows or columns spanned to determine the ending */
-    /* grid line, which establishes bounds for the part. */
+    /* Each part of the game is positioned between grid lines by referencing the starting grid */
+    /* line and then specifying, if more than one, the number of rows or columns spanned to    */
+    /* determine the ending grid line, which establishes bounds for the part. */
     #title    { grid-column: 1; grid-row: 1 }
     #score    { grid-column: 1; grid-row: 3 }
     #stats    { grid-column: 1; grid-row: 2; grid-row-align: start }
@@ -528,16 +529,17 @@ <h3 id=source-independence0><span class=secno>2.3. </span>Source
         #grid { 
             display: grid;
 
-            /* The rows, columns and cells of the grid are defined visually using the grid-template property.        */
-            /* Each string is a row, and each letter a cell.  The max number of letters in any one string determines */
-            /* the number of columns. */
+            /* The rows, columns and cells of the grid are defined visually using the */
+            /* grid-template property.  Each string is a row, and each letter a cell. */
+            /* The max number of letters in any one string determines the number of   */
+            /* columns. */
             grid-template: "ta"
                            "sa"
                            "bb"
                            "cc";
 
-            /* Columns and rows created with the template property can be assigned a sizing function with the */
-            /* grid-columns and grid-rows properties. */
+            /* Columns and rows created with the template property can be assigned a sizing */
+            /* function with the grid-columns and grid-rows properties. */
             grid-columns: auto minmax(min-content, 1fr); 
             grid-rows: auto auto minmax(min-content, 1fr) auto
         }
@@ -547,8 +549,8 @@ <h3 id=source-independence0><span class=secno>2.3. </span>Source
         #grid { 
             display: grid;
 
-            /* Again the template property defines cells of the same name, but this time positioned differently */
-            /* to better suit a landscape orientation. */
+            /* Again the template property defines cells of the same name, but this time */
+            /* positioned differently to better suit a landscape orientation.            */
             grid-template: "tb"
                            "ab"
                            "sc";
@@ -609,9 +611,9 @@ <h3 id=grid-layering-of-elements0><span class=secno>2.4. </span>Grid
     #grid { 
         display: grid;
 
-        /* The grid-columns and rows properties also support naming grid lines which can then be used */
-        /* to position grid items.  The line names are assigned on either side of a column or row     */
-        /* sizing function where the line would logically exist. */
+        /* The grid-columns and rows properties also support naming grid lines which can then */
+        /* be used to position grid items.  The line names are assigned on either side of a   */
+        /* column or row sizing function where the line would logically exist. */
         grid-columns:      
             "start"        auto 
             "track-start"  0.5fr 
@@ -622,11 +624,13 @@ <h3 id=grid-layering-of-elements0><span class=secno>2.4. </span>Grid
             "end";
     }
 
-    /* Grid-column and grid-row accept a starting and optional endling line.  Below the lines are referred to by name. */
-    /* Beyond any semantic advantage, the names also allow the author to avoid renumbering the grid-row and column     */
-    /* properties of the grid items.  This is similar to the concept demonstrated in the prior example with the        */
-    /* grid-template property during orientation changes, but grid lines can also work with layered grid items that    */
-    /* have overlapping cells of different shapes like the thumb and track parts in this example. */
+    /* Grid-column and grid-row accept a starting and optional endling line.  Below the lines  */
+    /* are referred to by name. Beyond any semantic advantage, the names also allow the author */
+    /* to avoid renumbering the grid-row and column properties of the grid items.  This is     */
+    /* similar to the concept demonstrated in the prior example with the grid-template         */
+    /* property during orientation changes, but grid lines can also work with layered grid     */
+    /* items that have overlapping cells of different shapes like the thumb and track parts    */
+    /* in this example. */
     #lower-label { grid-column: "start" }
     #track       { grid-column: "track-start" "track-end"; grid-row-align: center }
     #upper-label { grid-column: "track-end"; }
@@ -1345,7 +1349,8 @@ <h4 id=computed-values-for-grid-rows-and-grid-c><span class=secno>6.5.2.
 &lt;/div&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
     // Returns '"a" 50px "b" 320px "c" "d" ("e" 40px)[2] (0px)[4] 50px'.
-    window.getComputedStyle(document.getElementById("grid"), null).getPropertyValue("grid-columns")
+    var gridElement = document.getElementById("grid");
+    window.getComputedStyle(gridElement, null).getPropertyValue("grid-columns");
 &lt;/script&gt;</pre>
   <!--End Section: Fraction Values: 'fr'--> </section>
   <!--End Section: Defining Grid Rows and Columns--> </section><section
@@ -2058,24 +2063,27 @@ <h3 id=automatic-placement-of-grid-items0><span class=secno>7.5.
         grid-flow: rows
     }
     form &gt; * {
-        /* Ensure that children of the grid are all valid grid items by setting display to 'block'. */
+        /* Ensure that children of the grid are all valid grid items by setting */
+        /* display to 'block'. */
         display: block;
     }
     form &gt; input, form &gt; select {
-        /* Place all controls in the "controls" column and automatically find the next available row. */
+        /* Place all controls in the "controls" column and automatically find the */
+        /* next available row. */
         grid-column: "controls";
         grid-row: auto
     }
     form &gt; label {
-        /* Place all labels in the "labels" column and automatically find the next available row. */
+        /* Place all labels in the "labels" column and automatically find the next
+        /* available row. */
         grid-column: "labels";
         grid-row: auto
     }
 
     #department {
-        /* Auto place this item in the "oversized" column in the first row where a cell that spans three rows */
-        /* won't overlap other explicitly placed items or cells or any items automatically placed prior to    */
-        /* this cell. */
+        /* Auto place this item in the "oversized" column in the first row where a cell that  */
+        /* spans three rows won't overlap other explicitly placed items or cells or any items */
+        /* automatically placed prior to this cell. */
         grid-column: "oversized";
         grid-row: auto;
         grid-row-span: 3;
@@ -2695,7 +2703,7 @@ <h3 id=grid-track-sizing-algorithm0><span class=secno>10.2. </span>Grid
      <dt> <dfn
       id=function-ComputeUsedBreadthOfGridTracks-algorithm>Algorithm</dfn>
 
-     <dd> <code> </code>
+     <dd class=pseudo-code>
       <ol>
        <li id=initialize-per-grid-track-variables-for->Initialize per <a
         href="#grid-track"><i>Grid track</i></a> variables
@@ -2906,7 +2914,7 @@ <h3 id=grid-track-sizing-algorithm0><span class=secno>10.2. </span>Grid
       id=function-ResolveContentBasedTrackSizingFunctions-algorithm>Algorithm</dfn>
 
 
-     <dd> <code> </code>
+     <dd class=pseudo-code>
       <ol>
        <li id=filter-all-grid-items-into-a-set-g-such->Filter all <a
         href="#grid-item"><i>Grid items</i></a> into a set g, such that each
@@ -3175,7 +3183,7 @@ <h3 id=grid-track-sizing-algorithm0><span class=secno>10.2. </span>Grid
       id=function-ResolveContentBasedTrackSizingFunctionsForItems-algorithm>Algorithm</dfn>
 
 
-     <dd> <code> </code>
+     <dd class=pseudo-code>
       <ol>
        <li id=for-each-grid-track-t-t.updatedtrackbrea>For each <a
         href="#grid-track"><i>Grid track</i></a> t
@@ -3309,7 +3317,7 @@ <h3 id=grid-track-sizing-algorithm0><span class=secno>10.2. </span>Grid
     <dl>
      <dt> <dfn id=function-DistributeSpaceToTracks-algorithm>Algorithm</dfn>
 
-     <dd> <code> </code>
+     <dd class=pseudo-code>
       <ol>
        <li id=sort-tracksforgrowth-by-trackgrowthconst>Sort TracksForGrowth
         by TrackGrowthConstraint( t ) - CurrentBreadth( t ) ascending (where
@@ -3419,7 +3427,7 @@ <h3 id=grid-track-sizing-algorithm0><span class=secno>10.2. </span>Grid
       id=function-CalculateNormalizedFractionBreadth-algorithm>Algorithm</dfn>
 
 
-     <dd> <code> </code>
+     <dd class=pseudo-code>
       <ol>
        <li id=allocatedspace-the-sum-of-the-usedbreadt>allocatedSpace = the
         sum of the UsedBreadth for each <a href="#grid-track"><i>Grid