PUBLISH: Fix card styles

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

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 {

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">

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;">

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 {