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

Enhance scrolling posts layout with background images and a gradient

Browse source
This commit is contained in:
gribse 2025-04-18 14:43:11 +02:00
parent 88297536d3
commit ac270d7f86
1 changed files with 20 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,33 +2,32 @@
{{ $context := .context }} {{ $context := .context }}
<div class="scrolling-posts-container"> <div class="scrolling-posts-container">
<div class="scrolling-posts-inner"> <div class="scrolling-posts-inner">
<div class="scrolling-posts {{ $direction }}-scroll"> <div class="scrolling-posts {{ $direction }}-scroll">
{{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}} {{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
{{- range (sort $pages "Date" "desc") -}} {{- range (sort $pages "Date" "desc") -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item"> <a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2)), url('{{ .Permalink }}{{ .Params.cover.image }}');">
<span class="section-badge">{{ .Section }}</span> <span class="section-badge">{{ .Section }}</span>
<h2>{{ .Title }}</h2> <span class="scrolling-posts-item-title">{{ .Title }}</span>
<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> <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
</a> </a>
{{- end -}} {{- end -}}
</div> </div>
<div class="scrolling-posts {{ $direction }}-scroll">
<div class="scrolling-posts {{ $direction }}-scroll">s
{{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}} {{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
{{- range (sort $pages "Date" "desc") -}} {{- range (sort $pages "Date" "desc") -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item"> <a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: url('{{ .Permalink }}{{ .Params.cover.image }}');">
<span class="section-badge">{{ .Section }}</span> <span class="section-badge">{{ .Section }}</span>
<h2>{{ .Title }}</h2> <span class="scrolling-posts-item-title">{{ .Title }}</span>
<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> <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
</a> </a>
{{- end -}} {{- end -}}
</div> </div>
</div> </div>
</div> </div>
@ -65,12 +64,18 @@
background: var(--entry); background: var(--entry);
border-radius: var(--radius); border-radius: var(--radius);
border: 1px solid var(--border); border: 1px solid var(--border);
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: blur(100px);
} }
.scrolling-posts-item h2 { .scrolling-posts-item-title {
font-size: 1em; font-size: 1em;
margin: 0; margin: 0;
color: var(--text); color: #ccc;
font-weight: 400; font-weight: 400;
line-height: 1.5em; line-height: 1.5em;
text-decoration: none; text-decoration: none;
@ -80,7 +85,7 @@
.scrolling-posts-date { .scrolling-posts-date {
font-size: 0.8em; font-size: 0.8em;
color: var(--text); color: #ccc;
margin: 0; margin: 0;
text-align: left; text-align: left;
} }
@ -90,7 +95,7 @@
font-size: 0.8em; font-size: 0.8em;
padding: 2px 6px; padding: 2px 6px;
margin-right: 5px; margin-right: 5px;
background: var(--theme); background-color: var(--theme);
border-radius: 3px; border-radius: 3px;
color: var(--primary); color: var(--primary);
} }