studypress-new-design/css/blog-archive.sass

@import ./themeStyle

section
    padding: 2rem 0 1.5rem


.page-title
    font-family: $fontInter
    margin-top: 2.5rem
    text-align: left
    font-weight: 600
    padding-bottom: 1.5rem
    border-bottom: 3px solid $thirdColor
    strong
        color: $primaryColor

// archive-hero
#archive-hero
    display: grid
    grid-template-columns: repeat(3, 1fr)
    padding: 0 0 2rem
    gap: 1rem
    @media screen and ( max-width: 768px )
        grid-template-columns: repeat(1, 1fr)


    .single-item
        box-shadow: $shadow-1
        display: flex
        flex-direction: column

        .img-container
            flex: auto
        
        .details
            height: fit-content
            background: $whiteColor
            padding: .75rem
            .title
                line-height: 1.4
                font-size: .85rem
                font-weight: 500
                color: $blackColor
                font-family: $fontNotoBangla
                text-decoration: none
                &:hover
                    opacity: .7

        &:first-child
            grid-column: span 2
            grid-row: span 2
            @media screen and ( max-width: 768px )
                grid-column: unset
                grid-row: unset



// single-item-container
.single-item-archive-wraper

    .archive-title
        color: $blackColor
        display: flex
        align-items: center
        gap: 1rem
        font-family: $fontInter
        font-weight: 600
        &::after
            content: ""
            background: $thirdColor
            flex: auto
            padding: .1rem

    .link-btn
        display: block
        width: fit-content
        margin: 2rem auto

    #single-item-container
        font-family: $fontNotoBangla
        font-family: $fontInter
        margin-top: 1rem

        .single-item
            box-shadow: $shadow-1
            height: 100%
            border-radius: 3px
            overflow: hidden
            display: flex
            flex-direction: column

        .img-container
            height: 180px
            @media screen and ( max-width: 768px )
                height: 220px

        .details
            flex: auto
            padding: .75rem .75rem 1rem
            line-height: 1.4
            display: flex
            flex-direction: column
            gap: .25rem

        .tags
            font-size: .6rem
            font-weight: 600
            color: $primaryColor

        .title
            font-size: .8rem
            line-height: 1.2
            color: $blackColor
            font-weight: 700
            text-decoration: none
            &:hover
                color: $primaryColor

        .item-date
            font-size: .55rem
            color: $greyColor
            font-weight: 600

        .desc
            color: $greyColor
            font-size: .65rem


// side-section
#side-section
    padding-top: 0
    display: flex
    flex-direction: column
    gap: 1.5rem

    .side-item-title
        background-color: $thirdColor
        color: $blackColor
        text-align: left
        margin-bottom: .5rem
        padding: .25rem .75rem
        font-size: 1rem

    .single-item
        display: flex
        padding-bottom: .75rem
        border-bottom: 2px solid $thirdColor

        .img-container
            flex: 2 

            img
                width: 100%

        .details
            flex: 4
            padding: .25rem .75rem

            .title
                display: block
                font-size: .8rem
                line-height: 1.4
                color: $blackColor
                font-weight: 500
                text-decoration: none
                &:hover
                    opacity: .8


    .single-testimonial
        display: flex
        padding-bottom: .75rem
        border-bottom: 2px solid $thirdColor

        .img-container
            flex: 2 

            img
                width: 100%

        .details
            flex: 4
            padding: .25rem .75rem

            .testimonial
                display: block
                font-size: .65rem
                line-height: 1.2
                color: $greyColor
                font-weight: 500
                text-decoration: none
            
            .name, .ocupation
                margin: unset
                margin-top: .15rem
                font-weight: 500
                font-size: .7rem
                text-align: right



// add container
.add-container
    width: 100%