style.scss

$white-color: #FFFFFF;
$border-raduis: 15px;

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

.container{
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 10rem auto 10rem;
    grid-row-gap: 2rem;
    grid-template-areas: 
    "header header header"
    ". main ."
    "footer footer footer";

    .header{
        grid-area: header;

        .nav-bar{
            width: 80rem;
            margin: 0 auto;
            background: #00d0ff;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .menu-icon{
                position: relative;
                height: 5rem;
                width: 5rem;
                background: #858383;
                %bar{
                    position: absolute;
                    width: 2.2rem;
                    height: 0.2rem;
                    border-radius: 3px;
                    background: black;
                    transition: all .3s ease-in;
                    cursor: pointer;
                }

                .bar1{
                    @extend %bar;    
                    top: 0;
                }
        
                .bar2{
                    @extend %bar;
                    top: 1rem; 
                }
                .bar3{
                    @extend %bar;
                    top: 2rem;   
                }
            }
        }
    }

    .main{
        grid-area: main;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        grid-row-gap: 6rem;
    
        .layout {
            width: 260px;
            height: 320px;
            display: grid;
            grid-template-areas: ". . ." ". content ." " . . .";
            grid-template-columns: 1fr 90% 1fr;
            grid-template-rows: 1fr 90% 1fr;
            transition: all 0.3s ease;
        
            img{
                grid-column: 1/-1;
                grid-row: 1/-1;
                height: 100%;
                width: 100%;
                border-radius: $border-raduis;
            }
            
            &__content {
                grid-area: content;
                width: 230px;
                height: 120px;
                display: grid;
                grid-template-rows: minmax(120px, 1fr) 1fr 1fr;
                background: $white-color;
                border-radius: $border-raduis;
                box-shadow: 0 3px 12px -1px rgba(7, 10, 25, 0.2), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
                transition: all 300ms ease;
                overflow: hidden;
                transform: translateY(230px);
        
                &__title {
                grid-row: 1/2;
                padding: 0.5rem 1.2rem;
                font-size: 1rem;
                //text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                }
    
                p{
                    padding: 1rem;
                    text-align: center;
                    opacity: 0;
                }
              
                &:hover {
                    //grid-area: content;
                    display: block;
                    transform: translateY(0);
                    height: 100%;
                    box-shadow: none;
    
                    p{
                        opacity: 1;
                    }
                }
            }
        }
    }
}



//////////////////////////////////// sigle article ///////////////////////////////

