<commit_before>@import "./global.scss";

.Card {
    margin: 12px 0;
    padding: 24px 16px 16px;
    background-color: $colorCard;
    border-radius: 3px;
    border-bottom: 0 solid $colorLight2;
    box-shadow: $shadow1;
    overflow: hidden;

    transform-origin: top;
    transition: transform $durMedium $easing,
                opacity $durMedium $easing,
                border-radius $durMedium $easing,
                margin $durMedium $easing,
                border $durMedium $easing,
                box-shadow $durMedium $easing;
    will-change: transform, opacity;

    @include mobile {
        border-radius: 0;
        margin: 0;
        border-bottom: 3px solid $colorBlue1;
        box-shadow: none;
    };

    &.deferedApplied {
        transform: scale(0.98) translateY(10px);
        opacity: 0;

        @include mobile {
            transform: translateY(30px)
        };
    }

    $elementMargin: 16px;
    > div > span, > div, > div > div {
        > * {
            margin: $elementMargin 0;
            font-size: 18px;
            word-break: break-word;

            &:first-child {
                margin-top: 0;
            }
        }

        /* Header Styles */
        > h1, h2, h3, h4, h5, h6 {
            border-left: 4px solid $colorBlue1;
            padding-left: 8px;

            // The main header shouldn't have a different font
            &:not(h1) {
                font-family: 'Source Sans Pro', sans-serif;
                color: $colorBlue1;
            }

            // Make links a different color
            & > a {
                color: $colorBlue2;
                text-decoration: underline;
            }
        }

        > h1 { font-size: 28px; }
        > h2 { font-size: 22.4px; }
        > h3 { font-size: 20px; }
        > h4 { font-size: 20px; }
        > h5 { font-size: 20px; }
        > h6 { font-size: 20px; }

        // Join adjacent descending headers together
        @for $i from 1 through 6 {
            @if $i < 6 {
                // Join descending headers together
                > h#{$i} + h#{$i+1} {
                    margin-top: -$elementMargin;
                }
            }
        }

        /* Horizontal rulers */
        hr {
            width: calc(100% - 8px);
            margin: $elementMargin auto;
            display: block;
            height: 4px;
            border: none;
            background-color: $colorBlue1;
        }

        /* Links */
        a {
            text-decoration: none;
            color: $colorLinks;

            &:hover, &:active {
                text-decoration: underline;
            }
        }

        /* Lists */
        ol, ul {

            list-style: none;
            padding-left: 1em;
            li {
                &::before {
                    content: "- ";
                }
            }
        }

        /* Strong, treated as highlight */
        strong, code {
            background-color: $colorLight1;
            display: inline-block;
            padding: 2px 4px;
            margin: 2px 0;
            border-radius: 2px;

            font-size: 75%;
            font-family: $codefont;
        }

        strong {
          font-weight: bold;
        }

        /* blockquotes */
        blockquote > p {
            background-color: $colorLight1;
            padding: 10px 8px;
            border-left: 4px solid $colorLight3;
        }

        /* Images */
        img {
            width: calc(100% + 32px);
            transform: translateX(-16px);
            margin: 0;

            &[alt=""]+ img {
                margin-top: -(4px);

                &:last-of-type {
                    margin-bottom: 0;
                }
            }

            &[alt*="framed"], &[alt*="circular"], &[alt*="circular-small"], &[alt*="rounded"] {
                width: 100%;
                box-shadow: $shadow2;
                transition: box-shadow $durMedium $easing;

                &:hover {
                    box-shadow: $shadow3;
                }
            }

            &[alt*="framed"] {
                border-radius: 3px;
            }

            &[alt*="circular"] {
                border-radius: 50%;
            }

            &[alt*="rounded"] {
                border-radius: 2%;
            }

            // Reference: http://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images
            &[alt*="no-smooth"] {
                image-rendering: pixelated;
                -ms-interpolation-mode: nearest-neighbor;
            }

            &[alt*="small"] {
                width: 240px;
                margin: 0 auto;
                display: block;
                transform: translateX(0);
            }

            // Remove the bottom margin if the card is the last
            &:last-child {
                margin-bottom: -($elementMargin + 4px);
            }

            &+ img {
                margin-top: $elementMargin;
            }

            &+ h2 {
                margin: 0;
                transform: translateY(-160%);
                border: none;
                color: $colorLight1;
                padding-left: 0;
                text-shadow: $shadow3, stroke(2, transparentize($colorDark1, 0.93));

                margin-bottom: -($elementMargin + 16px);

                > a {
                    color: $colorLinksLight;
                    text-decoration: none;
                    text-shadow: $shadow3, stroke(2, transparentize($colorLight1, 0.93));

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }

        /* Code */
        pre > code {
            background-color: $colorDark3;
            color: $colorLight1;
            padding: 10px 16px;
            overflow-x: auto;
            border-radius: 0;

            font-size: 75%;
            font-family: $codefont;
            line-height: 1.45;
            display: block;
            width: calc(100% + 32px);
            transform: translateX(-16px);

            * {
                font-weight: 400;
                text-decoration: none;
                font-family: $codefont;
            }
        }
<commit_msg>Fix some overflow issues on iOS safari<commit_after>@import "./global.scss";

.Card {
    margin: 12px 0;
    padding: 24px 16px 16px;
    background-color: $colorCard;
    border-radius: 3px;
    border-bottom: 0 solid $colorLight2;
    box-shadow: $shadow1;
    overflow: hidden;

    transform-origin: top;
    transition: transform $durMedium $easing,
                opacity $durMedium $easing,
                border-radius $durMedium $easing,
                margin $durMedium $easing,
                border $durMedium $easing,
                box-shadow $durMedium $easing;
    will-change: transform, opacity;

    @include mobile {
        border-radius: 0;
        margin: 0;
        border-bottom: 3px solid $colorBlue1;
        box-shadow: none;
    };

    &.deferedApplied {
        transform: scale(0.98) translateY(10px);
        opacity: 0;

        @include mobile {
            transform: translateY(30px)
        };
    }

    $elementMargin: 16px;
    > div > span, > div, > div > div {
        > * {
            margin: $elementMargin 0;
            font-size: 18px;
            word-break: break-word;

            &:first-child {
                margin-top: 0;
            }
        }

        /* Header Styles */
        > h1, h2, h3, h4, h5, h6 {
            border-left: 4px solid $colorBlue1;
            padding-left: 8px;

            // The main header shouldn't have a different font
            &:not(h1) {
                font-family: 'Source Sans Pro', sans-serif;
                color: $colorBlue1;
            }

            // Make links a different color
            & > a {
                color: $colorBlue2;
                text-decoration: underline;
            }
        }

        > h1 { font-size: 28px; }
        > h2 { font-size: 22.4px; }
        > h3 { font-size: 20px; }
        > h4 { font-size: 20px; }
        > h5 { font-size: 20px; }
        > h6 { font-size: 20px; }

        // Join adjacent descending headers together
        @for $i from 1 through 6 {
            @if $i < 6 {
                // Join descending headers together
                > h#{$i} + h#{$i+1} {
                    margin-top: -$elementMargin;
                }
            }
        }

        /* Horizontal rulers */
        hr {
            width: calc(100% - 8px);
            margin: $elementMargin auto;
            display: block;
            height: 4px;
            border: none;
            background-color: $colorBlue1;
        }

        /* Links */
        a {
            text-decoration: none;
            color: $colorLinks;

            &:hover, &:active {
                text-decoration: underline;
            }
        }

        /* Lists */
        ol, ul {

            list-style: none;
            padding-left: 1em;
            li {
                &::before {
                    content: "- ";
                }
            }
        }

        /* Strong, treated as highlight */
        strong, code {
            background-color: $colorLight1;
            display: inline-block;
            padding: 2px 4px;
            margin: 2px 0;
            border-radius: 2px;

            font-size: 75%;
            font-family: $codefont;
        }

        strong {
          font-weight: bold;
        }

        /* blockquotes */
        blockquote > p {
            background-color: $colorLight1;
            padding: 10px 8px;
            border-left: 4px solid $colorLight3;
        }

        /* Images */
        img {
            width: calc(100% + 32px);
            transform: translateX(-16px);
            margin: 0;

            &[alt=""]+ img {
                margin-top: -(4px);

                &:last-of-type {
                    margin-bottom: 0;
                }
            }

            &[alt*="framed"], &[alt*="circular"], &[alt*="circular-small"], &[alt*="rounded"] {
                width: 100%;
                box-shadow: $shadow2;
                transition: box-shadow $durMedium $easing;

                &:hover {
                    box-shadow: $shadow3;
                }
            }

            &[alt*="framed"] {
                border-radius: 3px;
            }

            &[alt*="circular"] {
                border-radius: 50%;
            }

            &[alt*="rounded"] {
                border-radius: 2%;
            }

            // Reference: http://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images
            &[alt*="no-smooth"] {
                image-rendering: pixelated;
                -ms-interpolation-mode: nearest-neighbor;
            }

            &[alt*="small"] {
                width: 240px;
                margin: 0 auto;
                display: block;
                transform: translateX(0);
            }

            // Remove the bottom margin if the card is the last
            &:last-child {
                margin-bottom: -($elementMargin + 4px);
            }

            &+ img {
                margin-top: $elementMargin;
            }

            &+ h2 {
                margin: 0;
                transform: translateY(-160%);
                border: none;
                color: $colorLight1;
                padding-left: 0;
                text-shadow: $shadow3, stroke(2, transparentize($colorDark1, 0.93));

                margin-bottom: -($elementMargin + 16px);

                > a {
                    color: $colorLinksLight;
                    text-decoration: none;
                    text-shadow: $shadow3, stroke(2, transparentize($colorLight1, 0.93));

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }

        pre {
          word-break: break-all;
        }

        /* Code */
        pre > code {
            background-color: $colorDark3;
            color: $colorLight1;
            padding: 10px 16px;
            overflow-x: auto;
            border-radius: 0;

            font-size: 75%;
            font-family: $codefont;
            line-height: 1.45;
            display: block;
            width: calc(100% + 32px);
            transform: translateX(-16px);

            * {
                font-weight: 400;
                text-decoration: none;
                font-family: $codefont;
            }
        }

{'fraction_non_alphanumeric': 0.1136996103999364, 'fraction_numerical': 0.025920330762502983, 'mean_word_length': 1.0690903109063992, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '78393', 'n_tokens_mistral': 3842, 'n_tokens_neox': 3390, 'n_words': 765}