andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rebuild docs

Browse Source
This commit is contained in:
atomiks
2018-10-05 14:11:52 +10:00
parent 8c397b1348
commit 989c6891d1
9 changed files with 35 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/blob.0b90d97e.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

13
docs/index.html
View File

File diff suppressed because one or more lines are too long

4
docs/js.62f2ea69.js → docs/js.4f36a0da.js
View File

@ -17,7 +17,7 @@ var define;
var global = arguments[3];
var o,n=arguments[3],t="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(n,e){"object"===("undefined"==typeof exports?"undefined":t(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof o&&o.amd?o(e):n.Jump=e()}(this,function(){"use strict";var o,n,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"===t(Symbol.iterator)?function(o){return void 0===o?"undefined":t(o)}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":void 0===o?"undefined":t(o)},r=function(){var o=void 0,n=void 0,t=void 0,r=void 0,u=void 0,d=void 0,c=void 0,f=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,c,f),window.scrollTo(0,l),s<f?window.requestAnimationFrame(v):(window.scrollTo(0,n+c),o&&d&&(o.setAttribute("tabindex","-1"),o.focus()),"function"==typeof y&&y(),a=!1)}return function(a){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};switch(f=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(c=t-n+r,i(s.duration)){case"number":f=s.duration;break;case"function":f=s.duration(c)}window.requestAnimationFrame(v)}}();return o=void 0,n=function(){return o=!1},function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o){var i=window.scrollY||window.pageYOffset;return".header"!==t&&(location.hash=t),scroll(0,i),o=!0,setTimeout(n,e.duration||0),r(t,e)}}});
},{}],"Xw/u":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=exports.select=function(t){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector(t)},e=exports.selectAll=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return[].slice.call(e.querySelectorAll(t))},n=exports.scrollY=function(){return window.scrollY||window.pageYOffset},o=exports.easeOutQuint=function(t,e,n,o){return n*((t=t/o-1)*Math.pow(t,4)+1)+e},r=exports.on=function(t,e,n){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},r=function(t){return t.target.matches(o.target)&&n.call(t.target,t)};if(t.addEventListener(e,o.target?r:n,o.options||!1),o.target)return r},i=exports.createEventHub=function(){return{hub:Object.create(null),emit:function(t,e){(this.hub[t]||[]).forEach(function(t){return t(e)})},on:function(t,e){this.hub[t]||(this.hub[t]=[]),this.hub[t].push(e)},off:function(t,e){var n=(this.hub[t]||[]).findIndex(function(t){return t===e});n>-1&&this.hub[t].splice(n,1)}}};window.EventHub=i(),/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),function(){var t=navigator.userAgent,e=/Mac/.test(navigator.platform)&&(t.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,n=(t.match(/Chrome\/(\d+)\./)||[])[1]<64||(t.match(/Firefox\/(\d+)\./)||[])[1]<58,o=[].slice.call(document.querySelectorAll("*"));e&&n?(document.documentElement.style.letterSpacing="-0.3px",o.forEach(function(t){parseFloat(getComputedStyle(t).fontSize)>=20&&(t.style.letterSpacing="0.3px")})):e&&!n&&o.forEach(function(t){var e=getComputedStyle(t),n=e.fontSize;"italic"===e.fontStyle&&(t.style.letterSpacing=parseFloat(n)>=20?"0.3px":"-0.3px")})}();
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=exports.select=function(t){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector(t)},e=exports.selectAll=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return[].slice.call(e.querySelectorAll(t))},n=exports.scrollY=function(){return window.scrollY||window.pageYOffset},o=exports.easeOutQuint=function(t,e,n,o){return n*((t=t/o-1)*Math.pow(t,4)+1)+e},r=exports.on=function(t,e,n){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},r=function(t){return t.target.matches(o.target)&&n.call(t.target,t)};if(t.addEventListener(e,o.target?r:n,o.options||!1),o.target)return r},c=exports.createEventHub=function(){return{hub:Object.create(null),emit:function(t,e){(this.hub[t]||[]).forEach(function(t){return t(e)})},on:function(t,e){this.hub[t]||(this.hub[t]=[]),this.hub[t].push(e)},off:function(t,e){var n=(this.hub[t]||[]).findIndex(function(t){return t===e});n>-1&&this.hub[t].splice(n,1)}}};window.EventHub=c(),/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),/Mac/.test(navigator.platform)&&document.documentElement.classList.add("macOS"),function(){var t=navigator.userAgent,e=/Mac/.test(navigator.platform)&&(t.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,n=(t.match(/Chrome\/(\d+)\./)||[])[1]<64||(t.match(/Firefox\/(\d+)\./)||[])[1]<58,o=[].slice.call(document.querySelectorAll("*"));e&&n?(document.documentElement.style.letterSpacing="-0.3px",o.forEach(function(t){parseFloat(getComputedStyle(t).fontSize)>=20&&(t.style.letterSpacing="0.3px")})):e&&!n&&o.forEach(function(t){var e=getComputedStyle(t),n=e.fontSize;"italic"===e.fontStyle&&(t.style.letterSpacing=parseFloat(n)>=20?"0.3px":"-0.3px")})}();
},{}],"bnBP":[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 n=(0,s.select)(".hamburger"),a=(0,s.select)(".sidebar__links"),r=(0,s.selectAll)(".sidebar__section"),l="is-active",c=function(){window.innerWidth<=991&&([n,a].forEach(function(e){return e.classList.toggle(l)}),n.setAttribute("aria-expanded",n.classList.contains(l)?"true":"false"))};n.addEventListener("click",c),a.addEventListener("click",function(e){var i=e.target.closest(".sidebar__link");i&&(setTimeout(c,50),(0,t.default)(i.getAttribute("href"),{duration:500,easing:s.easeOutQuint,offset:window.innerWidth<=991?-64:-32}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!a.classList.contains(l)||c()}),EventHub.on("Tag.click",function(e){r.forEach(function(t){t.style.display="block",t.dataset.type!==e.type&&"all"!==e.type&&(t.style.display="none")})}),exports.default={toggle:c};
},{"../deps/jump":"yK6E","../deps/utils":"Xw/u"}],"/f8x":[function(require,module,exports) {
@ -31,4 +31,4 @@ var o,n=arguments[3],t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterat
},{"../deps/utils":"Xw/u"}],"mahc":[function(require,module,exports) {
"use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=require("feather-icons"),r=l(e);require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var s=require("./components/Sidebar"),i=l(s),o=require("./components/BackToTopButton"),u=l(o),n=require("./components/Tag"),c=l(n),p=require("./components/Snippet"),t=l(p),q=require("./components/CodepenCopy"),a=l(q);function l(e){return e&&e.__esModule?e:{default:e}}r.default.replace();
},{"focus-visible":"PHYi","normalize.css":"9KIJ","prismjs":"HxJM","feather-icons":"2Os9","../css/deps/prism.css":"9KIJ","../css/index.scss":"9KIJ","./deps/polyfills":"C1Ar","./components/Sidebar":"bnBP","./components/BackToTopButton":"/f8x","./components/Tag":"uI+q","./components/Snippet":"7KYq","./components/CodepenCopy":"JXhB"}]},{},["mahc"], null)
//# sourceMappingURL=js.62f2ea69.map
//# sourceMappingURL=js.4f36a0da.map

