Made demos responsive

docs/basics/containers.md

@@ -11,7 +11,7 @@ However, it's a good idea _not_ to do this.  Standalone Container objects are **
 
 So that's the primary use for Containers - as groups of renderable objects in a hierarchy.
 
-<iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/demos-basic/container.js" class="demo"></iframe>
+<div class="responsive-4-3"><iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/demos-basic/container.js"></iframe></div>
 
 ## Masking
 

docs/basics/graphics.md

@@ -5,7 +5,7 @@
 
 In this guide, we're going to de-mystify the Graphics object, starting with how to think about what it does.
 
-<iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/graphics/simple.js" class="demo"></iframe>
+<div class="responsive-4-3"><iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/graphics/simple.js"></iframe></div>
 
 ## Graphics Is About Building - Not Drawing
 
@@ -84,7 +84,7 @@ Doing so is simple.  Create the object, call the various builder functions to ad
 
 You can also use a Graphics object as a complex mask.  To do so, build your object and primitives as usual.  Next create a PIXI.Container object that will contain the masked content, and set its `mask` property to your Graphics object.  The children of the container will now be clipped to only show through inside the geometry you've created.  This technique works for both WebGL and Canvas-based rendering.
 
-<iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/masks/graphics.js" class="demo"></iframe>
+<div class="responsive-4-3"><iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/masks/graphics.js"></iframe></div>
 
 ## Caveats and Gotchas
 

docs/basics/interaction.md

@@ -7,7 +7,7 @@ PixiJS is primarily a rendering system, but it also includes support for interac
 
 Any DisplayObject-derived object (Sprite, Container, etc.) can become interactive simply by setting its `interactive` property to `true`.  Doing so will cause the object to emit interaction events that can be responded to in order to drive your project's behavior.
 
-<iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/interaction/click.js" class="demo"></iframe>
+<div class="responsive-4-3"><iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/interaction/click.js"></iframe></div>
 
 ## Interaction is Events
 
@@ -40,7 +40,7 @@ let globalPt = new PIXI.Point(100,50);
 let obj = app.renderer.plugins.interaction.hitTest(globalPt);
 ```
 
-<iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/interaction/custom-hitarea.js" class="demo"></iframe>
+<div class="responsive-4-3"><iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/interaction/custom-hitarea.js"></iframe></div>
 
 ## Optimization
 

docs/basics/sprites.md

@@ -7,7 +7,7 @@ Sprites are the simplest and most common renderable object in PixiJS.  They repr
 
 To create a Sprite, all you need is a Texture (check out the Texture guide).  Load a PNG's URL using the PIXI.Loader class, then call `PIXI.Sprite.from(url)` and you're all set.  As a convenience during prototyping, you can pass a non-loaded URL to `from()` and PixiJS will handle it, but your sprite will "pop in" after it loads if you don't pre-load your textures.
 
-<iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/sprite/basic.js" class="demo"></iframe>
+<div class="responsive-4-3"><iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/sprite/basic.js"></iframe></div>
 
 ## Using Sprites
 

docs/basics/text.md

@@ -15,7 +15,7 @@ In order to draw text to the screen, you use a {@link PIXI.Text} object.  Under
 
 So when working with PIXI.Text objects, there are two sets of options - standard display object options like position, rotation, etc that work *after* the text is rasterized internally, and text style options that are used *while* rasterizing.  Because text once rendered is basically just a sprite, there's no need to review the standard options.  Instead, let's focus on how text is styled.
 
-<iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/text/text.js" class="demo"></iframe>
+<div class="responsive-4-3"><iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/text/text.js"></iframe></div>
 
 ## Text Styles
 
@@ -81,7 +81,7 @@ In addition to the standard PIXI.Text approach to adding text to your project, P
 
 The primary advantage of this approach is speed - changing text frequently is much cheaper and rendering each additional piece of text is much faster due to the shared source texture.
 
-<iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/text/bitmap-text.js" class="demo"></iframe>
+<div class="responsive-4-3"><iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/text/bitmap-text.js"></iframe></div>
 
 ## BitmapFont
 

docs/basics/textures.md

@@ -73,4 +73,4 @@ RenderTexture: A more advanced (but very powerful!) feature is to build a Textur
 
 Each of these texture sources has caveats and nuances that we can't cover in this guide, but they should give you a feeling for the power of PixiJS's texture system. <!--TODO: link to advanced textures guide-->
 
-<iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/textures/render-texture-basic.js" class="demo"></iframe>
+<div class="responsive-4-3"><iframe src="https://pixijs.io/examples/?embed=1&showcode=1#/textures/render-texture-basic.js"></iframe></div>

src/styles/md.scss

@@ -78,11 +78,21 @@
         margin-top: 0;
     }
 
-    iframe.demo {
-        border: 0;
-        padding: 0;
-        width: 100%;
-        aspect-ratio: 4 / 3;
+    .responsive-4-3 {
+        position: relative;
+        height: 0;
+        margin: 0;
+        padding-left: 0;
+        padding-bottom: 75%;
+        & > iframe {
+            border: 0;
+            padding: 0;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
     }
 
     & h1 {
@@ -164,10 +174,6 @@
     & h1 + h2 {
         margin-top: 0;
     }
-
-    pre {
-        max-width: calc(100vw - 50px);
-    }
 }
 
 .footer-gap {