From 62080c1aab3d681e00e9972f41ad865cf588fccb Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Sat, 27 Aug 2022 13:17:26 +0900
Subject: [PATCH] PUBLISH: Add spacing between genres

---
 docs/quick_look.css                         | 6 ++++++
 docs/reviews/the-french-dispatch/index.html | 2 +-
 layouts/partials/quicklook.html             | 2 +-
 static/quick_look.css                       | 6 ++++++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/docs/quick_look.css b/docs/quick_look.css
index 2ae99e4..f864b8b 100644
--- a/docs/quick_look.css
+++ b/docs/quick_look.css
@@ -29,7 +29,13 @@
   flex-direction: column;
   align-items: flex-start;
   flex-grow: 1;
+}
+
+.quicklook-genre-container  {
+  display: flex;
+  align-items: flex-start;
   flex-wrap: wrap;
+  gap: 0px 20px;
 }
 
 .quicklook-genre {
diff --git a/docs/reviews/the-french-dispatch/index.html b/docs/reviews/the-french-dispatch/index.html
index 93d9297..028317d 100644
--- a/docs/reviews/the-french-dispatch/index.html
+++ b/docs/reviews/the-french-dispatch/index.html
@@ -66,7 +66,7 @@
     </div>
     <div class="quicklook-genre-section">
       <span class="caption">Genre</span>
-      <div>
+      <div class="quicklook-genre-container">
         
           <span class="quicklook-emphasized-color quicklook-genre">Comedy</span>
         
diff --git a/layouts/partials/quicklook.html b/layouts/partials/quicklook.html
index ececa36..12cfc80 100644
--- a/layouts/partials/quicklook.html
+++ b/layouts/partials/quicklook.html
@@ -11,7 +11,7 @@
     </div>
     <div class="quicklook-genre-section">
       <span class="caption">Genre</span>
-      <div>
+      <div class="quicklook-genre-container">
         {{ range $name := .Params.genres }}
           <span class="quicklook-emphasized-color quicklook-genre">{{$name}}</span>
         {{end}}
diff --git a/static/quick_look.css b/static/quick_look.css
index 2ae99e4..f864b8b 100644
--- a/static/quick_look.css
+++ b/static/quick_look.css
@@ -29,7 +29,13 @@
   flex-direction: column;
   align-items: flex-start;
   flex-grow: 1;
+}
+
+.quicklook-genre-container  {
+  display: flex;
+  align-items: flex-start;
   flex-wrap: wrap;
+  gap: 0px 20px;
 }
 
 .quicklook-genre {