vue-wp/vue-theme/src/app.vue

<template lang="pug">
div#theme.f-col
    cia-nav
    cia-hero
    main.f-col
        router-view
    cia-footer
</template>

<script>
import navigation from '@/components/navigation/navigation'
import hero from '@/components/hero'
import footer from '@/components/footer'

import '@/sss'

export default {
    components: {
        'cia-nav': navigation,
        'cia-hero': hero,
        'cia-footer': footer,
    },
    data () {
        return {}
    }
}
</script>

<style lang="postcss">
@import './sss/variables.sss'

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
            width: 90%
            padding: $ms 0
            align-items: flex-start
            
            /* Block Shadow Thing */
            .shadow
                box-shadow: rgb(34, 36, 37) 0px 0px 4px 0px
                
            /* 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
                        img
                            width: 100%
                > ul
                    list-style: none
            
            /* Single & List Pages */
            > article
                background-color: lightpink
                > *
                    padding: $ms
                > section, > header
                    margin: 0 0 $ms
                > section .block-wrapper
                    img
                        width: 100%
                    .wp-block-gallery
                        .blocks-gallery
                            &-grid
                                list-style: none
                            &-item
                                loat: left
                        &.columns-1
                            .blocks-gallery-item
                                width: 100%
                        &.columns-2
                            .blocks-gallery-item
                                width: 50%
                        &.columns-3
                            .blocks-gallery-item
                                width: 33.33%
                        &.columns-4
                            .blocks-gallery-item
                                width: 25%
                        
            > aside
                background-color: salmon
                margin: 0 0 0 $ms
                min-width: 27%
                width: 27%
                > section
                    > *
                        padding: $ms
                        margin: 0 0 $ms 0
                    > .post
                        background-color: blue

    nav, footer
        &.main
            background-color: #ccc
            padding: $ms
            width: 100%
            ul > li
                padding: 0 $ms
</style>