From df9d010d19f0c7f0adcab51b056658889d550f10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20Ljungstr=C3=B6m?= Date: Tue, 27 Feb 2018 09:44:44 +0100 Subject: [PATCH 01/15] Add caveat to Pretty Text Underline The caveat described is visible in Firefox, at least. --- snippets/pretty-text-underline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md index 3f3012ce5..6dd6c6557 100644 --- a/snippets/pretty-text-underline.md +++ b/snippets/pretty-text-underline.md @@ -69,7 +69,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control #### Browser support -✅ No caveats. +⚠️ When selecting the text some browsers will also select the text shadow, making the text look very heavy. * https://caniuse.com/#feat=css-textshadow * https://caniuse.com/#feat=css-gradients From cfd8c77b058ea00724261b986b28e998975f1e3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20Ljungstr=C3=B6m?= Date: Tue, 27 Feb 2018 13:38:45 +0100 Subject: [PATCH 02/15] Add firefox vendor prefix code and warning --- snippets/pretty-text-underline.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md index 6dd6c6557..e1a45c062 100644 --- a/snippets/pretty-text-underline.md +++ b/snippets/pretty-text-underline.md @@ -24,6 +24,10 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control background-repeat: repeat-x; background-size: 1px 1px; } +.pretty-text-underline::-moz-selection { + background-color: rgba(0, 150, 255, 0.3); + text-shadow: none; +} .pretty-text-underline::selection { background-color: rgba(0, 150, 255, 0.3); text-shadow: none; @@ -50,6 +54,11 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control background-size: 1px 1px; } +.snippet-demo__pretty-text-underline::-moz-selection { + background-color: rgba(0, 150, 255, 0.3); + text-shadow: none; +} + .snippet-demo__pretty-text-underline::selection { background-color: rgba(0, 150, 255, 0.3); text-shadow: none; @@ -69,7 +78,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control #### Browser support -⚠️ When selecting the text some browsers will also select the text shadow, making the text look very heavy. +⚠️ Firefox requires a vendor prefix for the selection pseudo-selector to work. * https://caniuse.com/#feat=css-textshadow * https://caniuse.com/#feat=css-gradients From 37a4bc19fb40eecb74dad4c9e632b4cbccf76a60 Mon Sep 17 00:00:00 2001 From: Limon Monte Date: Tue, 27 Feb 2018 15:19:27 +0200 Subject: [PATCH 03/15] Fix ellipsis character --- snippets/truncate-text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/truncate-text.md b/snippets/truncate-text.md index 653432f7a..58f4db15d 100644 --- a/snippets/truncate-text.md +++ b/snippets/truncate-text.md @@ -1,6 +1,6 @@ ### Truncate text -If the text is longer than one line, it will be truncated and end with an ellipsis `...`. +If the text is longer than one line, it will be truncated and end with an ellipsis `…`. #### HTML From 05178e6c7b6039caa1866c579922653b39cdbe0c Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 27 Feb 2018 17:53:19 +0200 Subject: [PATCH 04/15] [LICENSE] Creative Commons Zero v1.0 Universal Adds CC0 1.0 Universal License to the repo (same one as 30-seconds-of-code). --- LICENSE | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..670154e35 --- /dev/null +++ b/LICENSE @@ -0,0 +1,116 @@ +CC0 1.0 Universal + +Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator and +subsequent owner(s) (each and all, an "owner") of an original work of +authorship and/or a database (each, a "Work"). + +Certain owners wish to permanently relinquish those rights to a Work for the +purpose of contributing to a commons of creative, cultural and scientific +works ("Commons") that the public can reliably and without fear of later +claims of infringement build upon, modify, incorporate in other works, reuse +and redistribute as freely as possible in any form whatsoever and for any +purposes, including without limitation commercial purposes. These owners may +contribute to the Commons to promote the ideal of a free culture and the +further production of creative, cultural and scientific works, or to gain +reputation or greater distribution for their Work in part through the use and +efforts of others. + +For these and/or other purposes and motivations, and without any expectation +of additional consideration or compensation, the person associating CC0 with a +Work (the "Affirmer"), to the extent that he or she is an owner of Copyright +and Related Rights in the Work, voluntarily elects to apply CC0 to the Work +and publicly distribute the Work under its terms, with knowledge of his or her +Copyright and Related Rights in the Work and the meaning and intended legal +effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be +protected by copyright and related or neighboring rights ("Copyright and +Related Rights"). Copyright and Related Rights include, but are not limited +to, the following: + + i. the right to reproduce, adapt, distribute, perform, display, communicate, + and translate a Work; + + ii. moral rights retained by the original author(s) and/or performer(s); + + iii. publicity and privacy rights pertaining to a person's image or likeness + depicted in a Work; + + iv. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(a), below; + + v. rights protecting the extraction, dissemination, use and reuse of data in + a Work; + + vi. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation thereof, + including any amended or successor version of such directive); and + + vii. other similar, equivalent or corresponding rights throughout the world + based on applicable law or treaty, and any national implementations thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention of, +applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and +unconditionally waives, abandons, and surrenders all of Affirmer's Copyright +and Related Rights and associated claims and causes of action, whether now +known or unknown (including existing as well as future claims and causes of +action), in the Work (i) in all territories worldwide, (ii) for the maximum +duration provided by applicable law or treaty (including future time +extensions), (iii) in any current or future medium and for any number of +copies, and (iv) for any purpose whatsoever, including without limitation +commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes +the Waiver for the benefit of each member of the public at large and to the +detriment of Affirmer's heirs and successors, fully intending that such Waiver +shall not be subject to revocation, rescission, cancellation, termination, or +any other legal or equitable action to disrupt the quiet enjoyment of the Work +by the public as contemplated by Affirmer's express Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason be +judged legally invalid or ineffective under applicable law, then the Waiver +shall be preserved to the maximum extent permitted taking into account +Affirmer's express Statement of Purpose. In addition, to the extent the Waiver +is so judged Affirmer hereby grants to each affected person a royalty-free, +non transferable, non sublicensable, non exclusive, irrevocable and +unconditional license to exercise Affirmer's Copyright and Related Rights in +the Work (i) in all territories worldwide, (ii) for the maximum duration +provided by applicable law or treaty (including future time extensions), (iii) +in any current or future medium and for any number of copies, and (iv) for any +purpose whatsoever, including without limitation commercial, advertising or +promotional purposes (the "License"). The License shall be deemed effective as +of the date CC0 was applied by Affirmer to the Work. Should any part of the +License for any reason be judged legally invalid or ineffective under +applicable law, such partial invalidity or ineffectiveness shall not +invalidate the remainder of the License, and in such case Affirmer hereby +affirms that he or she will not (i) exercise any of his or her remaining +Copyright and Related Rights in the Work or (ii) assert any associated claims +and causes of action with respect to the Work, in either case contrary to +Affirmer's express Statement of Purpose. + +4. Limitations and Disclaimers. + + a. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + + b. Affirmer offers the Work as-is and makes no representations or warranties + of any kind concerning the Work, express, implied, statutory or otherwise, + including without limitation warranties of title, merchantability, fitness + for a particular purpose, non infringement, or the absence of latent or + other defects, accuracy, or the present or absence of errors, whether or not + discoverable, all to the greatest extent permissible under applicable law. + + c. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without limitation + any person's Copyright and Related Rights in the Work. Further, Affirmer + disclaims responsibility for obtaining any necessary consents, permissions + or other rights required for any use of the Work. + + d. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to this + CC0 or use of the Work. + +For more information, please see + From 468a67c12ca0ae872253972196fdb9a72d09b43f Mon Sep 17 00:00:00 2001 From: atomiks Date: Wed, 28 Feb 2018 05:32:23 +1000 Subject: [PATCH 05/15] rebuild docs --- docs/4d4edbda57043aeeabeac31d2dd12d0d.js | 6 +++--- docs/index.html | 10 +++++++--- index.html | 12 ++++++++++-- 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js index 8ac739f4b..39f493b20 100644 --- a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js +++ b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js @@ -1,6 +1,6 @@ -require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;ie.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight)); },{}],11:[function(require,module,exports) { @@ -16,4 +16,4 @@ var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iter "use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})}; },{"../deps/jump":14,"../deps/utils":15}],7:[function(require,module,exports) { "use strict";require("normalize.css"),require("prismjs"),require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var e=require("./components/Menu"),s=u(e),r=require("./components/BackToTopButton"),i=u(r);function u(e){return e&&e.__esModule?e:{default:e}} -},{"normalize.css":16,"prismjs":17,"../css/deps/prism.css":16,"../css/index.scss":16,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7]) \ No newline at end of file +},{"normalize.css":17,"prismjs":16,"../css/deps/prism.css":17,"../css/index.scss":17,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7]) \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 76a730895..a24958ed4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,7 +11,7 @@ .floated { float: left; } -

