Resolve #64

docs/3df57813b7ec2de885ea6075ff46ed46.js

@@ -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])

index.html

@@ -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
+            <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,
-              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>
+              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>

snippets/constant-width-to-height-ratio.md

@@ -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
+`padding-top` on the `::before` pseudo-element causes the height of the element to equal a percentage of
-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.
+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 -->