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-03-02 10:37:13 +10:00
parent 65587fa376
commit 078868c2fb
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/4d4edbda57043aeeabeac31d2dd12d0d.js
View File

File diff suppressed because one or more lines are too long

2
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"> <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="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 {
box-sizing: border-box;
}
*,