Merge pull request #98 from mvujovic/filter-effects-codepen-responsive

Make filter effects codepen responsive. Fixes issue #56.
adobe-webplatform · Sep 12, 2014 · 4a1df78 · 4a1df78
2 parents 4aea304 + 7fe2312
commit 4a1df78
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 13 deletions.
diff --git a/_posts/2014-06-12-filter-effects.md b/_posts/2014-06-12-filter-effects.md
@@ -22,8 +22,10 @@ Or you can use SVG filters to customize your own visual effects.
 
 It's all encoded in the [Filter Effects Specification](http://www.w3.org/TR/filter-effects/){:target="_blank"}. But first, let's check out a quick example of CSS filters. Play with the slider below:
 
-<p data-height="289" data-theme-id="0" data-slug-hash="KyEpe" data-default-tab="result" class='codepen'>See the pen <a href='http://codepen.io/adobe/pen/KyEpe/'>CSS Filters Example</a> by Adobe Web Platform (<a href='http://codepen.io/adobe'>@adobe</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
-<script async src="//codepen.io/assets/embed/ei.js"></script>
+<div class="filter-effects-codepen">
+  <p data-height="320" data-theme-id="0" data-slug-hash="KyEpe" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/adobe/pen/KyEpe/'>CSS Filters Example</a> by Adobe Web Platform (<a href='http://codepen.io/adobe'>@adobe</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+  <script async src="//codepen.io/assets/embed/ei.js"></script>
+</div>
 
 ##When can I use it?
 

diff --git a/css/main.css b/css/main.css
diff --git a/css/main.css.map b/css/main.css.map
diff --git a/css/main.scss b/css/main.scss
@@ -197,7 +197,7 @@ p, code, pre, blockquote {
   margin: 1rem 0;
 }
 
-figure, iframe {
+figure {
   margin: 2rem 0;
 }
 
@@ -206,6 +206,10 @@ figcaption {
   font-style: italic;
 }
 
+iframe {
+  margin: 1rem 0;
+}
+
 ol, ul {
   margin: 1rem 3rem;
   &.flush {
@@ -314,3 +318,13 @@ a {
 .header.home {
   @include halftone($offbgcolor, '/img/trianglify-background.svg')
 }
+
+/* Page Specific CSS */
+
+.filter-effects-codepen iframe {
+  /* This breakpoint should correspond to the one defined in the CodePen, so
+     that when the CodePen changes its layout, the iframe height is updated. */
+  @media (max-width: 590px) {
+    height: 215px;
+  }
+}