public/500.html from indentlabs/notebook

public/500.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Notebook | Server Error</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="icon" href="/favicon.ico" />

        <style>
            body {
                background: #E4EFF4;
                background: -webkit-linear-gradient(#E4EFF4, white);
                background: -o-linear-gradient(#E4EFF4, white);
                background: -moz-linear-gradient(#E4EFF4, white);
                background: linear-gradient(#E4EFF4, white);
                color: #03A9F4;
                font-family: 'Helvetica Light', 'Helvetica', Arial, sans-serif;
                height: 100vh;
                margin: 0;
                overflow: hidden;
            }

            img {
                position: absolute;
            }

            .logo {
                left: 2rem;
                top: 2rem;
                width: 220px;
            }

            .mark {
                height: 110%;
                opacity: 0.1;
                right: -25%;
                top: -5%;
                z-index: -1;
            }

            .flex-container {
                -webkit-align-items: center;
                -moz-align-items: center;
                -ms-align-items: center;
                -ms-flex-align: center;
                align-items: center;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                height: 100%;
                -webkit-justify-content: center;
                -moz-justify-content: center;
                -ms-justify-content: center;
                -ms-flex-pack: center;
                justify-content: center;
            }

            .error {
                font-size: 9rem;
                font-weight: bold;
                padding: 0 4rem;
                border-right: 1px solid #707980;
            }

            .error-action {
                padding: 0 4rem;
            }

            .page-error {
                text-transform: uppercase;
                font-size: 2.4rem;
                margin-bottom: 0.6rem;
                font-weight: 100;
            }

            .page-error-description {
                color: #707980;
                font-weight: 100;
                font-size: 1.2rem;
                margin-bottom: 1rem;
            }

            a {
                display: inline-block;
                padding: 0.7rem 2rem;
                letter-spacing: 1px;
                text-decoration: none;
                color: #03A9F4;
                font-size: 0.8rem;
                font-weight: bold;
                border: 1px solid #03A9F4;
                border-radius: 0.4rem;
            }

            @media only screen and (max-width: 1000px) {
                .mark {
                    height: 100%;
                    right: -33%;
                    top: 0;
                }

                .flex-container {
                    -webkit-box-orient: vertical;
                    -webkit-flex-direction: center;
                    -moz-flex-direction: center;
                    -ms-flex-direction: center;
                    flex-direction: column;
                }

                .error {
                    border-right: 0;
                    border-bottom: 1px solid #707980;
                }

                .error-action {
                    margin-top: 2rem;
                    text-align: center;
                }
            }

            @media only screen and (max-width: 600px) {
                .mark {
                    display: none;
                }
            }
        </style>
    </head>
    <body>
        <img class="logo" src="/notebook-logo-name.png"/>
        <img class="mark" src="/notebook-logo.png"/>
        <div class="flex-container">
            <div class="error">500</div>
            <div class="error-action">
                <div class="page-error">
                    Something went wrong
                </div>
                <div class="page-error-description">
                    Try that again, and if it still doesn’t work, let us know.
                </div>
                <a href="https://docs.google.com/forms/d/198QvP092YZn9adeCkLjU_Jw4BHZaSMYjU8p0F8V7csw/viewform">Report a Problem</a>
            </div>
        </div>
    </body>
</html>