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

Nice homepage

Browse source
This commit is contained in:
zuma 2025-04-17 14:18:00 +02:00
parent 864a454e80
commit ec78892665
22 changed files with 278 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

93
layouts/partials/posts-defile.html Normal file
View file

@ -0,0 +1,93 @@
{{ $direction := .direction | default "up" }}
{{ $context := .context }}
<div class="scrolling-posts-container">
<div class="scrolling-posts-inner">
<div class="scrolling-posts {{ $direction }}-scroll">
{{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
{{- range (sort $pages "Date" "desc") -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item">
<span class="section-badge">{{ .Section }}</span>
<span>{{ .Title }} ({{ .Date.Format "2006-01-02" }})</span>
</a>
{{- end -}}
</div>
<div class="scrolling-posts {{ $direction }}-scroll">
{{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
{{- range (sort $pages "Date" "desc") -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item">
<span class="section-badge">{{ .Section }}</span>
<span>{{ .Title }} ({{ .Date.Format "2006-01-02" }})</span>
</a>
{{- end -}}
</div>
</div>
</div>
<style>
.scrolling-posts-container {
width: 100%;
border: none;
overflow: hidden;
height: 100%;
}
.scrolling-posts-inner {
display: flex;
flex-direction: column;
white-space: nowrap;
padding: 0;
margin: 0;
}
.scrolling-posts {
display: flex;
flex-direction: column;
gap: 1rem;
}
.scrolling-posts > a:nth-child(1) {
margin-top: 1rem;
}
.scrolling-posts-item {
padding: 10px;
border: solid 1px #ccc;
}
.section-badge {
display: inline-block;
font-size: 0.8em;
padding: 2px 6px;
margin-right: 5px;
background-color: #f0f0f0;
border-radius: 3px;
color: #666;
}
.up-scroll {
animation: scrollUp 10s linear infinite;
}
.down-scroll {
animation: scrollDown 10s linear infinite;
}
@keyframes scrollUp {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-100%);
}
}
@keyframes scrollDown {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
</style>