Add Material Design cards homepage with category tabs

layouts/partials/card.html

@@ -1,5 +1,20 @@
 <div class="card">
-  {{ with .Params.image }}<img src="{{ . }}" alt="{{ $.Title }} cover">{{ end }}
+  {{ with .Params.image }}
+    <img src="{{ . }}" alt="{{ $.Title }} cover">
+  {{ else }}
+    {{ $bgColor := "#546e7a" }}
+    {{ if eq .Params.category "Books" }}{{ $bgColor = "#004d40" }}{{ end }}
+    {{ if eq .Params.category "Movies" }}{{ $bgColor = "#01579b" }}{{ end }}
+    {{ if eq .Params.category "TV Series" }}{{ $bgColor = "#4a148c" }}{{ end }}
+    {{ if eq .Params.category "Recipes" }}{{ $bgColor = "#b71c1c" }}{{ end }}
+    {{ if eq .Params.category "YouTube" }}{{ $bgColor = "#f44336" }}{{ end }}
+    <div class="card-placeholder" style="height:180px;border-radius:16px 16px 0 0;background-color:{{ $bgColor }};display:flex;align-items:center;justify-content:center;color:white;font-weight:500;">
+      <div style="text-align:center;padding:20px;">
+        <div style="font-size:2rem;margin-bottom:10px;">{{ substr .Title 0 1 }}</div>
+        <div>{{ .Title }}</div>
+      </div>
+    </div>
+  {{ end }}
   <div class="card-title">{{ .Title }}</div>
   {{ with .Params.rating }}<div class="card-rating">{{ partial "stars.html" (dict "rating" .) }} {{ . }}</div>{{ end }}
   {{ with .Params.likes }}<div class="card-likes">&#128077; {{ . }}</div>{{ end }}

layouts/partials/stars.html

@@ -1,10 +1,30 @@
-{{/* Renders stars for rating (e.g. 4.5) */}}
-{{ $max := 5 }}
-{{ $full := int (math.Floor .rating) }}
-{{ $half := ge (modf .rating 1) 0.25 }}
-{{ $empty := sub $max (add $full (cond $half 1 0)) }}
+{{/* Simple star display - no math functions */}}
 <span style="color:#fbc02d;">
-  {{ range seq 1 $full }}&#9733;{{ end }}
-  {{ if $half }}&#189;{{ end }}
-  {{ range seq 1 $empty }}&#9734;{{ end }}
+{{ if eq .rating 5.0 }}
+  ★★★★★
+{{ else if eq .rating 4.8 }}
+  ★★★★★
+{{ else if eq .rating 4.5 }}
+  ★★★★½
+{{ else if eq .rating 4.2 }}
+  ★★★★☆
+{{ else if eq .rating 4.0 }}
+  ★★★★☆
+{{ else if eq .rating 3.5 }}
+  ★★★½☆
+{{ else if eq .rating 3.0 }}
+  ★★★☆☆
+{{ else if eq .rating 2.5 }}
+  ★★½☆☆
+{{ else if eq .rating 2.0 }}
+  ★★☆☆☆
+{{ else if eq .rating 1.5 }}
+  ★½☆☆☆
+{{ else if eq .rating 1.0 }}
+  ★☆☆☆☆
+{{ else if eq .rating 0.5 }}
+  ½☆☆☆☆
+{{ else }}
+  ☆☆☆☆☆
+{{ end }}
 </span>

static/img/midnight-library.jpg

@@ -0,0 +1 @@
+