Demo

float a
float b
float c

Explanation

  1. .clearfix::after defines a pseudo-element.
  2. content: '' allows the pseudo-element to affect layout.
  3. clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.

Browser support

99+%

✅ No caveats.

Constant width to height ratio

Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).

HTML

<div class="constant-width-to-height-ratio"></div>
+

Demo

float a
float b
float c

Explanation

  1. .clearfix::after defines a pseudo-element.
  2. content: '' allows the pseudo-element to affect layout.
  3. clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.

Browser support

99+%

✅ No caveats.

Constant width to height ratio

Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).

HTML

<div class="constant-width-to-height-ratio"></div>

CSS

.constant-width-to-height-ratio {
   background: #333;
   width: 50%;
@@ -187,11 +187,15 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }
+.pretty-text-underline::-moz-selection {
+  background-color: rgba(0, 150, 255, 0.3);
+  text-shadow: none;
+}
 .pretty-text-underline::selection {
   background-color: rgba(0, 150, 255, 0.3);
   text-shadow: none;
 }
-

Demo

Pretty text underline without clipping descending letters.

Explanation

  1. text-shadow: ... has 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger px size.
  2. background-image: linear-gradient(...) creates a 90deg gradient with the current text color (currentColor).
  3. The background-* properties size the gradient as 1x1px at the bottom and repeats it along the x-axis.
  4. The ::selection pseudo selector ensures the text shadow does not interfere with text selection.

Browser support

94.8%

✅ No caveats.

Shape separator

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

HTML

<div class="shape-separator"></div>
+

Demo

Pretty text underline without clipping descending letters.

Explanation

  1. text-shadow: ... has 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger px size.
  2. background-image: linear-gradient(...) creates a 90deg gradient with the current text color (currentColor).
  3. The background-* properties size the gradient as 1x1px at the bottom and repeats it along the x-axis.
  4. The ::selection pseudo selector ensures the text shadow does not interfere with text selection.

Browser support

94.8%

⚠️ Firefox requires a vendor prefix for the selection pseudo-selector to work.

Shape separator

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

HTML

<div class="shape-separator"></div>

CSS

.shape-separator {
   position: relative;
   height: 48px;
@@ -216,7 +220,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
 }
-

Demo

Explanation

View this link for a detailed explanation.

The color of the border is the color of the triangle. The side the triangle tip points corresponds to the opposite border-* property. For example, a color on border-top means the arrow points downward.

Experiment with the px values to change the proportion of the triangle.

Browser support

99+%

✅ No caveats.

Truncate text

If the text is longer than one line, it will be truncated and end with an ellipsis ....

HTML

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
+

Demo

Explanation

View this link for a detailed explanation.

The color of the border is the color of the triangle. The side the triangle tip points corresponds to the opposite border-* property. For example, a color on border-top means the arrow points downward.

Experiment with the px values to change the proportion of the triangle.

Browser support

99+%

✅ No caveats.

Truncate text

If the text is longer than one line, it will be truncated and end with an ellipsis ….

HTML

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

CSS

.truncate-text {
   overflow: hidden;
   white-space: nowrap;
diff --git a/index.html b/index.html
index da9624dbc..31772d19f 100644
--- a/index.html
+++ b/index.html
@@ -758,6 +758,10 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }
+.pretty-text-underline::-moz-selection {
+  background-color: rgba(0, 150, 255, 0.3);
+  text-shadow: none;
+}
 .pretty-text-underline::selection {
   background-color: rgba(0, 150, 255, 0.3);
   text-shadow: none;
@@ -777,6 +781,10 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
                 background-repeat: repeat-x;
                 background-size: 1px 1px;
               }
+              .snippet-demo__pretty-text-underline::-moz-selection {
+                background-color: rgba(0, 150, 255, 0.3);
+                text-shadow: none;
+              }
               .snippet-demo__pretty-text-underline::selection {
                 background-color: rgba(0, 150, 255, 0.3);
                 text-shadow: none;
@@ -797,7 +805,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
                 94.8%
-

✅ No caveats.

+

⚠️ Firefox requires a vendor prefix for the selection pseudo-selector to work.

  • https://caniuse.com/#feat=css-textshadow @@ -983,7 +991,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

    Truncate text

    -

    If the text is longer than one line, it will be truncated and end with an ellipsis ....

    +

    If the text is longer than one line, it will be truncated and end with an ellipsis ….

    HTML

    <p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

    CSS

    .truncate-text {

From 10b866ba178a8d42890c1d25b07ddde76566af91 Mon Sep 17 00:00:00 2001
From: atomiks 
Date: Wed, 28 Feb 2018 05:36:01 +1000
Subject: [PATCH 06/15] fix #17

---
 docs/4d4edbda57043aeeabeac31d2dd12d0d.js   | 6 +++---
 docs/index.html                            | 2 +-
 index.html                                 | 4 ++--
 snippets/constant-width-to-height-ratio.md | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
index 39f493b20..8ac739f4b 100644
--- a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
+++ b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
@@ -1,6 +1,6 @@
-require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;ie.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight));
 },{}],11:[function(require,module,exports) {
@@ -16,4 +16,4 @@ var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iter
 "use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})};
 },{"../deps/jump":14,"../deps/utils":15}],7:[function(require,module,exports) {
 "use strict";require("normalize.css"),require("prismjs"),require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var e=require("./components/Menu"),s=u(e),r=require("./components/BackToTopButton"),i=u(r);function u(e){return e&&e.__esModule?e:{default:e}}
-},{"normalize.css":17,"prismjs":16,"../css/deps/prism.css":17,"../css/index.scss":17,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7])
\ No newline at end of file
+},{"normalize.css":16,"prismjs":17,"../css/deps/prism.css":16,"../css/index.scss":16,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7])
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index a24958ed4..10fda79e7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -17,7 +17,7 @@
   width: 50%;
   padding-top: 50%;
 }
-

    Demo

    Resize your browser window to see the proportion of the element remain the same.

    Explanation

    padding-top and padding-bottom can be used as an alternative to height such that the percentage value causes an element's height to become a percentage of its width, i.e. 50% means the height will be 50% of the element's width. This allows its proportion to remain constant.

    Browser support

    99+%

    ⚠️ padding-top pushes any content within the element to the bottom.

    Custom text selection

    Changes the styling of text selection.

    HTML

    <p class="custom-text-selection">Select some of this text.</p>
