rebuild docs

docs/js.82fb0ae8.js

@@ -31,4 +31,4 @@ var o,n=arguments[3],t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterat
 },{"../deps/utils":"Xw/u"}],"mahc":[function(require,module,exports) {
 "use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=require("feather-icons"),r=l(e);require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var s=require("./components/Sidebar"),i=l(s),o=require("./components/BackToTopButton"),u=l(o),n=require("./components/Tag"),c=l(n),p=require("./components/Snippet"),t=l(p),q=require("./components/CodepenCopy"),a=l(q);function l(e){return e&&e.__esModule?e:{default:e}}r.default.replace();
 },{"focus-visible":"PHYi","normalize.css":"9KIJ","prismjs":"HxJM","feather-icons":"2Os9","../css/deps/prism.css":"9KIJ","../css/index.scss":"9KIJ","./deps/polyfills":"C1Ar","./components/Sidebar":"bnBP","./components/BackToTopButton":"/f8x","./components/Tag":"uI+q","./components/Snippet":"7KYq","./components/CodepenCopy":"JXhB"}]},{},["mahc"], null)
-//# sourceMappingURL=js.ffc6b513.map
+//# sourceMappingURL=js.82fb0ae8.map

index.html

@@ -25,13 +25,13 @@
           <a class="sidebar__link" href="#box-sizing-reset"><span>Box-sizing reset</span></a>
           <a class="sidebar__link" href="#clearfix"><span>Clearfix</span></a>
           <a class="sidebar__link" href="#constant-width-to-height-ratio"><span>Constant width to height ratio</span></a>
-          <a class="sidebar__link" href="#display-table-centering"><span>Display Table Centering</span></a>
+          <a class="sidebar__link" href="#display-table-centering"><span>Display table centering</span></a>
           <a class="sidebar__link" href="#evenly-distributed-children"><span>Evenly distributed children</span></a>
           <a class="sidebar__link" href="#flexbox-centering"><span>Flexbox centering</span></a>
           <a class="sidebar__link" href="#grid-centering"><span>Grid centering</span></a>
           <a class="sidebar__link" href="#grid-layout"><span>Grid layout</span></a>
-          <a class="sidebar__link" href="#last-item-will-all-available-height"><span>Last item with all available height</span></a>
+          <a class="sidebar__link" href="#last-item-with-remaining-available-height"><span>Last item with remaining available height</span></a>
-          <a class="sidebar__link" href="#transform-centering"><span>Transform Centering</span></a>
+          <a class="sidebar__link" href="#transform-centering"><span>Transform centering</span></a>
           <a class="sidebar__link" href="#truncate-text"><span>Truncate text</span></a>
         </section>
         <section data-type="visual" class="sidebar__section">
