<commit_before>@import compass/css3
@import sass-font-face

$link-color: #039be5

$sans-serif: Helvetica, Arial, sans-serif
@include font-face('opensans', 'opensans', 'opensans', $sans-serif)

@include keyframes(fade-down)
    0%
        opacity: 0
        @include transform(translate3d(0, -15%, 0))
    100%
        opacity: 1
        @include transform(none)

@include keyframes(fade-in)
    0%
        opacity: 0
    100%
        opacity: 1

.fade-down
    opacity: 0
    @include transform(translate3d(0, -15%, 0))
    @include animation(fade-down 2000ms ease-out)
    @include animation-fill-mode(forwards)

.fade-in
    opacity: 0
    @include animation(fade-in 700ms ease-in)
    @include animation-fill-mode(forwards)

*
    @include box-sizing(border-box)

html,
body
    font:
        size: 20px
body
    @extend %opensans
    line-height: 1.6
    color: #222
    -webkit-font-smoothing: antialiased
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    -webkit-tap-highlight-color: none


h1,
h2,
h3,
h4,
h5,
h6,
strong,
b
    font:
        weight: normal
h2
    display: inline-block
    border:
        bottom: 1px solid
h2,
h3
    margin:
        bottom: 0.5em

em,
i
    font:
        style: normal

small
    font:
        size: 70%

%container
    width: 100%
    .structure
        max-width: 80%
        margin: 0 auto
        padding: 3rem 1rem
        @media only screen and (min-device-width: 320px)
            max-width: 95%
            padding:
                right: 0.5rem
                left: 0.5rem


.above-fold
    @extend %container

.heading
    @include animation-delay(500ms)

.perry
    margin: 0 auto
        bottom: 2rem
    display: block
    width: 180px
    height: 180px
    @include border-radius(180px)
    overflow: hidden
    img
        max-width: 100%
        height: auto

.title
    text:
        align: center
        transform: uppercase
    letter-spacing: 0.1em
    font:
        size: 1.9rem
        weight: normal
    white-space: nowrap
    margin:
        bottom: 2rem

.description
    text:
        align: center
    @include animation-delay(1500ms)

.project-list
    margin:
        bottom: 2rem
    li
        font-size: 1rem

.below-fold,
.footer
    @include animation-delay(2500ms)

.below-fold
    @extend %container
    background: darken(#fff, 3%)

.footer
    @extend %container
    font:
        size: 1rem

a
    text-decoration: none
    color: $link-color
    @include transition(color 300ms ease-in)
    &:hover
        border:
            bottom: 1px solid
        color: darken($link-color, 20%)
    &:active
        color: darken($link-color, 30%)
<commit_msg>Reduce animation times.<commit_after>@import compass/css3
@import sass-font-face

$link-color: #039be5

$sans-serif: Helvetica, Arial, sans-serif
@include font-face('opensans', 'opensans', 'opensans', $sans-serif)

@include keyframes(fade-down)
    0%
        opacity: 0
        @include transform(translate3d(0, -15%, 0))
    100%
        opacity: 1
        @include transform(none)

@include keyframes(fade-in)
    0%
        opacity: 0
    100%
        opacity: 1

.fade-down
    opacity: 0
    @include transform(translate3d(0, -15%, 0))
    @include animation(fade-down 1000ms ease-out)
    @include animation-fill-mode(forwards)

.fade-in
    opacity: 0
    @include animation(fade-in 700ms ease-in)
    @include animation-fill-mode(forwards)

*
    @include box-sizing(border-box)

html,
body
    font:
        size: 20px
body
    @extend %opensans
    line-height: 1.6
    color: #222
    -webkit-font-smoothing: antialiased
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    -webkit-tap-highlight-color: none


h1,
h2,
h3,
h4,
h5,
h6,
strong,
b
    font:
        weight: normal
h2
    display: inline-block
    border:
        bottom: 1px solid
h2,
h3
    margin:
        bottom: 0.5em

em,
i
    font:
        style: normal

small
    font:
        size: 70%

%container
    width: 100%
    .structure
        max-width: 80%
        margin: 0 auto
        padding: 3rem 1rem
        @media only screen and (min-device-width: 320px)
            max-width: 95%
            padding:
                right: 0.5rem
                left: 0.5rem


.above-fold
    @extend %container

.heading
    @include animation-delay(500ms)

.perry
    margin: 0 auto
        bottom: 2rem
    display: block
    width: 180px
    height: 180px
    @include border-radius(180px)
    overflow: hidden
    img
        max-width: 100%
        height: auto

.title
    text:
        align: center
        transform: uppercase
    letter-spacing: 0.1em
    font:
        size: 1.9rem
        weight: normal
    white-space: nowrap
    margin:
        bottom: 2rem

.description
    text:
        align: center
    @include animation-delay(1500ms)

.project-list
    margin:
        bottom: 2rem
    li
        font-size: 1rem

.below-fold,
.footer
    @include animation-delay(2000ms)

.below-fold
    @extend %container
    background: darken(#fff, 3%)

.footer
    @extend %container
    font:
        size: 1rem

a
    text-decoration: none
    color: $link-color
    @include transition(color 300ms ease-in)
    &:hover
        border:
            bottom: 1px solid
        color: darken($link-color, 20%)
    &:active
        color: darken($link-color, 30%)

{'fraction_non_alphanumeric': 0.10642722117202269, 'fraction_numerical': 0.045368620037807186, 'mean_word_length': 2.026887871853547, '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': '1156072', 'n_tokens_mistral': 2024, 'n_tokens_neox': 1795, 'n_words': 470}