compact code blocks, more polite unsupported platform warnings

Website/layouts/default.vue

@@ -75,7 +75,7 @@ export default {
         let chrome = window.navigator.userAgent.match(/Chrome\/(\d+)/);
         let chromeVersion = chrome ? chrome[1] : 0;
         if (chromeVersion < 70) {
-          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
+          this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b> is not supported. Consider updating to the latest version.`;
           this.alert.show = true;
         }
       }
@@ -85,7 +85,7 @@ export default {
         let firefox = window.navigator.userAgent.match(/Firefox\/(\d+)/);
         let firefoxVersion = firefox ? firefox[1] : 0;
         if (firefoxVersion < 60) {
-          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
+          this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b> is not supported. Consider updating to the latest version.`;
           this.alert.show = true;
         }
       }
@@ -98,7 +98,7 @@ export default {
 
       // Win7
       if (window.navigator.userAgent.indexOf("Windows NT 6.1") > -1) {
-        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Windows 7</b> is not supported. Update Windows, or install Linux :)`;
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Windows 7</b> is not supported. Consider upgrading Windows, or installing Linux.`;
         this.alert.show = true;
       }
     }, 1000);
@@ -177,7 +177,9 @@ body {
     font-size: 2rem;
   }
   .topBar {
-    width: calc(100vw - 2rem) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
+    width: calc(
+      100vw - 2rem
+    ) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
     padding: 0;
   }
 }

Website/pages/docs/fetching.vue

@@ -3,9 +3,7 @@
     <h1 class="primary--text">Basic Fetching Tutorial</h1>
 
     <span>Example to get votes of a given YouTube video ID:</span>
-    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
-      >kxOuG8jMIgI</a
-    >
+    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank">kxOuG8jMIgI</a>
 
     <h2>Example Request:</h2>
     <span>Request URL:</span>
@@ -47,12 +45,8 @@
     </div>
     <br />
     <v-alert border="left" color="orange" text type="info">
-      <span>An invalid YouTube ID will return status code 404 "Not Found".</span
-      ><br />
-      <span
-        >An incorrectly formatted YouTube ID will return 400 "Bad
-        Request".</span
-      >
+      <span>An invalid YouTube ID will return status code 404 "Not Found".</span><br />
+      <span>An incorrectly formatted YouTube ID will return 400 "Bad Request".</span>
     </v-alert>
 
     <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
@@ -75,5 +69,6 @@ export default {
   background: #353535;
   border-radius: 0.5rem;
   font-family: monospace;
+  line-height: 2rem;
 }
 </style>