<commit_before><script>
export default {
    name: 'grid',
    props: ['matrix'],
}
</script>

<template lang="jade">
#grid-container
    #grid
        .cell(v-for="cell in matrix.cells" v-bind:key="cell.symbol" v-bind:class="[{ highlighted: cell.highlighted}, cell.highlighted && cell.color]")
            {{cell.symbol}}
</template>

<style lang="scss">
#grid-container {
    text-align: center;
    height: 100%;
}

#grid {
    width: 72vmin;
    height: 72vmin;
    margin: calc(14vmin - 20px) auto;

    & .cell {
        display: inline-block;
        width: 8vmin;
        height: 8vmin;
        line-height: 8.5vmin;
        margin: 2vmin;
        font-size: 4vmin;
        text-align: center;
        transition: 0.1s;

        &.highlighted {
            color: transparent;

            &.red {
                background: #ff1744;
            }

            &.orange {
                background: #ff5722;
            }

            &.blue {
                background: #1565c0;
            }

            &.yellow {
                background: #795548;
            }

            &.green {
                background: #388e3c;
            }

            &.purple {
                background: #8e24aa;
            }
        }
<commit_msg>Remove colors, blinding and transitions from grid<commit_after><script>
export default {
    name: 'grid',
    props: ['matrix'],
}
</script>

<template lang="jade">
#grid-container
    #grid
        .cell(v-for="cell in matrix.cells" v-bind:key="cell.symbol" v-bind:class="[{ highlighted: cell.highlighted}, cell.highlighted && cell.color]")
            {{cell.symbol}}
</template>

<style lang="scss">

$red: #ff1744;
$orange: #ff5722;
$blue: #1565c0;
$yellow: #795548;
$green: #388e3c;
$purple: #8e24aa;

#grid-container {
    text-align: center;
    height: 100%;
}

#grid {
    width: 90vw;
    height: 96vh;
    margin: calc(1vh - 20px) auto;

    & .cell {
        display: inline-block;
        width: 5vw;
        height: 6vh;
        line-height: 6vh;
        margin: 5vh 5vw;
        font-size: 4vh;
        text-align: center;
        opacity: 0.3;

        &.highlighted {
            opacity: 1;
            background: none!important;
            color: white!important;

            &.red {
                background: $red;
                color: $red;
            }

            &.orange {
                background: $orange;
                color: $orange;
            }

            &.blue {
                background: $blue;
                color: $blue;
            }

            &.yellow {
                background: $yellow;
                color: $yellow;
            }

            &.green {
                background: $green;
                color: $green;
            }

            &.purple {
                background: $purple;
                color: $purple;
            }
        }

{'fraction_non_alphanumeric': 0.13166144200626959, 'fraction_numerical': 0.03134796238244514, 'mean_word_length': 1.3637860082304527, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, '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': '5289664', 'n_tokens_mistral': 995, 'n_tokens_neox': 876, 'n_words': 189}