docs: show background only on landing page

The background should only be shown on the landing page.

Signed-off-by: Andrew Rynhard <andrew@andrewrynhard.com>

docs/website/assets/css/main.css

@@ -3,6 +3,10 @@
 @import url('@/assets/css/navigation.css');
 @import url('@/assets/css/prism-ghcolors.css');
 
+body {
+  overflow-x: hidden;
+}
+
 body {
   @apply font-sans text-gray-800;
 }
@@ -46,13 +50,8 @@ pre[class*='language-'] {
   @apply font-mono;
 }
 
-article {
-  background: white;
-  border-radius: 5px;
-}
-
 .article-content {
-  @apply max-w-3xl pt-4 pb-4 pl-6 pr-6 mx-auto shadow-md;
+  @apply max-w-3xl pt-4 pb-4 pl-6 pr-6 mx-auto;
 }
 
 h1,

docs/website/layouts/default.vue

@@ -19,18 +19,3 @@ export default {
   }
 }
 </script>
-
-<style>
-html {
-  background: url(~assets/images/chips_bg_v1.svg) no-repeat center center fixed;
-  -webkit-background-size: contain;
-  -moz-background-size: contain;
-  -o-background-size: contain;
-  background-size: contain;
-  background-position: center bottom;
-}
-
-body {
-  overflow-x: hidden;
-}
-</style>

docs/website/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-rich-text">
+  <div id="landing-page" class="c-rich-text">
     <div class="flex flex-col justify-around">
       <div class="flex justify-center">
         <div class="text-center w-3/4 mx-20 py-10 px-20">
@@ -155,7 +155,16 @@
   </div>
 </template>
 
-<style scoped>
+<style>
+#landing-page {
+  background: url(~assets/images/chips_bg_v1.svg) no-repeat center center fixed;
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain;
+  background-position: center bottom;
+}
+
 .logo {
   display: block;
   width: 189px;