e11sync/static/style.scss

@use 'pure';
@use 'grids-responsive';

$darkTextColor: #ccc;
$darkTextColorStr: "ccc";
$darkBgGrey: #313131;
$blueLinkVisited: #007bff;
$grey: #666;
$lightBlue: #008ed4;
$lightBorderColor: #a3a3a3;

/************************/
/** Very Common Things **/
/************************/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
    font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji";
    line-height: 1.5;
}

.pure-button-primary {
    background-color: $lightBlue;
}

a, a:visited {
    text-decoration: none;
    color: $blueLinkVisited;
}

a:hover, a:focus {
    text-decoration: underline;
}

/* So switching between scrollable and non-scrollable pages
   does not cause a 10px shift
*/
body {
    overflow-y: scroll;
}

.clear {
    clear: both;
}

.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* Override pure.css; standard headers are too big */
h1 {
    font-size: 1.6rem;
}

$h2Size: 1.2rem;
h2 {
    font-size: $h2Size;
}

/***************************/
/** Part of Base template **/
/***************************/

body > div {
    padding-top: 2em;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

h1.brand-title {
    text-align: center;
}

h1.brand-title > a, h2.brand-subtitle {
    color: #000;
}

h1.brand-title {
    a {
        font-variant: small-caps;
        font-size: 3rem;
    }
    a:hover, a:focus {
        text-decoration: none;
    }
}

h2.brand-subtitle {
    font-size: 1.6rem;
    text-align: center;
}

main {
    margin: 0 auto;
    max-width: 1000px;
    margin-top: 33px;
}

header {
    margin-left: auto;
    margin-right: auto;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 10px;
    max-width: 1000px;
    background-color: #e6e6e6;
    background: radial-gradient(circle at top left, $lightBlue 0%, #aaa 50%, #666 100%);
}

nav {
    padding: 10px 0;
    text-align: right;
    a {
        padding-left: 15px;
    }
}

/*******************************/
/* Shared by a couple of pages */
/*******************************/

$featuresGutter: 1rem;
#page-index .leftright {
    padding-top: 1em;
    margin: (0-$featuresGutter);

    /* Tiles are vertically center-aligned, top margin is unnecessary */
    h1 {
        margin-top: 0;
    }

    article {
        margin: 15px 0;
        padding: 0 $featuresGutter;
    }
}

blockquote {
    border-left: 2px solid $lightBorderColor;
    font-style: italic;
    line-height: 1.8;
    padding-left: 1.5em;
}

@function svgarrow($color) {
    @return url("data:image/svg+xml;utf8,<svg width='19' height='10' xmlns='http://www.w3.org/2000/svg'><path d='M17.5 1.5l-8 7-8-7' stroke='%23"+$color+"' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
}

#page-index #faq {
    margin: 4rem 0 8rem 0;
    border-bottom: 1px solid $lightBorderColor;

    > article {
        border-top: 1px solid $lightBorderColor;

        input {
            display: none;
        }

        $rotateTransition: transform .2s ease-in-out;
        $hideTransition: opacity .2s ease-out, max-height 0.2s ease-out;
        > div {
            max-height: 1000px;
            max-width: 768px;
            transition: $hideTransition;

            > div {
                padding-bottom: 30px;
            }
        }

        $labelMargin: 1.5rem;
        label {
            position: relative;

            > h2 {
                padding: $labelMargin 0;
                margin: 0;

                // FIXME: hide the pointer in netsurf, since the sections
                // are always expanded.
                cursor: pointer;
            }
        }

        $arrowHeight: 0.8rem;
        label::before {
            content: "";
            float: right;
            background-image: svgarrow("000");
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: contain;
            margin-top: $labelMargin + $h2Size - $arrowHeight;
            height: $arrowHeight;
            width: 1rem;
            transition: $rotateTransition;
            transform: rotate(0deg);
        }

        input:checked ~ div {
            overflow: hidden;
            max-height: 0;
            transition: $hideTransition;
            opacity: 0;
        }

        input:checked ~ label::before {
            transition: $rotateTransition;
            transform: rotate(180deg);
        }

    } /* > article */
} /* #faq */

/*******************/
/** Page-specific **/
/*******************/

#page-index {
    #subscribe-section {
        margin-top: 50px;
        background-color: #e6e6e6;
        padding: 1rem 2rem 2rem 2rem;
        border-radius: 10px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;

        span.message-success, span.message-error {
            font-weight: bold;
            font-size: $h2Size - 0.2;
        }
        span.message-success {
            color: #181;
        }
        span.message-error {
            color: #e33;
        }

        input#email {
            width: 100%;
            text-align: center;
            margin-top: 1rem;
            margin-bottom: .5rem;
            border-radius: 3px;
        }

        button {
            width: 100%;
            text-align: center;
            border-radius: 3px;
        }

        > h2 {
            color: $grey;
        }
    }
} /* #page-index */

/**********************************/
/** Media Media Responsive Media **/
/**********************************/

@media (prefers-color-scheme: dark) {
    h1, h2, h3, body {
        color: $darkTextColor;
    }
    body {
        background-color: #222;
    }
    h1.brand-title > a {
        color: #ececec;
    }

    header {
        background-color: $darkBgGrey;
        background: radial-gradient(circle at top left, $blueLinkVisited 0%, $darkBgGrey 50%, $darkTextColor 100%);
    }

    h2.brand-subtitle {
        color: $darkTextColor;
    }

    blockquote {
        border-left-color: $darkTextColor;
    }

    #page-index {
        #subscribe-section {
            background-color: $darkBgGrey;
            > h2 {
                color: $darkTextColor;
            }

            span.message-success {
                color: #9c9;
            }

            input {
                color: $darkTextColor;
                border: 1px solid #555;
                box-shadow: none;
                -webkit-box-shadow: none;
                background-color: #222;
            }
        }
    }

    #page-index #faq > article {
        label::before {
            // difference from the default version: the color of the
            // shape is #ccc.
            background-image: svgarrow($darkTextColorStr);
        }

    }
}