feat: add tailwindcss & update color

Author: EryouHao

.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
     'no-irregular-whitespace': 0,
     'consistent-return': 0,
     'import/no-extraneous-dependencies': 0,
+    'global-require': 0,
   },
   parserOptions: {
     parser: '@typescript-eslint/parser',

package.json

@@ -103,6 +103,8 @@
     "less-loader": "^4.1.0",
     "lint-staged": "^8.1.5",
     "markdown-it-task-lists": "^2.1.1",
+    "postcss-import": "^12.0.1",
+    "tailwindcss": "^1.1.4",
     "typescript": "^3.0.0",
     "vue-cli-plugin-electron-builder": "^1.4.0",
     "vue-template-compiler": "^2.6.10"

postcss.config.js

@@ -1,5 +1,7 @@
 module.exports = {
-  plugins: {
-    autoprefixer: {},
-  },
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ],
 }

src/App.vue

@@ -32,7 +32,7 @@ export default class App extends Vue {
   /* Global CSS */
   body {
     background: #fff;
-    color: #41464b;
+    color: #555;
   }
 
   ::-webkit-scrollbar{

src/assets/logo.png

@@ -1,6 +1,6 @@
 .ant-table {
   background: #fff;
-  color: #41464b;
+  color: #555;
 }
 .ant-table-tbody {
   .ant-table-row:nth-of-type(2n) {

src/assets/styles/custom.less

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/assets/styles/tailwind.css

@@ -1,9 +1,11 @@
-@primary-color: #41464b;
-@primary-bg: #F9F7F3;
+@primary-color: #555;
+@primary-bg: #f7f6f6;
 @danger-color: #fa5252;
 
 @border-radius-base : 2px;
 @link-color: #1067de;
 @border-color: #e8e8e88a;
 
-@btn-default-border: #eaeaea;
+@btn-default-border: #eaeaea;
+
+@label-color: #555;

src/assets/styles/var.less

@@ -6,20 +6,35 @@
     >
       <div class="top-container">
         <div class="logo">
-          <img class="img" src="@/assets/logo-hey.png">
+          <img class="img" src="@/assets/logo.png">
         </div>
         <a-menu mode="inline" :defaultSelectedKeys="['articles']" @click="clickMenu">
           <a-menu-item key="articles">
-            <i class="zwicon-document menu-icon"></i>
-            <span class="nav-text">{{ $t('article') }}</span>
+            <div class="menu-item">
+              <div>
+                <i class="zwicon-document menu-icon"></i>
+                <span class="nav-text">{{ $t('article') }}</span>
+              </div>
+              <span class="number">{{ site.posts.length }}</span>
+            </div>
           </a-menu-item>
           <a-menu-item key="menu">
-            <i class="zwicon-grid menu-icon"></i>
-            <span class="nav-text">{{ $t('menu') }}</span>
+            <div class="menu-item">
+              <div>
+                <i class="zwicon-grid menu-icon"></i>
+                <span class="nav-text">{{ $t('menu') }}</span>
+              </div>
+              <span class="number">{{ site.menus.length }}</span>
+            </div>
           </a-menu-item>
           <a-menu-item key="tags">
-            <i class="zwicon-price-tag menu-icon"></i>
-            <span class="nav-text">{{ $t('tag') }}</span>
+            <div class="menu-item">
+              <div>
+                <i class="zwicon-price-tag menu-icon"></i>
+                <span class="nav-text">{{ $t('tag') }}</span>
+              </div>
+              <span class="number">{{ site.tags.length }}</span>
+            </div>
           </a-menu-item>
           <a-menu-item key="theme">
             <i class="zwicon-palette menu-icon"></i>
@@ -253,7 +268,11 @@ export default class App extends Vue {
 
 /deep/ .ant-menu {
   background: @primary-bg;
-  color: @primary-color;
+  @apply text-gray-500;
+}
+
+/deep/ .ant-menu-item {
+  padding-left: 16px !important;
 }
 
 /deep/ .ant-menu-vertical .ant-menu-item:after, .ant-menu-vertical-left .ant-menu-item:after, .ant-menu-vertical-right .ant-menu-item:after, .ant-menu-inline .ant-menu-item:after {
@@ -344,6 +363,18 @@ export default class App extends Vue {
   }
 }
 
+.nav-text {
+  font-weight: normal;
+}
+
+.menu-item {
+  display: flex;
+  justify-content: space-between;
+  .number {
+    font-weight: lighter;
+  }
+}
+
 .menu-icon {
   font-size: 17px;
   margin-right: 8px;

src/components/Main.vue

@@ -347,12 +347,12 @@ export default {
   padding: 0;
 }
 .editor-toolbar button.active, .editor-toolbar button:hover {
-  border-color: #41464b;
+  border-color: #555;
   background: #f8d65f;
   border-style: dashed;
 }
 .editor-toolbar button {
-  color: #41464b !important;
+  color: #555 !important;
   width: 32px;
   height: 32px;
   border-radius: 2px;

src/components/MarkdownEditor.vue

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import moment from 'moment'
 import Antd from 'ant-design-vue'
+import '@/assets/styles/tailwind.css'
 import '@/assets/styles/main.less'
 import VueI18n from 'vue-i18n'
 import Prism from 'prismjs'