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...