+

    Demo

    Resize your browser window to see the proportion of the element remain the same.

    Explanation

    padding-top and padding-bottom can be used as an alternative to height such that the percentage value causes an element's height to become a percentage of its parent's width, i.e. 50% means the height will be 50% of the parent element's width, which means it acts the same as width. This allows its proportion to remain constant.

    Browser support

    99+%

    ⚠️ padding-top pushes any content within the element to the bottom.

    Custom text selection

    Changes the styling of text selection.

    HTML

    <p class="custom-text-selection">Select some of this text.</p>

    CSS

    .custom-text-selection::selection {
   background: red;
   color: white;
diff --git a/index.html b/index.html
index 31772d19f..548f0695a 100644
--- a/index.html
+++ b/index.html
@@ -124,8 +124,8 @@
               }
             
             
    Explanation
    
-            
    padding-top and padding-bottom can be used as an alternative to height such that the percentage value causes an element's height to become a percentage of its width, i.e. 50% means the height
-              will be 50% of the element's width. This allows its proportion to remain constant.
    
+            
    padding-top and padding-bottom can be used as an alternative to height such that the percentage value causes an element's height to become a percentage of its parent's width, i.e. 50% means
+              the height will be 50% of the parent element's width, which means it acts the same as width. This allows its proportion to remain constant.
    
             
    Browser support
    
             
    
               
    
diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md
index fb2eb53e9..ff7ef0122 100644
--- a/snippets/constant-width-to-height-ratio.md
+++ b/snippets/constant-width-to-height-ratio.md
@@ -38,7 +38,7 @@ Resize your browser window to see the proportion of the element remain the same.
 #### Explanation
 
 `padding-top` and `padding-bottom` can be used as an alternative to `height` such that the percentage value
-causes an element's height to become a percentage of its width, i.e. `50%` means the height will be 50% of the element's width. This allows its proportion to remain constant.
+causes an element's height to become a percentage of its parent's width, i.e. `50%` means the height will be 50% of the parent element's width, which means it acts the same as `width`. This allows its proportion to remain constant.
 
 #### Browser support
 

From 528be97e5b14570b381cedf23371ff047b885e7a Mon Sep 17 00:00:00 2001
From: Jack Moore 
Date: Tue, 27 Feb 2018 14:51:27 -0500
Subject: [PATCH 07/15] Disable pointer events on pseudo element

This disables pointer events on the pseudo element so that it won't block clicks to the content element.
---
 snippets/overflow-scroll-gradient.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md
index de850bd81..c0010ddb6 100644
--- a/snippets/overflow-scroll-gradient.md
+++ b/snippets/overflow-scroll-gradient.md
@@ -25,6 +25,7 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
   width: 300px;
   height: 25px;
   background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
