Custom Theme Styling (CSS)

All of the cus­tom CSS can be found in the Cus­tomiz­er > Addi­tion­al CSS. At around 400 lines it can hap­pi­ly remain there. But i gen­er­al­ly rec­om­mend that it finds a home in a child theme stylesheet. Most of the com­mon Theme CSS is cov­ered here for the inquis­i­tive or for those want­i­ng to make changes. CSS for spe­cif­ic pages or ele­ments are cov­ered in their rel­e­vant posts.

It should be not­ed that Cus­tom CSS is only dis­played on the Front End. Adding edi­tor styles ( at this time ) is not achiev­able with an import­ed Site.

Typography

The vast major­i­ty of the theme styling, par­tic­u­lar­ly Typog­ra­phy, Spac­ing and Col­ors are set in the cus­tomiz­er. But there is some cus­tom CSS at play.

Large H2 Heading

The large-head­ing class can be added to a H2 Title Block to increase its size.

This is the large H2 heading

h2.large-heading {
    font-size: calc(28px + (64 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

Unless you’re a fan of alge­bra this CSS looks com­pli­cat­ed. In a nut shell it sets the font size dynam­i­cal­ly based on the cur­rent screen size. Our font size range is 28px to 64px. And our screen size range is 400px to 1600px. Try adjust­ing your brows­er width to see the effect.
If you want more infor­ma­tion on flu­id typog­ra­phy then check out Respon­sive And Flu­id Typog­ra­phy With vh And vw Units

Hover Link

The loud-link class will add an icon and under­line hov­er effect. It should only be applied to a Text Block that only con­tains the link.

Like this here

Buttons

All Theme but­ton col­ors and typog­ra­phy are con­trolled via the cus­tomiz­er. The Hap­py Forms but­ton has its own styling con­trols in the plu­g­ins set­tings. The addi­tion­al round­ed cor­ners and hov­er styling is applied using this CSS:

a.button,
.wp-block-button__link,
.happyforms-submit,
.woocommerce button.button {
    -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    border-radius: 4px !important;
}

a.button:hover,
a.wp-block-button__link:hover,
.happyforms-submit:hover,
.woocommerce button.button:hover {
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

Header

Underline

For this min­i­mal­ist design I thought it best that we make a clear dis­tinc­tion between the Site Head­er and the page con­tent. This is achieved with a sim­ple bot­tom bor­der on our Site Head­er. It comes in two vari­eties. White for pages with a Merged Head­er Ele­ment, and black for the ones without.

.header-wrap .site-header {
    border-bottom: 1px solid #fff;
}
.site-header {
    border-bottom: 1px solid #ccc;
}

Primary Navigation

Hover Effect

A sim­ple under­line that scales from zero to menu item width on hov­er. It inher­its the cur­rent col­or of the menu items. 

.main-navigation .menu>.menu-item>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 1em;
    width: 0%;
    height: 2px;
    background-color: currentColor;
    -webkit-transition: 0.3s width ease;
    transition: 0.3s width ease;
}

.main-navigation .menu>.menu-item>a:hover:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:hover:before {
    width: calc(100% - 40px);
}