content/recipes/spaghetti-carbonara.md

@@ -1,5 +1,4 @@
 ---
-draft: true
 title: "Spaghetti Carbonara"
 category: "Recipes"
 image: "/img/carbonara.jpg"

content/youtube/tech-gadget-review.md

@@ -1,5 +1,4 @@
 ---
-draft: true
 title: "Tech Gadget Review"
 category: "YouTube"
 image: "/img/tech-gadget.jpg"

layouts/_default/single.html

@@ -9,9 +9,7 @@
     <div class="detail-content">
         <div class="detail-top">
             {{ if .Params.image }}
-                <div class="detail-image-container">
-                    <img src="{{ .Params.image }}" alt="{{ .Title }}" class="detail-image">
-                </div>
+                <div class="detail-image" style="background-image: url('{{ .Params.image }}');"></div>
             {{ else }}
                 <div class="detail-image-placeholder" style="background-color:{{ if eq .Params.category "Books" }}#004d40{{ else if eq .Params.category "Movies" }}#01579b{{ else if eq .Params.category "TV Series" }}#4a148c{{ else if eq .Params.category "Recipes" }}#b71c1c{{ else if eq .Params.category "YouTube" }}#f44336{{ else }}#546e7a{{ end }}">
                     <div class="placeholder-initial">{{ substr .Title 0 1 }}</div>
@@ -105,43 +103,23 @@
         flex-direction: row;
     }
 }
-.detail-image-container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-    background: #f5f5f5;
-    border-radius: 8px 8px 0 0;
-    overflow: hidden;
-}
-.detail-image {
-    max-width: 100%;
-    max-height: 400px;
-    object-fit: contain;
-    border-radius: 4px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
-}
-.detail-image-placeholder {
+.detail-image, .detail-image-placeholder {
     height: 300px;
     width: 100%;
+    background-size: cover;
+    background-position: center;
+}
+@media (min-width: 768px) {
+    .detail-image, .detail-image-placeholder {
+        width: 40%;
+        height: auto;
+    }
+}
+.detail-image-placeholder {
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
-    border-radius: 8px 8px 0 0;
-}
-@media (min-width: 768px) {
-    .detail-image-container {
-        padding: 40px;
-    }
-    .detail-image {
-        max-height: 500px;
-    }
-    .detail-image-placeholder {
-        width: 40%;
-        height: 350px;
-    }
 }
 .placeholder-initial {
     font-size: 5rem;