Greg/MyFavStuff5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Greg:cf0b1d6cab51253055ba703814743b2a2bc6234b
Branches Tags
Greg:main
..
compare: Greg:e7a125e4d9385c0f645f933fa6d5f5c11d4a1f2d
Branches Tags
Greg:main

No commits in common. "cf0b1d6cab51253055ba703814743b2a2bc6234b" and "e7a125e4d9385c0f645f933fa6d5f5c11d4a1f2d" have entirely different histories.
cf0b1d6cab ... e7a125e4d9

3 changed files with 12 additions and 36 deletions
Show Stats Expand all files Collapse all files

1
content/recipes/spaghetti-carbonara.md
View File

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

1
content/youtube/tech-gadget-review.md
View File

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

46
layouts/_default/single.html
View File

@ -9,9 +9,7 @@
<div class="detail-content"> <div class="detail-content">
<div class="detail-top"> <div class="detail-top">
{{ if .Params.image }} {{ if .Params.image }}
<div class="detail-image-container"> <div class="detail-image" style="background-image: url('{{ .Params.image }}');"></div>
<img src="{{ .Params.image }}" alt="{{ .Title }}" class="detail-image">
</div>
{{ else }} {{ 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="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> <div class="placeholder-initial">{{ substr .Title 0 1 }}</div>
@ -105,43 +103,23 @@
flex-direction: row; flex-direction: row;
} }
} }
.detail-image-container { .detail-image, .detail-image-placeholder {
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 {
height: 300px; height: 300px;
width: 100%; 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; 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 { .placeholder-initial {
font-size: 5rem; font-size: 5rem;