I took advantage of some down time to redesign the blog. My design goal was to (1) maintain some of the minimalism but (2) dial up some sophistication and (3) give a nod to old-book elegance: dropcaps, indentation, and retro font.
The previous iteration of the blog was uber-minimalist and came at a time in which my priority was improving backend speed and security (i.e., server-side setup). Attention to the front-end was overdue.
The Details
I use a WordPress theme, Headway, that makes it easy to create virtually any layout you want and then customise the details. If you understand HTML and CSS, you can do just about anything you want. I chose Headway some years ago because I wanted a theme that keeps page-load times very fast, as well as a theme that allowed me to easily alter the CSS.
I styled the navigation menu such that the items appear ‘tab-like’. Basically the wrapper background is a solid color, stretching across the screen. Each menu item background has a gradient (to the right) from darker to lighter, creating the effect of nested tabs, and each item is offset vertically. The hover color is lighter, and when a menu item is selected (i.e., when you are ‘on that page’), its vertical offset is greater than the rest.
The dropcaps. These were fun because I learned some new CSS3 techniques. (Granted, these will not work in some older browsers). My CSS is as follows:
.[class-selector] p:first-child:first-letter {
font-size: 75px;
float: left;
padding: 10px;
background-color: lightgray;
margin-right: 5px;
color: black;
line-height: 52px;
}
Next, I wanted to indent every paragraph not following a heading or beginning a page. This was more tricky. First, I decided on an indent of 3em for any screen larger than 480px, but an indent of just 15px on any screen smaller than 480px:
@media only screen and (min-device-width: 480px) {
div.entry-content p {
text-indent:3em;}
}
@media only screen and (max-device-width: 480px) {
div.entry-content p {
text-indent:15px;
}
But that will indent every paragraph. So I need to follow it with instructions for every first paragraph after a heading to be indented to 0em. This can be done with the adjacent sibling selector ‘+’. So in the first example below, a text-indent of 0em is applied to the paragraph element immediately following a heading 4 element.
div.entry-content h4 + p {
text-indent:0em;
}
div.entry-content h3 + p {
text-indent:0em;
}
div.entry-content h2 + p {
text-indent:0em;
}
div.entry-content h1 + p {
text-indent:0em;
}
But I noticed some of my posts have images that, in the html, occur between heading elements and the first paragraph, which means I needed the following (add to this the other heading elements):
div.entry-content h2 + img + p {
text-indent:0em;
}
So here, the indentation of 0em applies to the paragraph element immediately following an image element immediately following an h2 element.
Oh yes, since WordPress wraps images in < p > tags, the above css will apply indents to images. So I Googled for the code I need to put inside a custom plugin that strips these tags from the html. Wordpress seems to sneak < p > tags in lots of places, by the way!