1
docs/js.4f36a0da.map Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/js.62f2ea69.map
View File

File diff suppressed because one or more lines are too long

4
docs/js.0fb5bcb3.css → docs/js.6f9801cd.css
View File

File diff suppressed because one or more lines are too long

1
docs/leaves.9711e0f6.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

1
docs/new.3ebb1f32.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

33
index.html
View File

@ -29,7 +29,8 @@
<a class="sidebar__link" href="#evenly-distributed-children"><span>Evenly distributed children</span></a>
<a class="sidebar__link" href="#flexbox-centering"><span>Flexbox centering</span></a>
<a class="sidebar__link" href="#grid-centering"><span>Grid centering</span></a>
<a class="sidebar__link" href="#last-item-with-remaining-available-height"><span>Last item with remaining available height</span></a>
<a class="sidebar__link" href="#last-item-with-remaining-available-height">
<img alt="New" draggable="false" class="sidebar__new" src="./src/img/new.svg"><span>Last item with remaining available height</span></a>
<a class="sidebar__link" href="#transform-centering"><span>Transform centering</span></a>
<a class="sidebar__link" href="#truncate-text"><span>Truncate text</span></a>
</section>
@ -65,7 +66,8 @@
<a class="sidebar__link" href="#mouse-cursor-gradient-tracking"><span>Mouse cursor gradient tracking</span></a>
<a class="sidebar__link" href="#popout-menu"><span>Popout menu</span></a>
<a class="sidebar__link" href="#sibling-fade"><span>Sibling fade</span></a>
<a class="sidebar__link" href="#toggle-switch"><span>Toggle switch</span></a>
<a class="sidebar__link" href="#toggle-switch">
<img alt="New" draggable="false" class="sidebar__new" src="./src/img/new.svg"><span>Toggle switch</span></a>
</section>
<section data-type="other" class="sidebar__section">
<h4 class="sidebar__section-heading">other</h4>
@ -77,13 +79,18 @@
<div class="content-wrapper">
<header class="header">
<div class="container">
<img class="header__logo" draggable="false" src="./src/img/logo.png">
<h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1>
<p class="header__description">
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
</p>
<div class="header__github-button-wrapper">
<a class="github-button header__github-button" href="https://github.com/30-seconds/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star 30-seconds/30-seconds-of-css on GitHub">Star</a>
<img class="header__leaves" draggable="false" id="header__leaves1" src="./src/img/leaves.svg" alt="">
<img class="header__leaves" draggable="false" id="header__leaves2" src="./src/img/leaves.svg" alt="">
<img id="header__blob" draggable="false" src="./src/img/blob.png" alt="">
<div class="header__content">
<img class="header__logo" draggable="false" src="./src/img/logo.png">
<h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1>
<p class="header__description">
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
</p>
<div class="header__github-button-wrapper">
<a class="github-button header__github-button" href="https://github.com/30-seconds/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star 30-seconds/30-seconds-of-css on GitHub">Star</a>
</div>
</div>
</div>
</header>
@ -1548,6 +1555,7 @@ el.style.setProperty('--max-height', height + 'px')
<!-- tags: animation -->
</div>
<div class="snippet">
<img alt="New" draggable="false" class="snippet__new" src="./src/img/new.svg">
<h3 id="last-item-with-remaining-available-height"><span>Last item with remaining available height</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="container"&gt;
@ -1617,6 +1625,8 @@ body {
</ul>
<!-- tags: layout -->
<!-- date: 2018-09-30 -->
</div>
<div class="snippet">
<h3 id="mouse-cursor-gradient-tracking"><span>Mouse cursor gradient tracking</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3>
@ -1744,7 +1754,6 @@ btn.onmousemove = function(e) {
&lt;li&gt;Two&lt;/li&gt;
&lt;li&gt;Three&lt;/li&gt;
&lt;li&gt;Four&lt;/li&gt;
&lt;li&gt;Five&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.css-not-selector-shortcut {
@ -1769,7 +1778,6 @@ li:not(:last-child) {
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
<style>
@ -2334,6 +2342,7 @@ li:not(:last-child) {
<!-- tags: visual -->
</div>
<div class="snippet">
<img alt="New" draggable="false" class="snippet__new" src="./src/img/new.svg">
<h3 id="toggle-switch"><span>Toggle switch</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3>
<p>Creates a toggle switch with CSS only.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;input type="checkbox" id="toggle" class="offscreen" /&gt;
@ -2433,6 +2442,8 @@ input[type='checkbox']:checked + .switch {
</ul>
<!-- tags: visual, interactivity -->
<!-- date: 2018-10-03 -->
</div>
<div class="snippet">
<h3 id="transform-centering"><span>Transform centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>