messing with font sizes | reset some default WP block style

vue-theme/src/app.vue

@@ -28,9 +28,14 @@ export default {
 
 html > body
     font-family: $sans
+    font-size: $base
     main 
         background-color: green
         width: 100%
+        
+        :--headings
+            color: red
+
         > [class^="page--"]
             background-color: pink
             max-width: 100em
@@ -38,17 +43,38 @@ html > body
             padding: $ms
             align-items: flex-start
             
-            /* Single &List Pages */
+            /* Content Pieces */
+            .post
+                background-color: teal
+                margin: 0 0 $ms
+                &--title
+                    color: yellow
+                    padding: 0 0 $ms
+                &--content
+                    color: orange
+                    &--block > p
+                        color: white
+                    .wp-block-image
+                        margin: 0
+                > ul
+                    list-style: none
+            
+            /* Single & List Pages */
             > article
                 background-color: lightpink
-                padding: $ms
+                > *
+                    padding: $ms
+                > section, > header
+                    margin: 0 0 $ms
             > aside
                 background-color: salmon
-                padding: $ms
                 margin: 0 0 0 $ms
                 width: 27%
-        :--headings
-            color: red
+                > *
+                    padding: $ms
+                > section
+                    > .post
+                        background-color: blue
 
     nav, footer
         &.main

vue-theme/src/pages/index.vue

@@ -1,19 +1,34 @@
 <template lang="pug">
 .page--index.f-row.between
-    article.page--index.f-grow
-        h1 {{ site }}: index
+    article.f-grow
+        header
+            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")
+        section
+            //- COMPONENT: Looping component
+            .post(v-for="post in allPosts")
+                h4.post--title {{ post.slug }}
+                ul.post--content
+                    li.post--content--block(v-for="block in post.blocks" v-html="block")
+        footer.f-row
+            p icon
+
+    //- COMPONENT: Make this with a prop
     aside
-        h4 this is some other stuff
+        header
+            h4 this is some other stuff
+        section(v-if="allPostsLoaded")
+            //- COMPONENT: See above
+            .post(v-for="post in allPosts")
+                h4.post--title {{ post.slug }}
+                ul.post--content
+                    li.post--content--block(v-for="block in post.blocks" v-html="block")
+
 </template>
 
 <script>

vue-theme/src/sss/variables.sss

@@ -18,7 +18,8 @@ $serif: 'serif'
 $mono: 'monospace'
 
 // Proportion (to be replaced with modular scale)
-$ms: 0.7em
+$ms: 1vw
+$base: 1em
 
 // Circles for add page
 $radius: 2.5vw