blog custom CSS

## For HOME

`
.blog-post-card{
    border: 2px solid  #e0e0eb;
    padding:20px;
    border-radius:10px;
    height:auto; 
    margin:20px;
    max-width:400px;
    max-height:inherit;
    background-color:#ffffff;

}

.blog-title{
    font-weight:500;
    margin:auto;
    font-size:1.2em;
}

.dark .blog-post-card{
    background-color:#282a36;
    border:none;

}

.button-primary{
    background-color:#9966ff;
    color:#ffffff;
    border:none;
}

.button-primary:hover{
    background-color: #884dff;
}

.blog-body{
    z-index:-1;
    background-color: #fbfbfb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23e7ddf7' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dark .blog-body{
    background-image:none;
}

.blog-sub-header-nav{
    display:none;
}

.blog-header .container .relative{
    padding:4px;
    margin:0px;
}

.blog-header .container{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
}



.blog-author-area-photo{        
    border:5px solid #ffffff;
     margin-left: auto;
        margin-right: auto;
        position:relative;
    
    
}
.dark .blog-author-area-photo{        
    border:5px solid #282a36;
    
    
}
.blog-posts-wrapper{justify-content:center;}

@media only screen and (min-width:750px){
    .blog-post-card{
    width:auto;
    height:auto;
    }
}

@media only screen and (max-width: 750px) {
    

.blog-header .container{
    display:flex;
    flex-direction:column;
    align-items:center;

}
    .blog-author-card{
        margin:auto;
        text-align:center;
        display:flex;
        justify-content:center;
        align-items:center;
}

    .blog-author-area-photo{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 30%;
        height:30%;
        text-align:center;
}

    .blog-follow-wrapper{
        text-align:center;
        display:flex;
        align-items:center;
        margin-left: auto;
        margin-right: auto;
    
}

}
`


## For ARTICLES

`
.bg-cover{
    margin-top:20px;
    border-radius:20px;
}

.blog-header .container .relative{
    padding:5px;
    margin:0px;
}

.blog-header .container{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center;
}

.blog-sub-header-nav{
    display:none;
}

.blog-title{
    font-weight:500;
    margin:auto;
    font-size:1.2em;
}



.prose a{ 
    color:  #884dff;
}

.prose a:hover{ 
    color: #ff4dff;
}

.prose img{
    margin:auto;
    border-radius:5px;
    
}
.prose h1{
    font-weight:700
}

.prose blockquote{
    border-left:6px solid #9999ff;
    background-color:  #ffffe6;
    padding:15px 15px 15px 20px;
    border-radius:5px;
}
.dark .prose blockquote{
        background-color:#282a36;

}

.blog-similar-article-wrapper{
    border: 2px solid #e0e0eb;
    box-shadow: 5px 5px #e0e0eb;
}

 .dark .blog-similar-article-wrapper{
    box-shadow:5px 5px #282a36;
  }

.blog-similar-article-cover{
    border-radius:10px;
}


@media only screen and (max-width: 600px) {
    .prose h1 {
        font-size:1.5em;
    }
    
 .blog-header .container{
    display:flex;
    flex-direction:column;
    align-items:center;

}
 
}

`

Thanks, this is awesome 🍻💖