add optional footer to all articles

This commit is contained in:
Robert Kaussow 2019-02-13 10:25:03 +01:00
parent e9787f0f8a
commit 0ce48ecd32
8 changed files with 41 additions and 23 deletions

View File

@ -1,3 +1,4 @@
public/ public/
node_modules node_modules
package-lock.json package-lock.json
resources/

View File

@ -16,8 +16,8 @@
</section> </section>
<footer> <footer>
<span class="post-footer__button"> <span class="post-meta__button">
<i class="far fa-calendar-alt post-footer__icon"></i> <i class="far fa-calendar-alt post-meta__icon"></i>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}"> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ .Date.Day }}. {{ index $.Site.Data.de_month (printf "%d" .Date.Month) }} {{ .Date.Year }} {{ .Date.Day }}. {{ index $.Site.Data.de_month (printf "%d" .Date.Month) }} {{ .Date.Year }}
</time> </time>
@ -27,19 +27,19 @@
{{ $author := index $.Site.Data.authors . }} {{ $author := index $.Site.Data.authors . }}
{{ with $.Site.GetPage (printf "/author/%s" $author.name | urlize) }} {{ with $.Site.GetPage (printf "/author/%s" $author.name | urlize) }}
<span class="post-footer__button"> <span class="post-meta__button">
<i class="fas fa-user post-footer__icon"></i> <i class="fas fa-user post-meta__icon"></i>
<a class="post-footer__link" href="{{ .RelPermalink }}" title="Alle Artikel des Autors">{{ $author.name }}</a> <a class="post-meta__link" href="{{ .RelPermalink }}" title="Alle Artikel des Autors">{{ $author.name }}</a>
</span> </span>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ range .Param "categories" }} {{ range .Param "categories" }}
{{ $name := . }} {{ $name := . }}
<span class="post-footer__button"> <span class="post-meta__button">
{{ with $.Site.GetPage (printf "/categories/%s" $name | urlize) }} {{ with $.Site.GetPage (printf "/categories/%s" $name | urlize) }}
<i class="fas fa-tags post-footer__icon"></i> <i class="fas fa-tags post-meta__icon"></i>
<a class="post-footer__link" href="{{ .RelPermalink }}" title="Alle Artikel in '{{ $name }}'">{{ $name }}</a> <a class="post-meta__link" href="{{ .RelPermalink }}" title="Alle Artikel in '{{ $name }}'">{{ $name }}</a>
{{ end }} {{ end }}
</span> </span>
{{ end }} {{ end }}

View File

@ -3,8 +3,9 @@
<header class="post-header"> <header class="post-header">
<h1 class="post-header__title">{{ .Title }}</h1> <h1 class="post-header__title">{{ .Title }}</h1>
</header> </header>
<section class="post-content"> <div class="post-content">
{{ .Content }} {{ .Content }}
</section> </div>
{{ partial "article_footer.html" . -}}
</article> </article>
{{ end }} {{ end }}

View File

@ -0,0 +1,5 @@
{{ with .Site.Params.footer }}
<footer class="post-footer">
{{ . | markdownify }}
</footer>
{{ end }}

View File

@ -170,7 +170,7 @@ html{
display: inline-block; display: inline-block;
} }
.post-footer__link { .post-meta__link {
border:1px solid #BFBFBF; border:1px solid #BFBFBF;
padding:1px 4px; padding:1px 4px;
margin:2px 0; margin:2px 0;
@ -181,12 +181,12 @@ html{
position:relative; position:relative;
display:inline-block; display:inline-block;
} }
.post-footer__icon { .post-meta__icon {
font-size: 20px; font-size: 20px;
padding: 0 2px; padding: 0 2px;
} }
.post-footer__link:hover { .post-meta__link:hover {
background:#4CA0F4; background:#4CA0F4;
border-color: #3E82C7; border-color: #3E82C7;
color:#FFFFFF; color:#FFFFFF;
@ -194,7 +194,7 @@ html{
cursor:pointer; cursor:pointer;
} }
.post-footer__button { .post-meta__button {
color: #4A4A4A; color: #4A4A4A;
margin-right:10px; margin-right:10px;
position:relative; position:relative;
@ -202,6 +202,10 @@ html{
white-space:nowrap; white-space:nowrap;
} }
.post-footer {
padding: 1em 0;
}
.post-content blockquote { .post-content blockquote {
font-size: 1.1em; font-size: 1.1em;
margin:40px auto; margin:40px auto;

View File

@ -1,9 +1,11 @@
.post-content a { .post-content a,
.post-footer a {
color:#0A539A; color:#0A539A;
text-decoration: underline; text-decoration: underline;
} }
.post-content a:hover { .post-content a:hover,
.post-footer a:hover {
background:#0A539A; background:#0A539A;
color:#FFFFFF; color:#FFFFFF;
text-decoration:none; text-decoration:none;

View File

@ -162,7 +162,7 @@ html {
margin-bottom: 1.5em; margin-bottom: 1.5em;
display: inline-block display: inline-block
} }
.post-footer__link { .post-meta__link {
border: 1px solid #bfbfbf; border: 1px solid #bfbfbf;
padding: 1px 4px; padding: 1px 4px;
margin: 2px 0; margin: 2px 0;
@ -173,24 +173,27 @@ html {
position: relative; position: relative;
display: inline-block display: inline-block
} }
.post-footer__icon { .post-meta__icon {
font-size: 20px; font-size: 20px;
padding: 0 2px padding: 0 2px
} }
.post-footer__link:hover { .post-meta__link:hover {
background: #4ca0f4; background: #4ca0f4;
border-color: #3e82c7; border-color: #3e82c7;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer cursor: pointer
} }
.post-footer__button { .post-meta__button {
color: #4a4a4a; color: #4a4a4a;
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
display: inline-block; display: inline-block;
white-space: nowrap white-space: nowrap
} }
.post-footer {
padding: 1em 0
}
.post-content blockquote { .post-content blockquote {
font-size: 1.1em; font-size: 1.1em;
margin: 40px auto; margin: 40px auto;
@ -640,11 +643,13 @@ all and (max-width:710px) {
.chroma .w { .chroma .w {
color: #bbb color: #bbb
} }
.post-content a { .post-content a,
.post-footer a {
color: #0a539a; color: #0a539a;
text-decoration: underline text-decoration: underline
} }
.post-content a:hover { .post-content a:hover,
.post-footer a:hover {
background: #0a539a; background: #0a539a;
color: #fff; color: #fff;
text-decoration: none text-decoration: none

File diff suppressed because one or more lines are too long