+  pointer-events: none;
 }
 .overflow-scroll-gradient__scroller {
   overflow-y: scroll;
@@ -58,6 +59,7 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
   width: 300px;
   height: 25px;
   bottom: 0;
+  pointer-events: none;
 }
 .snippet-demo__overflow-scroll-gradient__scroller {
   overflow-y: scroll;

From 5177c4ee2be432554c48922bace780fa31d423c9 Mon Sep 17 00:00:00 2001
From: Scott O'Hara 
Date: Tue, 27 Feb 2018 21:01:17 -0500
Subject: [PATCH 08/15] update buttons and nav semantics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the back to top button and menu button each lack appropriate accessible names.

The primary page navigation is presently contained within an `aside` rather than a `nav` element.

This commit adds accessible names to the previously mentioned buttons, so they will be appropriately conveyed to screen readers.  It also changes the navigation from an `aside` to `nav` and provides the navigation with an `aria-label=“table of contents”` as all the links are in page links to the different sections of this document.
---
 index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 548f0695a..203a24208 100644
--- a/index.html
+++ b/index.html
@@ -8,9 +8,9 @@
     
   
   
-    
-    
    
-    
+    
     
    
       
    
         
    
@@ -47,7 +47,7 @@
           Star
         
    
       
    
-      
    
+      
    
         
    
           
    
             
    Clearfix
    
@@ -1039,4 +1039,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
     
    
     
    
   
-
\ No newline at end of file
+

From 233a149095f59675e4236a0c4a2a3e4f9fd4df4c Mon Sep 17 00:00:00 2001
From: atomiks 
Date: Wed, 28 Feb 2018 16:46:04 +1000
Subject: [PATCH 09/15] Update overflow-scroll-gradient.md

---
 snippets/overflow-scroll-gradient.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md
index c0010ddb6..0c4c3e644 100644
--- a/snippets/overflow-scroll-gradient.md
+++ b/snippets/overflow-scroll-gradient.md
@@ -78,15 +78,16 @@ document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').inne
 
 #### Explanation
 
-1. `position: relative` on the parent establishes a Cartesian positioning context for psuedo elements.
+1. `position: relative` on the parent establishes a Cartesian positioning context for psuedo-elements.
 2. `::after` defines a pseudo element.
 3. `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white
 (top to bottom).
 4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
 5. `width: 300px` matches the size of the scrolling element (which is a child of the parent that has
   the pseudo element).
-6. `height: 25px` is the height of the fading gradient psuedo element, which should be kept relatively small.
-7. `bottom: 0` positions the pseudo element at the bottom of the parent.
+6. `height: 25px` is the height of the fading gradient psuedo-element, which should be kept relatively small.
+7. `bottom: 0` positions the pseudo-element at the bottom of the parent.
+8. `pointer-events: none` specifies that the psuedo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
 
 #### Browser support
 

From db63bf8121a5206ea1d840efa7e619947b78b3c9 Mon Sep 17 00:00:00 2001
From: atomiks 
Date: Wed, 28 Feb 2018 16:51:23 +1000
Subject: [PATCH 10/15] rebuild docs

---
 docs/4d4edbda57043aeeabeac31d2dd12d0d.js | 8 ++++----
 docs/index.html                          | 5 +++--
 index.html                               | 9 ++++++---
 snippets/pretty-text-underline.md        | 6 +++---
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
index 8ac739f4b..7bcc14567 100644
--- a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
+++ b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
@@ -5,15 +5,15 @@ var global = (1,eval)("this");
 var e=(0,eval)("this"),t="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},a=function(){var e=/\blang(?:uage)?-(\w+)\b/i,a=0,n=t.Prism={manual:t.Prism&&t.Prism.manual,disableWorkerMessageHandler:t.Prism&&t.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight));
 },{}],11:[function(require,module,exports) {
 var e=Element.prototype;e.matches||(e.matches=e.matchesSelector||e.msMatchesSelector||e.webkitMatchesSelector||e.mozMatchesSelector),e.closest||(e.closest=function(e){var t=this;if(!document.documentElement.contains(t))return null;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null});
-},{}],14:[function(require,module,exports) {
+},{}],15:[function(require,module,exports) {
 var global = (1,eval)("this");
 var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o};!function(o,t){"object"===("undefined"==typeof exports?"undefined":n(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):o.Jump=t()}(this,function(){"use strict";var o,t,e=function(o,n,t,e){return(o/=e/2)<1?t/2*o*o+n:-t/2*(--o*(o-2)-1)+n},i="function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?function(o){return void 0===o?"undefined":n(o)}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":void 0===o?"undefined":n(o)},r=function(){var o=void 0,n=void 0,t=void 0,r=void 0,u=void 0,d=void 0,f=void 0,c=void 0,a=void 0,s=void 0,l=void 0,y=void 0;function m(o){return o.getBoundingClientRect().top+n}function v(t){a||(a=t),l=u(s=t-a,n,f,c),window.scrollTo(0,l),s1&&void 0!==arguments[1]?arguments[1]:{};switch(c=s.duration||1e3,r=s.offset||0,y=s.callback,u=s.easing||e,d=s.a11y||!1,n=window.scrollY||window.pageYOffset,void 0===a?"undefined":i(a)){case"number":o=void 0,d=!1,t=n+a;break;case"object":t=m(o=a);break;case"string":o=document.querySelector(a),t=m(o)}switch(f=t-n+r,i(s.duration)){case"number":c=s.duration;break;case"function":c=s.duration(f)}window.requestAnimationFrame(v)}}();return o=void 0,t=function(){return o=!1},function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o){var i=window.scrollY||window.pageYOffset;return".header"!==n&&(location.hash=n),scroll(0,i),o=!0,setTimeout(t,e.duration||0),r(n,e)}}});
-},{}],15:[function(require,module,exports) {
+},{}],14:[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=exports.select=function(e){return document.querySelector(e)},t=exports.selectAll=function(e){return[].slice.call(document.querySelectorAll(e))},o=exports.scrollY=function(){return window.scrollY||window.pageYOffset},r=exports.easeOutQuint=function(e,t,o,r){return o*((e=e/r-1)*Math.pow(e,4)+1)+t};/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),function(){var e=navigator.userAgent,t=/Mac/.test(navigator.platform)&&(e.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,o=(e.match(/Chrome\/(\d+)\./)||[])[1]<64||(e.match(/Firefox\/(\d+)\./)||[])[1]<58,r=[].slice.call(document.querySelectorAll("*"));t&&o?(document.documentElement.style.letterSpacing="-0.3px",r.forEach(function(e){parseFloat(getComputedStyle(e).fontSize)>=20&&(e.style.letterSpacing="0.3px")})):t&&!o&&r.forEach(function(e){var t=getComputedStyle(e),o=t.fontSize;"italic"===t.fontStyle&&(e.style.letterSpacing=parseFloat(o)>=20?"0.3px":"-0.3px")})}();
 },{}],12:[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../deps/jump"),t=i(e),s=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var r=(0,s.select)(".hamburger"),n=(0,s.select)(".sidebar__links"),a="is-active",u=function(){return[r,n].forEach(function(e){return e.classList.toggle(a)})};r.addEventListener("click",u),n.addEventListener("click",function(e){setTimeout(u,40),e.target.classList.contains("sidebar__link")&&(e.preventDefault(),(0,t.default)(e.target.getAttribute("href"),{duration:750,offset:window.innerWidth<=768?-64:-32,easing:s.easeOutQuint}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(a)||u()}),exports.default={toggle:u};
-},{"../deps/jump":14,"../deps/utils":15}],13:[function(require,module,exports) {
+},{"../deps/jump":15,"../deps/utils":14}],13:[function(require,module,exports) {
 "use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})};
-},{"../deps/jump":14,"../deps/utils":15}],7:[function(require,module,exports) {
+},{"../deps/jump":15,"../deps/utils":14}],7:[function(require,module,exports) {
 "use strict";require("normalize.css"),require("prismjs"),require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var e=require("./components/Menu"),s=u(e),r=require("./components/BackToTopButton"),i=u(r);function u(e){return e&&e.__esModule?e:{default:e}}
 },{"normalize.css":16,"prismjs":17,"../css/deps/prism.css":16,"../css/index.scss":16,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7])
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 10fda79e7..1eb7f7cbf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -11,7 +11,7 @@
 .floated {
   float: left;
 }
-

    Demo

    float a
    float b
    float c

    Explanation

    1. .clearfix::after defines a pseudo-element.
    2. content: '' allows the pseudo-element to affect layout.
    3. clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.

    Browser support

    99+%

    ✅ No caveats.

    Constant width to height ratio

    Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).

    HTML

    <div class="constant-width-to-height-ratio"></div>
+

    Demo

    float a
    float b
    float c

    Explanation

    1. .clearfix::after defines a pseudo-element.
    2. content: '' allows the pseudo-element to affect layout.
    3. clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.

    Browser support

    99+%

    ✅ No caveats.

    Constant width to height ratio

    Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).

    HTML

    <div class="constant-width-to-height-ratio"></div>

    CSS

    .constant-width-to-height-ratio {
   background: #333;
   width: 50%;
@@ -148,6 +148,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   width: 300px;
   height: 25px;
   background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
+  pointer-events: none;
 }
 .overflow-scroll-gradient__scroller {
   overflow-y: scroll;
@@ -158,7 +159,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   line-height: 1.2;
   text-align: center;
 }
-

    Demo

    Content to be scrolled

    Explanation

    1. position: relative on the parent establishes a Cartesian positioning context for psuedo elements.
    2. ::after defines a pseudo element.
    3. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
    4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
    5. width: 300px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
    6. height: 25px is the height of the fading gradient psuedo element, which should be kept relatively small.
    7. bottom: 0 positions the pseudo element at the bottom of the parent.

    Browser support

    94.8%

    ✅ No caveats.

    Popout menu

    Reveals an interactive popout menu on hover.

    HTML

    <div class="reference">
+

    Demo

    Content to be scrolled

    Explanation

    1. position: relative on the parent establishes a Cartesian positioning context for psuedo-elements.
    2. ::after defines a pseudo element.
    3. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
    4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
    5. width: 300px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
    6. height: 25px is the height of the fading gradient psuedo-element, which should be kept relatively small.
    7. bottom: 0 positions the pseudo-element at the bottom of the parent.
    8. pointer-events: none specifies that the psuedo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.

    Browser support

    94.8%

    ✅ No caveats.

    Popout menu

    Reveals an interactive popout menu on hover.

    HTML

    <div class="reference">
   <div class="popout-menu">
     Popout menu
   </div>
diff --git a/index.html b/index.html
index 548f0695a..8f099d52e 100644
--- a/index.html
+++ b/index.html
@@ -605,6 +605,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   width: 300px;
   height: 25px;
   background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
+  pointer-events: none;
 }
 .overflow-scroll-gradient__scroller {
   overflow-y: scroll;
@@ -635,6 +636,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
                 width: 300px;
                 height: 25px;
                 bottom: 0;
+                pointer-events: none;
               }
               .snippet-demo__overflow-scroll-gradient__scroller {
                 overflow-y: scroll;
@@ -651,13 +653,14 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
             
             
    Explanation
    
             
      
-              
    1. position: relative on the parent establishes a Cartesian positioning context for psuedo elements.
      2. 
+              
    2. position: relative on the parent establishes a Cartesian positioning context for psuedo-elements.
      3. 
               
    3. ::after defines a pseudo element.
      4. 
               
    4. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
      5. 
               
    5. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
      6. 
               
    6. width: 300px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
      7. 
-              
    7. height: 25px is the height of the fading gradient psuedo element, which should be kept relatively small.
      8. 
-              
    8. bottom: 0 positions the pseudo element at the bottom of the parent.
      9. 
+              
    9. height: 25px is the height of the fading gradient psuedo-element, which should be kept relatively small.
      10. 
+              
    10. bottom: 0 positions the pseudo-element at the bottom of the parent.
      11. 
+              
    11. pointer-events: none specifies that the psuedo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
      12. 
             
    
             
    Browser support
    
             
    
diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md
index e1a45c062..171fe9d80 100644
--- a/snippets/pretty-text-underline.md
+++ b/snippets/pretty-text-underline.md
@@ -14,13 +14,13 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
 ```css
 .pretty-text-underline {
   display: inline;
-  font-size: 1.25rem;
+  font-size: 18px;
   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 100%);
-  background-position: 0 1.04em;
+  background-position: 0 18px;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }
@@ -49,7 +49,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
     -1px -1px 0 #f5f6f9,
     1px -1px 0 #f5f6f9;
   background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
