init
This commit is contained in:
parent
2fe0c9a830
commit
7b9c07b83e
1444 changed files with 11476 additions and 42112 deletions
141
layouts/partials/posts-defile.html
Executable file
141
layouts/partials/posts-defile.html
Executable file
|
@ -0,0 +1,141 @@
|
|||
{{ $direction := .direction | default "up" }}
|
||||
{{ $context := .context }}
|
||||
|
||||
<div class="scrolling-posts-container">
|
||||
|
||||
<div class="scrolling-posts-inner">
|
||||
|
||||
<div class="scrolling-posts {{ $direction }}-scroll">
|
||||
{{- $pages := first 20 (sort (where $context.Site.RegularPages "Section" "ne" "") "Date" "desc") -}}
|
||||
{{- range (sort $pages "Date" "desc") -}}
|
||||
|
||||
{{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
|
||||
{{- if $image -}}
|
||||
|
||||
{{- $fittedImage := $image.Fill "400x400 smart webp q95" -}}
|
||||
{{- $optimizedBlurredImage := $fittedImage.Filter (images.GaussianBlur 3) -}}
|
||||
<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('{{ $optimizedBlurredImage.RelPermalink }}');">
|
||||
<span class="section-badge">{{ .Section }}</span>
|
||||
<span class="scrolling-posts-item-title">{{ .Title }}</span>
|
||||
<p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
|
||||
</a>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="scrolling-posts {{ $direction }}-scroll">
|
||||
{{- $pages := first 20 (sort (where $context.Site.RegularPages "Section" "ne" "") "Date" "desc") -}}
|
||||
{{- range (sort $pages "Date" "desc") -}}
|
||||
|
||||
{{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
|
||||
{{- if $image -}}
|
||||
|
||||
{{- $fittedImage := $image.Fill "400x400 smart webp q95" -}}
|
||||
{{- $optimizedBlurredImage := $fittedImage.Filter (images.GaussianBlur 3) -}}
|
||||
<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('{{ $optimizedBlurredImage.RelPermalink }}');">
|
||||
<span class="section-badge">{{ .Section }}</span>
|
||||
<span class="scrolling-posts-item-title">{{ .Title }}</span>
|
||||
<p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
|
||||
</a>
|
||||
{{- end -}}
|
||||
{{- 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;
|
||||
background: var(--entry);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
height: 100px;
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.scrolling-posts-item-title {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
color: #ccc;
|
||||
font-weight: 400;
|
||||
line-height: 1.5em;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scrolling-posts-date {
|
||||
font-size: 0.8em;
|
||||
color: #ccc;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
padding: 2px 6px;
|
||||
margin-right: 5px;
|
||||
background-color: var(--theme);
|
||||
border-radius: 3px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.up-scroll {
|
||||
animation: scrollUp 50s linear infinite;
|
||||
}
|
||||
|
||||
.down-scroll {
|
||||
animation: scrollDown 50s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scrollUp {
|
||||
0% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes scrollDown {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue