gribse/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Refactor post display layout to enhance styling and improve cover image presentation

Browse source
This commit is contained in:
gribse 2025-04-18 13:29:26 +02:00
parent 0bcd8414d5
commit 88297536d3
1 changed files with 36 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

42
layouts/partials/posts-defile.html
View file

@ -8,7 +8,11 @@
{{- range (sort $pages "Date" "desc") -}} {{- range (sort $pages "Date" "desc") -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item"> <a href="{{ .RelPermalink }}" class="scrolling-posts-item">
<span class="section-badge">{{ .Section }}</span> <span class="section-badge">{{ .Section }}</span>
<span>{{ .Title }} ({{ .Date.Format "2006-01-02" }})</span> <h2>{{ .Title }}</h2>
<div class="scrolling-posts-cover" style="height: 40px; overflow: hidden; display: flex; justify-content: center; align-items: center;">
<img src="{{ .Permalink }}{{ .Params.cover.image }}" alt="{{ .Title }} cover image" style="width: 100%; height: 40px; object-fit: cover;">
</div>
<p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
</a> </a>
{{- end -}} {{- end -}}
</div> </div>
@ -17,7 +21,11 @@
{{- range (sort $pages "Date" "desc") -}} {{- range (sort $pages "Date" "desc") -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item"> <a href="{{ .RelPermalink }}" class="scrolling-posts-item">
<span class="section-badge">{{ .Section }}</span> <span class="section-badge">{{ .Section }}</span>
<span>{{ .Title }} ({{ .Date.Format "2006-01-02" }})</span> <h2>{{ .Title }}</h2>
<div class="scrolling-posts-cover" style="height: 40px; overflow: hidden; display: flex; justify-content: center; align-items: center;">
<img src="{{ .Params.cover.image }}" alt="{{ .Title }} cover image" style="height: 100%; object-fit: cover;">
</div>
<p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
</a> </a>
{{- end -}} {{- end -}}
</div> </div>
@ -25,6 +33,7 @@
</div> </div>
<style> <style>
.scrolling-posts-container { .scrolling-posts-container {
width: 100%; width: 100%;
border: none; border: none;
@ -53,6 +62,27 @@
.scrolling-posts-item { .scrolling-posts-item {
padding: 10px; padding: 10px;
border: solid 1px #ccc; border: solid 1px #ccc;
background: var(--entry);
border-radius: var(--radius);
border: 1px solid var(--border);
}
.scrolling-posts-item h2 {
font-size: 1em;
margin: 0;
color: var(--text);
font-weight: 400;
line-height: 1.5em;
text-decoration: none;
text-align: left;
overflow: hidden;
}
.scrolling-posts-date {
font-size: 0.8em;
color: var(--text);
margin: 0;
text-align: left;
} }
.section-badge { .section-badge {
@ -60,17 +90,17 @@
font-size: 0.8em; font-size: 0.8em;
padding: 2px 6px; padding: 2px 6px;
margin-right: 5px; margin-right: 5px;
background-color: #f0f0f0; background: var(--theme);
border-radius: 3px; border-radius: 3px;
color: #666; color: var(--primary);
} }
.up-scroll { .up-scroll {
animation: scrollUp 10s linear infinite; animation: scrollUp 50s linear infinite;
} }
.down-scroll { .down-scroll {
animation: scrollDown 10s linear infinite; animation: scrollDown 50s linear infinite;
} }
@keyframes scrollUp { @keyframes scrollUp {