{{ page.title }}

Some changes to the HTML need to be carried out before converting a non-grid, template.html/default.css page to this new grid layout of template2.html.

The elements targetted by the grid are the direct decendents of the div.container. These are:

1. <header>
2. <nav>
3. <aside>
4. <main>
5. <footer>

New <main> Element

The first and maybe biggest is the addition of a new element: <main>. Only one of these may be used per page and it covers all the original content of the page. On this layout it's also essential to prevent all the paragraph, heading and list tags from being targetted by the grid system.

main {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        padding-top: 5em;
        padding-bottom: 4em;
      }

div.footercontainer is replaced with <footer>

And what was prevously the <footer> is now div.footertext

The End of .resources

The div tag of class resources has been replaced with <aside>. This is more descriptive. However note there are sometimes more than one of the asides. The heading content "Resources" is generated by the CSS but this only applies to the ul:first-of-type direct child of the aside.

This is a blockquote. Eligendi suscipit quae quaerat amet cumque sit voluptatum velit possimus doloremque. Sapiente sequi quidem nisi saepe quod, quas libero, repudiandae minus!

Laborum illum facilis pariatur voluptate. Velit laboriosam esse sed quos nihil distinctio possimus, dolore amet eaque. Ipsa esse, error ad, placeat aspernatur animi non, eaque quasi cumque, neque harum accusamus.

YAML

The YAML frontmatter to define on a new page are:

• title which shows up in the page title and the first h1
• layout - this is just called layout: default. Can also be defined for the whole site in the YAML config file under defaults.
• date - to use for the page creation date
• stylesheet - the name of any custom, page specific, stylesheet
• Note some things are also defined in the _config.yaml file like the site title (css Geek). This also appears in the page <title>
• There are many more variables to define. The tag variable might be worth using.