<commit_before>// Copyright (c) 2016-2017 <NAME>
// Licensed under Apache License v2.0

@import 'blocks';
@import 'browser-specific';
@import 'constants';
@import 'detail';
@import 'directions';
@import 'engagement-photos';
@import 'gallery';
@import 'large_map';
@import 'luma_logo_map';
@import 'math';
@import 'music';
@import 'nav-block';
@import 'our-story';
@import 'registries';
@import 'rsvp';
@import 'the-big-day';
@import 'utils';

$MAIN-BACKGROUND: white;

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    color: $FOREGROUND-COLOR-DARK;
    @include font-body;
    line-height: 1.5;
}

a {
    border-radius: .15em;
    color: $FOREGROUND-COLOR-DARK;
    cursor: pointer;
    transition: all 150ms ease-in-out;

    // Cannot use `all` because of Edge.
    // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4320439
    @include browser-edge {
        transition: box-shadow 150ms ease-in-out, opacity 150ms ease-in-out;
    }
}

a.block-link,
.block-links a {
    &:focus,
    &:hover {
        box-shadow: 0 0 .5em #111;
        opacity: .9;
    }
}

a:active {
    color: $FOREGROUND-SELECTED-COLOR-DARK;
}

.clearfix::after {
    clear: both;
    content: '';
    display: block;
}

h1 {
    margin: 0;
}

input, textarea, select {
    background: #fafafa;
    border: 0;
    border-bottom: #{$INPUT-BORDER-WIDTH-EM}em dashed transparent;
    // Cut border width in half because there is only a bottom border
    font-size: adjusted-font-size($INPUT-BORDER-WIDTH-EM / 2, $INPUT-PADDING-EM);
    padding: #{$INPUT-PADDING-EM}em;
    vertical-align: middle;

    @each $selector in $INVALID-SELECTORS {
        &#{$selector} {
            border-color: #f06537;
            box-shadow: none;
        }
    }
}

select {
    $right-offset-em: .25;
    $arrow-height-em: .5;
    $side-length-em: $arrow-height-em * 1.1547;

    @include prefix(appearance, none);
    background-image:
        linear-gradient(60deg, transparent 50%, gray 50%),
        linear-gradient(120deg, gray 50%, transparent 50%);
    background-position:
        calc(100% - #{$right-offset-em + $side-length-em}em) center,
        calc(100% - #{$right-offset-em + $side-length-em / 2 + 0.02}em) center; // + 0.02 for Chrome
    background-repeat: no-repeat;
    background-size:
        #{$side-length-em / 2}em #{$arrow-height-em}em,
        #{$side-length-em / 2}em #{$arrow-height-em}em;
    padding-right: #{2 * $right-offset-em + $side-length-em}em;

    &::-ms-expand {
        display: none;
    }
}

button, input[type=submit], input[type=button] {
    background: $BUTTON-BACKGROUND-COLOR;
    border: #{$BUTTON-BORDER-WIDTH-EM}em solid white;
    border-radius: .2em;
    line-height: 1em;
    padding: #{$BUTTON-PADDING-EM}em;
}

.divided-sections > * {
    border-right: 0.1em solid $FOREGROUND-COLOR-DARK;
    box-sizing: border-box;
    float: left;
    padding: 1em;

    &:last-child {
        border: none;
    }
}

main {
    background: $MAIN-BACKGROUND;
    background-clip: padding-box;
    box-sizing: border-box;
    line-height: 0;
    min-height: 100vh;
    padding: 1vw;
    @include prefix(perspective, 1000);
    position: relative; // For Safari and the title backround gradient
    text-align: center;
    width: 100%;

    // In IE 10/11 it won't show this element is set to the side for some reason and won't
    // serve as a backdrop for the page
    @include browser-ie10plus {
        background: none;
    }

    // Add margins to the outer-most entries
    & > div {
        @include block-padding(margin, 0.5);
//        margin: $block-padding / 2;
    }
}

section {
    padding: 2em;
}

#wrapper {
    color: black;
    height: 100%;
    margin: 0 auto;
    padding-top: 100vh;

    &::before {
        @include prefix-value(background, linear-gradient, transparent, black);
        @include prefix(transform, translateZ(1px));

        bottom: -32vh;
        content: '';
        display: inline-block;
        left: 0;
        position: absolute;
        right: 0;
        top: 81vh;

        // Appears on top of main
        @include browser-safari71plus {
            display: none;
        }

        // Hidden with parallax being disabled
        @include browser-ie8plus {
            display: none;
        }
    }
}

#title {
    @include prefix(transform, translateZ(-3px) scale(2.6));
    @include prefix(user-select, none);

    background: #ab945a
            url(#{map-get($large-images-map, 'media/images/engagement/2961.jpg')})
            center/cover
            no-repeat;
    bottom: 0;
    color: $FOREGROUND-COLOR-LIGHT;
    cursor: default;
    @include font-great-vibes;
    left: 0;
    right: 0;
    text-shadow: 0 0 20px black, 0 0 20px black;
    top: 0;
    z-index: -4;

    // There's a rendering issue where scrolling back up results in the title rendering white and/or
    // repeated sections
    @include browser-edge {
        transform: none;
    }

    // Disabled as main's background would not appear above title
    @include browser-ie8plus {
        @include prefix(transform, none);
    }
}

#title-text {
    background: rgba(255, 255, 255, .2);
    left: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    @include prefix(transform, translateY(-50%));
    width: 100%;

    * {
        transition: all linear 100ms;
    }
}

