<commit_before>//
// Banner
// 
// 1. Structure
// 2. Blocks
//
// --------------------------------------------------

.banner  
    block-base()
    lost-center $screen-lg $space-md flex  
    

// 
// 1. Structure 
// --------------------------------------------------

.banner-main
    order 2
    lost-column 3/7 0 0 flex
    align-items center 
    
.banner-aside 
    order 1
    lost-column 2/7 0 0 flex
    
    &:last-child 
        order 3
    

// 
// 2. Blocks
// --------------------------------------------------

.banner-box
    bg        = $brand-primary
    bg-darken = 25%
    background $brand-primary
    color #fff 
    display flex
    justify-content center
    flex-direction column
    padding $space-md
    transition background .2s ease-in-quad

    &:hover
    &:focus   
        background darken(bg, bg-darken)
            
    .banner-aside &
        font(h3, bold)
        height 25vh
        
    .banner-main &
        font(h1, bold)
        height 50vh
        text-align center
        
        
    // Set colors
    // --------------------------------------------------
    
    .banner-aside:nth-child(2) &:nth-child(even) 
    .banner-aside:nth-child(3) &:nth-child(odd) 
        bg = $brand-secondary
        background bg
        
        &:hover
        &:focus 
            background darken(bg, bg-darken)
         
    .banner-main & 
        bg = $brand-alternate
        background $brand-alternate
        
        &:hover
        &:focus 
            
            background darken(bg, bg-darken)

        
    // Set detail
    // --------------------------------------------------
    
    .banner-aside:nth-child(2) &:first-child 
    .banner-aside:nth-child(3) &:last-child
        position relative
        
        &:before 
            content ''
            background $brand-primary
            position absolute 0
            transition background .2s ease-in-quad
            width 100vw
            
        &:hover
        &:focus  
            &:before  
                background darken(bg, bg-darken)
                   


    .banner-aside:nth-child(2) &:first-child 
        &:before 
            left auto
            right 100%
            
    .banner-aside:nth-child(3) &:last-child
        &:before 
            left 100%
        
    
        
    // Types
    // --------------------------------------------------
    
    .date
        color rgba(#fff, .6)
    

         
         
        <commit_msg>#22 Adjust banner on mobile<commit_after>//
// Banner
// 
// 1. Structure
// 2. Blocks
//
// --------------------------------------------------

.banner  
    block-base()
    lost-center $screen-lg $space-md flex  
    

// 
// 1. Structure 
// --------------------------------------------------

.banner-main 
    lost-column 6/6 0 0 flex 
    
    +above('lg') 
        order 2
        lost-column 3/7 0 0 flex 
    
.banner-aside 
    lost-column 6/6 0 0 flex 
    
    +above('sm') 
        lost-column 3/6 0 0 flex 
        
    +above('lg') 
        order 1
        lost-column 2/7 0 0 flex
    
        &:last-child 
            order 3
    

// 
// 2. Blocks
// --------------------------------------------------

.banner-box
    bg        = $brand-primary
    bg-darken = 25%
    background $brand-primary
    color #fff 
    display flex
    justify-content center
    flex-direction column
    padding $space-md
    transition background .2s ease-in-quad
    
    +below('xs')  
         &:nth-child(even)   
            background $brand-secondary

    &:hover
    &:focus   
        background darken(bg, bg-darken)
            
    .banner-aside &
        font(h3, bold)
        height 25vh
        
    .banner-main &
        font(h1, bold)
        height 50vh
        
        +above('sm') 
            text-align center
        
        
    // Set colors
    // --------------------------------------------------
    
    .banner-aside:nth-child(2) &:nth-child(even) 
    .banner-aside:nth-child(3) &:nth-child(odd) 
        +above('sm') 
            bg = $brand-secondary
            background bg
            
            &:hover
            &:focus 
                background darken(bg, bg-darken)
         
    .banner-main & 
        bg = $brand-alternate
        background $brand-alternate
        
        &:hover
        &:focus 
            
            background darken(bg, bg-darken)

        
    // Set detail
    // --------------------------------------------------
    +above('lg') 
        .banner-aside:nth-child(2) &:first-child 
        .banner-aside:nth-child(3) &:last-child
            position relative
            
            &:before 
                content ''
                background $brand-primary
                position absolute 0
                transition background .2s ease-in-quad
                width 100vw
                
            &:hover
            &:focus  
                &:before  
                    background darken(bg, bg-darken)
                       


        .banner-aside:nth-child(2) &:first-child 
            &:before 
                left auto
                right 100%
                
        .banner-aside:nth-child(3) &:last-child
            &:before 
                left 100%
        
    
        
    // Types
    // --------------------------------------------------
    
    .date
        color rgba(#fff, .6)
    

         
         
        
{'fraction_non_alphanumeric': 0.20084761378293717, 'fraction_numerical': 0.018057858853878755, 'mean_word_length': 0.8319271009112386, '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': '1054257', 'n_tokens_mistral': 1665, 'n_tokens_neox': 1497, 'n_words': 315}