-  background-position: 0 1.04em;
+  background-position: 0 18px;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }

From 2dc414e40f5948253d32d2da413edb5268ea4a91 Mon Sep 17 00:00:00 2001
From: atomiks 
Date: Wed, 28 Feb 2018 17:55:27 +1000
Subject: [PATCH 11/15] rebuild docs

---
 docs/4d4edbda57043aeeabeac31d2dd12d0d.js | 10 +++++-----
 docs/index.html                          |  8 ++++----
 index.html                               |  8 ++++----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
index 7bcc14567..86e4b2365 100644
--- a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
+++ b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
@@ -1,6 +1,6 @@
-require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;ie.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight));
 },{}],11:[function(require,module,exports) {
@@ -10,10 +10,10 @@ var global = (1,eval)("this");
 var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o};!function(o,t){"object"===("undefined"==typeof exports?"undefined":n(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):o.Jump=t()}(this,function(){"use strict";var o,t,e=function(o,n,t,e){return(o/=e/2)<1?t/2*o*o+n:-t/2*(--o*(o-2)-1)+n},i="function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?function(o){return void 0===o?"undefined":n(o)}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":void 0===o?"undefined":n(o)},r=function(){var o=void 0,n=void 0,t=void 0,r=void 0,u=void 0,d=void 0,f=void 0,c=void 0,a=void 0,s=void 0,l=void 0,y=void 0;function m(o){return o.getBoundingClientRect().top+n}function v(t){a||(a=t),l=u(s=t-a,n,f,c),window.scrollTo(0,l),s1&&void 0!==arguments[1]?arguments[1]:{};switch(c=s.duration||1e3,r=s.offset||0,y=s.callback,u=s.easing||e,d=s.a11y||!1,n=window.scrollY||window.pageYOffset,void 0===a?"undefined":i(a)){case"number":o=void 0,d=!1,t=n+a;break;case"object":t=m(o=a);break;case"string":o=document.querySelector(a),t=m(o)}switch(f=t-n+r,i(s.duration)){case"number":c=s.duration;break;case"function":c=s.duration(f)}window.requestAnimationFrame(v)}}();return o=void 0,t=function(){return o=!1},function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o){var i=window.scrollY||window.pageYOffset;return".header"!==n&&(location.hash=n),scroll(0,i),o=!0,setTimeout(t,e.duration||0),r(n,e)}}});
 },{}],14:[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=exports.select=function(e){return document.querySelector(e)},t=exports.selectAll=function(e){return[].slice.call(document.querySelectorAll(e))},o=exports.scrollY=function(){return window.scrollY||window.pageYOffset},r=exports.easeOutQuint=function(e,t,o,r){return o*((e=e/r-1)*Math.pow(e,4)+1)+t};/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),function(){var e=navigator.userAgent,t=/Mac/.test(navigator.platform)&&(e.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,o=(e.match(/Chrome\/(\d+)\./)||[])[1]<64||(e.match(/Firefox\/(\d+)\./)||[])[1]<58,r=[].slice.call(document.querySelectorAll("*"));t&&o?(document.documentElement.style.letterSpacing="-0.3px",r.forEach(function(e){parseFloat(getComputedStyle(e).fontSize)>=20&&(e.style.letterSpacing="0.3px")})):t&&!o&&r.forEach(function(e){var t=getComputedStyle(e),o=t.fontSize;"italic"===t.fontStyle&&(e.style.letterSpacing=parseFloat(o)>=20?"0.3px":"-0.3px")})}();
-},{}],12:[function(require,module,exports) {
+},{}],13:[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../deps/jump"),t=i(e),s=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var r=(0,s.select)(".hamburger"),n=(0,s.select)(".sidebar__links"),a="is-active",u=function(){return[r,n].forEach(function(e){return e.classList.toggle(a)})};r.addEventListener("click",u),n.addEventListener("click",function(e){setTimeout(u,40),e.target.classList.contains("sidebar__link")&&(e.preventDefault(),(0,t.default)(e.target.getAttribute("href"),{duration:750,offset:window.innerWidth<=768?-64:-32,easing:s.easeOutQuint}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(a)||u()}),exports.default={toggle:u};
-},{"../deps/jump":15,"../deps/utils":14}],13:[function(require,module,exports) {
+},{"../deps/jump":15,"../deps/utils":14}],12:[function(require,module,exports) {
 "use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})};
 },{"../deps/jump":15,"../deps/utils":14}],7:[function(require,module,exports) {
 "use strict";require("normalize.css"),require("prismjs"),require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var e=require("./components/Menu"),s=u(e),r=require("./components/BackToTopButton"),i=u(r);function u(e){return e&&e.__esModule?e:{default:e}}
-},{"normalize.css":16,"prismjs":17,"../css/deps/prism.css":16,"../css/index.scss":16,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7])
\ No newline at end of file
+},{"normalize.css":17,"prismjs":16,"../css/deps/prism.css":17,"../css/index.scss":17,"./deps/polyfills":11,"./components/Menu":13,"./components/BackToTopButton":12}]},{},[7])
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 1eb7f7cbf..fc4a4b2a1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,4 +1,4 @@
-    30 Seconds of CSS        
     
     
      
    30 Seconds of CSS
     
     A curated collection of useful CSS snippets you can understand in 30 seconds or less. 
      Star 
     
     
     
     
     
    Clearfix
     
    Ensures that an element self-clears its children.
     
    Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
     
    HTML
    <div class="clearfix">
+    30 Seconds of CSS        
     
     
      
    30 Seconds of CSS
     
     A curated collection of useful CSS snippets you can understand in 30 seconds or less. 
      Star 
     
     
     
     
     
    Clearfix
     
    Ensures that an element self-clears its children.
     
    Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
     
    HTML
    <div class="clearfix">
   <div class="floated">float a</div>
   <div class="floated">float b</div>
   <div class="floated">float c</div>
@@ -11,7 +11,7 @@
 .floated {
   float: left;
 }
-
     
    Demo
     
     
     
    float a
     
    float b
     
    float c
     
     
      
    Explanation
     
       
    1. .clearfix::after defines a pseudo-element.
      2.  
    2. content: '' allows the pseudo-element to affect layout.
      3.  
    3. clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.
      4.  
     
    Browser support
     
     
     99+% 
     
     
    ✅ No caveats.
     
     
     
    Constant width to height ratio
     
    Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).
     
    HTML
    <div class="constant-width-to-height-ratio"></div>
+
     
    Demo
     
     
     
    float a
     
    float b
     
    float c
     
     
      
    Explanation
     
       
    1. .clearfix::after defines a pseudo-element.
      2.  
    2. content: '' allows the pseudo-element to affect layout.
      3.  
    3. clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.
      4.  
     
    Browser support
     
     
     99+% 
     
     
    ✅ No caveats.
     
     
     
    Constant width to height ratio
     
    Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).
     
    HTML
    <div class="constant-width-to-height-ratio"></div>
 
     
    CSS
    .constant-width-to-height-ratio {
   background: #333;
   width: 50%;
@@ -178,13 +178,13 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
 
     
    Demo
     
     
     
     Popout menu 
     
     
      
    Explanation
     
       
    1. position: relative on the reference parent establishes a Cartesian positioning context for its child.
      2.  
    2. position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.
      3.  
    3. left: 100% moves the the popout menu 100% of its parent's width from the left.
      4.  
    4. visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none).
      5.  
    5. .reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout.
      6.  
     
    Browser support
     
     
     99+% 
     
     
    ✅ No caveats.
     
     
     
    Pretty text underline
     
    A nicer alternative to text-decoration: underline where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.
     
    HTML
    <p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
 
     
    CSS
    .pretty-text-underline {
   display: inline;
-  font-size: 1.25rem;
+  font-size: 18px;
   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 100%);
