<commit_before>@import 'site';
@import 'index-mixins';
@import 'index-hero';
@import 'index-partners';
@import 'pycontw-year-ribbon';

body {
    background-color: $top-navbar-background-color;
}

.portal {
	@include index-section;

	@include on-desktop {
		margin-top: 0 - $menu-desktop-height / 2;
	}

	.portal-container {
		display: flex;
		flex-flow: wrap;
		align-items: center;
		justify-content: space-around;
		height: 260px;
		@include on-desktop {
			flex-flow: wrap;
			height: 100px;
		}
	}

	.card {
		display: flex;
		margin-bottom: 15px;
		width: 156px;
		height: 50px;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
	  border: solid 2px #224398;
		a {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			justify-content: center;
			color: #224298;
			font-size: 16px;
			font-weight: normal;
			letter-spacing: -0.08px;
		}
		&:hover {
			border: solid 2px $portica;
		}
	}
}

.top-navbar {
    .navbar-brand {
        // Tom: Don't display "PyCon TW20" at navbar in index
        // It collides with the hero image
        display: none;
    }
}

.menu-navbar-desktop-outer {
    @include on-desktop {
        margin: 0 $hero-desktop-margin;
    }
}

.menu-navbar-desktop {
	@include menu-navbar-desktop(
		url('../assets/logo-strong-violet.svg'), $jinger-bread, $jinger-bread,  $jinger-bread);

    @include on-desktop {
        // Align with hero-image-bg
        margin: 0 auto 100px;
        max-width: 1160px;
        padding: 0;
    }
}

@mixin big-button-color($color-name, $color) {
    &.color-#{$color-name} {
        background-color: $color;
        border: 2px solid $color;

        &:hover {
            color: $color;
            background-color: transparent;
            text-decoration: none;
            .icon {
                background-color: $color;
            }
        }
    }
}

@mixin big-button-icon($name) {
    .icon-#{$name} {
        mask: url('../assets/icon-#{$name}.svg');
        mask-size: 100% 100%;
    }
}

.index-big-button {
    width: 510px;
    height: 70px;
    line-height: 70px;
    border-radius: 35px;
    font-size: 1.6rem;
    margin: 30px auto;

    // FIXME: This is not okay
    max-width: 100%;

	@include on-desktop {
        width: 510px;
        height: 113px;
        line-height: 113px;
        border-radius: 57px;
        font-size: 2.25rem;
        margin: 50px auto;
	}

    text-decoration: none;
    color: $brick;
    position: relative;
    text-align: center;
    display: block;


    @include big-button-color(jinger-bread, $jinger-bread);
    @include big-button-color(imperial, $imperial);
    @include big-button-color(dark-gray, $dark-gray);

    .icon {
        width: 35px;
        height: 35px;
        background-repeat: no-repeat;
        position: absolute;
        left: 13px;
        background-color: $brick;

        top: 50%;
        transform: translate(0, -50%);
<commit_msg>Add a little transparent to big buttons<commit_after>@import 'site';
@import 'index-mixins';
@import 'index-hero';
@import 'index-partners';
@import 'pycontw-year-ribbon';

body {
    background-color: $top-navbar-background-color;
}

.portal {
	@include index-section;

	@include on-desktop {
		margin-top: 0 - $menu-desktop-height / 2;
	}

	.portal-container {
		display: flex;
		flex-flow: wrap;
		align-items: center;
		justify-content: space-around;
		height: 260px;
		@include on-desktop {
			flex-flow: wrap;
			height: 100px;
		}
	}

	.card {
		display: flex;
		margin-bottom: 15px;
		width: 156px;
		height: 50px;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
	  border: solid 2px #224398;
		a {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			justify-content: center;
			color: #224298;
			font-size: 16px;
			font-weight: normal;
			letter-spacing: -0.08px;
		}
		&:hover {
			border: solid 2px $portica;
		}
	}
}

.top-navbar {
    .navbar-brand {
        // Tom: Don't display "PyCon TW20" at navbar in index
        // It collides with the hero image
        display: none;
    }
}

.menu-navbar-desktop-outer {
    @include on-desktop {
        margin: 0 $hero-desktop-margin;
    }
}

.menu-navbar-desktop {
	@include menu-navbar-desktop(
		url('../assets/logo-strong-violet.svg'), $jinger-bread, $jinger-bread,  $jinger-bread);

    @include on-desktop {
        // Align with hero-image-bg
        margin: 0 auto 100px;
        max-width: 1160px;
        padding: 0;
    }
}

@mixin big-button-color($color-name, $color) {
    &.color-#{$color-name} {
        background-color: $color;
        border: 2px solid $color;

        &:hover {
            color: $color;
            background-color: transparentize($brick, 0.3);
            text-decoration: none;
            .icon {
                background-color: $color;
            }
        }
    }
}

@mixin big-button-icon($name) {
    .icon-#{$name} {
        mask: url('../assets/icon-#{$name}.svg');
        mask-size: 100% 100%;
    }
}

.index-big-button {
    width: 510px;
    height: 70px;
    line-height: 70px;
    border-radius: 35px;
    font-size: 1.6rem;
    margin: 30px auto;

    // FIXME: This is not okay
    max-width: 100%;

	@include on-desktop {
        width: 510px;
        height: 113px;
        line-height: 113px;
        border-radius: 57px;
        font-size: 2.25rem;
        margin: 50px auto;
	}

    text-decoration: none;
    color: $brick;
    position: relative;
    text-align: center;
    display: block;

    transition: background 150ms linear, border 150ms linear;


    @include big-button-color(jinger-bread, $jinger-bread);
    @include big-button-color(imperial, $imperial);
    @include big-button-color(dark-gray, $dark-gray);

    .icon {
        width: 35px;
        height: 35px;
        background-repeat: no-repeat;
        position: absolute;
        left: 13px;
        background-color: $brick;

        top: 50%;
        transform: translate(0, -50%);

{'fraction_non_alphanumeric': 0.14302461899179367, 'fraction_numerical': 0.035839892815273826, 'mean_word_length': 2.1850666666666667, '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': '5383804', 'n_tokens_mistral': 2419, 'n_tokens_neox': 2070, 'n_words': 470}