Blog Archives and Categories

In this lesson, we are going to focus on posts lists. I will walk you through creating a Theme Builder template for Blog archives, categories and any other index type content, such as tag archive, author archive and of course the main “Blog page”.

Please note that the main Maya Webdesign demo page shows the final version of the website. The exact layout created during this lesson can be viewed here.

Video Chapters

scripts.js

$('.maya-blog-cta').detach().insertAfter('#maya-blog article:nth-child(2)');

style.css

/*
______________________
   
   Blog Index Pages
______________________

*/


/* Blog Grid */
#maya-blog .et_pb_ajax_pagination_container, #maya-blog>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 50px;
}
@media (max-width:400px) {
	#maya-blog .et_pb_ajax_pagination_container, #maya-blog>div {
    	grid-template-columns: 1fr;
  	}
	
}


@media (max-width:980px) {
	#maya-blog .et_pb_ajax_pagination_container {
    	grid-gap: 35px;
	}
	
}
#maya-blog article {
    background: #fff;
    margin-bottom: 0;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#maya-blog article > :not(a.entry-featured-image-url) {
    padding-left: 25px;
    padding-right: 25px;
}

#maya-blog .post-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

#maya-blog p.post-meta {
    padding-bottom: 25px;
}

#maya-blog .et_pb_ajax_pagination_container > div:last-child {
    grid-column: 1/-1;
}

/* Blog Featured Image */
#maya-blog article img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    filter: grayscale(1);
    transition: all .3s ease-in-out;
}

#maya-blog a.entry-featured-image-url {
    overflow:hidden;
}

#maya-blog article:hover img {
    filter: grayscale(0);
    transform:scale(1.05);
}

/* Read More Button */
#maya-blog a.more-link {
    display: inline-block;
    padding: .5em 1em;
    border: 3px var(--gray8) solid;
    border-radius: 50px;
    margin-top: 25px;
    align-self: flex-end;
    transition: all .3s ease-in-out;
}
#maya-blog a.more-link:hover {
	background:var(--gray9);
	border-color:var(--gray9);
}

/* Image Overlay */
#maya-blog a.entry-featured-image-url:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--gray5);
    opacity: 0.6;
    transition: all .3s ease-in-out;
}

#maya-blog article:hover .entry-featured-image-url:after {
    opacity: 0;
}



/* Blog Module Mobile Version */

@media (min-width:651px) and (max-width:816px) {

    #maya-blog a.entry-featured-image-url {
        position: absolute;
        width: 50%;
        height: 100%;
    }

    #maya-blog article > :not(a.entry-featured-image-url) {
        padding-left: calc(50% + 25px);
    }

    #maya-blog .entry-title {
        padding-top: 25px;
    }

    #maya-blog article img {
        height: 100%;
    }

}


@media (min-width:467px) and (max-width:650px) {

    #maya-blog a.entry-featured-image-url {
        position: absolute;
        width: 30%;
        height: 100%;
    }

    #maya-blog article > :not(a.entry-featured-image-url) {
        padding-left: calc(30% + 25px);
    }

    #maya-blog .entry-title {
        padding-top: 25px;
    }

    #maya-blog article img {
        height: 100%;
    }

}

@media (max-width:479px) {
    #maya-blog p.post-meta {
        padding:10px 0 15px;
    }
}


/* CTA Section inside the Blog grid */
.maya-blog-cta {
    margin: 0;
}

.maya-blog-cta .et_pb_column {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}