refac: using router-links in nav | refac: tweaking styles

vue-theme/src/app.vue

@@ -71,7 +71,7 @@ html > body
             /* Single & List Pages */
             > article
                 background-color: lightpink
-                > * > *
+                > * > * 
                     padding: $ms
                 > section, > header
                     margin: 0 0 $ms

vue-theme/src/components/navigation/navigation.vue

@@ -3,18 +3,23 @@
 nav.main.f-row.center
     ul.f-row.between
         li
-            a(href="/")
-                h3 navigation
+            router-link(to="/")
+                h1.t-up x
+                    span.t-up  navigation
         li.f-grow
             p  
         li
-            a(href="/") home
+            router-link(to="/")
+                p.t-up home
         li
-            a(href="/posts") news
+            router-link(to="/posts")
+                p.t-up news
         li
-            a(href="/artists") artists
+            router-link(to="/artists")
+                p.t-up artists
         li
-            a(href="/episodes") episodes
+            router-link(to="/episodes")
+                p.t-up episodes
 </template>
 
 <style lang="postcss">

vue-theme/src/pages/index.vue

@@ -5,22 +5,22 @@
         .f-row
             section(v-if="allEpisodesLoaded").shadow
                 router-link(:to="`./episodes`")
-                    h4 Episodes
+                    h4.t-cap episodes
                 router-link(:to="`./episodes/${Object.values(allEpisodes)[0].slug}`")
                     p {{ Object.values(allEpisodes)[0].title }}
             section(v-if="allArtistsLoaded").shadow
                 router-link(:to="`./artists`")
-                    h4 artists
+                    h4.t-cap artists
                 router-link(:to="`./artists/${Object.values(allArtists)[0].slug}`")
                     p {{ Object.values(allArtists)[0].title }}
             section(v-if="allPagesLoaded").shadow
-                h4 pages
+                h4.t-cap pages
                 router-link(:to="`./pages/${Object.values(allPages)[0].slug}`")
                     p {{ Object.values(allPages)[0].title }}
         .f-row
             section(v-if="allPostsLoaded").shadow
                 router-link(:to="`./posts`")
-                    h4 posts
+                    h4.t-cap posts
                 router-link(:to="`./posts/${Object.values(allPosts)[0].slug}`")
                     p {{ Object.values(allPosts)[0].title }}
         .f-row