Cooking Instructions - Mode De Cuisson

Conventional Oven

Cook from frozen.

  1. Preheat your oven to 220°C (425°C).
  2. Cook Remove the cardboard sleeve and peel off the film lid. Place on a baking tray and cook on the middle shelf for 55 minutes until bubbing and cooked through. Remove from the oven and leave to rest for 10 minutes before serving. Some ovens are faster than others, so keep an eye on your meal and ensure it’s piping hot before serving. The pie is cooked when an internal temperature of 74°C (165°F) is reached.
  3. Serve
Part of the CSS for Lists Reading List

My 1st year web development have just received grades for their final site projects, the best of which I intend to showcase here next week. Looking through the work, I can see small design hints students have picked up from this site, particularly lists. This makes a good opportunity to talk about how the custom list appearance for this blog was achieved:

Rounded Figures

Most fonts have a wealth of symbols buried in them, far more than the standard A - Z characters and punctuation. TipoType’s excellent Libertad, used on this site, is no exception, as shown in Mac OS X’s Font Book:

Glyphs from the Libertad typeface, as displayed in Font Book

By default, ordered lists will use the same typeface for list counters as the list itself, but in this case I wanted to use special characters, not the standard 1 … 9. To do so, I turned off the standard decoration for ordered lists: 

ol { list-style-type: none; }

Now the list is undecorated, we’re going to replace the removed numbers with the special glyphs from the typeface. These glyphs must be positioned: 

ol li:before {
    position: absolute;
    margin-left: -2.7rem;
    margin-top: -.7rem;
    font-size: 2rem;
    font-weight: 100;
}

Unlike the previous example, we can’t use counters, so each each of the list items must be provided with the codepoint that corresponds to the particular glyph. Note that this is not the Unicode code point shown in Font Book (U+2460 for a circled 1) but the escaped version (\2460): 

ol li:nth-child(1):before { content: "\2460"; }
ol li:nth-child(2):before { content: "\2461"; }
ol li:nth-child(3):before { content: "\2462"; }
…

One example of the result can be seen at the top of this article. Another:

Commandments for Con Artists, by “Count” Victor Lustig

  1. Be a patient listener
  2. Never look bored.
  3. Wait for the other person to reveal any political opinions, then agree with them.

Arrowed Items

A similar approach is used for unordered and definition lists: 

ul { list-style-type: none; }
ul li:before { 
    position: absolute;
    margin-left: -2.5rem;
    content: "\2192";
}
dt { margin-left: 2.5rem; }
dt:before {
    position: absolute;
    margin-left: -2.5rem;
    content: "\2192";
}
dd { margin-left:6rem; }

This decorates unordered list items and definition terms with a right-pointing arrow from the Libertad font (as opposed to the generic → HTML entity):

Common Cons

  • Salting
  • The Spanish Prisoner
  • The Glim-dropper

You can see examples of these list styles throughout this site, with many more combinations possible.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/RaJjez