add buttons; better usability

src/.vuepress/theme/Layout.vue

@@ -9,7 +9,7 @@
     <main class="content">
       <div v-if="$page.frontmatter.sidebar || $page.frontmatter.toc" class="container">
         <div class="row">
-          <div class="col-xl-4 p-4">
+          <div class="d-none d-xl-block col-4 p-4">
             <div class="card toc my-2">
               <div class="card-header">
                 <router-link :to="`/${$page.path.split('/')[1]}/`"><b>/{{ $page.path.split('/')[1] }}/</b></router-link>
@@ -19,7 +19,17 @@
               </div>
             </div>
           </div>
-          <Content class="col-xl-8 p-4" />
+          <div class="col-xl-8 p-4">
+            <router-link
+              v-if="!!$page.path.split('/')[2]"
+              :to="`/${$page.path.split('/')[1]}/`"
+              class="btn btn-secondary my-2"
+            >
+              <i class="bi-arrow-left" />
+              back to {{ $page.path.split('/')[1] }}
+            </router-link>
+            <Content />
+          </div>
         </div>
       </div>
       <div v-else>

src/events/README.md

@@ -8,13 +8,17 @@ toc: true
 We are Strobe Town
 
 <FolderList path="/events/" v-slot="{ page }" class="m-0 p-0">
-  <div class="card my-2">
+  <div class="card my-4">
     <div class="card-header"><router-link :to="page.regularPath">{{ page.title }}</router-link></div>
     <div class="card-body">
       <router-link :to="page.regularPath">
         <img class="card-img" :src="page.frontmatter.imgSrc" />
       </router-link>
       <p class="my-2">{{ page.frontmatter.excerpt }}</p>
+        <router-link :to="page.regularPath" class="btn btn-secondary">
+          view details
+          <i class="bi-arrow-right" />
+        </router-link>
     </div>
   </div>
 </FolderList>