diff --git a/style/shiny/base.css b/style/shiny/base.css index a92136a..6e2fe23 100644 --- a/style/shiny/base.css +++ b/style/shiny/base.css @@ -15,6 +15,7 @@ hsl(155deg, 57%, 62%) ); background: var(--gradient) fixed; + margin: 1em; --nsfw-sticker-rotate: 15deg; } diff --git a/style/shiny/index.css b/style/shiny/index.css index 3150fb3..c1b6005 100644 --- a/style/shiny/index.css +++ b/style/shiny/index.css @@ -33,14 +33,11 @@ header h1::after { @media screen { .nsfw::after { content: url(../18_plus_white.svg); - display: inline-block; - height: 0.8em; - width: 0.8em; + height: 1em; + width: 1em; transform: rotate(var(--nsfw-sticker-rotate)); - vertical-align: top; - opacity: 80%; mix-blend-mode: hard-light; - padding-left: 0.25em; + margin-left: 0.3em; } } @@ -69,7 +66,7 @@ header h1::after { margin: 0; padding: 0; grid-template-columns: 50% 50%; - grid-gap: 1em 0; + grid-gap: 1em 1.5em; align-items: center; justify-content: center; @@ -79,6 +76,10 @@ header h1::after { .list li { list-style: none; text-align: center; + display: grid; + grid-template-columns: auto min-content; + align-items: center; + justify-content: center; } .list a { @@ -96,3 +97,11 @@ main { grid-gap: 1em; } } + +@media not (hover) { + .list a::after { + content: attr(title); + display: block; + font-size: 60%; + } +}