diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss index 1b748b2..b212b18 100644 --- a/assets/scss/_content.scss +++ b/assets/scss/_content.scss @@ -89,6 +89,8 @@ } div.content .meta-tag { + display: flex; + align-items: center; padding: 0 12px; margin: 3px; border-radius: 1px; @@ -96,8 +98,11 @@ div.content .meta-tag { color: lighten($fg-color, 15%); - i { + .icon { + display: flex; font-size: 0.9em; + line-height: 1; + padding-right: 1ch; } &--link { @@ -112,19 +117,23 @@ div.content .meta-tag { .icon { color: $link-color; } - } - i { - font-size: 1em; - &.material-icons-outlined { - vertical-align: text-bottom; + .svg-icon { + color: $fg-color; } } - .icon { + .svg-icon { color: $fg-color; } } + + .svg-icon { + > svg { + height: 1em; + width: 1em; + } + } } .post-meta .meta-tag:not(.meta-tag--link) { @@ -201,9 +210,8 @@ div.content .meta-tag { text-align: center; .meta-tag { + display: inline-flex; font-size: 0.7em; - padding-top: 6px; - padding-bottom: 6px; margin-bottom: 1.6rem; i { diff --git a/assets/scss/_content_dark.scss b/assets/scss/_content_dark.scss index 75f429a..31b342b 100644 --- a/assets/scss/_content_dark.scss +++ b/assets/scss/_content_dark.scss @@ -35,12 +35,18 @@ } .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%); &--link { color: $link-color-dark; + .icon { + color: $tag-color; + } + &:hover { opacity: 1; color: lighten($link-color-dark, 15%); diff --git a/layouts/partials/list.html b/layouts/partials/list.html index 5f3eed2..c2e17b0 100644 --- a/layouts/partials/list.html +++ b/layouts/partials/list.html @@ -6,9 +6,9 @@