use svg icons for taxonomies,date and time icons
This commit is contained in:
parent
f7c750185f
commit
e67b2c24af
|
@ -89,6 +89,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
div.content .meta-tag {
|
div.content .meta-tag {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
|
@ -96,8 +98,11 @@ div.content .meta-tag {
|
||||||
|
|
||||||
color: lighten($fg-color, 15%);
|
color: lighten($fg-color, 15%);
|
||||||
|
|
||||||
i {
|
.icon {
|
||||||
|
display: flex;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
line-height: 1;
|
||||||
|
padding-right: 1ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--link {
|
&--link {
|
||||||
|
@ -112,19 +117,23 @@ div.content .meta-tag {
|
||||||
.icon {
|
.icon {
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
.svg-icon {
|
||||||
font-size: 1em;
|
color: $fg-color;
|
||||||
&.material-icons-outlined {
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.svg-icon {
|
||||||
color: $fg-color;
|
color: $fg-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
> svg {
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-meta .meta-tag:not(.meta-tag--link) {
|
.post-meta .meta-tag:not(.meta-tag--link) {
|
||||||
|
@ -201,9 +210,8 @@ div.content .meta-tag {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.meta-tag {
|
.meta-tag {
|
||||||
|
display: inline-flex;
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
padding-top: 6px;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
margin-bottom: 1.6rem;
|
margin-bottom: 1.6rem;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
|
|
@ -35,12 +35,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-tag {
|
.meta-tag {
|
||||||
color: darken($fg-color-dark, 35%);
|
$tag-color: darken($fg-color-dark, 35%);
|
||||||
|
|
||||||
|
color: $tag-color;
|
||||||
background-color: lighten($bg-color-dark, 5%);
|
background-color: lighten($bg-color-dark, 5%);
|
||||||
|
|
||||||
&--link {
|
&--link {
|
||||||
color: $link-color-dark;
|
color: $link-color-dark;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
color: $tag-color;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: lighten($link-color-dark, 15%);
|
color: lighten($link-color-dark, 15%);
|
||||||
|
|
|
@ -6,9 +6,9 @@
|
||||||
<div class="list-meta">
|
<div class="list-meta">
|
||||||
<span class="meta-tag">
|
<span class="meta-tag">
|
||||||
{{- if eq .Data.Singular "category" -}}
|
{{- if eq .Data.Singular "category" -}}
|
||||||
<i class="icon material-icons-outlined">folder</i>
|
<span class="icon svg-icon">{{ partial "svg/folder.svg" }}</span>
|
||||||
{{- else if eq .Data.Singular "tag" -}}
|
{{- else if eq .Data.Singular "tag" -}}
|
||||||
<i class="icon material-icons-outlined">local_offer</i>
|
<span class="icon svg-icon">{{ partial "svg/tag.svg" }}</span>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- .Data.Term -}}
|
{{- .Data.Term -}}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
|
||||||
|
</svg>
|
||||||
|
|
After Width: | Height: | Size: 303 B |
|
@ -0,0 +1,4 @@
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
|
||||||
|
</svg>
|
||||||
|
|
After Width: | Height: | Size: 266 B |
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 177 B |
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 304 B |
|
@ -1,3 +1,6 @@
|
||||||
{{- range $index, $el := . -}}
|
{{- range $index, $el := . -}}
|
||||||
<a class="meta-tag meta-tag--link" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon material-icons-outlined">folder</i>{{ . }}</a>
|
<a class="meta-tag meta-tag--link" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}">
|
||||||
|
<span class="icon svg-icon">{{ partial "svg/folder.svg" }}</span>
|
||||||
|
{{ . }}
|
||||||
|
</a>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
{{- range $index, $el := . -}}
|
{{- range $index, $el := . -}}
|
||||||
<a class="meta-tag meta-tag--link" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon material-icons-outlined">local_offer</i>{{ . }}</a>
|
<a class="meta-tag meta-tag--link" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">
|
||||||
|
<span class="icon svg-icon">{{ partial "svg/tag.svg" }}</span>
|
||||||
|
{{ . }}
|
||||||
|
</a>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
|
@ -10,13 +10,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="post-meta">
|
<div class="post-meta">
|
||||||
<div class="meta-tag posted-on">
|
<div class="meta-tag posted-on">
|
||||||
<i class="material-icons-outlined">calendar_today</i>
|
<span class="icon svg-icon">{{ partial "svg/calendar.svg" }}</span>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="meta-tag reading-time">
|
<div class="meta-tag reading-time">
|
||||||
<i class="material-icons-outlined">watch_later</i>
|
<span class="icon svg-icon">{{ partial "svg/clock.svg" }}</span>
|
||||||
{{ i18n "reading_time" .ReadingTime }}
|
{{ i18n "reading_time" .ReadingTime }}
|
||||||
</div>
|
</div>
|
||||||
<div class="taxonomy">
|
<div class="taxonomy">
|
||||||
|
|
Loading…
Reference in New Issue