From 6cda217a59ed91c3eba10670f604db5b3f5f7445 Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Wed, 24 Aug 2022 17:35:42 +0900
Subject: [PATCH] PUBLISH: Fix card styles

---
 content/reviews/the-french-dispatch.md |  2 +-
 docs/card.css                          | 10 +++++++---
 docs/index.html                        |  5 +----
 layouts/_default/summary.html          |  5 ++---
 static/card.css                        | 10 +++++++---
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/content/reviews/the-french-dispatch.md b/content/reviews/the-french-dispatch.md
index 861c335..6c4b5f5 100644
--- a/content/reviews/the-french-dispatch.md
+++ b/content/reviews/the-french-dispatch.md
@@ -1,5 +1,5 @@
 ---
-title: "The French Dispatch"
+title: The French Dispatch
 date: 2022-08-17T17:18:04+09:00
 draft: false
 rating: 4
diff --git a/docs/card.css b/docs/card.css
index 7a2a259..e73dc65 100644
--- a/docs/card.css
+++ b/docs/card.css
@@ -5,11 +5,15 @@
   border-radius: 10px;
   background: var(--color-primary);
   aspect-ratio: 2 / 3;
-  max-width: 250px;
+  width: 280px;
   max-height: 380px;
   padding: 10px;
 }
 
+.card-title-long {
+  font-size: 20px !important;
+}
+
 .card .card-content {
   flex-basis: 0.0001%;
 }
@@ -18,11 +22,11 @@
 }
 
 .card:hover .card-content {
-  flex-basis: 50%;
+  flex-basis: 60%;
   padding-top: 10px;
 }
 .card:hover .card-image {
-  flex-basis: 50%;
+  flex-basis: 40%;
 }
 
 .card-content {
diff --git a/docs/index.html b/docs/index.html
index 258bb4e..0cb2176 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -49,10 +49,7 @@
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">
-          The French Dispatch
-        </a>
-      </h3>
+      <h3 class="subtitle">The French Dispatch</h3>
     </header>
     <div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div>
     <div class="cluster spacing:between">
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
index 89ff9b9..2759588 100644
--- a/layouts/_default/summary.html
+++ b/layouts/_default/summary.html
@@ -4,9 +4,8 @@
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">
-          {{ .Title }}
-        </a>
+      <h3 class="subtitle{{if gt (len .Title) 20 }} card-title-long{{end}}">
+          {{- .Title | truncate 50 "..." -}}
       </h3>
     </header>
     <div style="text-align: justify;">
diff --git a/static/card.css b/static/card.css
index 7a2a259..e73dc65 100644
--- a/static/card.css
+++ b/static/card.css
@@ -5,11 +5,15 @@
   border-radius: 10px;
   background: var(--color-primary);
   aspect-ratio: 2 / 3;
-  max-width: 250px;
+  width: 280px;
   max-height: 380px;
   padding: 10px;
 }
 
+.card-title-long {
+  font-size: 20px !important;
+}
+
 .card .card-content {
   flex-basis: 0.0001%;
 }
@@ -18,11 +22,11 @@
 }
 
 .card:hover .card-content {
-  flex-basis: 50%;
+  flex-basis: 60%;
   padding-top: 10px;
 }
 .card:hover .card-image {
-  flex-basis: 50%;
+  flex-basis: 40%;
 }
 
 .card-content {