.

components/Calendar.vue

@@ -52,17 +52,18 @@ export default {
           start: event.start_datetime, end: event.end_datetime
         }
         e.highlight = { 
-          color: 'red' // : sample(['purple', 'red', 'green', 'blue']),
+          color: sample(['purple', 'red', 'green', 'blue']),
         }
       } else {
         e.dates = event.start_datetime
-        e.dot = { color: 'rgba(102,10,20)' }
+        e.dot = { color: sample(['purple', 'red', 'green', 'blue']) }
       }
       return e
     }
   },
   computed: {
     ...mapGetters(['filteredEvents']),
+    ...mapState(['events']),
     attributes () {
       return [
         { key: 'today', dates: new Date(),

components/Event.vue

@@ -12,7 +12,7 @@
           //- date / place
           .date 
             div {{event|event_when}}
-            div {{event.place.name}}
+            div @{{event.place.name}}
 
           //- p(v-if='showDescription') {{event.description}}
 
@@ -54,6 +54,7 @@ export default {
 }
 </script>
 <style lang='less'>
+@import '../assets/style.less';
 
 @media only screen and (min-width: 574px) {
   .event {
@@ -83,21 +84,18 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    background-color: #222;
+    background-color: #111214;
 
   }
 
   .content-info {
-    font-size: 12px;
-    font-size: 0.8em;
     padding: 0.8em 1em;
-    max-height: 200px;
-    color: rgb(255, 122, 204);
 
     h2 {
-      color: yellow;
+      color: @success;
       font-size: 16px;
-      font-size: 1.1rem;
+      font-size: 1.2rem;
+      font-weight: 400;
       margin: 0px;
     }
 
@@ -109,9 +107,10 @@ export default {
     }
 
     .date {
-      font-weight: 800;
-      font-size: 16px;
-      font-size: 1rem;
+      font-weight: 300;
+      font-size: 12px;
+      font-size: 0.95rem;
+      color: #ff917a;
     }    
   }
 
@@ -124,7 +123,7 @@ export default {
     justify-content: center;
 
     li {
-      background: #40484D;
+      background: #1B1F21;
       display: inline-block;
       padding: 2px 10px;
       color: rgba(255,255,255,0.7);

components/Home.vue

@@ -4,11 +4,10 @@
     a(href='#totop')
       el-button.top.d-block.d-sm-none(icon='el-icon-top' circle type='primary' plain)
     a.totop(name='totop')
+    no-ssr
+      Calendar
     .row.m-0
 
-      no-ssr
-        Calendar.col-sm-12.col-lg-8.col-xl-6
-
       .p-0.col-sm-6.col-lg-4.col-xl-3(v-for='event in filteredEvents')
         a(:id='event.newDay' v-if='event.newDay')
           .d-block.d-sm-none

components/List.vue

@@ -17,17 +17,16 @@ div#list
 </template>
 <script>
 import { mapGetters } from 'vuex'
-const { SHARED_CONF } = require('@/config')
 
 export default {
   name: 'List',
   data () {
-    return { SHARED_CONF }
+    return { }
   },
   props: {
     title: {
       type: String,
-      default: SHARED_CONF.title
+      default: ''
     },
     events: {
       type: Array,

components/Nav.vue

@@ -1,8 +1,9 @@
 <template lang="pug">
   el-menu.d-grid.nav(mode='horizontal' router background-color="#222C32")
 
-    el-menu-item(v-if='!$auth.loggedIn' index='/login' :title="$t('common.login')")
-      v-icon(color='lightgreen' name='user')
+    nuxt-link(to='/login')
+      el-menu-item(v-if='!$auth.loggedIn' index='/login' :title="$t('common.login')")
+        v-icon(color='lightgreen' name='user')
 
     el-menu-item(index='/add' :title="$t('common.add_event')")
       v-icon(color='lightgreen' name='plus')