got working sss files and style shortcuts started

vue-theme/functions.php

@@ -77,3 +77,32 @@ function vue_theme_scripts() {
     wp_enqueue_script( 'vue-theme' );
 }
 add_action( 'wp_enqueue_scripts', 'vue_theme_scripts' );
+
+/**
+ * disable endpoints in rest api
+ **/
+add_filter( 'rest_endpoints', function ( $endpoints ) {
+	if ( isset( $endpoints['/wp/v2/users'] ) ) {
+		unset( $endpoints['/wp/v2/users'] );
+	}
+	if ( isset( $endpoints['/wp/v2/users/(?P<id>[\d]+)'] ) ) {
+		unset( $endpoints['/wp/v2/users/(?P<id>[\d]+)'] );
+	}
+
+    if ( isset( $endpoints['/wp/v2/comments'] ) ) {
+		unset( $endpoints['/wp/v2/comments'] );
+	}
+	if ( isset( $endpoints['/wp/v2/comments/(?P<id>[\d]+)'] ) ) {
+		unset( $endpoints['/wp/v2/comments/(?P<id>[\d]+)'] );
+    }
+    
+    if ( isset( $endpoints['/wp/v2/settings'] ) ) {
+		unset( $endpoints['/wp/v2/settings'] );
+	}
+	return $endpoints;
+} );
+
+/**
+ * remove wordpress version number from files
+ **/
+remove_action( 'wp_head', 'wp_generator' );

vue-theme/src/app.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-div#theme
+div#theme.f-col
     cia-nav
     main
         router-view
@@ -7,10 +7,10 @@ div#theme
 </template>
 
 <script>
-import navigation from './widgets/navigation/navigation.vue'
-import footer from './components/footer.vue'
+import navigation from '@/widgets/navigation/navigation'
+import footer from '@/components/footer'
 
-import './sss'
+import '@/sss'
 
 export default {
     components: {
@@ -21,13 +21,25 @@ export default {
 </script>
 
 <style lang="postcss">
+@import './sss/_variables.sss'
+@import './sss/_flex.sss'
+
 html > body
     font-family: sans-serif
     main > article[class^="page--"]
-        padding: 0.5em
+        padding: var(--spacer)
         > section
-            padding: 0 0 0.5em
+            padding: 0 0 var(--spacer)
     :--headings
         color: red
 
+    nav.main, footer.main
+        background-color: #ccc
+        margin: 0 0 var(--spacer)
+        padding: var(--spacer)
+        width: 100%
+        ul > li
+            padding: 0 var(--spacer)
+    footer.main
+        margin: var(--spacer) 0 0
 </style>

vue-theme/src/components/footer.vue

@@ -2,13 +2,3 @@
 footer.main
     h2 footer
 </template>
-
-<style lang="postcss">
-footer.main
-    background-color: #ccc
-    margin: 0.5em 0 0
-    padding: 0.5em
-    width: 100vw
-    ul
-        list-style: none
-</style>

vue-theme/src/index.js

@@ -3,11 +3,11 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-import App from './app.vue'
+import App from '@/app.vue'
 
-import store from './store'
+import store from '@/store'
 
-import IndexPage from './pages/index.vue'
+import IndexPage from '@/pages/index.vue'
 
 const router = new VueRouter({
     mode: 'history',

vue-theme/src/sss/_flex.sss

@@ -0,0 +1,21 @@
+[class^="f-"]
+    display: flex
+    justify-content: center
+    align-items: center
+
+.f
+    &-row
+        flex-direction: row
+    &-col
+        flex-direction: column
+    &-grow
+        flex-grow: 1
+    &-row, &-col
+        &.start
+            justify-content: flex-start
+        &.end
+            justify-content: flex-end
+        &.between
+            justify-content: space-between
+        &.around
+            justify-content: space-around

vue-theme/src/sss/_variables.sss

@@ -1,2 +1,7 @@
 // Custom selectors
-@custom-selector :--headings h1, h2, h3, h4, h5, h6
+@custom-selector :--headings h1, h2, h3, h4, h5, h6
+
+@custom-media --viewport-medium (width <= 50rem)
+
+:root
+  --spacer: 0.5em

vue-theme/src/sss/reset.sss

@@ -2,7 +2,7 @@
 *
     margin: 0
     padding: 0
-    box-sizing: border-box
+    box-sizing: inherit
     &:before, &:after
         background-repeat: no-repeat
         box-sizing: inherit
@@ -18,7 +18,8 @@ html
     font-family: system-ui
     line-height: 1.15
     tab-size: 4
-
+    box-sizing: border-box
+    
 // Always set color/background/font-size on root
 body
     margin: 0
@@ -31,10 +32,6 @@ nav
     ol, ul
         list-style: none
 
-// Useful for single page apps to use up all available space
-html, body
-    height: 100%
-
 // Reset some other default styles
 button, input, select, textarea
     font-family: inherit

vue-theme/src/widgets/navigation/navigation.vue

@@ -1,19 +1,13 @@
 <template lang="pug">
 nav.main
-    ul
+    ul.f-row.between
         li
-            h3 navigation
+            a(href="/")
+                h3 navigation
+        li.f-grow
+            p &nbsp;
+        li
+            a(href="/") home
         li
             a(href="/lazy") lazy
-
-</template>
-
-<style lang="postcss">
-nav.main
-    background-color: #ccc
-    margin: 0 0 0.5em
-    padding: 0.5em
-    width: 100vw
-    ul
-        list-style: none
-</style>
+</template>

vue-theme/webpack.config.js

@@ -12,6 +12,13 @@ const PostCssPlugins = [
 module.exports = (env = {}) => {
     return {
         mode: env.production ? 'production' : 'development',
+        resolve: {
+        alias: {
+                '@': path.resolve(__dirname, 'src'),
+                'vue$': 'vue/dist/vue.esm.js'
+            },
+            extensions: ['*', '.js', '.sss', '.vue', '.json']
+        },
         module: {
             rules: [{
                     test: /\.vue$/,
@@ -69,7 +76,9 @@ module.exports = (env = {}) => {
             path: path.join(__dirname, 'build'),
             publicPath: '/build/'
         },
+        // https://github.com/Tech-Nomad/wue-theme
         devServer: {
+            publicPath: "/build/",
             https: false,
             inline: true,
             noInfo: false,