Merch Styling

Custom The­me Sty­ling (CSS)

90% of Merchs design is achieved with the GeneratePress customizer and built in modules. The other 10% is through custom functions and CSS.

All of the custom CSS can be found in the Cus­to­mi­zer > Addi­tio­nal CSS. At around 400 lines it can hap­pi­ly remain the­re. But i gene­ral­ly recom­mend that it finds a home in a child the­me style­sheet. Most of the com­mon The­me CSS is cove­r­ed here for the inqui­si­ti­ve or for tho­se wan­ting to make chan­ges. CSS for spe­ci­fic pages or ele­ments are cove­r­ed in their rele­vant posts.

It should be noted that Custom CSS is only dis­play­ed on the Front End. Adding edi­tor styles ( at this time ) is not achiev­a­ble with an impor­ted Site.

Typo­gra­phy

The vast majo­ri­ty of the the­me sty­ling, par­ti­cu­lar­ly Typo­gra­phy, Spa­cing and Colors are set in the cus­to­mi­zer. But the­re is some custom CSS at play.

Lar­ge H2 Hea­ding

The lar­ge-hea­ding class can be added to a H2 Tit­le Block to increa­se its size.

This is the lar­ge H2 hea­ding

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­ca­ted. In a nut shell it sets the font size dyna­mi­cal­ly based on the cur­rent screen size. Our font size ran­ge is 28px to 64px. And our screen size ran­ge is 400px to 1600px. Try adjus­ting your brow­ser width to see the effect.
If you want more infor­ma­ti­on on flu­id typo­gra­phy then check out Respon­si­ve And Flu­id Typo­gra­phy With vh And vw Units

Hover Link

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

But­tons

All The­me but­ton colors and typo­gra­phy are con­trol­led via the cus­to­mi­zer. The Hap­py Forms but­ton has its own sty­ling con­trols in the plugins set­tings. The addi­tio­nal roun­ded cor­ners and hover sty­ling is app­lied 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);
}

Hea­der

Under­line

For this mini­ma­list design I thought it best that we make a clear dis­tinc­tion bet­ween the Site Hea­der and the page con­tent. This is achie­ved with a simp­le bot­tom bor­der on our Site Hea­der. It comes in two varie­ties. White for pages with a Mer­ged Hea­der Ele­ment, and black for the ones wit­hout.

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

Pri­ma­ry Navi­ga­ti­on

Hover Effect

A simp­le under­line that sca­les from zero to menu item width on hover. It inherits the cur­rent color 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);
}

    Item added to cart.
    0 items - CHF 0.00