-  background-position: 0 1.04em;
+  background-position: 0 18px;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }
diff --git a/index.html b/index.html
index 08d301ffb..66eeb2f93 100644
--- a/index.html
+++ b/index.html
@@ -751,13 +751,13 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
 
    
             
    CSS
    .pretty-text-underline {
   display: inline;
-  font-size: 1.25rem;
+  font-size: 18px;
   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 100%);
-  background-position: 0 1.04em;
+  background-position: 0 18px;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }
@@ -780,7 +780,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
                 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 100%);
-                background-position: 0 1.04em;
+                background-position: 0 18px;
                 background-repeat: repeat-x;
                 background-size: 1px 1px;
               }
@@ -1042,4 +1042,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
     
    
     
    
   
-
+
\ No newline at end of file

From a568a45dfaf8e63db74ff27a307eb8868bc4e9cc Mon Sep 17 00:00:00 2001
From: atomiks 
Date: Wed, 28 Feb 2018 17:59:52 +1000
Subject: [PATCH 12/15] fix #15

---
 docs/4d4edbda57043aeeabeac31d2dd12d0d.js | 12 ++++++------
 docs/index.html                          |  2 +-
 index.html                               |  2 +-
 snippets/truncate-text.md                |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
index 86e4b2365..39f493b20 100644
--- a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
+++ b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
@@ -5,15 +5,15 @@ var global = (1,eval)("this");
 var e=(0,eval)("this"),t="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},a=function(){var e=/\blang(?:uage)?-(\w+)\b/i,a=0,n=t.Prism={manual:t.Prism&&t.Prism.manual,disableWorkerMessageHandler:t.Prism&&t.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight));
 },{}],11:[function(require,module,exports) {
 var e=Element.prototype;e.matches||(e.matches=e.matchesSelector||e.msMatchesSelector||e.webkitMatchesSelector||e.mozMatchesSelector),e.closest||(e.closest=function(e){var t=this;if(!document.documentElement.contains(t))return null;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null});
-},{}],15:[function(require,module,exports) {
+},{}],14:[function(require,module,exports) {
 var global = (1,eval)("this");
 var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o};!function(o,t){"object"===("undefined"==typeof exports?"undefined":n(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):o.Jump=t()}(this,function(){"use strict";var o,t,e=function(o,n,t,e){return(o/=e/2)<1?t/2*o*o+n:-t/2*(--o*(o-2)-1)+n},i="function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?function(o){return void 0===o?"undefined":n(o)}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":void 0===o?"undefined":n(o)},r=function(){var o=void 0,n=void 0,t=void 0,r=void 0,u=void 0,d=void 0,f=void 0,c=void 0,a=void 0,s=void 0,l=void 0,y=void 0;function m(o){return o.getBoundingClientRect().top+n}function v(t){a||(a=t),l=u(s=t-a,n,f,c),window.scrollTo(0,l),s1&&void 0!==arguments[1]?arguments[1]:{};switch(c=s.duration||1e3,r=s.offset||0,y=s.callback,u=s.easing||e,d=s.a11y||!1,n=window.scrollY||window.pageYOffset,void 0===a?"undefined":i(a)){case"number":o=void 0,d=!1,t=n+a;break;case"object":t=m(o=a);break;case"string":o=document.querySelector(a),t=m(o)}switch(f=t-n+r,i(s.duration)){case"number":c=s.duration;break;case"function":c=s.duration(f)}window.requestAnimationFrame(v)}}();return o=void 0,t=function(){return o=!1},function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o){var i=window.scrollY||window.pageYOffset;return".header"!==n&&(location.hash=n),scroll(0,i),o=!0,setTimeout(t,e.duration||0),r(n,e)}}});
-},{}],14:[function(require,module,exports) {
+},{}],15:[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=exports.select=function(e){return document.querySelector(e)},t=exports.selectAll=function(e){return[].slice.call(document.querySelectorAll(e))},o=exports.scrollY=function(){return window.scrollY||window.pageYOffset},r=exports.easeOutQuint=function(e,t,o,r){return o*((e=e/r-1)*Math.pow(e,4)+1)+t};/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),function(){var e=navigator.userAgent,t=/Mac/.test(navigator.platform)&&(e.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,o=(e.match(/Chrome\/(\d+)\./)||[])[1]<64||(e.match(/Firefox\/(\d+)\./)||[])[1]<58,r=[].slice.call(document.querySelectorAll("*"));t&&o?(document.documentElement.style.letterSpacing="-0.3px",r.forEach(function(e){parseFloat(getComputedStyle(e).fontSize)>=20&&(e.style.letterSpacing="0.3px")})):t&&!o&&r.forEach(function(e){var t=getComputedStyle(e),o=t.fontSize;"italic"===t.fontStyle&&(e.style.letterSpacing=parseFloat(o)>=20?"0.3px":"-0.3px")})}();
-},{}],13:[function(require,module,exports) {
+},{}],12:[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../deps/jump"),t=i(e),s=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var r=(0,s.select)(".hamburger"),n=(0,s.select)(".sidebar__links"),a="is-active",u=function(){return[r,n].forEach(function(e){return e.classList.toggle(a)})};r.addEventListener("click",u),n.addEventListener("click",function(e){setTimeout(u,40),e.target.classList.contains("sidebar__link")&&(e.preventDefault(),(0,t.default)(e.target.getAttribute("href"),{duration:750,offset:window.innerWidth<=768?-64:-32,easing:s.easeOutQuint}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(a)||u()}),exports.default={toggle:u};
-},{"../deps/jump":15,"../deps/utils":14}],12:[function(require,module,exports) {
+},{"../deps/jump":14,"../deps/utils":15}],13:[function(require,module,exports) {
 "use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})};
-},{"../deps/jump":15,"../deps/utils":14}],7:[function(require,module,exports) {
+},{"../deps/jump":14,"../deps/utils":15}],7:[function(require,module,exports) {
 "use strict";require("normalize.css"),require("prismjs"),require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var e=require("./components/Menu"),s=u(e),r=require("./components/BackToTopButton"),i=u(r);function u(e){return e&&e.__esModule?e:{default:e}}
-},{"normalize.css":17,"prismjs":16,"../css/deps/prism.css":17,"../css/index.scss":17,"./deps/polyfills":11,"./components/Menu":13,"./components/BackToTopButton":12}]},{},[7])
\ No newline at end of file
+},{"normalize.css":17,"prismjs":16,"../css/deps/prism.css":17,"../css/index.scss":17,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7])
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index fc4a4b2a1..be0b62a62 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -227,4 +227,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-
     
    Demo
     
     
     This text will be truncated if it exceeds 200px in width. 
     
      
    Explanation
     
       
    1. overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
      2.  
    2. white-space: nowrap prevents the text from exceeding one line in height.
      3.  
    3. text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
      4.  
     
    Browser support
     
     
     98.1% 
     
     
    ✅ No caveats.
      
     
     
     
     
      
