Skip to content

Commit

Permalink
fix: js error
Browse files Browse the repository at this point in the history
  • Loading branch information
@atomiks
atomiks committed Mar 24, 2018
1 parent d98ed42 commit 3455066
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 14 deletions.
20 changes: 10 additions & 10 deletions docs/3df57813b7ec2de885ea6075ff46ed46.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>30 Seconds of CSS</title> <meta name="description" content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. From foundational elements such as clearfix to gradient text color and gradient cursor tracking to CSS easing and far beyond."> <link rel="icon" type="image/png" sizes="32x32" href="e4fdfce991c164037b4cd78667aa2afd.png"> <script src="6c831ee080ce0f905632cb113dfa17d9.js" defer=""></script> <script async="" defer="" src="https://buttons.github.io/buttons.js"></script> <link rel="stylesheet" href="6c831ee080ce0f905632cb113dfa17d9.css"></head> <body> <button class="back-to-top-button" aria-label="back to top"> <i data-feather="arrow-up"></i> </button> <nav class="sidebar" aria-label="Table of Contents"> <button class="hamburger hamburger--spin sidebar__menu" type="button" aria-label="Menu" aria-expanded="false"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <div class="sidebar__links"> <section data-type="layout" class="sidebar__section"> <h4 class="sidebar__section-heading">layout</h4> <a class="sidebar__link" href="#box-sizing-reset"><span>Box-sizing reset</span></a> <a class="sidebar__link" href="#clearfix"><span>Clearfix</span></a> <a class="sidebar__link" href="#constant-width-to-height-ratio"><span>Constant width to height ratio</span></a> <a class="sidebar__link" href="#evenly-distributed-children"><span>Evenly distributed children</span></a> <a class="sidebar__link" href="#flexbox-centering"><span>Flexbox centering</span></a> <a class="sidebar__link" href="#grid-centering"><span>Grid centering</span></a> <a class="sidebar__link" href="#grid-layout"><span>Grid layout</span></a> <a class="sidebar__link" href="#truncate-text"><span>Truncate text</span></a> </section> <section data-type="visual" class="sidebar__section"> <h4 class="sidebar__section-heading">visual</h4> <a class="sidebar__link" href="#circle"><span>Circle</span></a> <a class="sidebar__link" href="#custom-scrollbar"><span>Custom scrollbar</span></a> <a class="sidebar__link" href="#custom-text-selection"><span>Custom text selection</span></a> <a class="sidebar__link" href="#dynamic-shadow"><span>Dynamic shadow</span></a> <a class="sidebar__link" href="#etched-text"><span>Etched text</span></a> <a class="sidebar__link" href="#gradient-text"><span>Gradient text</span></a> <a class="sidebar__link" href="#hairline-border"><span>Hairline border</span></a> <a class="sidebar__link" href="#not-selector"><span>:not selector</span></a> <a class="sidebar__link" href="#overflow-scroll-gradient"><span>Overflow scroll gradient</span></a> <a class="sidebar__link" href="#pretty-text-underline"><span>Pretty text underline</span></a> <a class="sidebar__link" href="#reset-all-styles"><span>Reset all styles</span></a> <a class="sidebar__link" href="#shape-separator"><span>Shape separator</span></a> <a class="sidebar__link" href="#system-font-stack"><span>System font stack</span></a> <a class="sidebar__link" href="#triangle"><span>Triangle</span></a> </section> <section data-type="animation" class="sidebar__section"> <h4 class="sidebar__section-heading">animation</h4> <a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a> <a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a> <a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a> <a class="sidebar__link" href="#height-transition"><span>Height transition</span></a> <a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a> </section> <section data-type="interactivity" class="sidebar__section"> <h4 class="sidebar__section-heading">interactivity</h4> <a class="sidebar__link" href="#disable-selection"><span>Disable selection</span></a> <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> </section> <section data-type="other" class="sidebar__section"> <h4 class="sidebar__section-heading">other</h4> <a class="sidebar__link" href="#counter"><span>Counter</span></a> <a class="sidebar__link" href="#custom-variables"><span>Custom variables</span></a> </section> </div> </nav> <div class="content-wrapper"> <header class="header"> <div class="container"> <img class="header__logo" draggable="false" src="51a402ced656eeea80dcb3b08a0ac425.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/atomiks/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star atomiks/30-seconds-of-css on GitHub">Star</a> </div> </div> </header> <main class="main" id="main"> <div class="container"> <nav class="tags" aria-label="Filter by tags"> <button class="tags__tag is-large is-active" data-type="all"> <i data-feather="check"></i>all</button> <button class="tags__tag is-large " data-type="layout"> <i data-feather="layout"></i>layout</button> <button class="tags__tag is-large " data-type="visual"> <i data-feather="eye"></i>visual</button> <button class="tags__tag is-large " data-type="animation"> <i data-feather="loader"></i>animation</button> <button class="tags__tag is-large " data-type="interactivity"> <i data-feather="edit-2"></i>interactivity</button> <button class="tags__tag is-large " data-type="other"> <i data-feather="tag"></i>other</button> </nav> <div class="snippet"> <h3 id="bouncing-loader"><span>Bouncing loader</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3> <p>Creates a bouncing loader animation.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="bouncing-loader"&gt;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>30 Seconds of CSS</title> <meta name="description" content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. From foundational elements such as clearfix to gradient text color and gradient cursor tracking to CSS easing and far beyond."> <link rel="icon" type="image/png" sizes="32x32" href="a8de561a148aec60dd3697311c540b29.png"> <script src="3df57813b7ec2de885ea6075ff46ed46.js" defer=""></script> <script async="" defer="" src="https://buttons.github.io/buttons.js"></script> <link rel="stylesheet" href="3df57813b7ec2de885ea6075ff46ed46.css"></head> <body> <button class="back-to-top-button" aria-label="back to top"> <i data-feather="arrow-up"></i> </button> <nav class="sidebar" aria-label="Table of Contents"> <button class="hamburger hamburger--spin sidebar__menu" type="button" aria-label="Menu" aria-expanded="false"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <div class="sidebar__links"> <section data-type="layout" class="sidebar__section"> <h4 class="sidebar__section-heading">layout</h4> <a class="sidebar__link" href="#box-sizing-reset"><span>Box-sizing reset</span></a> <a class="sidebar__link" href="#clearfix"><span>Clearfix</span></a> <a class="sidebar__link" href="#constant-width-to-height-ratio"><span>Constant width to height ratio</span></a> <a class="sidebar__link" href="#evenly-distributed-children"><span>Evenly distributed children</span></a> <a class="sidebar__link" href="#flexbox-centering"><span>Flexbox centering</span></a> <a class="sidebar__link" href="#grid-centering"><span>Grid centering</span></a> <a class="sidebar__link" href="#grid-layout"><span>Grid layout</span></a> <a class="sidebar__link" href="#truncate-text"><span>Truncate text</span></a> </section> <section data-type="visual" class="sidebar__section"> <h4 class="sidebar__section-heading">visual</h4> <a class="sidebar__link" href="#circle"><span>Circle</span></a> <a class="sidebar__link" href="#custom-scrollbar"><span>Custom scrollbar</span></a> <a class="sidebar__link" href="#custom-text-selection"><span>Custom text selection</span></a> <a class="sidebar__link" href="#dynamic-shadow"><span>Dynamic shadow</span></a> <a class="sidebar__link" href="#etched-text"><span>Etched text</span></a> <a class="sidebar__link" href="#gradient-text"><span>Gradient text</span></a> <a class="sidebar__link" href="#hairline-border"><span>Hairline border</span></a> <a class="sidebar__link" href="#not-selector"><span>:not selector</span></a> <a class="sidebar__link" href="#overflow-scroll-gradient"><span>Overflow scroll gradient</span></a> <a class="sidebar__link" href="#pretty-text-underline"><span>Pretty text underline</span></a> <a class="sidebar__link" href="#reset-all-styles"><span>Reset all styles</span></a> <a class="sidebar__link" href="#shape-separator"><span>Shape separator</span></a> <a class="sidebar__link" href="#system-font-stack"><span>System font stack</span></a> <a class="sidebar__link" href="#triangle"><span>Triangle</span></a> </section> <section data-type="animation" class="sidebar__section"> <h4 class="sidebar__section-heading">animation</h4> <a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a> <a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a> <a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a> <a class="sidebar__link" href="#height-transition"><span>Height transition</span></a> <a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a> </section> <section data-type="interactivity" class="sidebar__section"> <h4 class="sidebar__section-heading">interactivity</h4> <a class="sidebar__link" href="#disable-selection"><span>Disable selection</span></a> <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> </section> <section data-type="other" class="sidebar__section"> <h4 class="sidebar__section-heading">other</h4> <a class="sidebar__link" href="#counter"><span>Counter</span></a> <a class="sidebar__link" href="#custom-variables"><span>Custom variables</span></a> </section> </div> </nav> <div class="content-wrapper"> <header class="header"> <div class="container"> <img class="header__logo" draggable="false" src="e5b4b9ce166177b1bc2dc3772012e0a1.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/atomiks/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star atomiks/30-seconds-of-css on GitHub">Star</a> </div> </div> </header> <main class="main" id="main"> <div class="container"> <nav class="tags" aria-label="Filter by tags"> <button class="tags__tag is-large is-active" data-type="all"> <i data-feather="check"></i>all</button> <button class="tags__tag is-large " data-type="layout"> <i data-feather="layout"></i>layout</button> <button class="tags__tag is-large " data-type="visual"> <i data-feather="eye"></i>visual</button> <button class="tags__tag is-large " data-type="animation"> <i data-feather="loader"></i>animation</button> <button class="tags__tag is-large " data-type="interactivity"> <i data-feather="edit-2"></i>interactivity</button> <button class="tags__tag is-large " data-type="other"> <i data-feather="tag"></i>other</button> </nav> <div class="snippet"> <h3 id="bouncing-loader"><span>Bouncing loader</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3> <p>Creates a bouncing loader animation.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="bouncing-loader"&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
Expand Down Expand Up @@ -421,7 +421,7 @@
line-height: 1.2;
text-align: center;
}
</code></pre> <h4>Demo</h4> <div class="snippet-demo"> <div class="snippet-demo__overflow-scroll-gradient"> <div class="snippet-demo__overflow-scroll-gradient__scroller"> Content to be scrolled </div> </div> </div> <script>!function(){var e=document.querySelector(".snippet-demo__height-transition__el"),t=e.scrollHeight;e.style.setProperty("--max-height",t+"px")}()(function(){var e=document.querySelector(".snippet-demo__mouse-cursor-gradient-tracking");e.onmousemove=function(t){var o=t.pageX-e.offsetLeft-e.offsetParent.offsetLeft,r=t.pageY-e.offsetTop-e.offsetParent.offsetTop;e.style.setProperty("--x",o+"px"),e.style.setProperty("--y",r+"px")}})(),document.querySelector(".snippet-demo__overflow-scroll-gradient__scroller").innerHTML="content ".repeat(100);</script> <h4>Explanation</h4> <ol> <li><code>position: relative</code> on the parent establishes a Cartesian positioning context for pseudo-elements.</li> <li><code>::after</code> defines a pseudo element.</li> <li><code>background-image: linear-gradient(...)</code> adds a linear gradient that fades from transparent to white (top to bottom).</li> <li><code>position: absolute</code> takes the pseudo element out of the flow of the document and positions it in relation to the parent.</li> <li><code>width: 240px</code> matches the size of the scrolling element (which is a child of the parent that has the pseudo element).</li> <li><code>height: 25px</code> is the height of the fading gradient pseudo-element, which should be kept relatively small.</li> <li><code>bottom: 0</code> positions the pseudo-element at the bottom of the parent.</li> <li><code>pointer-events: none</code> specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 95.4% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=css-gradients" target="_blank">https://caniuse.com/#feat=css-gradients</a> </li> </ul> </div> <div class="snippet"> <h3 id="popout-menu"><span>Popout menu</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3> <p>Reveals an interactive popout menu on hover.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="reference"&gt;
</code></pre> <h4>Demo</h4> <div class="snippet-demo"> <div class="snippet-demo__overflow-scroll-gradient"> <div class="snippet-demo__overflow-scroll-gradient__scroller"> Content to be scrolled </div> </div> </div> <script>!function(){var e=document.querySelector(".snippet-demo__height-transition__el"),t=e.scrollHeight;e.style.setProperty("--max-height",t+"px")}(),function(){var e=document.querySelector(".snippet-demo__mouse-cursor-gradient-tracking");e.onmousemove=function(t){var o=t.pageX-e.offsetLeft-e.offsetParent.offsetLeft,r=t.pageY-e.offsetTop-e.offsetParent.offsetTop;e.style.setProperty("--x",o+"px"),e.style.setProperty("--y",r+"px")}}(),document.querySelector(".snippet-demo__overflow-scroll-gradient__scroller").innerHTML="content ".repeat(100);</script> <h4>Explanation</h4> <ol> <li><code>position: relative</code> on the parent establishes a Cartesian positioning context for pseudo-elements.</li> <li><code>::after</code> defines a pseudo element.</li> <li><code>background-image: linear-gradient(...)</code> adds a linear gradient that fades from transparent to white (top to bottom).</li> <li><code>position: absolute</code> takes the pseudo element out of the flow of the document and positions it in relation to the parent.</li> <li><code>width: 240px</code> matches the size of the scrolling element (which is a child of the parent that has the pseudo element).</li> <li><code>height: 25px</code> is the height of the fading gradient pseudo-element, which should be kept relatively small.</li> <li><code>bottom: 0</code> positions the pseudo-element at the bottom of the parent.</li> <li><code>pointer-events: none</code> specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 95.4% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=css-gradients" target="_blank">https://caniuse.com/#feat=css-gradients</a> </li> </ul> </div> <div class="snippet"> <h3 id="popout-menu"><span>Popout menu</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3> <p>Reveals an interactive popout menu on hover.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="reference"&gt;
&lt;div class="popout-menu"&gt;
Popout menu
&lt;/div&gt;
Expand Down
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1413,6 +1413,7 @@ <h4>Demo</h4>
}
</style>
<script>
;
(function() {
var el = document.querySelector('.snippet-demo__height-transition__el')
var height = el.scrollHeight
Expand Down Expand Up @@ -1635,6 +1636,7 @@ <h4>Demo</h4>
}
</style>
<script>
;
(function() {
var btn = document.querySelector('.snippet-demo__mouse-cursor-gradient-tracking')
btn.onmousemove = function(e) {
Expand Down
2 changes: 1 addition & 1 deletion snippets/height-transition.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ el.style.setProperty('--max-height', height + 'px')
</style>

<script>
(function () {
;(function () {
var el = document.querySelector('.snippet-demo__height-transition__el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
Expand Down
2 changes: 1 addition & 1 deletion snippets/mouse-cursor-gradient-tracking.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ btn.onmousemove = function(e) {
</style>

<script>
(function () {
;(function () {
var btn = document.querySelector('.snippet-demo__mouse-cursor-gradient-tracking')
btn.onmousemove = function (e) {
var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
Expand Down

0 comments on commit 3455066

Please sign in to comment.