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:
Catalin Zalog
2018-03-02 09:39:25 +02:00
parent a43301ff97
commit b4ad7ce759
6 changed files with 33 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/917965659999f2f26ec723d31a6f80af.css Normal file
View File

File diff suppressed because one or more lines are too long

19
docs/917965659999f2f26ec723d31a6f80af.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
docs/ed181a09d21ac2b9392491a3b762d3df.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
docs/fba68f50ffc10eedf61d3e0f4ad4e381.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

5
docs/index.html
View File

@ -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="cf2ed1ce6be4ba59eed1079db594cc6e.png"> <script src="4d4edbda57043aeeabeac31d2dd12d0d.js" defer=""></script> <script async="" defer="" src="https://buttons.github.io/buttons.js"></script> <link rel="stylesheet" href="4d4edbda57043aeeabeac31d2dd12d0d.css"></head> <body> <button class="back-to-top-button" aria-label="back to top">↑</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"> <a class="sidebar__link" href="#box-sizing-reset">Box-sizing reset</a> <a class="sidebar__link" href="#clearfix">Clearfix</a> <a class="sidebar__link" href="#constant-width-to-height-ratio">Constant width to height ratio</a> <a class="sidebar__link" href="#custom-scrollbar">Custom scrollbar</a> <a class="sidebar__link" href="#custom-text-selection">Custom text selection</a> <a class="sidebar__link" href="#disable-selection">Disable selection</a> <a class="sidebar__link" href="#donut-spinner">Donut spinner</a> <a class="sidebar__link" href="#easing-variables">Easing variables</a> <a class="sidebar__link" href="#etched-text">Etched text</a> <a class="sidebar__link" href="#evenly-distributed-children">Evenly distributed children</a> <a class="sidebar__link" href="#gradient-text">Gradient text</a> <a class="sidebar__link" href="#hairline-border">Hairline border</a> <a class="sidebar__link" href="#horizontal-and-vertical-centering">Horizontal and vertical centering</a> <a class="sidebar__link" href="#hover-underline-animation">Hover underline animation</a> <a class="sidebar__link" href="#mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</a> <a class="sidebar__link" href="#overflow-scroll-gradient">Overflow scroll gradient</a> <a class="sidebar__link" href="#popout-menu">Popout menu</a> <a class="sidebar__link" href="#pretty-text-underline">Pretty text underline</a> <a class="sidebar__link" href="#shape-separator">Shape separator</a> <a class="sidebar__link" href="#system-font-stack">System font stack</a> <a class="sidebar__link" href="#triangle">Triangle</a> <a class="sidebar__link" href="#truncate-text">Truncate text</a> </div> </nav> <div class="content-wrapper"> <header class="header"> <div class="container"> <img class="header__logo" draggable="false" src="76f3fcef6c36c4d7c29fc6fcd102dfe3.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> <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> </header> <main class="main" id="main"> <div class="container"> <div class="snippet"> <h3 id="box-sizing-reset">Box-sizing reset</h3> <p>Resets the box-model so that <code>width</code>s and <code>height</code>s are not affected by their <code>border</code>s or <code>padding</code>.</p> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">html {
<!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="ed181a09d21ac2b9392491a3b762d3df.png"> <script src="917965659999f2f26ec723d31a6f80af.js" defer=""></script> <script async="" defer="" src="https://buttons.github.io/buttons.js"></script> <link rel="stylesheet" href="917965659999f2f26ec723d31a6f80af.css"></head> <body> <button class="back-to-top-button" aria-label="back to top">↑</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"> <a class="sidebar__link" href="#box-sizing-reset">Box-sizing reset</a> <a class="sidebar__link" href="#clearfix">Clearfix</a> <a class="sidebar__link" href="#constant-width-to-height-ratio">Constant width to height ratio</a> <a class="sidebar__link" href="#custom-scrollbar">Custom scrollbar</a> <a class="sidebar__link" href="#custom-text-selection">Custom text selection</a> <a class="sidebar__link" href="#disable-selection">Disable selection</a> <a class="sidebar__link" href="#donut-spinner">Donut spinner</a> <a class="sidebar__link" href="#easing-variables">Easing variables</a> <a class="sidebar__link" href="#etched-text">Etched text</a> <a class="sidebar__link" href="#evenly-distributed-children">Evenly distributed children</a> <a class="sidebar__link" href="#gradient-text">Gradient text</a> <a class="sidebar__link" href="#hairline-border">Hairline border</a> <a class="sidebar__link" href="#horizontal-and-vertical-centering">Horizontal and vertical centering</a> <a class="sidebar__link" href="#hover-underline-animation">Hover underline animation</a> <a class="sidebar__link" href="#mouse-cursor-gradient-tracking">Mouse cursor gradient tracking</a> <a class="sidebar__link" href="#overflow-scroll-gradient">Overflow scroll gradient</a> <a class="sidebar__link" href="#popout-menu">Popout menu</a> <a class="sidebar__link" href="#pretty-text-underline">Pretty text underline</a> <a class="sidebar__link" href="#shape-separator">Shape separator</a> <a class="sidebar__link" href="#system-font-stack">System font stack</a> <a class="sidebar__link" href="#triangle">Triangle</a> <a class="sidebar__link" href="#truncate-text">Truncate text</a> </div> </nav> <div class="content-wrapper"> <header class="header"> <div class="container"> <img class="header__logo" draggable="false" src="fba68f50ffc10eedf61d3e0f4ad4e381.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> <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> </header> <main class="main" id="main"> <div class="container"> <div class="snippet"> <h3 id="box-sizing-reset">Box-sizing reset</h3> <p>Resets the box-model so that <code>width</code>s and <code>height</code>s are not affected by their <code>border</code>s or <code>padding</code>.</p> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">html {
box-sizing: border-box;
}
*,
@ -306,5 +306,6 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__truncate-text"> This text will be truncated if it exceeds 200px in width. </p> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>overflow: hidden</code> prevents the text from overflowing its dimensions (for a block, 100% width and auto height).</li> <li><code>white-space: nowrap</code> prevents the text from exceeding one line in height.</li> <li><code>text-overflow: ellipsis</code> makes it so that if the text exceeds its dimensions, it will end with an ellipsis.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 98.1% </div> </div> <p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=text-overflow" target="_blank">https://caniuse.com/#feat=text-overflow</a> </li> </ul> </div> </div> </main> </div> <footer class="footer"></footer> </body> </html>
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__truncate-text"> This text will be truncated if it exceeds 200px in width. </p> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>overflow: hidden</code> prevents the text from overflowing its dimensions (for a block, 100% width and auto height).</li> <li><code>white-space: nowrap</code> prevents the text from exceeding one line in height.</li> <li><code>text-overflow: ellipsis</code> makes it so that if the text exceeds its dimensions, it will end with an ellipsis.</li> <li><code>width: 200px;</code> ensures the element has a dimension, to know when to get ellipsis</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 98.1% </div> </div> <p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=text-overflow" target="_blank">https://caniuse.com/#feat=text-overflow</a> </li> </ul> </div> </div> </main> </div> <footer class="footer"></footer> </body> </html>

2
index.html
View File

@ -1366,6 +1366,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
</code></pre>
<h4 data-type="Demo">Demo</h4>
@ -1388,6 +1389,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<li><code>overflow: hidden</code> prevents the text from overflowing its dimensions (for a block, 100% width and auto height).</li>
<li><code>white-space: nowrap</code> prevents the text from exceeding one line in height.</li>
<li><code>text-overflow: ellipsis</code> makes it so that if the text exceeds its dimensions, it will end with an ellipsis.</li>
<li><code>width: 200px;</code> ensures the element has a dimension, to know when to get ellipsis</li>
</ol>
<h4 data-type="Browser support">Browser support</h4>
<div>