This is simply a dummy page to demonstrate the custom CSS classes that J.D. uses (and has been using for years) around Get Rich Slowly. It's important that any redesign incorporates these classes because they're a part of the way I work.

I use a handful of custom classes for blockquotes.

A default blockquote is meant to be used when quoting text. This is for when we're excerpting longer sections from books or articles. It needs to be clear to the reader that we're quoting something.

The “highlight” blockquote class is meant to be used to emphasize information, or for asides. Honestly, I use it a lot for parenthetical comments or for tangentially-related information. The issue with our current design is that links don't have enough contrast.

The “actionitem” blockquote class is intended specifically for calls to action. This is stuff we want the reader to do. I was diligent about using this at Money Boss, and would like to resume using it more often.

We also have a “callout” blockquote class that currently maps to “highlight” but that we'd like to separate so that we have a fourth blockquote class.

We also need a custom YouTube class that pushes video to the full width of the container, then assigns it the correct proportional height.

Here's what happens if you simply cut and paste the YouTube link into WordPress:

And here's what happens if you cut and paste the code provided by YouTube itself:

Here's the code that I'm currently using for the YouTube custom class:


/* Because we're video heavy, we need a hack to make sure videos
are resized fluidly between different devices while maintaining
a constant aspect ratio. To do that, we use the following hack.
To implement this, nest the iframe in div.youtube */

p.youtube /* Hack step one */
{
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}

.youtube iframe /* Hack step two */
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Source for hack: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */


I'm not wedded to this. I'm wedded to the functionality but not the implementation. Maybe videos added to posts can automatically have this functionality?

We also have a very minor bit of CSS that I use from time to time. We have a “green-border” class for images so that, if needed, I can highlight them or otherwise set them apart. Color codes will be different to match the new theme. Maybe a checkbox when adding an image to a post?


.green-border { border: 5px solid #316700; }

a:hover .green-border { border: 5px solid #f98200; }


There are a couple of other custom classes, but we don't need to worry about them. They're not particularly useful or important in the new design.

Finally, we have a very important piece of custom code that belongs in functions.php. We use this to pull in my ten most recent Pinboard posts tagged “getrichslowly”, then share them with the readers. The layout of this “spare change” list is going to change with the new design, but the code for pulling the info should be something similar

I can't actually paste the code here because WP wants to interpret some of it, which breaks things. But you can find it in functions.php. It's the function kottke_loop().