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

Resolve #64

Browse Source
This commit is contained in:
atomiks
2018-03-06 20:05:49 +11:00
parent a50759c8fc
commit fea4fa057d
4 changed files with 72 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/3df57813b7ec2de885ea6075ff46ed46.js
View File

@ -19,12 +19,12 @@ var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iter
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../deps/jump"),t=i(e),s=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var n=(0,s.select)(".hamburger"),a=(0,s.select)(".sidebar__links"),r=(0,s.selectAll)(".sidebar__section"),l="is-active",c=function(){window.innerWidth<=991&&([n,a].forEach(function(e){return e.classList.toggle(l)}),n.setAttribute("aria-expanded",n.classList.contains(l)?"true":"false"))};n.addEventListener("click",c),a.addEventListener("click",function(e){var i=e.target.closest(".sidebar__link");i&&(setTimeout(c,50),(0,t.default)(i.getAttribute("href"),{duration:500,easing:s.easeOutQuint,offset:window.innerWidth<=991?-64:-32}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!a.classList.contains(l)||c()}),EventHub.on("Tag.click",function(e){r.forEach(function(t){t.style.display="block",t.dataset.type!==e.type&&"all"!==e.type&&(t.style.display="none")})}),exports.default={toggle:c};
},{"../deps/jump":17,"../deps/utils":18}],13:[function(require,module,exports) {
"use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})};
},{"../deps/jump":17,"../deps/utils":18}],14:[function(require,module,exports) {
},{"../deps/jump":17,"../deps/utils":18}],15:[function(require,module,exports) {
"use strict";var t=require("../deps/utils"),e=(0,t.selectAll)("button.tags__tag"),i=function(){e.forEach(function(t){return t.classList.remove("is-active")}),this.classList.add("is-active"),EventHub.emit("Tag.click",{type:this.dataset.type})};e.forEach(function(e){return(0,t.on)(e,"click",i)});
},{"../deps/utils":18}],16:[function(require,module,exports) {
},{"../deps/utils":18}],14:[function(require,module,exports) {
"use strict";var t=require("../deps/utils"),e=(0,t.selectAll)(".snippet");EventHub.on("Tag.click",function(l){e.forEach(function(e){(e.style.display="block","all"!==l.type)&&((0,t.selectAll)(".tags__tag",e).some(function(t){return t.dataset.type===l.type})||(e.style.display="none"))})});
},{"../deps/utils":18}],15:[function(require,module,exports) {
},{"../deps/utils":18}],16:[function(require,module,exports) {
"use strict";var e=require("../deps/utils"),t=(0,e.selectAll)(".snippet");t.forEach(function(e){var t=document.createElement("form");t.action="https://codepen.io/pen/define",t.method="POST",t.target="_blank";var n=document.createElement("input");n.type="hidden",n.name="data";var r=document.createElement("button");r.classList="btn is-large codepen-btn",r.innerHTML='<i data-feather="edit-2"></i>Edit on Codepen';var o=e.querySelector("pre code.lang-css"),a=e.querySelector("pre code.lang-html"),i=e.querySelector("pre code.lang-js"),l={css:o.textContent,title:e.querySelector("h3 > span").textContent,html:a?a.textContent:"",js:i?i.textContent:""};n.value=JSON.stringify(l),t.appendChild(n),t.appendChild(r),e.insertBefore(t,e.querySelector(".snippet-demo").nextSibling)});
},{"../deps/utils":18}],7:[function(require,module,exports) {
"use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=require("feather-icons"),r=l(e);require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var s=require("./components/Sidebar"),i=l(s),o=require("./components/BackToTopButton"),u=l(o),n=require("./components/Tag"),c=l(n),p=require("./components/Snippet"),t=l(p),q=require("./components/CodepenCopy"),a=l(q);function l(e){return e&&e.__esModule?e:{default:e}}r.default.replace();
},{"focus-visible":20,"normalize.css":21,"prismjs":19,"feather-icons":22,"../css/deps/prism.css":21,"../css/index.scss":21,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":14,"./components/Snippet":16,"./components/CodepenCopy":15}]},{},[7])
},{"focus-visible":20,"normalize.css":21,"prismjs":19,"feather-icons":22,"../css/deps/prism.css":21,"../css/index.scss":21,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":15,"./components/Snippet":14,"./components/CodepenCopy":16}]},{},[7])

16
docs/index.html
View File

File diff suppressed because one or more lines are too long

32
index.html
View File

@ -354,7 +354,17 @@
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.constant-width-to-height-ratio {
background: #333;
width: 50%;
padding-top: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
</code></pre>
<h4>Demo</h4>
@ -366,19 +376,31 @@
.snippet-demo__constant-width-to-height-ratio {
background: #333;
width: 50%;
padding-top: 50%;
}
.snippet-demo__constant-width-to-height-ratio::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
.snippet-demo__constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
</style>
<h4>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>
<p><code>padding-top</code> on the <code>::before</code> pseudo-element causes the height of the element to equal a percentage of its width. <code>100%</code> therefore means the element's height will always be <code>100%</code> of the width,
creating a responsive square.
</p>
<p>This method also allows content to be placed inside the element normally.</p>
<h4>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>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: layout -->
</div>

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

@ -15,7 +15,17 @@ Given an element of variable width, it will ensure its height remains proportion
.constant-width-to-height-ratio {
background: #333;
width: 50%;
padding-top: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
```
@ -31,17 +41,30 @@ Resize your browser window to see the proportion of the element remain the same.
.snippet-demo__constant-width-to-height-ratio {
background: #333;
width: 50%;
padding-top: 50%;
}
.snippet-demo__constant-width-to-height-ratio::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
.snippet-demo__constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
</style>
#### Explanation
`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 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.
`padding-top` on the `::before` pseudo-element causes the height of the element to equal a percentage of
its width. `100%` therefore means the element's height will always be `100%` of the width, creating a responsive
square.
This method also allows content to be placed inside the element normally.
#### Browser support
<span class="snippet__support-note">⚠️ `padding-top` pushes any content within the element to the bottom.</span>
<span class="snippet__support-note">✅ No caveats.</span>
<!-- tags: layout -->