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

<template lang="pug">
#theme.f-col
    cia-nav
    cia-hero
    main
        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 
    /* Hide the wpadminbar */
    margin-top: 0 !important
    #wpadminbar
        display: none !important
    > body
        font-family: $sans
        font-size: $base
        main 
            background-color: green
            width: 100%
            
            :--headings
                color: yellow

            > [class^="page--"]
                background-color: lightblue
                max-width: $max-width
                margin: 0 auto
                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: pink
                width: 100%
</style>