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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <div class="musik-der-gegenwart-1980 posterContainer" data-original-width="1200" data-original-height="850">

    <div class="layout">
        <div class="topPart">
            <div class="textGrid">
                <div class="block-1">SFB<span>&nbsp;</span>WDR</div>
                <div class="block-2">MUSIK DER GEGENWART</div>
            </div>

            <div class="smallTextGrid">
                <div>
                    25 Januar 1980<br />
                    20 Uhr<br />
                    Sender Freies Berlin<br />
                    Großer Sendesaal<br />
                    Masurenallee 8-14
                </div>

                <div>
                    David Levine, Klavier<br />
                    Radio-Simphonie-<br />
                    Orchester Berlin<br />
                    Leitung:<br />
                    Christopher Keene
                </div>

                <div>
                    Hans-Jürgen<br />
                    von Bose:<br />
                    <br />
                    Travesties in a sad<br />
                    Landscape (DE)
                </div>

                <div>
                    Wolfgang<br />
                    von Schweinitz:<br />
                    Konzert für<br />
                    Klavier u. Orchester<br />
                    (UA d. Neufassung)
                </div>

                <div>
                    Detlev<br />
                    Müller-Siemens:<br />
                    <br />
                    Bläserquintett
                </div>

                <div>
                    Ulrich<br />
                    Stranz<br />
                    <br />
                    Zeitbiegung<br />
                    f. Orchester
                </div>

                <div>
                    Karten:<br />
                    DM 3,- im SFB<br />
                    Pavillon Th-Heuss-Platz<br />
                    Mo-Fr 9-13 u 14-17 Uhr<br />
                    u. bei den Theaterkassen
                </div>

            </div>

        </div>

        <div class="bottomPart">
            <div class="line line-1"></div>
            <div class="line line-2"></div>
            <div class="line line-3"></div>
            <div class="line line-4"></div>
            <div class="line line-5"></div>

            <div class="verticalLine line-6"></div>
            <div class="verticalLine line-7"></div>
        </div>

    </div>
</div>
              
            
!

CSS

              
                body {
    display: flex;
    justify-content: center;
    align-items: center;
}

$helvetica: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";

