About

Thanks for impor­ting Broadcast 🙂

Broad­cast is con­struc­ted pri­ma­ri­ly using GP’s awe­so­me built-in fea­tures with some CSS to pro­vi­de cus­tom styles.

The sec­tions below pro­vi­des a quick over­view on how the site was built and some poten­ti­al modi­fi­ca­ti­ons. All the CSS men­tio­ned below can be found in the Addi­tio­nal CSS field in the customizer.

Header/Navigation

The header/navigation is sim­ply crea­ted using the cus­to­mi­zer opti­ons. You can modi­fy them in Site Iden­ti­ty, Pri­ma­ry Navi­ga­ti­on and Sti­cky Navi­ga­ti­on sec­tions in the customizer.

Hea­der Element/Page Hero

The sec­tion below the pri­ma­ry navi­ga­ti­on is crea­ted using the Hea­der Ele­ment modu­le. You can find 4 hea­der ele­ments in
Appearan­ce > Ele­ments: Pages hero, Archi­ves hero, Posts hero and Home hero.

CSS is used to pro­vi­de a uni­que con­tai­ner width, gra­di­ent back­ground and styles for the <h2> and <p> elements:

/* Page hero styles */
.page-hero.gradient {
    background-image: linear-gradient( 145deg, transparent 0%, rgba(255,255,255, 0.5) 100%);
    max-width: 1440px;
    margin: auto;
}
.inside-page-hero h2 {
    font-size: 40px;
}
.inside-page-hero p {
    font-size: 20px;
}

This site is an excel­lent resour­ce to tweak the gra­di­ent to your liking: https://cssgradient.io/.

Gene­ral Container

The fol­lowing CSS is used to style the main con­tai­ner, inclu­de mer­ging with the hea­der ele­ment above.

/* Main container styles */
.separate-containers .page-hero + #page .site-main {
    margin-top: -80px !important;
}
@media (max-width: 768px) {
    body .site.grid-container {
        margin-left: 20px;
        margin-right: 20px;
    }
}
.site-content .inside-article, .sidebar .widget, .comments-area {
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}

Posts List

The home page posts list can be modi­fied using our Blog module.

Here is the CSS used to style them:

/* Posts grid styles */
@media (min-width: 769px) {
    .generate-columns .inside-article {
        transition: all 0.2s ease-in;
        transform: scale(1);
    }
    .generate-columns .inside-article:hover {
        transform: scale(1.01);
        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
    }
    p.read-more-container {
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    .generate-columns .inside-article:hover p.read-more-container {
        opacity: 1;
    }
}
.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
    border-radius: 3px;
}
.generate-columns .inside-article .entry-summary {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.entry-summary p:not(.read-more-container) {
    display: none;
}
.read-more-container {
    margin-top: auto;
    text-align: center;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    border-radius: 3px;
}
.blog footer.entry-meta, .archive footer.entry-meta {
    margin-top: 0;
}

Side­bar

The plugin Recent Posts Wid­get With Thumb­nails is used in the left side­bar wid­ge­ts area to show recent posts in sin­gle posts.

The first side­bar wid­get is colo­red with this CSS below:

/* Sidebar styles */
.sidebar .widget:first-child {
    background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}