rebuild docs

docs/index.html

@@ -12,7 +12,7 @@
   float: left;
 }
 </code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <div class="snippet-demo__clearfix"> <div class="snippet-demo__floated">float a</div> <div class="snippet-demo__floated">float b</div> <div class="snippet-demo__floated">float c</div> </div> </div> <style>.snippet-demo__clearfix:after{content:"";display:table;clear:both}.snippet-demo__floated{float:left}.snippet-demo__custom-text-selection::selection{background:red;color:#fff}:root{--ease-in-quad:cubic-bezier(0.55,0.085,0.68,0.53);--ease-in-cubic:cubic-bezier(0.55,0.055,0.675,0.19);--ease-in-quart:cubic-bezier(0.895,0.03,0.685,0.22);--ease-in-quint:cubic-bezier(0.755,0.05,0.855,0.06);--ease-in-expo:cubic-bezier(0.95,0.05,0.795,0.035);--ease-in-circ:cubic-bezier(0.6,0.04,0.98,0.335);--ease-out-quad:cubic-bezier(0.25,0.46,0.45,0.94);--ease-out-cubic:cubic-bezier(0.215,0.61,0.355,1);--ease-out-quart:cubic-bezier(0.165,0.84,0.44,1);--ease-out-quint:cubic-bezier(0.23,1,0.32,1);--ease-out-expo:cubic-bezier(0.19,1,0.22,1);--ease-out-circ:cubic-bezier(0.075,0.82,0.165,1);--ease-in-out-quad:cubic-bezier(0.455,0.03,0.515,0.955);--ease-in-out-cubic:cubic-bezier(0.645,0.045,0.355,1);--ease-in-out-quart:cubic-bezier(0.77,0,0.175,1);--ease-in-out-quint:cubic-bezier(0.86,0,0.07,1);--ease-in-out-expo:cubic-bezier(1,0,0,1);--ease-in-out-circ:cubic-bezier(0.785,0.135,0.15,0.86)}.snippet-demo__easing-variables{width:75px;height:75px;background:#333;color:#fff;font-size:.8rem;font-weight:700;display:flex;justify-content:center;align-items:center;transition:transform 1s var(--ease-out-quart)}.snippet-demo__easing-variables:hover{transform:rotate(45deg)}.snippet-demo__etched-text{font-size:1.5rem;font-weight:700;color:#b8bec5;text-shadow:0 2px 0 #fff}.snippet-demo__gradient-text{background:-webkit-linear-gradient(pink,red);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2rem;font-weight:700;margin:0}.snippet-demo__hairline-border{box-shadow:0 0 0 1px}@media (min-resolution:2dppx){.snippet-demo__hairline-border{box-shadow:0 0 0 .5px}}@media (min-resolution:3dppx){.snippet-demo__hairline-border{box-shadow:0 0 0 .33333333px}}@media (min-resolution:4dppx){.snippet-demo__hairline-border{box-shadow:0 0 0 .25px}}.snippet-demo__horizontal-and-vertical-centering{display:flex;justify-content:center;align-items:center;height:200px}.snippet-demo__mouse-cursor-gradient-tracking{position:relative;background:#2379f7;padding:.5rem 1rem;font-size:1.2rem;border:none;color:#fff;cursor:pointer;outline:none;overflow:hidden}.snippet-demo__mouse-cursor-gradient-tracking span{position:relative}.snippet-demo__mouse-cursor-gradient-tracking:before{--size:0;content:"";position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:radial-gradient(circle closest-side,aqua,rgba(0,255,255,.0001));transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease}.snippet-demo__mouse-cursor-gradient-tracking:hover:before{--size:200px}.snippet-demo__overflow-scroll-gradient{position:relative}.snippet-demo__overflow-scroll-gradient:after{content:"";background:linear-gradient(hsla(0,0%,100%,.001),#fff);position:absolute;width:300px;height:25px;bottom:0}.snippet-demo__overflow-scroll-gradient__scroller{overflow-y:scroll;background:#fff;width:300px;height:250px;line-height:1.2;text-align:center}.snippet-demo__reference{background:linear-gradient(135deg,#ff4c9f,#ff7b74);height:75px;width:75px;position:relative;will-change:transform}.snippet-demo__popout-menu{position:absolute;visibility:hidden;left:100%;background:#333;color:#fff;font-size:.9rem;padding:.4rem .8rem;width:100px;text-align:center}.snippet-demo__reference:hover>.snippet-demo__popout-menu{visibility:visible}.snippet-demo__pretty-text-underline{display:inline;font-size:18px!important;text-shadow:1px 1px 0 #f5f6f9,-1px 1px 0 #f5f6f9,-1px -1px 0 #f5f6f9,1px -1px 0 #f5f6f9;background-image:linear-gradient(90deg,currentColor 100%,transparent 0);background-position:0 1.04em;background-repeat:repeat-x;background-size:1px 1px}.snippet-demo__pretty-text-underline::selection{background-color:rgba(0,150,255,.3);text-shadow:none}.snippet-demo__shape-separator{position:relative;height:48px;margin:-.75rem -1.25rem}.snippet-demo__shape-separator:after{content:"";background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);position:absolute;width:100%;height:24px;bottom:0}.snippet-demo__system-font-stack{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif}.snippet-demo__triangles{display:flex;align-items:center}.snippet-demo__triangle{display:inline-block;width:0;height:0;margin-right:.25rem}.snippet-demo__triangle-1{border-top:20px solid #333}.snippet-demo__triangle-1,.snippet-demo__triangle-2{border-left:20px solid transparent;border-right:20px solid transparent}.snippet-demo__triangle-2{border-bottom:20px solid #333}.snippet-demo__triangle-3{border-left:20px solid #333}.snippet-demo__triangle-3,.snippet-demo__triangle-4{border-top:20px solid transparent;border-bottom:20px solid transparent}.snippet-demo__triangle-4{border-right:20px solid #333}.snippet-demo__triangle-5{border-top:40px solid #333;border-left:15px solid transparent;border-right:15px solid transparent}.snippet-demo__truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:200px;margin:0}</style> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>.clearfix::after</code> defines a pseudo element.</li> <li><code>content: ''</code> allows the pseudo element to affect layout.</li> <li><code>clear: both</code> indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 99+% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> </div> <div class="snippet"> <h3 id="custom-text-selection">Custom text selection</h3> <p>Changes the styling of text selection.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="custom-text-selection"&gt;Select some of this text.&lt;/p&gt;
-</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.text-selection::selection {
+</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.custom-text-selection::selection {
   background: red;
   color: white;
 }

index.html

@@ -103,7 +103,7 @@ <h3 id="custom-text-selection">Custom text selection</h3>
             <p>Changes the styling of text selection.</p>
             <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="custom-text-selection"&gt;Select some of this text.&lt;/p&gt;
 </code></pre>
-            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.text-selection::selection {
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.custom-text-selection::selection {
   background: red;
   color: white;
 }