Update documentation and improve UI.

Author: antoniandre

src/app.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   v-app(:class="{ ready: ready }" v-scroll="onScroll")
-    v-container
+    v-container.px-0(fluid)
       top-bar(:offset-top="offsetTop")
       router-view
 

src/documentation/_typography.scss

@@ -20,14 +20,14 @@ h1 {
 
 h2 {
   margin-top: 3em;
-  font-size: 2em;
+  font-size: 2.2em;
   color: $primary;
   padding-bottom: 0.3em;
   border-bottom: 1px solid $lighter-text;
 }
 
 h3 {
-  font-size: 1.5em;
+  font-size: 1.7em;
   margin-top: 4em;
   color: $secondary;
 }

src/documentation/index.vue

@@ -160,7 +160,7 @@
       v-icon(large color="white") pause_circle_outline
     vueper-slide(v-for="(slide, i) in slides1" :key="slide.id" :title="slide.title" :content="slide.content" :style="'background-color: ' + colors[i % 4]")
 
-  .subtitle-1.mt-6 Basic autoplay (with pause on mouseover) source code:
+  p.subtitle-1.mt-6 Basic autoplay (with pause on mouseover) source code:
   ssh-pre.mt-2(language="html-vue" label="Vue Template").
     <vueper-slides autoplay>
       <vueper-slide v-for="(slide, i) in slides"
@@ -173,7 +173,7 @@
       </template>
     </vueper-slides>
 
-  .subtitle-1 This example full source code:
+  p.subtitle-1 This example full source code:
   ssh-pre.mt-2(language="html-vue" label="Vue Template").
     <button @click="$refs.myVueperSlides[`${autoPlaying ? 'pause' : 'resume'}Autoplay`]();autoPlaying = !autoPlaying">
       {{ "\{\{ autoPlaying ? 'Pause' : 'Resume' \}\}" }}
@@ -213,7 +213,7 @@
     })
 
   h3
-    a(href="#ex--arrows-and-bullets") Arrows & Bullets
+    a(href="#ex--arrows-and-bullets") Custom Arrows & Bullets
     a(name="ex--arrows-and-bullets")
   p.
     This example uses custom arrows and positions the bullets outside of the slideshow.#[br]
@@ -344,10 +344,11 @@
   vueper-slides
     vueper-slide(v-for="i in 4" :key="i" :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]")
       template(v-slot:slide-content)
-        v-icon(color="white") check
-        | Complex content {{ i.toString() }} with Vue.js
-        | {{ 1 === 1 ? 'interpreted' : 'non-interpreted' }} compilable content like
-        | components & #[span(v-pre) {{ mustaches }}].
+        .subtitle-1
+          v-icon.mr-2(color="white") check
+          | Complex content {{ i.toString() }} with Vue.js
+          | {{ 1 === 1 ? 'interpreted' : 'non-interpreted' }} compilable content like
+          | components & #[span(v-pre) {{ mustaches }}].
   ssh-pre(language="html-vue" label="HTML Vue Template").
     <vueper-slides>
       <vueper-slide
@@ -374,17 +375,16 @@
     Well, nothing to do really. It will just update by itself!
     #[br]For this demonstration the content is complex (refer to #[a(href="#ex--complex-slide-title-and-content") Complex Slide Title & Content] for more details) and uses
     Vue JS Vuetify components like #[span.code v-layout], #[span.code v-icon] & mustaches #[span.code(v-pre) {{ }}].
-  v-layout.max-widthed(align-start wrap)
-    v-layout.flex.xs12.sm6(align-center)
-      div Try it:
-      v-layout.flex.xs10.sm11(align-center wrap)
-        v-btn.ma-1(color="primary" @click="toggleSlidesTime" small)
-          v-icon.pr-2 {{ slidesTimeTimerId ? 'highlight_off' : 'access_time' }}
-          | {{ slidesTimeTimerId ? 'Stop' : 'Keep' }} updating time
-        v-slide-x-transition.xs6.sm3
-          v-chip(v-show="slidesTimeTimerId === 0" small outlined disabled) CPU says THANK YOU!
-    v-layout.flex.xs12.sm6.mb-4(align-center wrap)
-      v-btn.ma-1(color="primary" @click="contentPositionChange" small)
+  v-layout.max-widthed.mt-1.mb-4(align-center wrap)
+    v-layout.shrink.mr-4(align-center)
+      | Try it:
+      v-btn.mx-2(color="primary" @click="toggleSlidesTime" small)
+        v-icon.pr-2 {{ slidesTimeTimerId ? 'highlight_off' : 'access_time' }}
+        | {{ slidesTimeTimerId ? 'Stop' : 'Keep' }} updating time
+      v-expand-x-transition
+        v-chip(v-if="!slidesTimeTimerId" small outlined) CPU says THANK YOU!
+    v-layout(align-center wrap)
+      v-btn.mx-2(color="primary" @click="contentPositionChange" small)
         v-icon swap_vert
         |  Move content position
       strong.code slide-content-outside="#[span.primary--text {{ contentPosition }}]"
@@ -398,26 +398,25 @@
       template(v-slot:slide-content)
         v-layout(align-center justify-center)
           v-icon.pr-3(color="white" size="5em") access_time
-          div.text-xs-left
-            div.py-2.title {{ slide.title }}
+          .text-left
+            .headline {{ slide.title }}
             div {{ slide.content }}
   ssh-pre(language="html-vue" label="HTML Vue Template").
     <button @click="toggleSlidesTime">Keep updating time</button>
-    <vueper-slides :slide-ratio="1/4" :slide-content-outside="contentPosition">
+
+    <vueper-slides :slide-ratio="1/4" autoplay :slide-content-outside="contentPosition">
       <vueper-slide
         v-for="(slide, i) in slides"
         :key="i"
-        :title="slide.title"
-        :content="slide.content"
         :style="'background-color: ' + ['#42b983', '#ff5252'][i % 2]">
         <template slot:slide-content>
-          <v-layout">
-            <v-icon>access_time</v-icon>
+          <div class="flex">
+            <i "icon icon-access-time"></i>
             <div>
               <div>{{ '\{\{ slide.title \}\}' }}</div>
               <div>{{ '\{\{ slide.content \}\}' }}</div>
             </div>
-          </v-layout>
+          </div>
         </template>
       </vueper-slide>
     </vueper-slides>
@@ -535,7 +534,7 @@
     This example demonstrates how to use Vueper Slides in a center mode.#[br]
     It also has a shorter transition speed #[span.code transition-speed='250']
     and no shadow thanks to the #[span.code no-shadow] class.
-  vueper-slides.no-shadow.ex--center-mode(arrows-outside bullets-outside transition-speed="250")
+  vueper-slides.no-shadow.ex--center-mode.pt-6(arrows-outside bullets-outside transition-speed="250")
     vueper-slide(v-for="i in 6" :key="i" :title="i.toString()" :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]")
   ssh-pre(language="html-vue" label="HTML Vue Template").
     <vueper-slides class="no-shadow" arrows-outside bullets-outside transition-speed="250">