Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--Author: Joshua Hibbert-->
<!--http://codepen.io/joshnh/pen/KyxtH-->

<!--
    I added the CSS Regions polyfill from Adobe Systems,
    but the rest of the example is unmodified.
-->
<div id="book" class="book">
    <div class="front-cover">
        <a href="#book">
            <h1>Doesn’t it make you just want to sneeze?</h1>
            <h2><em>by</em>Jonathan Munn</h2>
        </a>
    </div>
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
</div>

<div class="shelf"></div>

<div class="story">
    <p>Pete was leaning against the wall, watching the street go by. I pulled the bike to a halt, the front wheel pointing in his direction.</p>
    <p>“I think I’ve got a fairy stuck up my nose.”</p>
    <p>“S’not true!” came a voice from inside the nose in question.</p>
    <p>“Hey! Not bad that!” Pete said. “I didn’t see your lips move at all.”</p>
    <p>“It’s not a joke.”</p>
    <p>The itching was getting worse. I pulled out a paper tissue.</p>
    <p>“Stop that now!” came the voice again. “You know I don’t like it.”</p>
    <p>“S’not my fault. You make me want to sneeze!”</p>
    <p>And I did.</p>
    <p>I inspected the crumpled paper. Lots of yellow goo, but no fairy.</p>
    <p>Pete looked at me with mild disgust as I eyed the handkerchief more closely.</p>
    <p>“You know that’s pretty gross…” he said.</p>
    <p>“Got any other brilliant remarks?” I said.</p>
    <p>I held a finger up to my lips, and waved a hand to silence Pete’s reply.</p>
    <p>“Are you still there?” I called.</p>
    <p>“No thanks to you!” came the little voice.</p>
    <p>Pete looked at me sort of sideways.</p>
    <p>“Look, the first time was OK, but—”</p>
    <p>“It’s not a joke. I’ve really got something stuck up there. I was riding on me bike and I thought I’d swallowed an insect or something. And then it started insulting me”</p>
    <p>“You’re having me on, right?”</p>
    <p>“Pete! Look at me. If it’s a trick, how do I do it then?”</p>
    <p>Pete thought for a moment.</p>
    <p>“If it’s real… Aren’t they supposed to have a pot of gold or something? And they have to tell you where it is if you catch them?”</p>
    <p>“That’s leprechauns, idiot!” said the voice from my noise.</p>
    <p>“So what’s the difference? Just give us the gold and we’ll let you go…”</p>
    <p>“We—?” I started.</p>
    <p>He winked at me.</p>
    <p>“Oh, I’m happy to stick around,” came the voice. “It’s noggins here who wants to get rid of me…”</p>
    <p>Suddenly I felt a violent pain in my nose, my eyes watered.</p>
    <p>“Owwww!” I howled.</p>
    <p>“See what I mean?” the voice shouted over my moans.</p>
    <p>“Perhaps you can use it in exams…” Pete said, scratching his head. “You know, it could tell us all the answers.”</p>
    <p>“Idiot! If it yacks on like that in an exam, I’ll get thrown out. And probably locked up too.”</p>
    <p>“Can’t it whisper?”</p>
    <p>“Perhaps I don’t know the answers anyway?” said the voice. “Have you thought of that?”</p>
    <p>“Anyway, I don’t want it in exams. I just want it to go. Out of my nose.”</p>
    <p>“Can’t you just poke it out?”</p>
    <p>“With what?”</p>
    <p>“S’pose you’ve already tried your finger…”</p>
    <p>“Yes he has,” the voice said. “And it wasn’t pleasant I can tell you.”</p>
    <p>“You see what it’s like. He’s already making sarcastic remarks like that…”</p>
    <p>“What if we put something in your nose to catch it, then? I don’t know… A spider?”</p>
    <p>“No!” we both said at once.</p>
    <p>“Snap!” Pete said. “You both said the same thing at the same time, you’ve got to make a—” He hit his forehead with his palm. “That’s it! Three wishes! When you catch a fairy, you get three wishes. Hey you in there! Is that right?”</p>
    <p>“You could see things like that…” said the voice with resignation.</p>
    <p>“I wish you’d get out of my nose, then!” I cried.</p>
    <p>In a flash the fairy was out of my nose and gone.</p>
    <p>And I’m still waiting for my two other wishes.</p>
    <a class="close" href="#">Finish Reading</a>
</div>
              
            
!

CSS

              
                @import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
