@import url('https://cdn.jsdelivr.net/gh/darkwiiplayer/css@main/all.css') layer(framework); @import url('https://cdn.jsdelivr.net/gh/darkwiiplayer/css@main/drop-in.css') layer(framework); blog-post[hidden] { display: none; } .summary { font-size: .8em; font-style: italic; opacity: .6; transition: opacity .3s; tab-stop: 0; } .summary:is(:hover, :focus) { opacity: 1; } blog-post { display: block; } blog-post + blog-post { margin-top: 2em; } @layer post-tags { post-tag > a { position: relative; text-decoration: none; color: inherit; padding: .2em; line-height: 1em; padding-left: 1.2em; transition: all .3s; display: inline-block; } post-tag > a::before, post-tag > a::after { z-index: -1; display: block; content: ''; border-radius: .2em; top: .4em; left: .2em; width: .6em; height: .6em; position: absolute; background: var(--color); transition: all .3s; } post-tag > a:hover { color: white; } post-tag > a:hover::before { display: block; content: ''; border-radius: .2em; top: 0; left: 0; width: 100%; height: 100%; position: absolute; background: var(--color); } post-tag > a:hover::after { background: color-mix(in srgb, var(--color) 60%, white); } }