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

fix #17

Browse Source
This commit is contained in:
atomiks
2018-02-28 05:36:01 +10:00
parent 468a67c12c
commit 10b866ba17
4 changed files with 7 additions and 7 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

@ -17,7 +17,7 @@
width: 50%; width: 50%;
padding-top: 50%; padding-top: 50%;
} }
</code></pre> <h4 data-type="Demo">Demo</h4> <p>Resize your browser window to see the proportion of the element remain the same.</p> <div class="snippet-demo"> <div class="snippet-demo__constant-width-to-height-ratio"></div> </div> <h4 data-type="Explanation">Explanation</h4> <p><code>padding-top</code> and <code>padding-bottom</code> can be used as an alternative to <code>height</code> such that the percentage value causes an element's height to become a percentage of its width, i.e. <code>50%</code> means the height will be 50% of the element's width. This allows its proportion to remain constant.</p> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 99+% </div> </div> <p><span class="snippet__support-note">⚠️ <code>padding-top</code> pushes any content within the element to the bottom.</span></p> </div> <div class="snippet"> <h3 id="custom-text-selection">Custom text selection</h3> <p>Changes the styling of text selection.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="custom-text-selection"&gt;Select some of this text.&lt;/p&gt; </code></pre> <h4 data-type="Demo">Demo</h4> <p>Resize your browser window to see the proportion of the element remain the same.</p> <div class="snippet-demo"> <div class="snippet-demo__constant-width-to-height-ratio"></div> </div> <h4 data-type="Explanation">Explanation</h4> <p><code>padding-top</code> and <code>padding-bottom</code> can be used as an alternative to <code>height</code> such that the percentage value causes an element's height to become a percentage of its parent's width, i.e. <code>50%</code> means the height will be 50% of the parent element's width, which means it acts the same as <code>width</code>. This allows its proportion to remain constant.</p> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 99+% </div> </div> <p><span class="snippet__support-note">⚠️ <code>padding-top</code> pushes any content within the element to the bottom.</span></p> </div> <div class="snippet"> <h3 id="custom-text-selection">Custom text selection</h3> <p>Changes the styling of text selection.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="custom-text-selection"&gt;Select some of this text.&lt;/p&gt;
</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.custom-text-selection::selection { </code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.custom-text-selection::selection {
background: red; background: red;
color: white; color: white;

4
index.html
View File

@ -124,8 +124,8 @@
} }
</style> </style>
<h4 data-type="Explanation">Explanation</h4> <h4 data-type="Explanation">Explanation</h4>
<p><code>padding-top</code> and <code>padding-bottom</code> can be used as an alternative to <code>height</code> such that the percentage value causes an element's height to become a percentage of its width, i.e. <code>50%</code> means the height <p><code>padding-top</code> and <code>padding-bottom</code> can be used as an alternative to <code>height</code> such that the percentage value causes an element's height to become a percentage of its parent's width, i.e. <code>50%</code> means
will be 50% of the element's width. This allows its proportion to remain constant.</p> the height will be 50% of the parent element's width, which means it acts the same as <code>width</code>. This allows its proportion to remain constant.</p>
<h4 data-type="Browser support">Browser support</h4> <h4 data-type="Browser support">Browser support</h4>
<div> <div>
<div class="snippet__browser-support"> <div class="snippet__browser-support">

2
snippets/constant-width-to-height-ratio.md
View File

@ -38,7 +38,7 @@ Resize your browser window to see the proportion of the element remain the same.
#### Explanation #### Explanation
`padding-top` and `padding-bottom` can be used as an alternative to `height` such that the percentage value `padding-top` and `padding-bottom` can be used as an alternative to `height` such that the percentage value
causes an element's height to become a percentage of its width, i.e. `50%` means the height will be 50% of the element's width. This allows its proportion to remain constant. causes an element's height to become a percentage of its parent's width, i.e. `50%` means the height will be 50% of the parent element's width, which means it acts the same as `width`. This allows its proportion to remain constant.
#### Browser support #### Browser support