#title-text-names {
    white-space: nowrap;
    font-size: 10vw;
}

#title-text-date {
    font-size: 7vw;
}

#title-text-names,
#title-text-date {
    @include browser-ie11 {
        width: 100%;
    }
}

#title-scroll-tip {
    $font-size: 10vw;

    animation: title-scroll-tip-animation ease-in 1s infinite alternate;
    bottom: 0;
    display: inline-block;
    font-size: $font-size;
    left: 50%;
    position: absolute;
    text-align: center;
    text-decoration: none;
    @include prefix(transform, translateX(-50%) rotate(90deg));

    @media (max-height: 700px) {
        display: none;
    }
}

@keyframes title-scroll-tip-animation {
    from {
        color: $FOREGROUND-COLOR-LIGHT;
    }
    to {
        color: $FOREGROUND-HOVER-COLOR-LIGHT;
    }
}

.disable-scrolling .parallax {
    overflow: hidden;
}

.parallax {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;<commit_msg>Fix half-width bug in chrome<commit_after>// Copyright (c) 2016-2017 <NAME>
// Licensed under Apache License v2.0

@import 'blocks';
@import 'browser-specific';
@import 'constants';
@import 'detail';
@import 'directions';
@import 'engagement-photos';
@import 'gallery';
@import 'large_map';
@import 'luma_logo_map';
@import 'math';
@import 'music';
@import 'nav-block';
@import 'our-story';
@import 'registries';
@import 'rsvp';
@import 'the-big-day';
@import 'utils';

$MAIN-BACKGROUND: white;

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    color: $FOREGROUND-COLOR-DARK;
    @include font-body;
    line-height: 1.5;
}

a {
    border-radius: .15em;
    color: $FOREGROUND-COLOR-DARK;
    cursor: pointer;
    transition: all 150ms ease-in-out;

    // Cannot use `all` because of Edge.
    // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4320439
    @include browser-edge {
        transition: box-shadow 150ms ease-in-out, opacity 150ms ease-in-out;
    }
}

a.block-link,
.block-links a {
    &:focus,
    &:hover {
        box-shadow: 0 0 .5em #111;
        opacity: .9;
    }
}

a:active {
    color: $FOREGROUND-SELECTED-COLOR-DARK;
}

.clearfix::after {
    clear: both;
    content: '';
    display: block;
}

h1 {
    margin: 0;
}

input, textarea, select {
    background: #fafafa;
    border: 0;
    border-bottom: #{$INPUT-BORDER-WIDTH-EM}em dashed transparent;
    // Cut border width in half because there is only a bottom border
    font-size: adjusted-font-size($INPUT-BORDER-WIDTH-EM / 2, $INPUT-PADDING-EM);
    padding: #{$INPUT-PADDING-EM}em;
    vertical-align: middle;

    @each $selector in $INVALID-SELECTORS {
        &#{$selector} {
            border-color: #f06537;
            box-shadow: none;
        }
    }
}