\ No newline at end of file
+

    Demo

    This text will be truncated if it exceeds 200px in width.

    Explanation

    1. overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
    2. white-space: nowrap prevents the text from exceeding one line in height.
    3. text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.

    Browser support

    98.1%

    ⚠️ Only works for single line elements.

    \ No newline at end of file diff --git a/index.html b/index.html index 66eeb2f93..dfb817cda 100644 --- a/index.html +++ b/index.html @@ -1030,7 +1030,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop 98.1% -

    ✅ No caveats.

    +

    ⚠️ Only works for single line elements.

    • https://caniuse.com/#feat=text-overflow diff --git a/snippets/truncate-text.md b/snippets/truncate-text.md index 58f4db15d..ce2fe0779 100644 --- a/snippets/truncate-text.md +++ b/snippets/truncate-text.md @@ -46,6 +46,6 @@ If the text is longer than one line, it will be truncated and end with an ellips #### Browser support -✅ No caveats. +⚠️ Only works for single line elements. * https://caniuse.com/#feat=text-overflow From 7c4751f2875007aebcfbc6603c6c590cf5ba637d Mon Sep 17 00:00:00 2001 From: atomiks Date: Wed, 28 Feb 2018 18:06:13 +1000 Subject: [PATCH 13/15] Add logo --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 85d026aa9..9f2090ac9 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # 30 Seconds of CSS +![logo](https://i.imgur.com/2L1bMyy.png) + A curated collection of useful CSS snippets you can understand in 30 seconds or less. Inspired by [30 seconds of code](https://github.com/Chalarangelo/30-seconds-of-code). From 29700dd3e76832c8b5b0fdf3cb28cfcb2a0ef8b0 Mon Sep 17 00:00:00 2001 From: atomiks Date: Wed, 28 Feb 2018 18:09:34 +1000 Subject: [PATCH 14/15] Show GitHub star count --- docs/4d4edbda57043aeeabeac31d2dd12d0d.js | 18 +++++++++--------- docs/index.html | 2 +- index.html | 4 +--- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js index 39f493b20..897578359 100644 --- a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js +++ b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js @@ -1,19 +1,19 @@ -require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;ie.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight)); -},{}],11:[function(require,module,exports) { +},{}],12:[function(require,module,exports) { var e=Element.prototype;e.matches||(e.matches=e.matchesSelector||e.msMatchesSelector||e.webkitMatchesSelector||e.mozMatchesSelector),e.closest||(e.closest=function(e){var t=this;if(!document.documentElement.contains(t))return null;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null}); -},{}],14:[function(require,module,exports) { +},{}],15:[function(require,module,exports) { var global = (1,eval)("this"); var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o};!function(o,t){"object"===("undefined"==typeof exports?"undefined":n(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):o.Jump=t()}(this,function(){"use strict";var o,t,e=function(o,n,t,e){return(o/=e/2)<1?t/2*o*o+n:-t/2*(--o*(o-2)-1)+n},i="function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?function(o){return void 0===o?"undefined":n(o)}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":void 0===o?"undefined":n(o)},r=function(){var o=void 0,n=void 0,t=void 0,r=void 0,u=void 0,d=void 0,f=void 0,c=void 0,a=void 0,s=void 0,l=void 0,y=void 0;function m(o){return o.getBoundingClientRect().top+n}function v(t){a||(a=t),l=u(s=t-a,n,f,c),window.scrollTo(0,l),s1&&void 0!==arguments[1]?arguments[1]:{};switch(c=s.duration||1e3,r=s.offset||0,y=s.callback,u=s.easing||e,d=s.a11y||!1,n=window.scrollY||window.pageYOffset,void 0===a?"undefined":i(a)){case"number":o=void 0,d=!1,t=n+a;break;case"object":t=m(o=a);break;case"string":o=document.querySelector(a),t=m(o)}switch(f=t-n+r,i(s.duration)){case"number":c=s.duration;break;case"function":c=s.duration(f)}window.requestAnimationFrame(v)}}();return o=void 0,t=function(){return o=!1},function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o){var i=window.scrollY||window.pageYOffset;return".header"!==n&&(location.hash=n),scroll(0,i),o=!0,setTimeout(t,e.duration||0),r(n,e)}}}); -},{}],15:[function(require,module,exports) { +},{}],14:[function(require,module,exports) { "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=exports.select=function(e){return document.querySelector(e)},t=exports.selectAll=function(e){return[].slice.call(document.querySelectorAll(e))},o=exports.scrollY=function(){return window.scrollY||window.pageYOffset},r=exports.easeOutQuint=function(e,t,o,r){return o*((e=e/r-1)*Math.pow(e,4)+1)+t};/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),function(){var e=navigator.userAgent,t=/Mac/.test(navigator.platform)&&(e.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,o=(e.match(/Chrome\/(\d+)\./)||[])[1]<64||(e.match(/Firefox\/(\d+)\./)||[])[1]<58,r=[].slice.call(document.querySelectorAll("*"));t&&o?(document.documentElement.style.letterSpacing="-0.3px",r.forEach(function(e){parseFloat(getComputedStyle(e).fontSize)>=20&&(e.style.letterSpacing="0.3px")})):t&&!o&&r.forEach(function(e){var t=getComputedStyle(e),o=t.fontSize;"italic"===t.fontStyle&&(e.style.letterSpacing=parseFloat(o)>=20?"0.3px":"-0.3px")})}(); -},{}],12:[function(require,module,exports) { +},{}],11:[function(require,module,exports) { "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../deps/jump"),t=i(e),s=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var r=(0,s.select)(".hamburger"),n=(0,s.select)(".sidebar__links"),a="is-active",u=function(){return[r,n].forEach(function(e){return e.classList.toggle(a)})};r.addEventListener("click",u),n.addEventListener("click",function(e){setTimeout(u,40),e.target.classList.contains("sidebar__link")&&(e.preventDefault(),(0,t.default)(e.target.getAttribute("href"),{duration:750,offset:window.innerWidth<=768?-64:-32,easing:s.easeOutQuint}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(a)||u()}),exports.default={toggle:u}; -},{"../deps/jump":14,"../deps/utils":15}],13:[function(require,module,exports) { +},{"../deps/jump":15,"../deps/utils":14}],13:[function(require,module,exports) { "use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})}; -},{"../deps/jump":14,"../deps/utils":15}],7:[function(require,module,exports) { +},{"../deps/jump":15,"../deps/utils":14}],7:[function(require,module,exports) { "use strict";require("normalize.css"),require("prismjs"),require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var e=require("./components/Menu"),s=u(e),r=require("./components/BackToTopButton"),i=u(r);function u(e){return e&&e.__esModule?e:{default:e}} -},{"normalize.css":17,"prismjs":16,"../css/deps/prism.css":17,"../css/index.scss":17,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7]) \ No newline at end of file +},{"normalize.css":16,"prismjs":17,"../css/deps/prism.css":16,"../css/index.scss":16,"./deps/polyfills":12,"./components/Menu":11,"./components/BackToTopButton":13}]},{},[7]) \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index be0b62a62..7f94c2ec1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ - 30 Seconds of CSS

      30 Seconds of CSS

      A curated collection of useful CSS snippets you can understand in 30 seconds or less.

      Star

      Clearfix

      Ensures that an element self-clears its children.

      Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.

      HTML

      <div class="clearfix">
+    30 Seconds of CSS        
       
       
        
      30 Seconds of CSS
       
       A curated collection of useful CSS snippets you can understand in 30 seconds or less. 
       Star 
       
       
       
       
       
      Clearfix
       
      Ensures that an element self-clears its children.
       
      Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
       
      HTML
      <div class="clearfix">
   <div class="floated">float a</div>
   <div class="floated">float b</div>
   <div class="floated">float c</div>
diff --git a/index.html b/index.html
index dfb817cda..1c6c91f76 100644
--- a/index.html
+++ b/index.html
@@ -42,9 +42,7 @@
           
      
             A curated collection of useful CSS snippets you can understand in 30 seconds or less.
           
      
-
-          
-          Star
+          Star
         
      
       
       
      

From 506a73f175fe38b0317ab5772bf82bbf86012f20 Mon Sep 17 00:00:00 2001
From: atomiks 
Date: Wed, 28 Feb 2018 18:14:41 +1000
Subject: [PATCH 15/15] Fix stripping of doctype declaration

