scratch-www/src/components/extension-landing/extension-landing.scss

@use "sass:math";

@import "../../colors";
@import "../../frameless";

#view {
    padding: 0;
}

.extension-landing {
    &>div {
        padding: 4rem 0;
    }

    h1 {
        font-size: 2rem;
    }

    h1, h2 {
        margin-bottom: 1rem;
    }

    h3 {
        margin-bottom: 2rem;
    }

    span {
        line-height: 1.7rem;
    }

    hr {
        margin: 4rem 0;
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: $ui-border;
        width: 100%;
    }

    .headline-icon {
        height: 40px;
        width: 40px;
        margin: auto 0;
    }

    .download {
        display: inline-block;

        &::after {
            display: inline-block;
            margin-left: .5rem;
            background-image: url("/svgs/extensions/download.svg");
            background-repeat: no-repeat;
            width: 20px;
            height: 20px;
            vertical-align: text-top;
            content: "";
        }
    }

    .screenshot {
        border: 1px solid $ui-border;
        border-radius: .5rem;
    }

    .tip-box {
        margin-top: 4rem;
        border: 1px solid $ui-blue-25percent;
        border-radius: 1rem;
        background-color: $ui-blue-10percent;
        padding: 2rem 3rem;
        width: 100%;
        box-sizing: border-box;

        .tip-content {
            align-items: flex-start;

            p {
                margin-top: 0;
            }
        }
    }

    .extension-header {
        background-size: cover;
        color: $ui-white;

        .inner {
            justify-content: space-between;
            flex-wrap: nowrap;
            flex-direction: column;
            align-items: flex-start;
        }

        .extension-info {
            margin-bottom: 3rem;
            flex-wrap: nowrap;
            flex-direction: row;

            .extension-copy {
                padding-right: 3.75em;
                max-width: $cols7;
                align-items: flex-start;
                justify-content: start;

                h1, h2 {
                    display: flex;
                    margin-bottom: 2rem;
                    color: $ui-white;
                    width: 100%;

                    img {
                        padding-right: .5rem;
                        max-height: 100%;
                    }
                }

                span {
                    font-size: 1.2rem;
                }

                a {
                    border-bottom: 1px solid $ui-white;
                    color: $ui-white;
                }
            }

            .video-player {
                border: .25rem solid $ui-white-15percent;
                border-radius: .75rem;
                height: 180px;
                overflow: hidden;
            }
        }

        .extension-image {
            margin-top: auto;

            img {
                max-width: $cols5;
                max-height: $cols3;
            }
        }

        .extension-requirements-container {
            font-weight: 500;
            align-items: flex-start;

            .requirements-header {
                margin-bottom: 1.5rem;
            }

            .extension-requirements {
                justify-content: space-between;
            }

            .extension-requirements span {
                display: flex;
                margin-right: 1rem;
                font-size: 15px; // TODO: change to rem later
                align-items: center;
            }

            .extension-requirements span img {
                padding-right: .5rem;
            }
        }
    }

    .os-chooser {
        padding: 0;
    }

    .install-scratch-link {
        padding: 2rem 0;

        .inner {
            align-items: flex-start;
        }

        .downloads-container {
            text-align: center;
        }

        .store-badge {
            display: block;
            width: 150px;
            height: 80px;
        }

        .horizontal-divider {
            display: block;
            margin: 20px;
        }

        .horizontal-divider:before,
        .horizontal-divider:after {
            display: inline-block;
            position: relative;
            background-color: $ui-dark-gray;
            width: 50%;
            height: 1px;
            vertical-align: middle;
            content: "";
        }

        .horizontal-divider:before {
            right: .5em;
            margin-left: -50%;
        }

        .horizontal-divider:after {
            left: .5em;
            margin-right: -50%;
        }
    }

    .extension-section {
        .inner {
            align-items: flex-start;
        }
    }

    .getting-started {
        .getting-started-section {
            width: 100%;
            align-items: flex-start;

            a {
                margin: 1rem 0;
            }
        }
    }

    .things-to-try .inner {
        align-items: center;
    }

    .project-card {
        margin: 0 1.5rem;
        border: 1px solid $ui-border;
        border-radius: .5rem;
        background-color: $ui-white;
        overflow: hidden;
        flex-basis: 0;
        flex-grow: 1;
    }

    .project-card-image {
        img {
            max-width: 100%;
        }
    }

    .project-card-info {
        padding: 1rem;

        p {
            margin: .2rem 0;
        }
    }

    .hardware-cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 3em;

        // 1 column
        @media #{$medium-and-smaller} {
            grid-template-columns: 1fr;
        }
    }

    .hardware-card {
        border: 1px solid $ui-border;
        border-radius: .5rem;
        background-color: $ui-white;
        overflow: hidden;
        flex-basis: 0;
        flex-grow: 1;
    }

    .hardware-card-image {
        background-color: $ui-blue-10percent;
        padding: 1rem 0 1rem;

        img {
            display: block;
            margin: 0 auto;
            height: 100px;
            max-width: 100%;
        }
    }

    .hardware-card-info {
        padding: 1rem;

        p {
            margin: .2rem 0;
        }
    }

    div.cards+div.faq {
        padding-top: 2rem;
    }

    .faq {
        p {
            margin-bottom: 1.25rem;
            margin-left: 0;
            max-width: $cols8;
            text-align: left;
        }

        .faq-title {
            margin-bottom: 0;
            font-size: 1.4rem;
        }

        ul {
            max-width: $cols8;
        }

        section {
            ul {
                max-width: $cols8;
            }

            .nav-spacer {
                display: block;
                visibility: hidden;
                margin-top: -50px; // height of  nav bar
                height: 50px;
            }

        }

        ul,
        ol {
            &.indented {
                padding-left: $cols1 + math.div(20px, $em);
            }
        }
    }

    .blue {
        background-color: $ui-blue-10percent;
    }

    .inner {
        max-width: $cols12;
    }
}