About

Thanks for importing Debate 🙂

Debate is constructed primarily using GP’s awesome built-in features with some CSS to provide custom styles.

The sections below provides a quick overview on how the site was built and some potential modifications. All the CSS mentioned below can be found in the Additional CSS field in the customizer.

Header/Navigation

The header/navigation is using one of GP’s newest options Use navigation as Header. You can use a site title or upload a logo in Site Identity and change the menu alignment in Navigation Alignment.

Header Element/Page Hero

The section below the primary navigation is created using the Header Element module.

CSS is used to provide gradient background and styles for the <h2>element:

/* Home page page hero styles */
.page-hero.gradient {
    background: linear-gradient(to right, rgb(201, 75, 75), rgb(75, 19, 79));
}
.page-hero.gradient h2 {
    font-size: 36px;
}
@media (max-width: 768px) {
    .page-hero.gradient h2 {
        font-size: 25px;
    }
}

This site is an excellent resource to tweak the gradient to your liking: https://cssgradient.io/.

General Container Styles

The following CSS is used to style the main container and modify the content padding for single posts and static pages.

/* General container styles */
@media (max-width: 768px) {
    body .site-main {
        margin-left: 20px!important;
        margin-right: 20px!important;
    }
}
@media (min-width: 769px) {
    .single.separate-containers .inside-article, 
    .page.separate-containers .inside-article {
        padding: 0 16% 60px 16%;
    }
}
@media (max-width: 768px) {
    .single.separate-containers .inside-article, 
    .page.separate-containers .inside-article {
        padding-top: 0;
    }
}

Posts List

The posts list layout can generally be modified using the blog layout section in the customizer.

The entry meta is currently added using hooks element. However, it is our recommendation to migrate the code using functions like this example after importing.

Here is the CSS used to style the posts list:

/* Post list styles */
@media (min-width: 769px) {
    .post-image {
        max-width: 330px;
    }
}
.post-image-above-header .inside-article div.post-image {
    margin-bottom: 0;
    line-height: 0;
}
.blog .inside-article, 
.archive .inside-article {
    box-shadow: inset 0px 0px 0px 1px #D7D7D7;
}
.blog .inside-article a:hover, 
.archive .inside-article a:hover {
    text-decoration: underline;
}
h2.entry-title {
    margin-bottom: 0.5em;
}
.byline img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}
.byline,
.comments-link,
.posted-on {
	display: inline-block;
}

.comments-link,
.posted-on {
	margin-left: 10px;
}

.comments-link:before {
	display: none;
}

Entry Header Styles

The following CSS is used to center align and provide the gradient background of the title in single posts and static pages.

/*Entry header styles */
h1.entry-title {
    text-align: center;
}
.single .entry-header, 
.page .entry-header {
    background: linear-gradient(to right, rgb(201, 75, 75), rgb(75, 19, 79));
    padding: 3%;
}

Single Posts Meta Styles

The following CSS is used to style the meta separately from the main blog page.

/*Single posts styles */
.single h1.entry-title {
    margin-bottom: 1em;
}
.single .fancy-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.single .author {
    display: flex;
    flex-direction: column;
}
.single .byline img {
    width: 58px;
    height: 58px;
    margin: 0;
}
.single .author a {
    text-align: center;
    font-size: 20px;
    margin-bottom: 0.3em;
    color: #ffffff;
}
.single .entry-date {
    font-size: 14px;
    color: #ffffff;
}

You can also follow this example and use the header element module to create something similar.