.musik-der-gegenwart-1980 {
    &.posterContainer {
        width: 1200px;
        height: 850px;
        margin-top: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
            rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
        transform-origin: top;

        svg {
            position: absolute;
            top: 0;
            left: 0;
        }

        .layout {
            display: flex;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            padding: 15px;
            flex-direction: column;
            // background-image: url(./../images/samples/musik-der-gegenwart-1980.jpg);
            // background-size: contain;
            // background-repeat: no-repeat;
            background-color: #21319e;

            .topPart {
                height: 24%;
                font-family: $helvetica;
                text-align: left;

                .textGrid {
                    display: grid;
                    width: 100%;
                    grid-template-columns: 400px 770px;
                    font-size: 14.5px;
                    font-weight: 500;

                    .block-1 {
                        span {
                            display: inline-block;
                            margin: 0 2px;
                            height: 40px;
                            width: 2px;
                            background-color: #fff;
                            vertical-align: baseline;
                            position: relative;
                            top: 10px;
                        }
                    }

                    .block-1,
                    .block-2 {
                        font-size: 58px;
                        font-weight: 600;
                        letter-spacing: 2px;
                        color: #fff;
                        line-height: 1em;
                    }
                }

                .smallTextGrid {
                    display: grid;
                    grid-template-columns: repeat(7, auto);
                    font-size: 18px;
                    font-weight: 400;
                    color: #fff;
                }
            }

            .bottomPart {
                height: 80%;
                overflow: hidden;
                position: relative;

                @supports (clip-path: path("")) {
                    .line {
                        background: #fff;
                    }

                    .verticalLine {
                        background: #fff;
                    }
                }

                .line {
                    height: 600px;
                    width: 100%;
                    position: absolute;

                    &.line-1 {
                        top: 41px;
                        clip-path: path(
                            "M-50,211.197218 L483.112182,211.197218 C488.723226,211.197218 494.294248,210.25275 499.591767,208.403396 L914.502854,63.5587435 C939.637298,54.7843579 967.547954,63.6211425 983.05256,85.2622454 L1054.42892,184.888326 C1066.25988,201.401811 1085.32763,211.197218 1105.64183,211.197218 L1173,211.197218 L1173,211.197218 L1173,250.758162 L1084.05783,250.758162 C1064.95803,250.758162 1046.88948,242.093387 1034.93191,227.199815 L939.989972,108.946407 C936.84537,105.029698 931.594141,103.485874 926.830126,105.077504 L500.347098,247.563087 C494.013111,249.679236 487.378838,250.758162 480.700703,250.758162 L-50,250.758162 L-50,250.758162 L-50,211.197218 Z"
                        );
                    }

                    &.line-2 {
                        top: 137px;
                        clip-path: path(
                            "M-30,195.412903 L451.471859,195.412903 C457.136211,195.412903 462.759383,194.450406 468.101275,192.566509 L787.945774,79.7686225 C814.15655,70.5250054 843.284691,80.491972 858.338154,103.855244 L906.109322,177.99704 C912.710204,188.241739 924.046056,194.451263 936.23307,194.49815 L1174,195.412903 L1174,195.412903 L1174,235.010071 L917.696684,235.915126 C902.677163,235.968163 888.621312,228.524271 880.225311,216.070517 L820.369126,127.286085 C814.52762,118.621403 803.579097,114.983691 793.713749,118.429678 L469.889954,231.542014 C463.317873,233.837656 456.406103,235.010071 449.444622,235.010071 L-30,235.010071 L-30,235.010071 L-30,195.412903 Z"
                        );
                    }

                    &.line-3 {
                        top: 239px;
                        clip-path: path(
                            "M-20,176.460515 L398.179364,176.460515 C403.505924,176.460515 408.795338,175.573924 413.830777,173.837087 L653.362245,91.2172292 C671.091931,85.1018569 690.74919,90.8969526 702.326098,105.652112 L747.672816,163.448026 C754.118138,171.662806 763.980611,176.460515 774.422104,176.460515 L1173,176.460515 L1173,176.460515 L1173,216.011232 L753.621907,216.960758 C742.700152,216.985486 732.392919,211.910367 725.753167,203.238628 L681.311107,145.195805 C671.467077,132.33917 654.406692,127.377152 639.202847,132.948605 L420.699005,213.019389 C415.298266,214.998491 409.591246,216.011232 403.839305,216.011232 L-20,216.011232 L-20,216.011232 L-20,176.460515 Z"
                        );
                    }

                    &.line-4 {
                        top: 340px;
                        clip-path: path(
                            "M-30,159.21623 L329.595508,159.21623 C336.112552,159.21623 342.584568,158.136487 348.748657,156.020861 L482.717707,110.040282 C503.984088,102.741278 527.553892,108.869207 542.572256,125.601904 L566.186096,151.911242 C570.358885,156.560351 576.311422,159.21623 582.558531,159.21623 L1171,159.21623 L1171,159.21623 L1171,199.010297 L576.952816,200.921566 C561.598313,200.970967 547.108489,193.820082 537.807631,181.602995 L529.687063,170.93627 C516.033589,153.001829 492.399445,145.874848 471.107331,153.271291 L348.683843,195.798699 C342.563628,197.924736 336.130447,199.010297 329.651476,199.010297 L-30,199.010297 L-30,199.010297 L-30,159.21623 Z"
                        );
                    }

                    &.line-5 {
                        top: 437px;
                        clip-path: path(
                            "M-20,148.269284 L266.20241,148.269284 C277.480857,148.269284 288.676378,146.342062 299.305635,142.570819 L345.39288,126.219143 C351.096458,124.195524 357.422894,125.010087 362.427842,128.412486 L383.493848,142.733306 C388.800047,146.340498 395.068081,148.269284 401.484278,148.269284 L1188,148.269284 L1188,148.269284 L1188,188 L398.818948,188 C387.770703,188 376.929883,184.999419 367.453996,179.318637 L363.223152,176.782252 C351.378926,169.681654 336.974291,168.268129 323.975726,172.930906 L291.790166,184.476341 C285.290284,186.807944 278.43669,188 271.531269,188 L-20,188 L-20,188 L-20,148.269284 Z"
                        );
                    }
                }

                .verticalLine {
                    height: 360px;
                    width: 40px;
                    position: absolute;
                    bottom: 10px;

                    &.line-6 {
                        left: 0;
                    }

                    &.line-7 {
                        right: 0;
                    }
                }
            }
        }
    }
}

              
            
!

JS

              
                const customThrottle = (callback, limit) => {
    let wait = false;
    return () => {
        if (!wait) {
            callback.call();
            wait = true;
            setTimeout(() => {
                wait = false;
            }, limit);
        }
    };
};

const scaleBasedOnViewport = () => {
    const mainElement = document.querySelectorAll(".posterContainer")[0];
    const originalWidth = mainElement.dataset.originalWidth;
    const viewportWidth = Math.max(
        document.documentElement.clientWidth || 0,
        window.innerWidth || 0
    );

    // we "pretend" that the viewport is 40 pixels smaller to have some
    // margins around the poster
    const derivedViewportWidth = viewportWidth - 40;

    if (derivedViewportWidth < originalWidth) {
        const scaleFactor = derivedViewportWidth / originalWidth;
        mainElement.style.transform = `scale(${scaleFactor})`;
    }
};

const throttledScaleBasedOnViewport = customThrottle( scaleBasedOnViewport, 100 );

document.addEventListener("DOMContentLoaded", scaleBasedOnViewport);
window.addEventListener("resize", throttledScaleBasedOnViewport);

              
            
!
999px

Console