<commit_before>@import 'lib';

// base class

.mkt-tile {
    position: relative;
    overflow: hidden;
    display: block;
    color: $text;
    &:hover {
        text-decoration: none;
    }
    .icon {
        display: block;
    }
    .info h3 {
        ellipsis();
    }
}

.grid, .listing {
    list-style-type: none;
    padding: 0;
    margin: 0;
    clear: both;
    width: 100%;
}

.product-details .mkt-tile .icon.asset-tile,
.listing .mkt-tile .icon.asset-tile,
.mkt-tile .icon.featured_tile {
    display: none;
}

.creatured .mkt-tile .icon,
.featured .mkt-tile .icon {
    display: none;
    &.asset-tile {
        display: block;
    }
}

@media (max-width: 480px) {
    .creatured .grid,
    .creatured .grid li {
        padding: 0;
    }
    .creatured .grid li + li {
        border-left: 1px solid rgba(0, 0, 0, .4);
    }
    .creatured .grid {
        .mkt-tile {
            background: $grain-src darken($grain, 15%);
            height: 55px;
            padding: 12px 10px;
            .info, &:hover .info, &:active .info {
                background: transparent;
            }
            &:hover {
                background-color: darken($grain, 12%);
            }
            &:active {
                depressed();
            }
            .info {
                box-shadow: none;
                height: auto;
                padding: 0;
                position: static;
            }
            h3 {
                color: $white;
                font-size: 11px;
                line-height: 16px;
                margin-bottom: -4px;
                padding-left: 21px;
            }
            .rating {
                font-size: 11px;
                margin: 4px 0 0 2px;
                vertical-align: top;
            }
            .rating .cnt,
            .unrated {
                display: block;
                text-indent: -999px;
            }
            canvas {
                display: none;
            }
            .icon {
                &.featured_tile {
                    background-size: auto 16px;
                    display: block;
                    position: absolute;
                    top: 12px;
                    left: 11px;
                    height: 16px;
                    width: 16px;
                }
                &.asset-tile {
                    display: none;
                }
            }
        }
    }
}

// Listing
// name + icon + price + rating in a vertical listview.
// also used as standalone "card" on detail pages.

