mxmehl/mehl.mx
1
0
Fork 0
Code Issues 3 Pull Requests Actions Releases Wiki Activity

better design for list template

Browse Source
This commit is contained in:
max.mehl
2019-10-19 19:51:46 +02:00
parent 82a9b210fc
commit 56e9170f01
2 changed files with 67 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
themes/hugo-sustain/layouts/_default/list.html
View File

@@ -3,33 +3,67 @@
<div id="wrap">
<!-- Header -->
{{ partial "header" . }}
<!-- is page a category or tag page? -->
{{- $selection := false -}}
{{- if (isset .Data "Singular") -}}
{{- $selection = true -}}
{{- end -}}
<div class="container archive">
<h1>{{ .Site.Params.Blog.Headline }}
{{ if (isset .Data "Singular") }}
{{- if $selection -}}
<br />({{ .Data.Singular | humanize }}: {{lower .Title}})
<span class="article-rss"><a href="/{{ .Data.Plural }}/{{lower .Title}}/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
{{ else }}
<span class="article-rss"><a href="/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
{{ end }}
{{- end -}}
</h1>
{{ if .Site.Params.Social.CommentsProvider }}
<p><a href="{{ .Site.Params.Social.CommentsProvider }}">Subscribe</a> to my Blog via Diaspora, Mastodon, Friendica or GNU Social. Never miss a article! Reshare, like and discuss it!</p>
{{ end }}
<p class="categories">
<a class="label label-success" href="/blog">All</a>
<div class="metadata-page">
<div class="row vertical-align">
<div class="col-xs-3 col-md-2 text-right">
<em>Languages:</em>
</div>
<div class="col-xs-9 col-md-10">
<a class="label label-success {{if not $selection}}active{{end}}" href="/blog">All</a>
{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
<a class="label label-success" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
{{ humanize $name }}
<a class="label label-success {{if eq $name $.Title}}active{{end}}" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
{{- humanize $name -}}
</a>
{{- end -}}
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-2 text-right">
<em>Tags:</em>
</div>
<div class="col-xs-9 col-md-10">
<a class="label label-success {{if not $selection}}active{{end}}" href="/blog">All</a>
{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
<a class="label label-success {{if eq $name $.Title}}active{{end}}" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">
{{- humanize $name -}}
</a>
{{- end -}}
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-2 text-right">
<em>RSS Feed:</em>
</div>
<div class="col-xs-9 col-md-10">
{{ if $selection }}
<span class="article-rss"><a class="label label-rss" href="/{{ .Data.Plural }}/{{lower .Title}}/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe to »{{.Title}}«</a></span>
{{ else }}
<span class="article-rss"><a class="label label-rss" href="/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe to all posts</a></span>
{{ end }}
</p>
</div>
</div>
</div>
<div class="panel panel-default panel-overview">
<div class="blogpost">
{{ range .Paginator.Pages.ByPublishDate.Reverse }}
<div class="blog-summary">
<h4><strong><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></strong></h4>
<div class="metadata">Posted on {{ .Date.Format "2 January 2006" }} - Tagged with {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">{{ $tag }}</a>{{ end }}</div>
<div class="metadata-summary">Posted on {{ .Date.Format "2 January 2006" }} - Tagged with {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">{{ $tag }}</a>{{ end }}</div>
<p>{{ .Summary }} <a class="learn-more" href="{{ .RelPermalink }}"></a></p>
</div>
{{ end }}

23
themes/hugo-sustain/static/css/custom.css
View File

@@ -15,10 +15,15 @@ div.footer {
background-color: rgba(92, 139, 184, 0.6);
color: #FFF;
}
.container a.label-success:hover {
.container a.label-success:hover,
.container a.label-success.active {
background-color: rgba(92, 139, 184, 0.9);
color: #FFF;
}
.container a.label-rss {
background-color: rgba(242, 101, 34, 0.9);
color: #FFF;
}
.container h1 {
font-weight: bold;
color: #0D76EC;
@@ -76,14 +81,18 @@ div.contact p {
}
/* BLOG */
.categories {
.metadata-page {
font-size: 18px;
margin: 1em 0 3em 0;
text-align: left;
margin: 3em 0 1em 0;
}
.metadata-page .row {
padding-bottom: .5em;
}
.blog-summary {
padding-bottom: 1em;
}
.metadata {
.metadata-summary {
font-size: 0.8em;
opacity: 0.7;
}
@@ -137,3 +146,9 @@ figure.pull-right {
figure.pull-left {
padding: 10px 10px 10px 0;
}
/* HELPER CLASSES */
.vertical-align {
display: flex;
align-items: center;
}