The latest version of Cover2 addresses a few bugs, adds something back from Cover, and lowers the stylesheet size.

Download from WordPress View on GitHub

First on the docket is a margin issue. Due to a CSS mistake, archive pages after the first page (but not on the first page) were getting an extra top margin, effectively hiding the nav bar. I never noticed this myself because I use Jetpack’s Infinite Scroll module, but that’s no excuse. In any case, it’s fixed now.

There were a couple other CSS niggles that have been fixed. The :active and :focus states on the navbar buttons were the wrong color, and paged posts’ page links (which are styled like buttons) were still using the “ghost” button style, instead of the solid button style. Both of those issues are rectified now.

One of the things lost in the redesign from Cover to Cover2 was the social network menu. In Cover, it was its own thing and was fully supported sans plugin. In Cover2, I ripped all the logic out, letting the Jetpack plugin’s Social Menu module do most of the work; I just added a little bit of styling so it didn’t look out of place.

Something I always kinda missed, though, was the brand colors on the social network icons. I found a nice little npm module called brand-colors which tracks 1,800+ colors (as of this writing). Using this, Jetpack’s URL-targeting styles (no easy import for this, I’m afraid), and a Sass array loop, I was able to generate the styles for social network links.

I would categorize this in “hacks” because it’s doing a wildcard match on the href attribute. On the other hand, I like it because it doesn’t depend on a class for the brand color: it can derive it straight from the link’s URL.

How this works: you define the Sass array’s key-value pairs as URL to color. The URL is treated as a wildcard, so it should be generic enough to match anything a user might input. (For example, “twitter.com” is broad enough to match a link to the homepage, a profile page, or a search result.) The color is whatever the color should be. Since I’m using the brand-colors library, I can just use its already-defined variables.

It’s important to note that to use the map’s key in a loop, you have to interpolate its value. This means that I need to escape the value so it isn’t used as a literal. In Sass, this means wrapping it in #{}.

We’re getting dangerously close to tutorial territory (tuterritory?) so I will stop talking now.

$social-networks: (
  "codepen.io": $bc-codepen,
  "digg.com": $bc-digg,
  "dribbble.com": $bc-dribbble
  // and more...
);

@each $url, $color in $social-networks {
  &[href*="#{$url}"]:hover {
    background-color: $color;
  }
}

Here’s a demo of this code in action. (Note that the styles in Cover2 are on the :hover state, but the demo places them on the elements’ normal state for visibility’s sake.)

Cover, and subsequently Cover2, was built for use with the Aesop Story Engine plugin. As a result of that, I have written quite a bit of CSS to supplement its component styles. ASE is not a required plugin — you don’t have to install it to use Cover2 — but up until now, the ASE styles have always been loaded simply because they’re bundled into the main stylesheet.

Similarly, I’ve written supplemental styles for other plugins I use, like Jetpack and Algolia. the same problem exists: the theme has loaded the CSS for them, whether they’re used (or even needed) or not.

Well, not anymore. As of version 1.2.1, I’ve split out the styles for Aesop Story Engine, Jetpack, and Algolia into their own stylesheets. If you’re not using any of those plugins, the total stylesheet size is now cut down from about 90KB to 50KB. (It’s around 30KB minified, but the WordPress Theme Directory won’t let me upload a theme with minified CSS. You can bet that’s what I’m using, though.)