I decided to rename the card from “Media card” to “Entertainment card” (.entertainment-card) since “Media card” could be confused with the Media file type in WordPress. I set up the template for films and books as a single page.

When designing the single page for Books and Films Post type, I’m thinking of removing the “go back” button. I might add some meta for the watching card (TV shows/movies) and reading card (books/genres) for easier navigation. Since there’s already a vertical menu that always appears on screen, the additional navigation inside the content section seems redundant. For the single page, I’m considering adding a related card grid along with a feedback form to ask for visitors’ thoughts on the movie or book.

I ran into a hiccup when I added the link to the entertainment title that leads to the single page of the post. There was automatically a black outline/border upon opening the popup, but it disappeared once you clicked outside the link.

It turns out to be an accessibility feature to help users know there’s a link there. Removing the outline makes your site inaccessible to keyboard users and difficult for people with minor disabilities who are unable to use a mouse. I found a snippet on StackOverflow that can remove the outline with some minor adjustments.

Here’s the code I used with some minor adjustments, you can add the link to the template itself or inside Bricks settings (Bricks > Settings > Custom code > Custom CSS):

a {
 outline:none; 
}

a:active, a:focus {
 outline: 0 !important;
 border: none !important;
 -moz-outline-style: none !important;
}

The next goal for the project is adding additional meta to the card, the popup and the single page as well as finish and polished up the single page with grid and opinion form.