pure design

components/Announcement.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  .card.announcement.announcement.mt-1.text-white(body-style='padding: 0px;')
+  .announcement.announcement.text-white(body-style='padding: 0px;')
     nuxt-link(:to='`/announcement/${announcement.id}`')
       .title <i class='el-icon-info'/> {{announcement.title}}
 
-    .card-body
-      .description(v-html='description')
+    //- .card-body
+    //-   .description(v-html='description')
 
 </template>
 <script>
@@ -24,9 +24,22 @@ export default {
 </script>
 <style lang='less'>
 .announcement {
-  .title i {
-    color: orangered;
+  padding: 2%;
+  background-color: #511;
+  margin: 1rem 0;
+  border-radius: 5px;
+  a:hover {
+    text-decoration: none;
   }
-  box-shadow: inset 0px 0px 10px 0px orangered;
+  .title {
+    font-size: 1.2em;
+    color: white;
+    transition: color .2s;
+    &:hover {
+      color: #fbd6b5;
+    }
+  }
+  border: 2px solid #ff4500ba;
+  // box-shadow: inset 0px 0px 10px 0px orangered;
 }
 </style>

components/Event.vue

@@ -10,17 +10,17 @@
       .p-name.p-summary.title {{event.title}}
 
     .card-body
-      div.d-flex.justify-content-between
-        //-  when
-        time.dt-start.mt-0(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <i class='el-icon-date'/> {{event|when}}
-        //- place
-        el-button.p-location.mt-1.bg-dark.text-warning.float-right(plain size='mini' round type='text' icon='el-icon-location-outline' @click='addPlace') {{event.place.name}}
+      //- div.d-flex.justify-content-between
+      //-  when
+      time.d-block.dt-start.mt-0(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <i class='el-icon-date'/> {{event|when}}
+      //- place
+      .p-location.mt-1.text-warning(plain size='mini' round type='text' @click='addPlace') <i class='el-icon-location-outline'/> {{event.place.name}}
 
       //- description
-      .p-description.description.mt-3(v-html='description')
+      //- .p-description.description.mt-3(v-html='description')
 
     .card-footer(v-if='event.tags.length')
-      el-button.ml-1.bg-dark(type='text' plain round size='mini' v-for='tag in event.tags' :key='tag' @click='addTag(tag)') {{tag}}
+      el-button.ml-1(type='text' plain round size='mini' v-for='tag in event.tags' :key='tag' @click='addTag(tag)') {{tag}}
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'

components/Home.vue

@@ -1,15 +1,16 @@
 <template lang="pug">
   section#home
+    Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
+    #calbar.row.mt-2.mb-2
+      .col-xl-7.col-lg-7.col-sm-6.col-xs-12
 
-    #calbar.row.mt-1
-      .col-xl-7.col-lg-7.col-sm-6.col-xs-12.p-0
         client-only
           Calendar
       .col
         Search(past-filter recurrent-filter)
 
     #events
-      Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
+      //- Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
       Event(v-for='event in events' :key='event.id' :event='event')
 
 </template>
@@ -52,7 +53,7 @@ export default {
 <style lang='less'>
 #calbar {
   max-width: 1000px;
-  margin: 0 auto;
+  // margin: 0 auto;
 }
 #events {
   max-width: 1600px;