@import url(https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic);
@import url(https://fonts.googleapis.com/css?family=Lato:300);

$orange: #ee4e12;

html {
    min-height: 100%;
}
body {
    background-color: #ececec;
    background-image: linear-gradient(transparent, hsla(0, 0%, 0%, 0.075)),
        url("https://subtlepatterns.com/patterns/creampaper.png");
    height: 100%;
    padding: 3em 3em 3em 3.5em;
    transform: perspective(500px);
    transform-style: preserve-3d;
}
.book {
    counter-reset: page;
    display: inline-block;
    padding-right: 3em;
    position: relative;
    transform: perspective(5000px);
    transform-style: preserve-3d;
    white-space: nowrap;
    vertical-align: top;
}
.book:after {
    background-color: $orange;
    bottom: 0;
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.2),
        inset -1px 0 0 hsla(0, 0%, 100%, 0.1),
        inset 0 0 1em hsla(0, 0%, 0%, 0.1),
        inset 0.1em 0 0 hsla(0, 0%, 0%, 0.05), 0.1em 0 0 hsla(0, 0%, 100%, 0.15);
    content: "";
    left: -0.5em;
    position: absolute;
    top: 0;
    width: 0.55em;
    z-index: 10;
}
@for $i from 1 through 8 {
    .book div:nth-child(#{$i}) {
        z-index: (10 - $i);
    }
}
.front-cover {
    background-color: $orange;
    background-image: url("https://cl.ly/image/2e3z073t1Y3a/100-25-6-monochrome.png");
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.2),
        inset 0 0 3em hsla(0, 0%, 0%, 0.15), 0 0 0.5em hsla(0, 0%, 0%, 0.25),
        0 0.25em 0.25em hsla(0, 0%, 0%, 0.1);
    height: 27em;
    transform-origin: 0 0;
    transition: 0.5s;
    width: 17.5em;
}
.front-cover:after,
.front-cover:before {
    content: "";
    pointer-events: none;
    position: absolute;
}
.front-cover:after {
    border: 0.25em double hsla(0, 0%, 100%, 0.1);
    bottom: 1.5em;
    left: 1.25em;
    right: 1.5em;
    top: 1.5em;
}
.front-cover:before {
    border: 0.25em double hsla(0, 0%, 0%, 0.1);
    bottom: 1.55em;
    left: 1.2em;
    right: 1.55em;
    top: 1.45em;
}
.front-cover a {
    display: block;
    padding: 1.5em 1.25em;
    text-decoration: none;
}
.book:hover .front-cover {
    transform: rotateY(-10deg);
}
.book .page:nth-child(2) {
    background-image: linear-gradient(
        90deg,
        hsla(0, 0%, 0%, 0.4) 75%,
        transparent
    );
    background-repeat: repeat-y;
    background-position: 90% 50%;
    background-size: 200% 100%;
}
.book:hover .page:nth-child(2) {
    background-position: 100% 50%;
}
.book:target .page:nth-child(2) {
    background-position: 300% 50%;
}
.book:target .front-cover {
    transform: rotateY(0deg);
}
.front-cover h1,
.front-cover h2 {
    font-family: "Open Sans", sans-serif;
    left: 0.075em;
    padding-left: 0.75em;
    padding-right: 1.25em;
    position: relative;
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.1);
}
.front-cover h1 {
    color: hsla(0, 0%, 0%, 0.75);
    font-family: "Lato", "Open Sans", sans-serif;
    font-size: 1.75em;
    font-weight: 300;
    line-height: 1.25;
    margin-bottom: 2.25em;
    padding-top: 0.8125em;
    text-align: center;
}
.front-cover h2 {
    color: hsla(0, 0%, 0%, 0.5);
    font-size: 1.25em;
    letter-spacing: -1px;
    text-align: center;
}
.front-cover h2 em {
    border-top: 1px solid hsla(0, 0%, 0%, 0.5);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.1);
    display: block;
    font-family: "Gentium Book Basic", serif;
    margin: 0 2.25em;
    padding: 3.125em 0 0.6em;
}
.front-cover,
.page {
    backface-visibility: hidden;
    border-radius: 0.15em;
    bottom: 0;
    display: inline-block;
    left: 0;
    position: relative;
    right: 0;
    top: 0;
    white-space: normal;
    vertical-align: top;
}
.page {
    background-color: #fcfcfc;
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.15),
        inset 0 0 3em hsla(0, 0%, 0%, 0.05), 0 0 0.25em hsla(0, 0%, 0%, 0.05),
        0 0.25em 0.25em hsla(0, 0%, 0%, 0.025);
    height: 17em;
    margin-left: -18.25em;
    padding: 5em 1.5em;
    transition: 0.4s;
    width: 15em;
    -adobe-flow-from: story;
    -webkit-flow-from: story;
}
.book:target .page {
    margin-left: 1.25em;
}
.page:after {
    bottom: 1.5em;
    border-top: 1px solid hsla(0, 0%, 0%, 0.075);
    color: hsla(0, 0%, 0%, 0.25);
    counter-increment: page;
    content: counter(page);
    display: block;
    left: 6em;
    font: italic 0.75em/1 "Gentium Book Basic", serif;
    right: 6em;
    padding-top: 1.5em;
    position: absolute;
    text-align: center;
}
.story {
    //display: none;
    -adobe-flow-into: story;
    -webkit-flow-into: story;
}
.story p {
    color: #303030;
    font: 0.8175em/1.5 "Gentium Book Basic", serif;
    margin: 0;
    text-indent: 0.75em;
}
.book .story {
    display: block;
}
.close {
    color: hsla(0, 0%, 0%, 0.5);
    display: block;
    left: 1.5em;
    font-family: "Gentium Book Basic", serif;
    font-style: italic;
    margin-top: 1.5em;
    padding: 0.75em 1.5em;
    position: absolute;
    right: 1.5em;
    text-align: center;
    text-decoration: none;
    transition: 0.25s;
}
.close:before,
.close:after {
    color: inherit;
    content: " — ";
}
.close:hover,
.close:focus {
    color: $orange;
}

              
            
