fosscat-site/layouts/tils/single.html

125 lines
3.3 KiB
HTML

{{ define "main" }}
<style>
.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;
}
/* Mobile - small images fit better */
@media (max-width: 480px) {
.post-image img {
width: 100%;
max-width: 300px;
}
}
/* Tablet - medium size */
@media (min-width: 481px) and (max-width: 768px) {
.post-image img {
width: 80%;
max-width: 400px;
}
}
/* Desktop - larger but not overwhelming */
@media (min-width: 769px) {
.post-image img {
width: 60%;
max-width: 500px;
}
}
html[data-theme="dark"] .post-image img {
border-color: var(--dark-secondary-color);
box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 12px;
}
</style>
<div class="post container">
<div class="post-header-section">
<h1>{{ .Title | markdownify }}</h1>
{{/* Determine whether to display the date & description based on tags */}}
{{ $displayDate := true }}
{{ $displayDescription := true }}
{{ $postTags := or .Params.Tags slice }}
{{ $hiddenTags := or .Site.Params.Hidden.Tags slice }}
{{ $tagsHidePostDate := or .Site.Params.Hidden.TagsPostDate slice }}
{{ $tagsHidePostDescription := or .Site.Params.Hidden.TagsPostDescription slice }}
{{ if gt ($tagsHidePostDate | intersect $postTags | len) 0 }}
{{ $displayDate = false }}
{{ end }}
{{ if gt ($tagsHidePostDescription | intersect $postTags | len) 0 }}
{{ $displayDescription = false }}
{{ end }}
{{ if $displayDescription }}
<small role="doc-subtitle">{{ .Description }}</small>
{{ end }}
{{ if $displayDate }}
<p class="post-date">{{ 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>
{{ end }}
<ul class="post-tags">
{{ range $tag := $postTags }}
{{ if not (in $hiddenTags $tag) }}
<li class="post-tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}">{{ . }}</a></li>
{{ end }}
{{ end }}
</ul>
</div>
{{/* Display image if present in front matter */}}
{{ if .Params.image }}
<div class="post-image">
<img src="{{ .Params.image | absURL }}" alt="{{ .Params.image_alt | default .Title }}">
</div>
{{ end }}
<div class="post-content">
{{ .Content }}
{{ if .Site.Config.Services.Disqus.Shortname }}
<div class="post-comments">
{{ template "_internal/disqus.html" . }}
</div>
{{ end }}
</div>
<div class="prev-next">
{{ if eq .Site.Params.TogglePreviousAndNextButtons "true" }}
{{ if or .PrevInSection .NextInSection }}
{{ partial "prev-next.html" . }}
{{ end }}
{{ end }}
</div>
<!-- Back to top button -->
{{ if .Site.Params.ShowBackToTopButton }}
{{ partial "back-to-top.html" . }}
{{ end }}
{{ if .Site.Params.CustomCommentHTML }}
<div id="comments">
{{ .Site.Params.CustomCommentHTML | safeHTML }}
</div>
{{ end }}
</div>
{{- partial "toc.html" . -}}
{{ end }}