Archive: Oct 2012

  1. Website refinements

    I’m continuing to make tweaks to the design of this website. For example, the main headings and next/previous details on the post and project pages are now pulled left when viewed in a wide browser window. I’ve also added drop caps and pull quotes to the project pages, as well as a number of pixel adjustments here and there. You probably spotted them immediately.

    Drop caps

    I’ve added a drop cap to the first letter of the first paragraph on each of the project pages. This is all done in CSS using the following rule:

    #content >; p:first-of-type::first-letter {
         font-size: 42px;
         float: left;
         margin: 0 5px 0 0;
         line-height: 36px;
    }

    The first-of-type selector is only supported in modern browsers, so anyone looking at the site in an older browser won’t see the drop cap. People using older browsers are probably OK with that.

    Pull quotes

    I’ve modified the blockquote style so that it acts as a pull quote. The CSS looks like this:

    blockquote {
         color: #DEA919;
         width: 50%;
         float: left;
         margin-bottom: 0px;
         margin-left: -100px;
         margin-right: 20px;
         font-size: 1.3em;
         text-align: right;
         padding: 0px 10px 15px 0px;
    }

    It looks best when the browser width is greater than 979px (the last of my slightly arbitrary breakpoints), when the pull quote is pulled out to the left of the main body text. I’ve done something similar for image captions (the one on the image below, for example).

    An example of the Pull Quote when viewed in a fairly wide browser window

    I’ve added some media queries to handle smaller browser windows which first reduce the margin offset (from the initial -100px) and then remove the float and spread the text across the page so that the pull quote doesn’t end up too narrow when viewed on smaller devices. I’ve also made the pull quote left-aligned on this narrowest window. So it ends up with the following CSS rule:

    blockquote {
         margin-left: -15px;
         float: none;
         width: 75%;
         text-align: left;
    }