select {
    $right-offset-em: .25;
    $arrow-height-em: .5;
    $side-length-em: $arrow-height-em * 1.1547;

    @include prefix(appearance, none);
    background-image:
        linear-gradient(60deg, transparent 50%, gray 50%),
        linear-gradient(120deg, gray 50%, transparent 50%);
    background-position:
        calc(100% - #{$right-offset-em + $side-length-em}em) center,
        calc(100% - #{$right-offset-em + $side-length-em / 2 + 0.02}em) center; // + 0.02 for Chrome
    background-repeat: no-repeat;
    background-size:
        #{$side-length-em / 2}em #{$arrow-height-em}em,
        #{$side-length-em / 2}em #{$arrow-height-em}em;
    padding-right: #{2 * $right-offset-em + $side-length-em}em;

    &::-ms-expand {
        display: none;
    }
}

button, input[type=submit], input[type=button] {
    background: $BUTTON-BACKGROUND-COLOR;
    border: #{$BUTTON-BORDER-WIDTH-EM}em solid white;
    border-radius: .2em;
    line-height: 1em;
    padding: #{$BUTTON-PADDING-EM}em;
}

.divided-sections > * {
    border-right: 0.1em solid $FOREGROUND-COLOR-DARK;
    box-sizing: border-box;
    float: left;
    padding: 1em;

    &:last-child {
        border: none;
    }
}

main {
    background: $MAIN-BACKGROUND;
    background-clip: padding-box;
    box-sizing: border-box;
    line-height: 0;
    min-height: 100vh;
    padding: 1vw;
    @include prefix(perspective, 1000);
    position: relative; // For Safari and the title backround gradient
    text-align: center;
    width: 100%;

    // In IE 10/11 it won't show this element is set to the side for some reason and won't
    // serve as a backdrop for the page
    @include browser-ie10plus {
        background: none;
    }

    // Add margins to the outer-most entries
    & > div {
        @include block-padding(margin, 0.5);
//        margin: $block-padding / 2;
    }
}

section {
    padding: 2em;
}

#wrapper {
    color: black;
    height: 100%;
    margin: 0 auto;
    padding-top: 100vh;

    &::before {
        @include prefix-value(background, linear-gradient, transparent, black);
        @include prefix(transform, translateZ(1px));

        bottom: -32vh;
        content: '';
        display: inline-block;
        left: 0;
        position: absolute;
        right: 0;
        top: 81vh;

        // Appears on top of main
        @include browser-safari71plus {
            display: none;
        }

        // Hidden with parallax being disabled
        @include browser-ie8plus {
            display: none;
        }
    }
}

#title {
    @include prefix(transform, translateZ(-3px) scale(2.6));
    @include prefix(user-select, none);

    background: #ab945a
            url(#{map-get($large-images-map, 'media/images/engagement/2961.jpg')})
            center/cover
            no-repeat;
    bottom: 0;
    color: $FOREGROUND-COLOR-LIGHT;
    cursor: default;
    @include font-great-vibes;
    left: 0;
    right: 0;
    text-shadow: 0 0 20px black, 0 0 20px black;
    top: 0;
    z-index: -4;

    // There's a rendering issue where scrolling back up results in the title rendering white and/or
    // repeated sections
    @include browser-edge {
        transform: none;
    }

    // Disabled as main's background would not appear above title
    @include browser-ie8plus {
        @include prefix(transform, none);
    }
}

#title-text {
    background: rgba(255, 255, 255, .2);
    left: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    @include prefix(transform, translateY(-50%));
    width: 100%;

    * {
        transition: all linear 100ms;
    }
}

#title-text-names {
    white-space: nowrap;
    font-size: 10vw;
}

#title-text-date {
    font-size: 7vw;
}

#title-text-names,
#title-text-date {
    @include browser-ie11 {
        width: 100%;
    }
}

#title-scroll-tip {
    $font-size: 10vw;

    animation: title-scroll-tip-animation ease-in 1s infinite alternate;
    bottom: 0;
    display: inline-block;
    font-size: $font-size;
    left: 50%;
    position: absolute;
    text-align: center;
    text-decoration: none;
    @include prefix(transform, translateX(-50%) rotate(90deg));

    @media (max-height: 700px) {
        display: none;
    }
}

@keyframes title-scroll-tip-animation {
    from {
        color: $FOREGROUND-COLOR-LIGHT;
    }
    to {
        color: $FOREGROUND-HOVER-COLOR-LIGHT;
    }
}

.disable-scrolling .parallax {
    overflow: hidden;
}

.parallax {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    // Only works in WebKit browsers but prevents half width card section due to wrapping
    // Firefox has much more narrow scrollbars so it isn't that big a problem.
    overflow-y: overlay;
{'fraction_non_alphanumeric': 0.14090660841070454, 'fraction_numerical': 0.03183272216587345, 'mean_word_length': 2.4208700293568186, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 2, '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': '4767056', 'n_tokens_mistral': 4764, 'n_tokens_neox': 4318, 'n_words': 1078}