248 lines
6.3 KiB
HTML
248 lines
6.3 KiB
HTML
{{ define "main" }}
|
|
<div class="detail-page">
|
|
<div class="detail-header">
|
|
<a href="javascript:history.back()" class="back-button">
|
|
<span class="back-arrow">←</span> Back
|
|
</a>
|
|
</div>
|
|
|
|
<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>
|
|
{{ else }}
|
|
<div class="detail-image-container"> <!-- Using the same container as the main image -->
|
|
<img src="/images/no-cover-available-yet.png" alt="{{ .Title }} - No cover available" class="detail-image"> <!-- Reusing detail-image class -->
|
|
</div>
|
|
{{ end }}
|
|
|
|
<div class="detail-info">
|
|
<h1>{{ .Title }}</h1>
|
|
|
|
{{ with .Params.rating }}
|
|
<div class="detail-rating">
|
|
{{ partial "stars.html" (dict "rating" .) }} {{ . }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ with .Params.likes }}
|
|
<div class="detail-likes">👍 {{ . }}</div>
|
|
{{ end }}
|
|
|
|
{{ with .Params.category }}
|
|
<div class="detail-category">
|
|
<span class="category-badge">{{ . }}</span>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ with .Params.description }}
|
|
<div class="detail-description">{{ . }}</div>
|
|
{{ end }}
|
|
|
|
{{ with .Params.link }}
|
|
<div class="detail-link">
|
|
<a href="{{ .url }}" target="_blank" class="primary-link">{{ .label }} <span class="external-icon">↗</span></a>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ if .Params.tags }}
|
|
<div class="detail-tags">
|
|
Tags:
|
|
{{ range .Params.tags }}
|
|
<span class="tag">{{ . }}</span>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-body">
|
|
{{ .Content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.detail-page {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.detail-header {
|
|
margin: 20px 0;
|
|
}
|
|
.back-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: #1976d2;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.back-button:hover {
|
|
background-color: rgba(25, 118, 210, 0.08);
|
|
}
|
|
.back-arrow {
|
|
margin-right: 8px;
|
|
font-size: 1.2em;
|
|
}
|
|
.detail-content {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
|
|
overflow: hidden;
|
|
}
|
|
.detail-top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.detail-top {
|
|
flex-direction: row;
|
|
align-items: flex-start; /* Vertically align items to the top */
|
|
gap: 24px; /* Add space between image/placeholder and info */
|
|
}
|
|
}
|
|
.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 {
|
|
height: 300px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.detail-image-container,
|
|
.detail-image-placeholder {
|
|
flex: 0 0 320px; /* Fixed width for the image/placeholder column */
|
|
border-radius: 8px; /* Rounded corners on all sides */
|
|
}
|
|
|
|
.detail-image-container {
|
|
padding: 20px; /* Reduced padding */
|
|
/* background: #f5f5f5; is already defined in base styles */
|
|
}
|
|
|
|
.detail-image {
|
|
max-width: 100%; /* Ensure image scales within container */
|
|
max-height: 450px; /* Adjusted max height */
|
|
/* object-fit: contain; is already defined in base styles */
|
|
/* border-radius: 4px; is already defined in base styles */
|
|
}
|
|
|
|
.detail-image-placeholder {
|
|
/* width: 40%; Replaced by flex rule */
|
|
height: 320px; /* Make it square with the flex-basis */
|
|
/* Other properties like display, align-items, justify-content are in base styles */
|
|
}
|
|
|
|
/* .detail-info will take remaining space due to flex:1 in its base style */
|
|
}
|
|
.placeholder-initial {
|
|
font-size: 5rem;
|
|
font-weight: 300;
|
|
}
|
|
.detail-info {
|
|
padding: 24px;
|
|
flex: 1;
|
|
}
|
|
.detail-info h1 {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
font-size: 2rem;
|
|
font-weight: 400;
|
|
}
|
|
.detail-rating {
|
|
margin-bottom: 16px;
|
|
font-size: 1.1rem;
|
|
}
|
|
.detail-likes {
|
|
color: #e53935;
|
|
margin-bottom: 16px;
|
|
}
|
|
.detail-category {
|
|
margin-bottom: 16px;
|
|
}
|
|
.category-badge {
|
|
background: #eceff1;
|
|
padding: 4px 12px;
|
|
border-radius: 16px;
|
|
font-size: 0.9rem;
|
|
color: #37474f;
|
|
}
|
|
.detail-description {
|
|
margin-bottom: 16px;
|
|
font-size: 1.1rem;
|
|
line-height: 1.5;
|
|
color: #37474f;
|
|
}
|
|
.detail-link {
|
|
margin: 20px 0;
|
|
}
|
|
.primary-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background-color: #1976d2;
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
}
|
|
.primary-link:hover {
|
|
background-color: #1565c0;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
|
}
|
|
.external-icon {
|
|
margin-left: 8px;
|
|
font-size: 0.9em;
|
|
}
|
|
.detail-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.tag {
|
|
background: #e3f2fd;
|
|
color: #1976d2;
|
|
padding: 4px 12px;
|
|
border-radius: 16px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.detail-body {
|
|
padding: 24px;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
color: #37474f;
|
|
}
|
|
.detail-body p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
</style>
|
|
{{ end }}
|