.entry-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 -5px 0; --listIndent: 0; > li { display: flex; flex-wrap: wrap; align-items: center; --listItemSpacing: 0 0 5px 0; } &:not([data-label]) { .ct-meta-label { display: none !important; } } } // author .ct-meta-author { &.has-avatar { .ct-meta-icon { display: none !important; } } } .avatar-container { margin-right: 10px; border-radius: 100%; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); } // categories & tags .ct-meta-tags, .ct-meta-categories { margin-top: calc(var(--margin) * -1); > *, &:after { margin-top: var(--margin); } // simple &[data-type="simple"] { --margin: 5px; .ct-meta-element { &:not(:last-child) { a:after { content: ','; margin-right: 3px; } } } } // pill &[data-type="pill"] { --margin: 7px; .ct-meta-element { a { display: flex; align-items: center; height: 25px; padding: 0 8px; color: #fff; border-radius: 3px; background: var(--paletteColor1); &:hover { background: var(--paletteColor2); } } &:not(:last-child) { margin-right: 7px; } } } // underline &[data-type="underline"] { --margin: 10px; .ct-meta-element { &:not(:last-child) { margin-right: 7px; &:after { content: '/'; font-size: 90%; margin-left: 8px; } } a { position: relative; &:before { position: absolute; content: ''; left: 0; bottom: -5px; width: 100%; height: 1px; opacity: 0.5; background: currentColor; transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } &:hover { &:before { opacity: 1; // transform: translate3d(0, -1px, 0); } } } } } } // simple type .entry-meta[data-type="simple"] > li { &:not(:last-child) { margin-right: 10px; &:after { content: '/'; font-size: 90%; margin-left: 10px; } } } // icons type .entry-meta[data-type="icons"] > li { &:not(:last-child) { margin-right: 15px; } .ct-meta-icon { line-height: 0; margin-right: 6px; svg { fill: currentColor; } } }