---
 docs/4d4edbda57043aeeabeac31d2dd12d0d.js | 18 +++++++++---------
 docs/index.html                          |  4 ++--
 index.html                               |  4 +++-
 scripts/build.js                         |  8 +++++++-
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
index 897578359..39f493b20 100644
--- a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
+++ b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js
@@ -1,19 +1,19 @@
-require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;ie.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight));
-},{}],12:[function(require,module,exports) {
+},{}],11:[function(require,module,exports) {
 var e=Element.prototype;e.matches||(e.matches=e.matchesSelector||e.msMatchesSelector||e.webkitMatchesSelector||e.mozMatchesSelector),e.closest||(e.closest=function(e){var t=this;if(!document.documentElement.contains(t))return null;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null});
-},{}],15:[function(require,module,exports) {
+},{}],14:[function(require,module,exports) {
 var global = (1,eval)("this");
 var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o};!function(o,t){"object"===("undefined"==typeof exports?"undefined":n(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):o.Jump=t()}(this,function(){"use strict";var o,t,e=function(o,n,t,e){return(o/=e/2)<1?t/2*o*o+n:-t/2*(--o*(o-2)-1)+n},i="function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?function(o){return void 0===o?"undefined":n(o)}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":void 0===o?"undefined":n(o)},r=function(){var o=void 0,n=void 0,t=void 0,r=void 0,u=void 0,d=void 0,f=void 0,c=void 0,a=void 0,s=void 0,l=void 0,y=void 0;function m(o){return o.getBoundingClientRect().top+n}function v(t){a||(a=t),l=u(s=t-a,n,f,c),window.scrollTo(0,l),s1&&void 0!==arguments[1]?arguments[1]:{};switch(c=s.duration||1e3,r=s.offset||0,y=s.callback,u=s.easing||e,d=s.a11y||!1,n=window.scrollY||window.pageYOffset,void 0===a?"undefined":i(a)){case"number":o=void 0,d=!1,t=n+a;break;case"object":t=m(o=a);break;case"string":o=document.querySelector(a),t=m(o)}switch(f=t-n+r,i(s.duration)){case"number":c=s.duration;break;case"function":c=s.duration(f)}window.requestAnimationFrame(v)}}();return o=void 0,t=function(){return o=!1},function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o){var i=window.scrollY||window.pageYOffset;return".header"!==n&&(location.hash=n),scroll(0,i),o=!0,setTimeout(t,e.duration||0),r(n,e)}}});
-},{}],14:[function(require,module,exports) {
+},{}],15:[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=exports.select=function(e){return document.querySelector(e)},t=exports.selectAll=function(e){return[].slice.call(document.querySelectorAll(e))},o=exports.scrollY=function(){return window.scrollY||window.pageYOffset},r=exports.easeOutQuint=function(e,t,o,r){return o*((e=e/r-1)*Math.pow(e,4)+1)+t};/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),function(){var e=navigator.userAgent,t=/Mac/.test(navigator.platform)&&(e.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,o=(e.match(/Chrome\/(\d+)\./)||[])[1]<64||(e.match(/Firefox\/(\d+)\./)||[])[1]<58,r=[].slice.call(document.querySelectorAll("*"));t&&o?(document.documentElement.style.letterSpacing="-0.3px",r.forEach(function(e){parseFloat(getComputedStyle(e).fontSize)>=20&&(e.style.letterSpacing="0.3px")})):t&&!o&&r.forEach(function(e){var t=getComputedStyle(e),o=t.fontSize;"italic"===t.fontStyle&&(e.style.letterSpacing=parseFloat(o)>=20?"0.3px":"-0.3px")})}();
-},{}],11:[function(require,module,exports) {
+},{}],12:[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../deps/jump"),t=i(e),s=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var r=(0,s.select)(".hamburger"),n=(0,s.select)(".sidebar__links"),a="is-active",u=function(){return[r,n].forEach(function(e){return e.classList.toggle(a)})};r.addEventListener("click",u),n.addEventListener("click",function(e){setTimeout(u,40),e.target.classList.contains("sidebar__link")&&(e.preventDefault(),(0,t.default)(e.target.getAttribute("href"),{duration:750,offset:window.innerWidth<=768?-64:-32,easing:s.easeOutQuint}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(a)||u()}),exports.default={toggle:u};
-},{"../deps/jump":15,"../deps/utils":14}],13:[function(require,module,exports) {
+},{"../deps/jump":14,"../deps/utils":15}],13:[function(require,module,exports) {
 "use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})};
-},{"../deps/jump":15,"../deps/utils":14}],7:[function(require,module,exports) {
+},{"../deps/jump":14,"../deps/utils":15}],7:[function(require,module,exports) {
 "use strict";require("normalize.css"),require("prismjs"),require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var e=require("./components/Menu"),s=u(e),r=require("./components/BackToTopButton"),i=u(r);function u(e){return e&&e.__esModule?e:{default:e}}
-},{"normalize.css":16,"prismjs":17,"../css/deps/prism.css":16,"../css/index.scss":16,"./deps/polyfills":12,"./components/Menu":11,"./components/BackToTopButton":13}]},{},[7])
\ No newline at end of file
+},{"normalize.css":17,"prismjs":16,"../css/deps/prism.css":17,"../css/index.scss":17,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7])
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 7f94c2ec1..e76089d62 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,4 +1,4 @@
-    30 Seconds of CSS        
       
       
        
      30 Seconds of CSS
       
       A curated collection of useful CSS snippets you can understand in 30 seconds or less. 
       Star 
       
       
       
       
       
      Clearfix
       
      Ensures that an element self-clears its children.
       
      Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
       
      HTML
      <div class="clearfix">
+      30 Seconds of CSS        
       
       
        
      30 Seconds of CSS
       
       A curated collection of useful CSS snippets you can understand in 30 seconds or less. 
       Star 
       
       
       
       
       
      Clearfix
       
      Ensures that an element self-clears its children.
       
      Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
       
      HTML
      <div class="clearfix">
   <div class="floated">float a</div>
   <div class="floated">float b</div>
   <div class="floated">float c</div>
@@ -227,4 +227,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-
       
      Demo
       
       
       This text will be truncated if it exceeds 200px in width. 
       
        
      Explanation
       
         
      1. overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
        2.  
      2. white-space: nowrap prevents the text from exceeding one line in height.
        3.  
      3. text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
        4.  
       
      Browser support
       
       
       98.1% 
       
       
      ⚠️ Only works for single line elements.
        
       
       
       
       
        
\ No newline at end of file
+
       
      Demo
       
       
       This text will be truncated if it exceeds 200px in width. 
       
        
      Explanation
       
         
      1. overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
        2.  
      2. white-space: nowrap prevents the text from exceeding one line in height.
        3.  
      3. text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
        4.  
       
      Browser support
       
       
       98.1% 
       
       
      ⚠️ Only works for single line elements.
        
       
       
       
       
         
\ No newline at end of file
diff --git a/index.html b/index.html
index 1c6c91f76..547e46d77 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,5 @@
+
+
 
   
     
@@ -1040,4 +1042,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
     
      
     
   
-
\ No newline at end of file
+
diff --git a/scripts/build.js b/scripts/build.js
index c1b9902ed..11cd3b39e 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -67,4 +67,10 @@ for (const snippetFile of fs.readdirSync(SNIPPETS_PATH)) {
   )
 }
 
-fs.writeFileSync('./index.html', pretty(document.documentElement.outerHTML, { ocd: true }))
+// doctype declaration gets stripped, add it back in
+const html = `
+
+${pretty(document.documentElement.outerHTML, { ocd: true })}
+`
+
+fs.writeFileSync('./index.html', html)