.product-details,
.listing .mkt-tile {
    // TODO: Maybe we don't need this twice. We'll see when we do desktop.
    gradient-two-color-with-image(#f7f7f7, $barely-gray, $grain-src);
}

.listing .mkt-tile {
    min-height: 66px;
    padding: 20px 10px 20px 88px;
    h3 {
        font-size: 20px;
        font-weight: 400;
        line-height: 22px;
        margin: -4px 0 -7px;
        padding-bottom: 9px;
    }
    .icon {
        float: left;
        position: absolute;
        top: 20px;
        left: 10px;
    }
    .author {
        color: $subtext;
        font-size: 12px;
        line-height: 14px;
        max-height: 28px;
        margin-bottom: -3px;
        padding-bottom: 2px;
    }
    .button {
        float: right;
        height: 24px;
        line-height: 24px;
        font-size: 13px;
        margin: 2px 0 2px 10px;
        padding: 0;
        width: 70px;
    }
    .rating {
        clear: both;
        margin-top: 4px;
        color: $subtext;
        display: block;
        font-size: 11px;
        .cnt {
            border-bottom: 1px solid transparent;
            color: $note-gray;
            font-weight: 600;
            padding-bottom: 1px;
            position: relative;
            top: 1px;
        }
        a {
            color: $note-gray;
            text-decoration: none;
            &:hover .cnt {
                border-bottom-color: $note-gray;
                color: $dark-gray;
            }
        }
    }
    .price {
        display: none;
    }
}
.listing .result .mkt-tile .rating .cnt {
    top: 0;
}

// Grid
// store graphic, name, price in a floated grid (3 tiles wide at 320).

.grid {
    margin: 0 auto;
    max-width: 600px;
    li {
        border-left: 1px solid $black-border;
        border-bottom: 1px solid $black-border;
        float: left;
        width: 100%/3;
        max-height: 141px;
        &:nth-child(3n) {
            border-right: 1px solid $black-border;
        }
    }
    .mkt-tile {
        position: relative;
        width: 100%;
        height: 106px;<commit_msg>do not do width math in stylus<commit_after>@import 'lib';

// base class

.mkt-tile {
    position: relative;
    overflow: hidden;
    display: block;
    color: $text;
    &:hover {
        text-decoration: none;
    }
    .icon {
        display: block;
    }
    .info h3 {
        ellipsis();
    }
}

.grid, .listing {
    list-style-type: none;
    padding: 0;
    margin: 0;
    clear: both;
    width: 100%;
}

.product-details .mkt-tile .icon.asset-tile,
.listing .mkt-tile .icon.asset-tile,
.mkt-tile .icon.featured_tile {
    display: none;
}

.creatured .mkt-tile .icon,
.featured .mkt-tile .icon {
    display: none;
    &.asset-tile {
        display: block;
    }
}

@media (max-width: 480px) {
    .creatured .grid,
    .creatured .grid li {
        padding: 0;
    }
    .creatured .grid li + li {
        border-left: 1px solid rgba(0, 0, 0, .4);
    }
    .creatured .grid {
        .mkt-tile {
            background: $grain-src darken($grain, 15%);
            height: 55px;
            padding: 12px 10px;
            .info, &:hover .info, &:active .info {
                background: transparent;
            }
            &:hover {
                background-color: darken($grain, 12%);
            }
            &:active {
                depressed();
            }
            .info {
                box-shadow: none;
                height: auto;
                padding: 0;
                position: static;
            }
            h3 {
                color: $white;
                font-size: 11px;
                line-height: 16px;
                margin-bottom: -4px;
                padding-left: 21px;
            }
            .rating {
                font-size: 11px;
                margin: 4px 0 0 2px;
                vertical-align: top;
            }
            .rating .cnt,
            .unrated {
                display: block;
                text-indent: -999px;
            }
            canvas {
                display: none;
            }
            .icon {
                &.featured_tile {
                    background-size: auto 16px;
                    display: block;
                    position: absolute;
                    top: 12px;
                    left: 11px;
                    height: 16px;
                    width: 16px;
                }
                &.asset-tile {
                    display: none;
                }
            }
        }
    }
}

// Listing
// name + icon + price + rating in a vertical listview.
// also used as standalone "card" on detail pages.

.product-details,
.listing .mkt-tile {
    // TODO: Maybe we don't need this twice. We'll see when we do desktop.
    gradient-two-color-with-image(#f7f7f7, $barely-gray, $grain-src);
}

.listing .mkt-tile {
    min-height: 66px;
    padding: 20px 10px 20px 88px;
    h3 {
        font-size: 20px;
        font-weight: 400;
        line-height: 22px;
        margin: -4px 0 -7px;
        padding-bottom: 9px;
    }
    .icon {
        float: left;
        position: absolute;
        top: 20px;
        left: 10px;
    }
    .author {
        color: $subtext;
        font-size: 12px;
        line-height: 14px;
        max-height: 28px;
        margin-bottom: -3px;
        padding-bottom: 2px;
    }
    .button {
        float: right;
        height: 24px;
        line-height: 24px;
        font-size: 13px;
        margin: 2px 0 2px 10px;
        padding: 0;
        width: 70px;
    }
    .rating {
        clear: both;
        margin-top: 4px;
        color: $subtext;
        display: block;
        font-size: 11px;
        .cnt {
            border-bottom: 1px solid transparent;
            color: $note-gray;
            font-weight: 600;
            padding-bottom: 1px;
            position: relative;
            top: 1px;
        }
        a {
            color: $note-gray;
            text-decoration: none;
            &:hover .cnt {
                border-bottom-color: $note-gray;
                color: $dark-gray;
            }
        }
    }
    .price {
        display: none;
    }
}
.listing .result .mkt-tile .rating .cnt {
    top: 0;
}

// Grid
// store graphic, name, price in a floated grid (3 tiles wide at 320).

.grid {
    margin: 0 auto;
    max-width: 600px;
    li {
        border-bottom: 1px solid $black-border;
        border-left: 1px solid $black-border;
        float: left;
        max-height: 141px;
        width: 33.33333%;
        &:nth-child(3n) {
            border-right: 1px solid $black-border;
        }
    }
    .mkt-tile {
        position: relative;
        width: 100%;
        height: 106px;
{'fraction_non_alphanumeric': 0.11424847958297132, 'fraction_numerical': 0.030516941789748044, 'mean_word_length': 1.1441210710128056, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3359215', 'n_tokens_mistral': 3161, 'n_tokens_neox': 2818, 'n_words': 711}