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">
// prettier-ignore
@import './sss/variables.sss'
@import './sss/theme.sss'

html 
    /* Hide the wpadminbar */
    margin-top: 0 !important
    #wpadminbar
        display: none !important
    > body
        font-family: $sans
        font-size: $ms-0
        main 
            /* background-color: green*/
            background-color: $cia_white2
            width: 100%
            padding: 0 0 1vh 0
            
            /* :--headings, a */
            a
                color: $cia_red

            img
                transition: $transition ease-in
                &:hover
                    filter: grayscale(70%) brightness(85%)
                    cursor: pointer

            > [class^="page--"]
                max-width: $max-width
                margin: 0 auto
                padding: $ms-0 0
                align-items: flex-start
                /* Block Shadow Thing */
                .shadow
                    box-shadow: rgba(0 0 0 / 15%) 0.3px 0.5px 1.5px 0.5px
</style>