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"> <div id="wrap">
<!-- Header --> <!-- Header -->
{{ partial "header" . }} {{ partial "header" . }}
<!-- is page a category or tag page? -->
{{- $selection := false -}}
{{- if (isset .Data "Singular") -}}
{{- $selection = true -}}
{{- end -}}
<div class="container archive"> <div class="container archive">
<h1>{{ .Site.Params.Blog.Headline }} <h1>{{ .Site.Params.Blog.Headline }}
{{ if (isset .Data "Singular") }} {{- if $selection -}}
<br />({{ .Data.Singular | humanize }}: {{lower .Title}}) <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> {{- end -}}
{{ else }}
<span class="article-rss"><a href="/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
{{ end }}
</h1> </h1>
{{ if .Site.Params.Social.CommentsProvider }} {{ 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> <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 }} {{ end }}
<p class="categories"> <div class="metadata-page">
<a class="label label-success" href="/blog">All</a> <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 }} {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
<a class="label label-success" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}"> <a class="label label-success {{if eq $name $.Title}}active{{end}}" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
{{ humanize $name }} {{- humanize $name -}}
</a> </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 }} {{ end }}
</p> </div>
</div>
</div>
<div class="panel panel-default panel-overview"> <div class="panel panel-default panel-overview">
<div class="blogpost"> <div class="blogpost">
{{ range .Paginator.Pages.ByPublishDate.Reverse }} {{ range .Paginator.Pages.ByPublishDate.Reverse }}
<div class="blog-summary"> <div class="blog-summary">
<h4><strong><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></strong></h4> <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> <p>{{ .Summary }} <a class="learn-more" href="{{ .RelPermalink }}"></a></p>
</div> </div>
{{ end }} {{ 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); background-color: rgba(92, 139, 184, 0.6);
color: #FFF; 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); background-color: rgba(92, 139, 184, 0.9);
color: #FFF; color: #FFF;
} }
.container a.label-rss {
background-color: rgba(242, 101, 34, 0.9);
color: #FFF;
}
.container h1 { .container h1 {
font-weight: bold; font-weight: bold;
color: #0D76EC; color: #0D76EC;
@@ -76,14 +81,18 @@ div.contact p {
} }
/* BLOG */ /* BLOG */
.categories { .metadata-page {
font-size: 18px; font-size: 18px;
margin: 1em 0 3em 0; text-align: left;
margin: 3em 0 1em 0;
}
.metadata-page .row {
padding-bottom: .5em;
} }
.blog-summary { .blog-summary {
padding-bottom: 1em; padding-bottom: 1em;
} }
.metadata { .metadata-summary {
font-size: 0.8em; font-size: 0.8em;
opacity: 0.7; opacity: 0.7;
} }
@@ -137,3 +146,9 @@ figure.pull-right {
figure.pull-left { figure.pull-left {
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
} }
/* HELPER CLASSES */
.vertical-align {
display: flex;
align-items: center;
}