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

fix selector

Browse Source
This commit is contained in:
atomiks
2018-03-01 18:05:22 +10:00
parent 0f8f804f8f
commit 50182b9045
4 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
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-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="#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"> <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-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="#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;
}
*,

2
index.html
View File

@ -56,7 +56,7 @@
<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 {
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">html {
box-sizing: border-box;
}
*,

2
snippets/box-sizing-reset.md
View File

@ -5,7 +5,7 @@ Resets the box-model so that `width`s and `height`s are not affected by their `b
#### CSS
```css
.html {
html {
box-sizing: border-box;
}