@@ -208,7 +208,7 @@
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                93.2%
+                95.3%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -255,7 +255,7 @@
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                96.2%
+                98.4%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -297,7 +297,7 @@
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                93.5%
+                95.5%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -486,7 +486,7 @@ li::before {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                96.2%
+                98.4%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -561,7 +561,7 @@ li::before {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                86.6%
+                88.0%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span></p>
@@ -606,7 +606,7 @@ li::before {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                82.8%
+                84.9%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Requires prefixes for full support and is not actually
@@ -664,7 +664,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                86.8%
+                88.0%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -701,7 +701,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                86.9%
+                87.2%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
@@ -715,8 +715,8 @@ in any specification.</span></p>
             <!-- tags: interactivity -->
           </div>
           <div class="snippet">
-            <h3 id="display-table-centering"><span>Display Table Centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
+            <h3 id="display-table-centering"><span>Display table centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
-            <p>Vertically and horitonally centers a child element within its parent element using <code>display: table</code> (as an alternative to <code>flexbox</code>).</p>
+            <p>Vertically and horizontally centers a child element within its parent element using <code>display: table</code> (as an alternative to <code>flexbox</code>).</p>
             <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="container"&gt;
   &lt;div class="center"&gt;
     &lt;span&gt;Centered content&lt;/span&gt;
@@ -839,7 +839,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                93.2%
+                95.3%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@@ -918,7 +918,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                89.9%
+                91.7%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@@ -1012,7 +1012,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                86.8%
+                88.0%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1055,7 +1055,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.8%
+                98.1%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1105,7 +1105,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.7%
+                98.1%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@@ -1153,7 +1153,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.7%
+                98.1%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@@ -1201,7 +1201,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                89.6%
+                91.5%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Uses non-standard properties.</span></p>
@@ -1249,7 +1249,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                87.3%
+                87.6%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1351,7 +1351,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                87.3%
+                87.6%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1419,7 +1419,7 @@ in any specification.</span></p>
             <h4>Browser Support</h4>
             <div>
               <div class="snippet__browser-support">
-                93.4%
+                95.5%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span></p>
@@ -1502,7 +1502,7 @@ el.style.setProperty('--max-height', height + 'px')
             <h4>Browser Support</h4>
             <div>
               <div class="snippet__browser-support">
-                86.8%
+                88.0%
               </div>
             </div>
             <p></p>
@@ -1599,7 +1599,7 @@ el.style.setProperty('--max-height', height + 'px')
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                93.3%
+                95.4%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1615,8 +1615,8 @@ el.style.setProperty('--max-height', height + 'px')
             <!-- tags: animation -->
           </div>
           <div class="snippet">
-            <h3 id="last-item-with-all-available-height"><span>Last item with all available height</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
+            <h3 id="last-item-with-remaining-available-height"><span>Last item with remaining available height</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
-            <p>Avoid vertical scrollbar and take advantage of current viewport space. Given the last element with all available space in current viewport, even when resizing window.</p>
+            <p>Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.</p>
             <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="container"&gt;
   &lt;div&gt;Div 1&lt;/div&gt;
   &lt;div&gt;Div 2&lt;/div&gt;
@@ -1660,16 +1660,16 @@ body {
             </style>
             <h4>Explanation</h4>
             <ol>
-              <li><code>height: 100%</code> set the height of container as viewport height</li>
+              <li><code>height: 100%</code> set the height of container as viewport height.</li>
               <li><code>display: flex</code> enables flexbox.</li>
-              <li><code>flex-direction: column</code> set the direction of flex items' order from top to down</li>
+              <li><code>flex-direction: column</code> set the direction of flex items' order from top to down.</li>
               <li><code>flex-grow: 1</code> the flexbox will apply remaining available space of container to last child element.</li>
             </ol>
             <p>The parent must have a viewport height. <code>flex-grow: 1</code> could be applied to the first or second element, which will have all available space.</p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.7%
+                98.1%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@@ -1790,7 +1790,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                86.8%
+                88.0%
               </div>
             </div>
             <p></p>
@@ -1857,7 +1857,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                96.2%
+                98.4%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -2038,7 +2038,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                93.2%
+                95.4%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -2177,7 +2177,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                93.2%
+                95.4%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -2221,7 +2221,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                86.7%
+                88.3%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ MS Edge status is under consideration.</span></p>
@@ -2286,7 +2286,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.9%
+                98.3%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -2351,7 +2351,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                93.3%
+                95.4%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -2409,8 +2409,8 @@ li:not(:last-child) {
             <!-- tags: visual -->
           </div>
           <div class="snippet">
-            <h3 id="transform-centering"><span>Transform Centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
+            <h3 id="transform-centering"><span>Transform centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
-            <p>Vertically and horitonally centers a child element within its parent element using <code>position: absolute</code> and <code>transform: translate()</code> (as an alternative to <code>flexbox</code> or <code>display: table</code>). Similar
+            <p>Vertically and horizontally centers a child element within its parent element using <code>position: absolute</code> and <code>transform: translate()</code> (as an alternative to <code>flexbox</code> or <code>display: table</code>). Similar
               to <code>flexbox</code>, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.</p>
             <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="parent"&gt;
   &lt;div class="child"&gt;Centered content&lt;/div&gt;
@@ -2584,7 +2584,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                96.1%
+                98.4%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p>