!

JS

              
                /*! Copyright 2012 Adobe Systems Inc.;
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at

* http://www.apache.org/licenses/LICENSE-2.0

* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
!(function () {
    typeof String.prototype.trim != "function" &&
        (String.prototype.trim = function (e) {
            return e.replace(/^\s+/, "").replace(/\s+$/, "");
        }),
        typeof Array.prototype.forEach != "function" &&
            (Array.prototype.forEach = function (e, t) {
                if (typeof e != "function")
                    throw new TypeError(
                        "Invalid parameter. Expected 'function', got " +
                            typeof e
                    );
                var n = Object(this),
                    r = n.length,
                    i = 0;
                for (i; i < r; i++) e.call(t, this[i], i, n);
            }),
        typeof Array.prototype.indexOf != "function" &&
            (Array.prototype.indexOf = function (e) {
                var t = Object(this),
                    n = -1;
                return (
                    t.forEach(function (t, r) {
                        if (t === e) {
                            n = r;
                            return;
                        }
                    }),
                    n
                );
            });
})(),
    !(function (e) {
        function t() {
            var e = document,
                t = [];
            if (typeof e.querySelectorAll == "function")
                (t = e.querySelectorAll('link[rel="stylesheet"], style')),
                    (t = Array.prototype.slice.call(t, 0));
            else {
                var n = e.getElementsByTagName("link");
                if (n.length)
                    for (var r = 0, i = n.length; r < i; r++)
                        n[r].getAttribute("rel") === "stylesheet" &&
                            t.push(n[r]);
                n = e.getElementsByTagName("style");
                for (var r = 0, i = n.length; r < i; r++) t.push(n[r]);
            }
            return t;
        }
        function n(e) {
            (this.source = e), (this.url = e.href || null), (this.cssText = "");
        }
        function r(e) {
            if (!(this instanceof r)) return new r(e);
            (this.stylesheets = []),
                (this.queueCount = 0),
                (this.callback = e || function () {}),
                this.init();
        }
        (n.prototype.load = function (e, t, n) {
            var r = this;
            if (this.url) {
                var i = new XMLHttpRequest();
                (i.onreadystatechange = function () {
                    i.readyState === 4 &&
                        (i.status === 200
                            ? ((r.cssText = i.responseText), e.call(n, r))
                            : t.call(n, r));
                }),
                    i.open("GET", this.url, !1),
                    i.send(null);
            } else (this.cssText = this.source.textContent), e.call(n, r);
        }),
            (r.prototype.init = function () {
                var e = t(),
                    r = e.length,
                    i,
                    s;
                this.queueCount = r;
                for (s = 0; s < r; s++)
                    (i = new n(e[s])),
                        this.stylesheets.push(i),
                        i.load(
                            this.onStyleSheetLoad,
                            this.onStyleSheetError,
                            this
                        );
            }),
            (r.prototype.onStyleSheetLoad = function (e) {
                this.queueCount--, this.onComplete.call(this);
            }),
            (r.prototype.onStyleSheetError = function (e) {
                var t = this.stylesheets.length,
                    n;
                for (n = 0; n < t; n++)
                    if (e.source === this.stylesheets[n].source) {
                        this.stylesheets.splice(n, 1),
                            this.queueCount--,
                            this.onComplete.call(this);
                        return;
                    }
            }),
            (r.prototype.onComplete = function () {
                this.queueCount === 0 &&
                    this.callback.call(this, this.stylesheets);
            }),
            (e.StyleLoader = r);
    })(window),
    !(function (e) {
        function t() {
            (this.selectorText = null), (this.style = {}), (this.type = "rule");
        }
        function n() {
            function e(e) {
                var t = e.trim().split(";");
                return t.length ? t.pop().trim() : null;
            }
            function n(e) {
                var t = {},
                    n = e.trim().split(";");
                return !n || !n.length
                    ? t
                    : (n.forEach(function (e) {
                          if (e.indexOf(":") == -1) return;
                          var n,
                              r,
                              i = e.split(":");
                          i[0] !== undefined &&
                              i[1] !== undefined &&
                              ((n = i[0].trim()),
                              (r = i[1].trim().replace(/[\"\']/g, "")),
                              (t[n] = r));
                      }),
                      t);
            }
            function r(i, s, o) {
                function m(e, t) {
                    var n = 0;
                    while (t) {
                        switch (e.charAt(n)) {
                            case "{":
                                t++;
                                break;
                            case "}":
                                t--;
                        }
                        n++;
                    }
                    return n - 1;
                }
                var u = i.indexOf("{"),
                    a,
                    f = new t(),
                    l = i.substring(0, u),
                    c = e(l),
                    h = i.substr(u + 1, i.length),
                    p = h.indexOf("}"),
                    d = h.indexOf("{");
                if (u > 0) {
                    f.setSelector(c),
                        o && (f.setParentRule(o), (a = n(l)), o.setStyle(a));
                    if (d > -1 && d < p) {
                        p = m(h, 1);
                        var v = h.substring(0, p);
                        (a = n(l)),
                            f.setStyle(a),
                            (f.cssRules = f.cssRules || []),
                            r(v, f.cssRules, f),
                            (h = h.substring(p + 1, h.length));
                    } else
                        (a = n(h.substring(0, p))),
                            f.setStyle(a),
                            (h = h.substring(p + 1, i.length));
                    r(h, s), s.unshift(f);
                }
            }
            function i(e) {
                if (!e)
                    throw new Error(
                        "CSSParser.cascadeRules(). No css rules available for cascade"
                    );
                if (!e.length) return e;
                var t = [],
                    n = {},
                    r = [];
                return (
                    e.forEach(function (e) {
                        e.cssRules && (e.cssRules = i(e.cssRules)),
                            n[e.selectorText]
                                ? (n[e.selectorText] = s(
                                      {},
                                      n[e.selectorText],
                                      e
                                  ))
                                : (r.push(e.selectorText),
                                  (n[e.selectorText] = e));
                    }),
                    r.forEach(function (e) {
                        t.push(n[e]);
                    }, this),
                    (n = null),
                    (r = null),
                    t
                );
            }
            function s(e) {
                var t = Array.prototype.slice.call(arguments, 1);
                return (
                    t.forEach(function (t) {
                        for (var n in t) {
                            if (n === "parentRule") return;
                            typeof e[n] == "object" && e[n]
                                ? typeof e[n].slice == "function"
                                    ? (e[n] = i(e[n].concat(t[n])))
                                    : (e[n] = s({}, e[n], t[n]))
                                : (e[n] = t[n]);
                        }
                    }),
                    e
                );
            }
            return {
                cssRules: [],
                parse: function (e) {
                    (e = e
                        .replace(/[\n\t]+/g, "")
                        .replace(/\/\*[\s\S]*?\*\//g, "")
                        .trim()),
                        r.call(this, e, this.cssRules);
                },
                parseCSSDeclaration: function (e) {
                    var t = [];
                    return (
                        r.call(this, e, t),
                        t.length && t.length === 1 ? t.pop() : null
                    );
                },
                clear: function () {
                    this.cssRules = [];
                },
                cascade: function (e) {
                    if (!e || !e.length) {
                        this.cssRules = i.call(this, this.cssRules);
                        return;
                    }
                    return i.call(this, e);
                },
                doExtend: s
            };
        }
        (t.prototype = {
            setSelector: function (e) {
                this.selectorText = e;
                var t = e.match(/^@([^\s]+)\s*([^{]+)?/);
                if (t && t[1]) {
                    switch (t[1]) {
                        case "template":
                            (this.type = "template"), (this.cssRules = []);
                            break;
                        case "slot":
                            this.type = "slot";
                            break;
                        default:
                            this.type = "unknown";
                    }
                    this.identifier = t[2] || "auto";
                }
            },
            setStyle: function (e) {
                if (!e)
                    throw new TypeError(
                        "CSSRule.setStyles(). Invalid input. Expected 'object', got " +
                            e
                    );
                return (this.style = e || {}), this.style;
            },
            setParentRule: function (e) {
                if (!e)
                    throw new TypeError(
                        "CSSRule.setParentRule(). Invalid input. Expected 'object', got " +
                            properties
                    );
                return (this.parentRule = e), this.parentRule;
            }
        }),
            (e = e || window),
            (e.CSSParser = n);
    })(window),
    (window.CSSRegions = (function (e) {
        function t() {
            this.setup();
        }
        function w() {}
        function E(e, t) {
            var n, r;
            if (typeof e.pop != "function")
                throw "Invalid input. Expected an array, got: " + typeof e;
            (this.map = {}), (this.length = 0);
            for (n = 0, r = e.length; n < r; n++)
                (this[n] = e[n]),
                    this.length++,
                    t && e[n][t] && (this.map[e[n][t]] = this[n]);
        }
        function S(e, t, n) {
            (this.name = e || "none"),
                (this.overset = !0),
                (this.contentNodes = []),
                (this.regions = []),
                (this.regionsByContent = {}),
                (this._listeners = {}),
                (this.firstEmptyRegionIndex = -1),
                (this.lastRegionWithContentIndex = -1),
                t && t.length && (this.contentNodes = i(t)),
                n && n.length && (this.regions = i(n));
        }
        function T() {
            var e,
                t = document.createElement("span"),
                n = !1,
                r = x.getSupportedProperty("flow-into"),
                i = x.getSupportedProperty("getNamedFlows", document, !0);
            (t.id = "test-regions-support"),
                (t.style[r] = "testflow"),
                document.body.appendChild(t);
            try {
                (e = document[i].call(document).testflow),
                    (n = typeof e.overset != "undefined");
            } catch (s) {
            } finally {
                return (
                    (t.style[r] = "none"),
                    t.parentNode.removeChild(t),
                    (e = null),
                    !!n
                );
            }
        }
        t.prototype = {
            hasNativeSupport: !1,
            prefixes: { css: "-adobe-", om: "adobe" },
            getPrefixedProperty: function (e) {
                return this.prefixes.css.concat(e);
            },
            getPrefixedOMProperty: function (e) {
                return this.prefixes.om.concat(
                    e.charAt(0).toUpperCase() + e.slice(1)
                );
            },
            getPrefixedEvent: function (e) {
                return this.prefixes.om.concat(e);
            },
            init: function () {
                var e = this;
                if (!window.StyleLoader) {
                    console.error("Missing StyleLoader.js");
                    return;
                }
                new StyleLoader(
                    (function () {
                        return function (t) {
                            e.onStylesLoaded(t);
                        };
                    })()
                );
            },
            setup: function () {
                (this.namedFlows = []), (this.namedFlowCollection = null);
            },
            onStylesLoaded: function (e) {
                if (!window.CSSParser) {
                    console.error("Missing CSSParser.js");
                    return;
                }
                var t,
                    n,
                    r,
                    i,
                    s = new CSSParser();
                this.setup(),
                    e.forEach(function (e) {
                        s.parse(e.cssText);
                    });
                if (s.cssRules.length === 0) {
                    console.log("There is no inline CSS for CSS Regions!");
                    return;
                }
                t = this.getNamedFlowRules(s.cssRules);
                for (n in t)
                    (r = t[n].contentNodesSelectors),
                        (i = t[n].regionsSelectors),
                        this.namedFlows.push(new S(n, r, i));
                (this.namedFlowCollection = new E(this.namedFlows, "name")),
                    this.exposeGlobalOM(),
                    this.doLayout();
            },
            getNamedFlowRules: function (e) {
                var t,
                    n,
                    r,
                    i = e.length,
                    s = {},
                    o = this.getPrefixedProperty("flow"),
                    u = this.getPrefixedProperty("flow-into"),
                    a = this.getPrefixedProperty("flow-from");
                for (var f = 0; f < i; f++) {
                    t = e[f];
                    for (n in t.style)
                        if (n.indexOf(o) !== -1) {
                            (r = t.style[n]),
                                (s[r] = s[r] || {
                                    contentNodesSelectors: [],
                                    regionsSelectors: []
                                }),
                                n.indexOf(u) !== -1 &&
                                    s[r].contentNodesSelectors.push(
                                        t.selectorText
                                    ),
                                n.indexOf(a) !== -1 &&
                                    s[r].regionsSelectors.push(t.selectorText);
                            break;
                        }
                }
                return s;
            },
            doLayout: function () {
                if (!this.namedFlows || !this.namedFlows.length) {
                    console.warn("No named flow / regions CSS rules");
                    return;
                }
                n++;
                if (n > 1) return;
                while (n > 0) u(), n--;
            },
            exposeGlobalOM: function () {
                var e = "getNamedFlows",
                    t = this.getPrefixedOMProperty(e);
                document[e] = document[t] = this.getNamedFlows.bind(this);
            },
            getNamedFlows: function () {
                return this.namedFlowCollection;
            },
            addSourceToNamedFlow: function (e, t) {
                var n = this.getNamedFlows().namedItem(e);
                n ||
                    ((n = new S(e)),
                    this.namedFlows.push(n),
                    (this.namedFlowCollection = new E(
                        this.namedFlows,
                        "name"
                    ))),
                    n.contentNodes.push(t),
                    (r[n.name] = !1);
            },
            addRegionToNamedFlow: function (e, t) {
                var n = this.getNamedFlows().namedItem(e);
                n ||
                    ((n = new S(e)),
                    this.namedFlows.push(n),
                    (this.namedFlowCollection = new E(
                        this.namedFlows,
                        "name"
                    ))),
                    n.regions.push(t),
                    (r[n.name] = !1);
            },
            NamedFlow: S,
            Collection: E
        };
        var n = 0,
            r = {},
            i = function (e) {
                var t,
                    n,
                    r,
                    i,
                    s = [],
                    o = e.length;
                for (t = 0; t < o; t++) {
                    i = document.querySelectorAll(e[t]);
                    for (n = 0, r = i.length; n < r; ++n) s.push(i[n]);
                }
                return m(document.body, NodeFilter.SHOW_ELEMENT, {
                    acceptNode: function (e) {
                        return s.indexOf(e) >= 0
                            ? NodeFilter.FILTER_ACCEPT
                            : NodeFilter.FILTER_SKIP;
                    }
                });
            },
            s = function (e) {
                var t,
                    n,
                    r,
                    i = [];
                for (t = 0, n = e.length; t < n; t++)
                    (r = e[t].cloneNode(!0)),
                        i.push(r),
                        r.style.display === "none" &&
                            (r.style.display = r["data-display"] || ""),
                        getComputedStyle(e[t]).display !== "none" &&
                            ((e[t]["data-display"] = e[t].style.display),
                            (e[t].style.display = "none"));
                return i;
            },
            o = function (e, t) {
                var n,
                    r,
                    i,
                    s = [];
                for (n = 0, r = e.length; n < r; n++)
                    (i = e[n]),
                        getComputedStyle(i).display !== "none"
                            ? (s.push(i),
                              (i["data-display"] = !0),
                              t.lastRegionWithContentIndex < n &&
                                  (i["data-w"] !== getComputedStyle(i).width ||
                                      i["data-h"] !==
                                          getComputedStyle(i).height) &&
                                  b([t.name]))
                            : i["data-display"] &&
                              (b([t.name]), delete i["data-display"]);
                return s;
            },
            u = function () {
                var e,
                    t,
                    n,
                    i,
                    u,
                    f,
                    l,
                    c,
                    h,
                    d,
                    v = [],
                    m = document.getNamedFlows(),
                    g = C.getPrefixedOMProperty("regionOverset");
                for (n = 0, i = m.length; n < i; n++) {
                    (t = m[n]),
                        (t.regionsByContent = { content: [], regions: [] }),
                        (t.firstEmptyRegionIndex = -1),
                        (l = o(t.getRegions(), t)),
                        (t.overset = !1);
                    if (r[t.name]) {
                        h = l[t.lastRegionWithContentIndex].childNodes;
                        for (u = 0, f = h.length; u < f; ++u) v.push(h[u]);
                        u = t.lastRegionWithContentIndex;
                    } else (v = s(t.contentNodes)), (u = 0);
                    for (f = l.length; u < f; u++) {
                        (e = l[u]), (e.innerHTML = "");
                        if (v.length === 0) {
                            t.firstEmptyRegionIndex === -1 &&
                                (t.firstEmptyRegionIndex = u),
                                (e[g] = "empty");
                            continue;
                        }
                        c = v.shift();
                        if (u + 1 === f) {
                            (d = e.nextSibling || null),
                                (h = e.parentNode),
                                h.removeChild(e);
                            while (c)
                                e.appendChild(c.cloneNode(!0)),
                                    p(c, -1, e, t),
                                    (c = v.shift());
                            d
                                ? (h.insertBefore(e, d), (d = null))
                                : h.appendChild(e),
                                (h = null),
                                (t.lastRegionWithContentIndex = u),
                                y(e) && ((e[g] = "overset"), (t.overset = !0));
                        } else {
                            while (c) {
                                (c = a(c, e, t)),
                                    (e["data-w"] = getComputedStyle(e).width),
                                    (e["data-h"] = getComputedStyle(e).height);
                                if (c) {
                                    v.unshift(c);
                                    break;
                                }
                                c = v.shift();
                            }
                            e[g] = "fit";
                        }
                        r[t.name] = !0;
                    }
                    if (t.regions.length > 0) {
                        var b = C.getPrefixedEvent("regionlayoutupdate");
                        t.fire({ type: b, target: t });
                    }
                }
            },
            a = function (e, t, n) {
                var r,
                    i,
                    s,
                    o,
                    u = -1,
                    a = null,
                    h = [],
                    b = [],
                    w = e;
                return (
                    t.appendChild(w),
                    y(t)
                        ? (t.removeChild(w),
                          (h = m(
                              w,
                              NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
                              {
                                  acceptNode: function (e) {
                                      return e.nodeName.toLowerCase() ===
                                          "img" ||
                                          e.nodeName.toLowerCase() === "fig" ||
                                          (e.nodeName.toLowerCase() ===
                                              "#text" &&
                                              e.data.replace(
                                                  /^\s+|\s+$/g,
                                                  ""
                                              ) !== "")
                                          ? NodeFilter.FILTER_ACCEPT
                                          : NodeFilter.FILTER_SKIP;
                                  }
                              }
                          )),
                          h.length !== 1 ||
                          (h[0].nodeName.toLowerCase() !== "img" &&
                              h[0].nodeName.toLowerCase() !== "fig")
                              ? (f(h),
                                (u = l(t, w, h, b)),
                                u < 0
                                    ? (a = e)
                                    : ((r = h[u]),
                                      r.nodeName === "#text" &&
                                          ((o = b[u].replace(/^\s+|\s+$/g, "")),
                                          (s = o.split(" ")),
                                          (i = d(t, w, r, s)),
                                          (b[u] = g(s, i, s.length - 1))),
                                      t.appendChild(c(w.cloneNode(!0))),
                                      p(t.lastChild, t, n),
                                      v(u, h, b, w),
                                      (a = w)))
                              : (a = e))
                        : p(w, t, n),
                    a
                );
            },
            f = function (e) {
                var t, n, r, i, s;
                for (t = 0, n = e.length; t < n; t++) {
                    s = e[t];
                    if (s.nodeName === "#text") continue;
                    (r = 0), (i = s);
                    while ((i = i.previousSibling) !== null) r++;
                    s["data-index"] = r;
                }
            },
            l = function (e, t, n, r) {
                var i,
                    s,
                    o,
                    u,
                    a = n.length,
                    f = n.length,
                    l = 0,
                    c = n.length - 1;
                while (c >= l) {
                    o = l + Math.round((c - l) / 2);
                    for (a = o; a < f; a++) {
                        i = n[a];
                        if (i.nodeName === "#text") {
                            if (i.data === "") break;
                            (r[a] = i.data), (i.data = "");
                        } else {
                            if (!i.parentNode) break;
                            (r[a] = i.parentNode), i.parentNode.removeChild(i);
                        }
                    }
                    e.appendChild(t);
                    if (y(e)) (c = o - 1), c < l && (l = c);
                    else {
                        l = o + 1;
                        if (c >= l) {
                            u = l + Math.round((c - l) / 2) + 1;
                            for (s = o; s < u; s++)
                                (i = n[s]),
                                    i.nodeName === "#text"
                                        ? (i.data = r[s])
                                        : r[s].insertBefore(
                                              i,
                                              r[s].childNodes.item(
                                                  i["data-index"]
                                              )
                                          ),
                                    delete r[s];
                        }
                    }
                    e.removeChild(t);
                }
                return o;
            },
            c = function (e) {
                var t, n, r;
                (n = m(e, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
                    acceptNode: function (e) {
                        return e.nodeName.toLowerCase() === "img" ||
                            e.nodeName.toLowerCase() === "fig" ||
                            (e.nodeName.toLowerCase() === "#text" &&
                                e.data.replace(/^\s+|\s+$/g, "") !== "")
                            ? NodeFilter.FILTER_ACCEPT
                            : NodeFilter.FILTER_SKIP;
                    }
                })),
                    (r = n[n.length - 1]),
                    (t = r.nextSibling);
                while (t) h(t), (t = t.nextSibling);
                t = r.parentNode.nextSibling;
                while (t) h(t), (t = t.nextSibling);
                t = r.parentNode;
                while (t) {
                    if (t.parentNode === e) {
                        while (t.nextSibling)
                            t.parentNode.removeChild(t.nextSibling);
                        break;
                    }
                    t = t.parentNode;
                }
                return e;
            },
            h = function (e) {
                var t, n, r;
                if (e.nodeName === "#text") {
                    e.parentNode.removeChild(e);
                    return;
                }
                t = e.childNodes;
                for (n = t.length - 1; n >= 0; n--)
                    (r = t.item(n)),
                        r.nodeName !== "#text"
                            ? r.childNodes.length === 0
                                ? r.parentNode.removeChild(r)
                                : h(r)
                            : r.parentNode.removeChild(r);
                e.childNodes.length === 0 && e.parentNode.removeChild(e);
            },
            p = function (e, t, n) {
                var r, i, s, o, u, a;
                (a = m(e, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
                    acceptNode: function (e) {
                        return e.nodeName.toLowerCase() === "img" ||
                            e.nodeName.toLowerCase() === "fig" ||
                            (e.nodeName.toLowerCase() === "#text" &&
                                e.data.replace(/^\s+|\s+$/g, "") !== "")
                            ? NodeFilter.FILTER_ACCEPT
                            : NodeFilter.FILTER_SKIP;
                    }
                })),
                    n.regionsByContent ||
                        (n.regionsByContent = { content: [], regions: [] });
                for (r = 0, i = a.length; r < i; r++)
                    (o = a[r]),
                        o.nodeName.toLowerCase() === "#text" &&
                            (o = o.parentNode),
                        (u = n.regionsByContent.content.indexOf(o)),
                        u === -1 &&
                            (n.regionsByContent.content.push(o),
                            (u = n.regionsByContent.content.length - 1)),
                        (s = n.regionsByContent.regions[u] || []),
                        s.push(t),
                        (n.regionsByContent.regions[u] = s);
            },
            d = function (e, t, n, r) {
                var i = 0,
                    s = 0,
                    o = r.length - 1;
                while (o >= s)
                    (i = s + Math.round((o - s) / 2)),
                        (n.data = g(r, 0, i - 1)),
                        e.appendChild(t),
                        y(e) ? ((o = i - 1), o < s && (s = o)) : (s = i + 1),
                        e.removeChild(t);
                return i;
            },
            v = function (e, t, n, r) {
                var i,
                    s,
                    o,
                    u,
                    a = [];
                for (s = e, o = t.length; s < o; s++)
                    (i = t[s]),
                        i.nodeName === "#text"
                            ? (i.data = n[s])
                            : n[s].insertBefore(
                                  i,
                                  n[s].childNodes.item(i["data-index"])
                              );
                for (s = 0; s < e; s++) {
                    i = t[s];
                    if (i.nodeName === "#text") {
                        (u = i.parentNode), u.removeChild(i);
                        while (u && u.childNodes.length === 0)
                            (u = u.parentNode),
                                u.removeChild(u.childNodes.item(0));
                        u && a.push(u);
                    } else a.push(i.parentNode), i.parentNode.removeChild(i);
                }
                for (s = 0, o = a.length; s < o; s++) {
                    u = a[s];
                    while (u && u.childNodes.length === 0)
                        (u = u.parentNode),
                            u && u.removeChild(u.childNodes.item(0));
                }
                u = t[e].parentNode;
                while (u) {
                    if (u.parentNode === r) {
                        while (u.previousSibling)
                            u.parentNode.removeChild(u.previousSibling);
                        break;
                    }
                    u = u.parentNode;
                }
            },
            m = function (e, t, n) {
                var r,
                    i,
                    s = [];
                r = document.createNodeIterator(e, t, n, !1);
                while ((i = r.nextNode())) s.push(i);
                return s;
            },
            g = function (e, t, n) {
                return e.slice(t, n + 1).join(" ") + " ";
            },
            y = function (e) {
                var t,
                    n = e.style.overflow;
                if (!n || n === "visible") e.style.overflow = "hidden";
                return (
                    (t = e.clientHeight < e.scrollHeight - 1),
                    (e.style.overflow = n),
                    t
                );
            },
            b = function (e) {
                var t, n, i;
                if (e && e.length)
                    e.forEach(function (e) {
                        r[e] = !1;
                    });
                else {
                    i = document.getNamedFlows();
                    for (t = 0, n = i.length; t < n; t++) r[i[t].name] = !1;
                }
            };
        (w.prototype = {
            constructor: w,
            addEventListener: function (e, t) {
                this._listeners[e] || (this._listeners[e] = []),
                    this._listeners[e].push(t),
                    C.doLayout();
            },
            fire: function (e) {
                var t, n, r;
                if (this._listeners[e.type] instanceof Array) {
                    t = this._listeners[e.type];
                    for (n = 0, r = t.length; n < r; n++) t[n].call(this, e);
                }
            },
            removeEventListener: function (e, t) {
                var n, r, i;
                if (this._listeners[e] instanceof Array) {
                    n = this._listeners[e];
                    for (r = 0, i = n.length; r < i; r++)
                        if (n[r] === t) {
                            n.splice(r, 1);
                            break;
                        }
                }
            }
        }),
            (E.prototype = {
                item: function (e) {
                    return this[e] || null;
                },
                namedItem: function (e) {
                    return this.map[e] || null;
                }
            }),
            (S.prototype = new w()),
            (S.prototype.constructor = S),
            (S.prototype.getRegions = function () {
                return this.regions;
            }),
            (S.prototype.getRegionsByContent = function (e) {
                var t,
                    n = [];
                return (
                    (t = this.regionsByContent.content.indexOf(e)),
                    t !== -1 && (n = this.regionsByContent.regions[t]),
                    n
                );
            });
        var x = (function () {
            function t(e, t) {
                var n = t.join(e + " ").split(" ");
                return n.slice(0, n.length - 1);
            }
            var e = " -webkit- -moz- -o- -ms- ";
            return {
                cssProperty: function (n, r) {
                    var r = r || document.body,
                        i = e.split(" "),
                        s = t(n, i);
                    for (var o = 0, u = s.length; o < u; o++)
                        if (r.style[s[o]] !== undefined)
                            return (this.supportedProperty = s[o]), !0;
                    return !1;
                },
                omProperty: function (n, r) {
                    var r = r || document,
                        i = e.replace(/-/g, "").split(" ");
                    i = i.slice(1, i.length);
                    var s = n.charAt(0).toUpperCase() + n.slice(1),
                        o = t(s, i);
                    (o = o.slice(0, o.length - 1)), o.unshift(n);
                    for (var u = 0, a = o.length; u < a; u++)
                        if (o[u] in r)
                            return (this.supportedProperty = o[u]), !0;
                    return !1;
                },
                getSupportedProperty: function (e, t, n) {
                    var n = !!n,
                        r = function () {},
                        i = new r();
                    return (
                        (i.supportedProperty = e),
                        n
                            ? x.omProperty.call(i, e, t)
                            : x.cssProperty.call(i, e, t),
                        i.supportedProperty
                    );
                }
            };
        })();
        typeof e.addEventListener == "undefined" &&
            (e.addEventListener = function (t, n) {
                e.attachEvent("on" + t, n);
            });
        var N,
            C = new t(),
            k = document.documentElement;
        return (
            e.addEventListener("load", function () {
                if (
                    x.cssProperty("flow-into") &&
                    x.omProperty("getNamedFlows") &&
                    T()
                ) {
                    (C.hasNativeSupport = !0), (k.className += " regions");
                    return;
                }
                C.init(),
                    (k.className += " no-regions"),
                    e.addEventListener("resize", function () {
                        window.clearTimeout(N),
                            (N = window.setTimeout(function () {
                                b(), C.doLayout();
                            }, 300));
                    });
            }),
            C
        );
    })(window));

              
            
!
999px

Console