Simplify styles, make back button more adaptable

Author: tylermercer

layouts/default.vue

@@ -4,26 +4,24 @@
       <!-- This link is an n-link because it links to another Nuxt route -->
       <n-link class="logo" to="/"><logo/></n-link>
     </div>
-    <nuxt />
+    <nuxt class="content" />
     <div class="footer">
-      <div class="footer-inner">
-        <p>
-          <!-- This link is not an n-link because it is external -->
-          <a target="_blank"
-              rel="noopener noreferrer"
-              href="https://github.com/tylermercer/nuxt-netlifycms-boilerplate">
-            View this project on Github
-          </a>
-        </p>
-        <p>
-          <!-- This is not an n-link because the NetlifyCMS admin page is static.
-          If you make it an n-link, you'll get a "Page could not be found" when
-          you click it. -->
-          <a href="/admin">
-            NetlifyCMS Admin Login
-         </a>
-       </p>
-      </div>
+      <p>
+        <!-- This link is not an n-link because it is external -->
+        <a target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/tylermercer/nuxt-netlifycms-boilerplate">
+          View this project on Github
+        </a>
+      </p>
+      <p>
+        <!-- This is not an n-link because the NetlifyCMS admin page is static.
+        If you make it an n-link, you'll get a "Page could not be found" when
+        you click it. -->
+        <a href="/admin">
+          NetlifyCMS Admin Login
+       </a>
+     </p>
     </div>
   </div>
 </template>
@@ -44,30 +42,31 @@ export default {
   margin-left: auto;
   margin-right: auto;
   height: 100vh;
-  padding-top: 40px;
+  padding: 40px 20px 10px 20px;
 }
 
-.header, .footer {
+.header {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-bottom: 40px;
   width: 100%;
 }
-
-.footer {
+.content {
   margin-top: 40px;
+  margin-bottom: 40px;
 }
 
-.footer-inner {
+.footer {
   background-color: whitesmoke;
   width: 100%;
-  padding: 20px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
+.footer > * {
+  padding: 20px;
+}
 
 .logo {
   display: block;

pages/blog/_slug.vue

@@ -1,9 +1,9 @@
 <template lang="html">
   <div class="post">
-    <h1>{{title}}</h1>
+    <h1 class="title">{{title}}</h1>
     <p class="date">Posted by {{author}} on {{date}}</p>
-    <div class="post-content" v-html="$md.render(body)"/>
-    <p class="back-link"><n-link to="/">Back</n-link></p>
+    <div class="body" v-html="$md.render(body)"/>
+    <p class="back"><a class="back-link" @click="$router.back()">Back</a></p>
   </div>
 </template>
 
@@ -30,18 +30,19 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.back-link, .date, .post-content {
+.back, .date, .body {
   padding-top: 10px;
 }
+.back-link {
+  text-decoration: underline;
+  color: #3b8070;
+  cursor: pointer;
+}
 
 .date {
   color: darkgray;
 }
 .post {
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 20px;
   background-color: whitesmoke;
   padding: 20px;
 }