feat(theme): add lux bootstrap theme

assets/scss/custom.scss

@@ -0,0 +1,11 @@
+// Your variable overrides can go here, e.g.:
+// $h1-font-size: 3rem;
+
+@import "~bootswatch/dist/lux/variables";
+@import "~bootstrap/scss/bootstrap";
+@import '~bootstrap-vue/src/index.scss';
+@import "~bootswatch/dist/lux/bootswatch";
+
+.text-shadow {
+  text-shadow: black 0.1em 0.1em 0.2em;
+}

components/the-header.vue

@@ -3,8 +3,10 @@
   <header class="masthead">
     <div class="container">
       <div class="intro-text">
-        <h1 class="xintro-lead-in">Daim</h1>
-        <h2 class="xintro-heading">
+        <h1 class="xintro-lead-in text-light text-capitalize text-shadow ">
+          Daim
+        </h1>
+        <h2 class="xintro-heading text-light text-capitalize text-shadow">
           Innovative Marketing Technology Automation
         </h2>
         <!-- <a

layouts/default.vue

@@ -1,76 +1,10 @@
 <template>
   <v-app id="inspire" :dark="isDark" clipped-left>
-    <v-navigation-drawer
-      v-model="drawer"
-      :clipped="$vuetify.breakpoint.lgAndUp"
-      app
-      class="hidden-print-only"
-    >
-      <v-list dense>
-        <template v-for="item in items">
-          <v-row v-if="item.heading" :key="item.heading" align="center">
-            <v-col cols="6">
-              <v-subheader v-if="item.heading">{{ item.heading }}</v-subheader>
-            </v-col>
-            <v-col cols="6" class="text-center">
-              <a href="#!" class="body-2 black--text">EDIT</a>
-            </v-col>
-          </v-row>
-          <v-list-group
-            v-else-if="item.children"
-            :key="item.text"
-            v-model="item.model"
-            :prepend-icon="item.model ? item.icon : item['icon-alt']"
-            append-icon
-          >
-            <template v-slot:activator>
-              <v-list-item>
-                <v-list-item-content>
-                  <v-list-item-title
-                    ><nuxt-link
-                      :to="localePath(item.route ? item.route : {})"
-                      >{{ item.text }}</nuxt-link
-                    ></v-list-item-title
-                  >
-                </v-list-item-content>
-              </v-list-item>
-            </template>
-            <v-list-item v-for="(child, i) in item.children" :key="i">
-              <v-list-item-action v-if="child.icon">
-                <v-icon>${{ child.icon }}</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>
-                  <nuxt-link :to="localePath(item.route ? item.route : {})">{{
-                    child.text
-                  }}</nuxt-link></v-list-item-title
-                >
-              </v-list-item-content>
-            </v-list-item>
-          </v-list-group>
-          <v-list-item
-            v-else
-            :key="item.text"
-            :to="localePath(item.route ? item.route : {})"
-            active-class="btn-primary pointer-events-none active"
-            nuxt
-            class="text-decoration-none"
-          >
-            <v-list-item-action>
-              <v-icon>${{ item.icon }}</v-icon>
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>{{ item.text }}</v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </template>
-      </v-list>
-    </v-navigation-drawer>
     <v-app-bar
       :clipped-left="$vuetify.breakpoint.lgAndUp"
       app
       fixed
-      class="hidden-print-only"
+      class="hidden-print-only navbar-dark bg-dark"
     >
       <v-toolbar-title style="width: 256px" class="ml-0 pl-3">
         <!-- <v-app-bar-nav-icon aria-label="menu" @click.stop="drawer = !drawer" /> -->
@@ -82,7 +16,7 @@
           alt="PocketPasta"
           onerror="javascript:this.style.display = 'none'"
         /> -->
-        <span class="brand xd-none d-sm-inline">Daim</span>
+        <span class="brand navbar-brand">Daim</span>
       </v-toolbar-title>
       <v-spacer />
     </v-app-bar>

nuxt.config.js

@@ -76,7 +76,7 @@ module.exports = {
   /*
    ** Global CSS
    */
-  css: [],
+  css: ['~/assets/scss/custom.scss'],
 
   /*
    ** Plugins to load before mounting the App
@@ -115,8 +115,8 @@ module.exports = {
   axios: {},
 
   bootstrapVue: {
-    // bootstrapCSS: false, // or `css`
-    // bootstrapVueCSS: false, // or `bvCSS`
+    bootstrapCSS: false, // or `css`
+    bootstrapVueCSS: false, // or `bvCSS`
     componentPlugins: [
       'Image',
       'FormSelect',

package.json

@@ -32,6 +32,7 @@
     "@nuxtjs/pwa": "3.0.0-beta.19",
     "bootstrap": "4.4.1",
     "bootstrap-vue": "2.1.0",
+    "bootswatch": "4.4.1",
     "cloudinary-core": "2.8.0",
     "cross-env": "6.0.3",
     "koa": "2.11.0",