diff --git a/style/shiny/base.css b/style/shiny/base.css index 5466ebd..4cc0f9a 100644 --- a/style/shiny/base.css +++ b/style/shiny/base.css @@ -12,6 +12,8 @@ ); --text-col: white; + --text-shadow-col: hsl(0, 0%, 0%, 75%); + --text-shadow: 2px 2px 3px var(--text-shadow-col); --nsfw-sticker-rotate: 15deg; --focus-box: 0 0 20px hsl(55deg, 60%, 90%, 80%); @@ -24,6 +26,9 @@ --shadow: 0 0 3em var(--shadow-col); --background: hsla(0, 0%, 0%, 60%); + --button-bg: hsl(330deg, 40%, 16%, 100%); + --button-corner: 0.25em; + font-family: Muller; font-size: x-large; font-weight: 600; @@ -53,7 +58,6 @@ h3 { font-size: 110%; } border-radius: var(--border-radius); color: var(--text-col); - --text-shadow: 2px 2px 3px hsl(0, 0%, 0%, 75%); text-shadow: var(--text-shadow); } @@ -145,10 +149,9 @@ figure > img { } .bb-choice label, .bb-links li { - --button-bg: hsl(330deg, 40%, 16%, 100%); margin-right: 0.5em; padding: 0 0.35em; - border-radius: 0.25em; + border-radius: var(--button-corner); border: 1px solid var(--text-col); background: var(--button-bg); @@ -167,17 +170,41 @@ figure > img { summary { cursor: pointer; -} - -summary > * { - display: inline; + position: relative; } summary:focus-within { outline: none; - color: var(--focus-text); } +summary { list-style: none; } +summary::-webkit-details-marker { display: none; } + +summary::after { + --fg: var(--text-col); + --bg: var(--button-bg); + + background: var(--bg); + color: var(--fg); + text-shadow: none; + + border: 1px solid var(--fg); + border-radius: var(--button-corner); + + position: absolute; + right: 0; top: 0; + padding: 2px 5px; + margin-left: 1ex; +} + +details summary::after { content: 'show'; } +details[open] summary::after { + content: 'hide'; + --fg: var(--button-bg); + --bg: var(--text-col); +} + + dt { font-size: 120%; } @@ -198,6 +225,13 @@ dt .btw { } +p { + text-align: justify; + -ms-hyphens: auto; + hyphens: auto; +} + + .threecol { columns: 3; column-gap: 2em; diff --git a/style/shiny/single.css b/style/shiny/single.css index bd5f1e6..3e6560e 100644 --- a/style/shiny/single.css +++ b/style/shiny/single.css @@ -142,10 +142,21 @@ margin-left: 0.8em; } -#info h2, #info ul, #info ol, #info p, #info dl { +#info .shaped { + /* maybe one day... */ + /* shape-outside: attr(src url); */ + shape-margin: 1em; + filter: drop-shadow(5px 5px 8px #0008); +} + +#info h2, #info ul, #info ol, #info p, #info dl, #info details { margin: 0.35em; } +#info details > * { + margin-left: 0; +} + #updates dl { display: grid; grid-template-columns: min-content auto;