policy pages added

pages/collection/_handle/index.vue

@@ -1,23 +1,23 @@
 <template>
   <div>
-    <section class="hero is-medium is-primary" style="margin-bottom: 2rem">
+    <section class="hero is-medium is-info" style="margin-bottom: 2rem">
       <div
         class="hero-body"
         :style="{
-          backgroundImage: `url(${collection.image.src})`,
+          backgroundImage: (collection.image === null) ? '' : `url(${collection.image.src})`,
           backgroundPosition: 'center',
           backgroundSize: 'cover'
         }"
       >
         <div class="container has-text-centered">
-          <h1 class="title">
+          <h1 class="title is-shadow">
             {{ collection.title }}
           </h1>
         </div>
       </div>
     </section>
     <div class="container">
-      <section class="articles">
+      <section class="articles section">
         <div class="card article">
           <div class="card-content">
             <div class="content article-body">
@@ -26,14 +26,18 @@
           </div>
         </div>
       </section>
-      <div class="columns">
-        <div class="column">
-          <h2 class="is-size-4">Products in this collection</h2>
+      <section class="section">
+        <div class="container">
+          <div class="columns">
+            <div class="column">
+              <h2 class="is-size-4">Products in this collection</h2>
+            </div>
+          </div>
+          <product-card-list
+            :products="collection.products"
+          />
         </div>
-      </div>
-      <product-card-list
-        :products="collection.products"
-      />
+      </section>
     </div>
   </div>
 </template>
@@ -72,9 +76,13 @@ export default {
   .article {
     margin-top: 6rem;
   }
+  @media screen and (min-width: 768px) {
+    .article-body {
+      margin: 0 6rem;
+    }
+  }
   .article-body {
     line-height: 1.4;
-    margin: 0 6rem;
   }
   .hero-body {
     height: 500px;