PaperModX/layouts/blogroll/section.html

76 lines
1.7 KiB
HTML
Raw Normal View History

2022-09-06 15:38:40 +01:00
{{- define "head" }}
<style>
.links-container {
font-size: 16px;
}
.links-container blockquote {
margin: var(--gap) 0;
padding: 0 14px;
border-inline-start: 3px solid var(--primary);
}
.links .item {
padding: 12px;
background: var(--entry);
border-radius: var(--radius);
margin-bottom: var(--gap);
border: 1px solid var(--border);
}
.links .favicon {
display: inline-block;
background-size: 16px 16px;
width: 16px;
height: 16px;
image-rendering: -webkit-optimize-contrast;
}
.links .item .title .favicon {
margin-right: calc(var(--gap) / 2);
vertical-align: middle;
}
.links .item .title a:hover {
text-decoration: underline;
}
.links .item .description {
margin-left: calc(16px + var(--gap) / 2);
color: var(--secondary);
}
.links .item .description .delimiter::after {
content: "·";
margin-inline-start: .5em;
margin-inline-end: .5em;
}
</style>
{{- end }}
{{- define "main" }}
<header class="page-header">
<h1>{{ .Title }}</h1>
</header>
<article class="links-container">
<blockquote>
<p>{{ .Description }}</p>
</blockquote>
<div class="links">
{{ range site.Params.Links }}
<div class="item">
<div class="title">
{{- $url := urls.Parse .url }}
<span class="favicon" style="background-image: url({{ .favicon | default (printf "%s/favicon.ico" .url ) }});"></span
><a href="{{ .url }}" target="_blank">{{ .name }}</a>
</div>
<div class="description">
{{- .domain | default $url.Host }}
{{- with .description }}<span class="delimiter"></span>{{ . }}{{- end }}
</div>
</div>
{{ end }}
</div>
</article>
{{- end }}