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

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

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

import '@/sss'

export default {
    components: { ciaNav, ciaHero, 'cia-footer':ciaFooter }
}
</script>

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

html > body
    font-family: $sans
    font-size: $base
    main 
        background-color: green
        width: 100%
        
        :--headings
            color: yellow

        > [class^="page--"]
            background-color: pink
            max-width: $max-width
            width: 90%
            padding: $ms 0
            align-items: flex-start
            
            /* Block Shadow Thing */
            .shadow
                box-shadow: rgb(34, 36, 37) 0px 0px 4px 0px
                border-radius: 8px
    
            /* 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
                .block-wrapper
                    .wp-block-gallery
                        .blocks-gallery
                            /* &-grid
                                list-style: none
                            &-item
                                float: 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% */
            
            /* Sidebar */
            > 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: grey
            padding: 0 $ms
            width: 100%
            ul > li
                padding: 0 $ms
</style>