fosscat-site/layouts/projects/single.html

111 lines
2.4 KiB
HTML

{{ define "main" }}
<style>
.status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
margin-left: 0.5rem;
vertical-align: middle;
}
.post-image {
display: flex;
justify-content: center;
margin: 1.5rem 0;
}
.post-image img {
height: auto;
border-radius: 8px;
border: 1.5px solid var(--light-secondary-color);
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
object-fit: cover;
}
.image-caption p {
display: flex;
justify-content: center;
}
@media (max-width: 480px) {
.post-image img {
width: 100%;
max-width: 300px;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.post-image img {
width: 80%;
max-width: 400px;
}
}
@media (min-width: 769px) {
.post-image img {
width: 60%;
max-width: 500px;
}
}
</style>
<div class="post container">
<div class="post-header-section">
<h1>
{{ .Title | markdownify }}
{{ with .Params.status }}
{{ $color := $.Params.statusColor | default "#9e9e9e" }}
<span class="status-badge" style="color: {{ $color }}; border: 1px solid {{ $color }}; background-color: {{ $color }}20;">{{ . }}</span>
{{ end }}
</h1>
{{ with .Description }}
<small role="doc-subtitle">{{ . }}</small>
{{ end }}
<p class="post-date">
Started {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Date }}
{{ if lt .Date .Lastmod }} | Updated {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Lastmod }}{{ end }}
</p>
<ul class="post-tags">
{{ range .Params.Tags }}
<li class="post-tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}">{{ . }}</a></li>
{{ end }}
</ul>
</div>
{{ if .Params.image }}
<div class="post-image">
<img src="{{ .Params.image | absURL }}" alt="{{ .Params.image_alt | default .Title }}">
</div>
<div class="image-caption">
<p>{{ .Params.image_caption }}</p>
</div>
{{ end }}
<div class="post-content">
{{ .Content }}
</div>
<div class="prev-next">
{{ if eq .Site.Params.TogglePreviousAndNextButtons "true" }}
{{ if or .PrevInSection .NextInSection }}
{{ partial "prev-next.html" . }}
{{ end }}
{{ end }}
</div>
{{ if .Site.Params.ShowBackToTopButton }}
{{ partial "back-to-top.html" . }}
{{ end }}
</div>
{{- partial "toc.html" . -}}
{{ end }}