Changing the look of recent cards

[phenomlab]

I wanted a way to draw attention to the recent cards on the categories page to make them stand out more - and what better way to do this than with some CSS. Here’s a short video of the outcome of that very exercise. Watch the recent cards closely as I cycle through the themes.

There’s a gradient being set there which is essentially two of the core colours in each theme.

For example, in swatch “Anthracite”, it’s easy to see how this effect works

Essentially, we are setting the border-color and color variables to match the color set by the category itself. Essentially, this is an extension of this thread
https://sudonix.com/topic/256/recent-cards-plugin-customization

The minor change here is just one line

$(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        $('.recent-card-container').each(function(i) {
            var dataId = $(this).attr("data-cid");
            var color = $('[role="presentation"]', this).css("background-color");
            //console.log("data-cid " + dataId + " is " + color);
            $('[data-cid="' + dataId + '"] .recent-card').attr("style", "border-color: " + color);
            $('[data-cid="' + dataId + '"] .recent-card h4 a').attr("style", "color: " + color);
        });
    });
});

The line in question is

$('[data-cid="' + dataId + '"] .recent-card h4 a').attr("style", "color: " + color);

By adding this line, we change both the border color, and the text color to match. I also chose to thicken the border by 1px to give it a bit more depth, which works very well. I did consider a box-shadow but I think that may look somewhat “overdone” and odd when coupled with other elements. The jury is still out on that one