.Container{
    display: grid;
    // grid-template-columns: 10rem auto 10rem;
    // grid-template-rows: 10rem auto 10rem;

    grid-template-areas:
    " header header header"
    " .  content ."
    " footer footer footer";

    header{
        // grid-column: 1/-1;
        // grid-row: 1/2;
        grid-area: header; 

        .nav-bar{
            width: 74rem;
            margin: 4rem auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &__menu{
                position: relative;
              
                %bar{
                    position: absolute;
                    width: 2.2rem;
                    height: 0.2rem;
                    border-radius: 3px;
                    background: black;
                    transition: all .3s ease-in;
                    cursor: pointer;
                }

                .bar1{
                    @extend %bar;    
                    top: -0.7rem;
                }
        
                .bar2{
                    @extend %bar;
                    top: 0.01rem; 
                }
                .bar3{
                    @extend %bar;
                    top: 0.7rem;   
                }

                &.open-menu{
                    z-index: 999;
                    .bar1{
                        transform: rotate(40deg) translate(8px, 8px);
                    }
        
                    .bar2{
                        visibility: hidden;
                        width: 0;
                    }
        
                    .bar3{
                        transform: rotate(-40deg) translate(8px, -8px);
                    }
                    
                }
            }

            &__search{
                &__loop{
                    width: 1.8rem;
                    height: 1.8rem;
                }
            }
        }
    }

    .overlay-menu{
        grid-column: 1/-1;
        grid-row: 1/4;
        
        z-index: 999;

        &__content{
            height: 100%;
            display: flex;
            color: white;
            background: #00d0ff;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            ul{
                list-style: none;
                margin: 0;
                padding: 0;

                li{
                    a{
                        font-size: 2rem;
                        color: white;
                        text-decoration: none;
                    }
                   
                }
            }
        }

    }

    main{
        // grid-column: 2/3;
        // grid-row: 2/3;

        grid-area: content;


        .single-article{
            display: grid;
            grid-template-rows: 20rem 4rem auto;
            grid-template-columns: 2rem auto 2rem;


            header{
                grid-row: 1/3;
                grid-column: 1/-1; 

                    img{
                        width:100%;
                        max-height: 100%;
                        object-fit: cover;
                        display: block;
                        //flex: 100%;
                    }
            }
            
            .article-content{
                grid-row: 2/4;
                grid-column: 2/3;
                background: white;
                border-radius: 20px;
                padding: 2rem;

                .title-article{
                    font-size: 2rem;
                    margin-bottom: 2rem;
                }

                .author-meta{
                    display: flex;
                    align-items: center;
                    margin-bottom: 2rem;

                    .author-date{
                        display: flex;
                        flex-direction: column;
                        margin-left: 1rem;

                        .author-name{
                            font-size: 1.5rem;
                            color: 	#858383;
                        }

                        .time{
                            font-size: 1rem;
                            color: 	#aaa3a3;
                        }
                    }

                    .thumbnail{
                        height: 3rem;
                        width: 3rem;

                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 100%  
                        }
                    }
                }

                p,h2{
                    margin-bottom: 1rem;
                }

                .quote{
                    position: relative;
                    padding: 2rem;
                    margin-bottom: 1rem;

                    &:before{
                        position: absolute;
                        content: '';
                        width: 50px;
                        height: 50px;
                        top: 0;
                        right: 0;
                        border-top: 3px solid #00d0ff;
                        border-right: 3px solid #00d0ff;
                    }

                    &:after{
                        position: absolute;
                        content: '';
                        width: 50px;
                        height: 50px;
                        left: 0;
                        bottom: 0;
                        border-bottom: 3px solid #00d0ff;
                        border-left: 3px solid #00d0ff;
                    }
                }

                .author{
                    width: 40rem;
                    margin: 0 auto;
                    // background: #00d0ff;
                    display: grid;
                    grid-template-columns: 1rem 8rem 2rem 32rem 1rem;
                    grid-template-rows: 2rem 1rem 10rem 1rem 2rem;
                    
                    

                
                    .author-image{
                        grid-column: 2/4;
                        grid-row: 3/4;
                        z-index: 1;

                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 10px;
                        }
                    }

                    .author-bio{
                        grid-column: 3/5;
                        grid-row: 2/5;
                        z-index: 0;
                        background: white;
                        padding: 2rem 2rem 2rem 3rem;
                        border-radius: 10px;
                        box-shadow: 2px 2px 10px 2px #cfcfcf;

                        h2{
                            margin-bottom: 1rem;
                        }
                    }
                } 
            }
        }

        .social-icon{
            width: 15rem;
            height: 5rem;
            // background: #A9A9A9;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .button{
                height: 3.5rem;
                width: 3.5rem;
                border-radius: 50%;
                background: #00d0ff;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &__facebook{
                width: 2rem;
                height: 2rem;
                fill: white
            }

            &__twitter{
                width: 2rem;
                height: 2rem;
                fill: white
            }

            &__github{
                width: 2rem;
                height: 2rem;
                fill: white
            }
        }  

        .related-articles{
            width: 42rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-evenly;

            &__first{
                position: relative;
                width: 18rem;
                height: 16rem;

                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 10px;
                }

                &__title{
                    position: absolute;
                    background: white;
                    width: 14rem;
                    height: 12rem;
                    border-radius: 10px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50% , -50%);

                    a{
                        text-decoration: none;
                        color: black;
                        h2{
                            padding: 2rem;
                            text-align: center; 
                        }
                    }
                    

                }
            }

            &__second{
                position: relative;
                width: 18rem;
                height: 16rem;

                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                &__title{
                    position: absolute;
                    background: white;
                    width: 12rem;
                    height: 12rem;
                    border-radius: 10px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50% , -50%);

                    a{
                        text-decoration: none;
                        color: black;
                        h2{
                            padding: 2rem;
                            text-align: center; 
                        }
                    }
                }
            }
        }
    }

    footer{
        // grid-column: 1/-1;
        // grid-row: 3/-1;

        grid-area: footer;
    }
  
}