Coding the article template

The second template in this project is the article or post template. It will contain the detailed view and content for a magazine story. Before we start coding the page, let's see what it will look like:

The layout here is narrower, which allows easier readability of a large amount of content. I've also followed my regular minimal style to keep the page looking really clean. The entire page template is wrapped in a <div> tag with a class of .article so that we can apply some styling:

<div class="article">
  ..
</div>

We had already added the styles for this when we set up our .page-body class in the previous template. However, there is a container class inside of the .article class that needs some customization:

.article .container {
  padding-left: (@padding * 18);
  padding-right: (@padding * 18);
}

This might look like a decent amount of padding, and it is. This is how we will achieve the narrower column layout that we want for better readability...