update metadata styling
This commit is contained in:
parent
46f6de852d
commit
d14d1d7215
|
@ -38,6 +38,10 @@
|
||||||
margin-bottom: 0.75em;
|
margin-bottom: 0.75em;
|
||||||
}
|
}
|
||||||
.post-meta {
|
.post-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 1.6rem;
|
width: 1.6rem;
|
||||||
|
@ -46,11 +50,49 @@
|
||||||
}
|
}
|
||||||
.date {
|
.date {
|
||||||
.posted-on {
|
.posted-on {
|
||||||
margin-left: 0;
|
// margin-left: 0;
|
||||||
margin-right: 1.5rem;
|
// margin-right: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.taxonomy {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-tag {
|
||||||
|
padding: 0 12px;
|
||||||
|
margin: 3px;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
border-radius: 1px;
|
||||||
|
background-color: #ededed;
|
||||||
|
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--link {
|
||||||
|
font-size: 0.8em;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -72,39 +114,6 @@
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taxonomy {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
@media only screen and (min-width: 768px) {
|
|
||||||
max-width: 50%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.category,
|
|
||||||
.tag {
|
|
||||||
font-size: 0.8em;
|
|
||||||
padding: 0 12px;
|
|
||||||
margin: 3px;
|
|
||||||
border-radius: 1px;
|
|
||||||
background-color: #ededed;
|
|
||||||
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
color: #555;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar img {
|
.avatar img {
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
{{- range $index, $el := . -}}
|
{{- range $index, $el := . -}}
|
||||||
<a class="category" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-folder"></i>{{ . }}</a>
|
<a class="meta-tag meta-tag--link" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-folder"></i>{{ . }}</a>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
{{- range $index, $el := . -}}
|
{{- range $index, $el := . -}}
|
||||||
<a class="tag" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-tag"></i>{{ . }}</a>
|
<a class="meta-tag meta-tag--link" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-tag"></i>{{ . }}</a>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
|
@ -9,17 +9,15 @@
|
||||||
<h1 class="title">{{ .Title }}</h1>
|
<h1 class="title">{{ .Title }}</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="post-meta">
|
<div class="post-meta">
|
||||||
<div class="date">
|
<div class="meta-tag posted-on">
|
||||||
<span class="posted-on">
|
|
||||||
<i class="fas fa-calendar"></i>
|
<i class="fas fa-calendar"></i>
|
||||||
<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
|
<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
|
||||||
{{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}
|
{{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}
|
||||||
</time>
|
</time>
|
||||||
</span>
|
</div>
|
||||||
<span class="reading-time">
|
<div class="meta-tag reading-time">
|
||||||
<i class="fas fa-clock"></i>
|
<i class="fas fa-clock"></i>
|
||||||
{{ i18n "reading_time" .ReadingTime }}
|
{{ i18n "reading_time" .ReadingTime }}
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="taxonomy">
|
<div class="taxonomy">
|
||||||
{{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}
|
{{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}
|
||||||
|
|
Loading…
Reference in New Issue