<commit_before>// home
// --------------------------------------------------

@import "_partials/variables";
@import "_partials/mixins";

#layers {
    height: 100%;
    perspective: 1px;
    position: relative;
}

.layer-front {
    width: 100%;
    height: auto;
    padding: 5% 0;
    text-align: center;
    position: relative;

    &:before {
        @include align-horizontal();
        width: 23%;
        max-width: 140px;
        content: url("#{$path-imgs}ornament.svg");
        top: 0;
        transform: rotate(180deg) translate3d(50%,75%,0);
        z-index: 0;
    }

    &:after {
        @include align-horizontal();
        width: 23%;
        max-width: 140px;
        content: url("#{$path-imgs}ornament.svg");
        bottom: 0;
        transform: translate3d(-50%,75%,0);
        z-index: 1;
    }

    @media (min-width: $screen-med) {
        padding: ($spacing-min / 2) 0;
    }
}

.layer-back {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    &:nth-child(1) {
        background-image: url("#{$path-imgs}home/interior.jpg");
    }

    &:nth-child(3) {
        background-image: url("#{$path-imgs}home/jars.jpg");
    }

    .mobile & {
        background-attachment: scroll;
    }
}

#logo {
    @include align-center();
    width: 100%;
    max-width: 800px;
    height: auto;
    padding: 0 $spacing-min;
}

#intro {
    @include align-horizontal();
    width: 100%;
    max-width: 800px;
    height: auto;
    padding: 0 12px;
    position: relative;

    a {
        width: auto;
        padding: 3% 6% 2.5%;
        background-color: rgba(256,256,256,0.5);
        border: 2px solid $color-orange-dark;
        color: $color-orange-dark;
        font-size: 16px;
        font-size: 4.8vw;
        display: inline-block;
        transition: background-color 0.2s ease-in-out;

        &:hover {
            color: #fff;
            background-color: $color-orange-dark;
        }
    }

    svg {
        width: 100%;
        height: auto;
        fill: $color-gray-dark;
    }

    @media (max-width: $screen-min - 1px) {
        a {
            font-size: 16px;
        }
    }

    @media (min-width: $screen-med) {
        padding-right: 24px;
        padding-left: 24px;
    }

    @media (min-width: 800px) {
        a {
            width: 294px;
            height: 90px;
            line-height: 90px;
            padding: 0;
            font-size: 38px;
        }
    }
}

.intro-rule {
    padding: 0 8px 10%;
    
    .rule {
        @include rule(#ddd);
    }

    @media (min-width: $screen-med) {
        padding: $spacing-max 16px ($spacing-max + $spacing-min);
    }<commit_msg>intro spatial adjustments<commit_after>// home
// --------------------------------------------------

@import "_partials/variables";
@import "_partials/mixins";

#layers {
    height: 100%;
    perspective: 1px;
    position: relative;
}

.layer-front {
    width: 100%;
    height: auto;
    padding: 10% 0;
    text-align: center;
    position: relative;

    &:before {
        @include align-horizontal();
        width: 23%;
        max-width: 140px;
        content: url("#{$path-imgs}ornament.svg");
        top: 0;
        transform: rotate(180deg) translate3d(50%,75%,0);
        z-index: 0;
    }

    &:after {
        @include align-horizontal();
        width: 23%;
        max-width: 140px;
        content: url("#{$path-imgs}ornament.svg");
        bottom: 0;
        transform: translate3d(-50%,75%,0);
        z-index: 1;
    }

    @media (min-width: $screen-med) {
        padding: $spacing-min 0;
    }
}

.layer-back {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    &:nth-child(1) {
        background-image: url("#{$path-imgs}home/interior.jpg");
    }

    &:nth-child(3) {
        background-image: url("#{$path-imgs}home/jars.jpg");
    }

    .mobile & {
        background-attachment: scroll;
    }
}

#logo {
    @include align-center();
    width: 100%;
    max-width: 800px;
    height: auto;
    padding: 0 $spacing-min;
}

#intro {
    @include align-horizontal();
    width: 100%;
    max-width: 800px;
    height: auto;
    padding: 0 12px;
    position: relative;

    a {
        width: auto;
        padding: 3% 6% 2.5%;
        background-color: rgba(256,256,256,0.5);
        border: 2px solid $color-orange-dark;
        color: $color-orange-dark;
        font-size: 16px;
        font-size: 4.8vw;
        display: inline-block;
        transition: background-color 0.2s ease-in-out;

        &:hover {
            color: #fff;
            background-color: $color-orange-dark;
        }
    }

    svg {
        width: 100%;
        height: auto;
        fill: $color-gray-dark;
    }

    @media (max-width: $screen-min - 1px) {
        a {
            font-size: 16px;
        }
    }

    @media (min-width: $screen-med) {
        padding-right: 24px;
        padding-left: 24px;
    }

    @media (min-width: 800px) {
        a {
            width: 294px;
            height: 90px;
            line-height: 90px;
            padding: 0;
            font-size: 38px;
        }
    }
}

.intro-rule {
    padding: 0 8px 10%;
    
    .rule {
        @include rule(#eee);
    }

    @media (min-width: $screen-med) {
        padding: $spacing-max 16px ($spacing-max + $spacing-min);
    }
{'fraction_non_alphanumeric': 0.16538530305739316, 'fraction_numerical': 0.04112283211156803, 'mean_word_length': 1.6920115495668913, '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': '7446309', 'n_tokens_mistral': 2106, 'n_tokens_neox': 1854, 'n_words': 393}