initial css layouts

vue-theme/src/app.vue

 div#theme.f-col
     cia-nav
     cia-hero
-    main
+    main.f-col
         router-view
     cia-footer
 </template>
 
 html > body
     font-family: $sans
-    main > article[class^="page--"]
-        padding: $ms
-        > section
-            padding: 0 0 $ms
-    :--headings
-        color: red
+    main 
+        background-color: green
+        width: 100%
+        > [class^="page--"]
+            background-color: pink
+            max-width: 100em
+            width: 90%
+            padding: $ms
+            align-items: flex-start
+            
+            /* Single &List Pages */
+            > article
+                background-color: lightpink
+                padding: $ms
+            > aside
+                background-color: salmon
+                padding: $ms
+                margin: 0 0 0 $ms
+                width: 27%
+        :--headings
+            color: red
 
     nav, footer
         &.main

vue-theme/src/pages/index.vue

 <template lang="pug">
-article.page--index
-    h1 {{ site }}: index
-    section(v-if="allPagesLoaded")
-        h4 pages
-        p {{ Object.values(allPages).length }}
-    section(v-if="allPostsLoaded")
-        h4 posts
-        p {{ Object.values(allPosts).length }}
-        hr
-        div(v-for="post in allPosts")
-            h4 {{ post.slug }}
-            div(v-for="block in post.blocks" v-html="block")
+.page--index.f-row.between
+    article.page--index.f-grow
+        h1 {{ site }}: index
+        section(v-if="allPagesLoaded")
+            h4 pages
+            p {{ Object.values(allPages).length }}
+        section(v-if="allPostsLoaded")
+            h4 posts
+            p {{ Object.values(allPosts).length }}
+            hr
+            div(v-for="post in allPosts")
+                h4 {{ post.slug }}
+                div(v-for="block in post.blocks" v-html="block")
+    aside
+        h4 this is some other stuff
 </template>
 
 <script>