chore: update assets and others

Author: dyarfi

assets/css/theme/button.css

@@ -2,7 +2,7 @@
 
 @layer components {
   .btn {
-    @apply text-sm font-semibold mt-2 px-3 py-1 capitalize text-gray-400 hover:text-gray-700 focus:to-gray-900 hover:border-gray-700;
+    @apply text-sm font-light mt-2 px-3 py-1 capitalize text-gray-500 hover:text-gray-800 focus:to-gray-900 hover:border-gray-700;
   }
 
   .btn-xs {

assets/css/theme/card.css

@@ -15,7 +15,7 @@
   }
 
   .boxed-bottom-link {
-    @apply px-3 py-1 border border-gray-400 bg-gray-200 text-gray-400 mb-4 block rounded-full uppercase text-xs;
+    @apply px-3 py-1 border border-gray-400 bg-gray-200 text-gray-400 mb-4 block rounded-full uppercase text-xs hover:bg-gray-300 hover:text-gray-500;
   }
 
   .boxed-bottom-content::before {

assets/css/theme/form.css

@@ -2,7 +2,7 @@
 
 @layer components {
   form {
-    @apply my-4 py-12;
+    @apply my-4 py-8;
   }
 
   input,

assets/css/theme/page.css

@@ -2,7 +2,7 @@
 
 @layer components {
   .page-content {
-    @apply relative py-12 max-w-7xl mx-auto;
+    @apply relative py-12 mx-auto max-w-7xl;
   }
 
   .page-content::before,
@@ -34,4 +34,8 @@
     opacity: 0.25;
     border: 4px solid #cdcdcd;
   }
+
+  .page-content-single {
+    @apply relative py-12 mx-auto max-w-7xl h-screen;
+  }
 }

components/cards/Article.vue

@@ -83,7 +83,7 @@
                 params: { slug: item.slug }
               }"
               class="btn btn-sm btn-default btn-hidden text-muted"
-              ><span class="underline hover:no-underline">read more</span>
+              ><span class="no-underline">read more</span>
               <span>
                 &rarr;
                 <!-- <font-awesome-icon :icon="['fa', 'arrow-right']"/> -->

components/cards/ArticleHeadline.vue

@@ -37,7 +37,7 @@
                 xl:text-5xl
               "
             >
-              <span class="block xl:inline">{{ item.title }}</span>
+              {{ item.title }}
               <!-- <span
                 class="block text-indigo-600 xl:inline"
                 data-primary="indigo-600"

components/form/Forgot.vue

@@ -15,7 +15,7 @@
         </label>
       </div>
       <div class="col-auto">
-        <button class="btn btn-lg btn-outline">Submit</button>
+        <button class="btn btn-lg btn-outline shadow-lg">Submit</button>
       </div>
     </form>
   </section>

components/form/SignIn.vue

@@ -27,7 +27,9 @@
         </label>
       </div>
       <div class="col-auto">
-        <button class="btn btn-lg btn-outline btn-muted">Sign In</button>
+        <button class="btn btn-lg btn-outline btn-muted shadow-lg">
+          Sign In
+        </button>
         <Nuxt-Link
           to="/forgot"
           class="

components/form/SignUp.vue

@@ -39,7 +39,9 @@
         </label>
       </div>
       <div class="col-auto">
-        <button class="btn btn-lg btn-outline btn-muted">Sign Up</button>
+        <button class="btn btn-lg btn-outline btn-muted shadow-lg">
+          Sign Up
+        </button>
         <Nuxt-Link
           to="/signin"
           class="

layouts/default.vue

@@ -55,3 +55,13 @@ export default {
   }
 }
 </script>
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.5s;
+}
+.page-enter,
+.page-leave-active {
+  opacity: 0;
+}
+</style>

middleware/userAgent.js

@@ -0,0 +1,15 @@
+/* eslint-disable no-param-reassign */
+export default function (context) {
+  let serverUserAgent = ''
+  if (context && context.req && context.req.headers) {
+    serverUserAgent = context.req.headers['user-agent'] || ''
+  }
+
+  let clientUserAgent = ''
+  if (typeof navigator !== 'undefined' && typeof navigator === 'object') {
+    const { userAgent = '' } = navigator
+    clientUserAgent = userAgent
+  }
+
+  context.userAgent = (process.server && serverUserAgent) || clientUserAgent
+}

nuxt.config.js

@@ -22,7 +22,7 @@ export default {
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: [],
+  css: ['@/assets/css/tailwind.css'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [],

pages/forgot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-content">
+  <div class="page-content-single">
     <Form-Forgot />
   </div>
 </template>

pages/signin.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-content">
+  <div class="page-content-single">
     <Form-SignIn />
   </div>
 </template>

pages/signup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-content">
+  <div class="page-content-single">
     <Form-SignUp />
   </div>
 </template>