<commit_before>@import 'variables';

$nav-height: 80px;
.navbar {
    height: $nav-height;
    color: $off-white;
    background-color: $primary-red;
}

.nav-content {
    height: 100%;
    max-width: 4 * $width-increments;
    
    margin: 0px auto;
    padding: 0px 20px;
    position: relative;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.badge {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
}
.logo {
    width: 60px;
    height: 60px;
    margin-right: 12px;
}
.club-title {
    display: none;
    letter-spacing: 1.1px;
    
    .top { font-family: $font-header; }
    .bot { font-family: $font-body;   }
}


.menu-button {
    $menu-size: 32px;
    width: $menu-size;
    height: $menu-size;
    background-color: $primary-red;
    
    cursor: pointer;
}

$menu-item-height: 44px;
.nav-links {
    left: 0px;
    top: $nav-height;
    position: absolute;
    
    width: 100%;
    background-color: #9F001A;
    
    max-height: 0px;
    overflow: hidden;
    
    /* NOTE
     * this is for the dropdown menu animation on mobile
     * BUT has a side effect of animating the height change between media queries
     * and I have no idea how to fix that...
     */
    @include transition(all 0.2s ease-in-out);
}
.nav-links.show {
    max-height: 6 * $menu-item-height;
}

.nav-link {
    display: block;
    padding: 0px 16px;
    
    height: $menu-item-height;
    line-height: $menu-item-height;
    
    vertical-align: center;
    text-transform: capitalize;
}
.nav-link.active, .nav-link:hover {
    border-left: 4px solid white;
}

@media screen and (min-width: 2 * $width-increments)
{
    // 600px: show title text
    .club-title { 
        display: block; 
        .top { font-size: 1.1rem; }
        .bot { font-size: 1.15rem; }
    }
}

@media screen and (min-width: 3 * $width-increments)
{
    // 900px: show full links
    .club-title { 
        .top { font-size: 1.3rem; }
        .bot { font-size: 1.35rem; }
    }
    
    .menu-button { display: none; }
    .nav-links {
        width: auto;
        height: 100%;
        max-height: 100%;
        position: static;
        
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: flex-end;
    }
    .nav-link {
        font-size: 0.85rem;
        
        height: auto;
        line-height: normal;
        display: inline-block;

        padding: 12px 16px 12px 16px;
        display: inline-flex;
        align-items: flex-end;
    }
    .nav-link.active, .nav-link:hover {
        border-left: none; //cancel out mobile indicator
        
        color: $primary-red;
        background-color: $off-white;
    }
}<commit_msg>nav bar link hover changes color<commit_after>@import 'variables';

$nav-height: 80px;
.navbar {
    height: $nav-height;
    color: $off-white;
    background-color: $primary-red;
}

.nav-content {
    height: 100%;
    max-width: 4 * $width-increments;

    margin: 0px auto;
    padding: 0px 20px;
    position: relative;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.badge {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
}
.logo {
    width: 60px;
    height: 60px;
    margin-right: 12px;
}
.club-title {
    display: none;
    letter-spacing: 1.1px;

    .top { font-family: $font-header; }
    .bot { font-family: $font-body;   }
}


.menu-button {
    $menu-size: 32px;
    width: $menu-size;
    height: $menu-size;
    background-color: $primary-red;

    cursor: pointer;
}

$menu-item-height: 44px;
.nav-links {
    left: 0px;
    top: $nav-height;
    position: absolute;

    width: 100%;
    background-color: #9F001A;

    max-height: 0px;
    overflow: hidden;

    /* NOTE
     * this is for the dropdown menu animation on mobile
     * BUT has a side effect of animating the height change between media queries
     * and I have no idea how to fix that...
     */
    @include transition(all 0.2s ease-in-out);
}
.nav-links.show {
    max-height: 6 * $menu-item-height;
}

.nav-link {
    display: block;
    padding: 0px 16px;

    height: $menu-item-height;
    line-height: $menu-item-height;

    vertical-align: center;
    text-transform: capitalize;
}
.nav-link.active, .nav-link:hover {
    border-left: 4px solid white;
}

@media screen and (min-width: 2 * $width-increments)
{
    // 600px: show title text
    .club-title {
        display: block;
        .top { font-size: 1.1rem; }
        .bot { font-size: 1.15rem; }
    }
}

@media screen and (min-width: 3 * $width-increments)
{
    // 900px: show full links
    .club-title {
        .top { font-size: 1.3rem; }
        .bot { font-size: 1.35rem; }
    }

    .menu-button { display: none; }
    .nav-links {
        width: auto;
        height: 100%;
        max-height: 100%;
        position: static;

        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: flex-end;
    }
    .nav-link {
        font-size: 0.85rem;

        height: auto;
        line-height: normal;
        display: inline-block;

        padding: 12px 16px 12px 16px;
        display: inline-flex;
        align-items: flex-end;
    }
    .nav-link.active, .nav-link:hover {
        border-left: none; //cancel out mobile indicator

        color: $primary-red;
        background-color: $off-white;
    }
}
{'fraction_non_alphanumeric': 0.13454545454545455, 'fraction_numerical': 0.026545454545454546, 'mean_word_length': 2.0109469074986315, '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': '7463268', 'n_tokens_mistral': 2062, 'n_tokens_neox': 1906, 'n_words': 475}