Main Content Screens

I've chosen to use the article element to represent a 'content screen'. Any content is expected to be wrapped in an article element. These are expected to take up the entire content area, menu's excluded.

<main class="body">
    <menu>
        <li><a href="#__preview__">Home</a></li>
        <li><a href="#about">About</a></li>
    </menu>
    <article id="__preview__">
        <h1>Some testing required!</h1>
        <p>This is just a test layout. Should be easy to use in my HTML5 app development.</p>
    </article>
    <article id="about">
        <h1>Some explaining required!</h1>
        <p>Just a simple way of navigating between pages, without any need for javascript</p>
    </article>
</main>

body > article,
.body > article {
    @extend %a__paper-fibres;
    @extend %m__content;
    opacity: 0;
}

body > article:target,
.body > article:target {
    opacity: 1;
}