196 lines
3.2 KiB
CSS
196 lines
3.2 KiB
CSS
@import url(base.css);
|
||
@import url(nsfw-warning.css);
|
||
@import url(pkmn.css);
|
||
|
||
:root {
|
||
--image-width: 1000px;
|
||
}
|
||
|
||
.page {
|
||
max-width: var(--image-width);
|
||
}
|
||
|
||
#mainfig {
|
||
--border-thickness: 2px;
|
||
|
||
margin: 1em auto;
|
||
width: min-content;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: var(--border-thickness) solid var(--text-col);
|
||
border-radius: 1em;
|
||
box-shadow: var(--text-shadow);
|
||
background: hsl(340, 45%, 65%);
|
||
}
|
||
|
||
#mainfig:not(.tiny)::after {
|
||
content: 'click for full (' attr(data-width) ' × ' attr(data-height) ')';
|
||
|
||
position: absolute;
|
||
top: calc(0px - var(--border-thickness));
|
||
right: calc(0px - var(--border-thickness));
|
||
padding: 0.15em 1.25em 0.15em 0.75em;
|
||
|
||
font-size: 70%;
|
||
font-weight: 700;
|
||
|
||
background: hsl(0, 0%, 0%, 50%);
|
||
border: var(--border-thickness) solid var(--text-col);
|
||
border-bottom-left-radius: 0.5em;
|
||
}
|
||
|
||
#mainfig:focus-within {
|
||
box-shadow: var(--focus-box);
|
||
}
|
||
|
||
#mainimg {
|
||
display: block;
|
||
}
|
||
|
||
#cw {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
|
||
background: hsl(330deg, 20%, 36%);
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
#cw-text {
|
||
font-size: 200%;
|
||
font-weight: 700;
|
||
color: hsl(330deg, 100%, 90%);
|
||
text-shadow: none;
|
||
transform: rotate(-45deg);
|
||
|
||
background: hsl(330deg, 40%, 16%);
|
||
padding: 0.25em 0.5em;
|
||
border-radius: 0.5em;
|
||
}
|
||
#cw-text::before {
|
||
content: 'cw: ';
|
||
font-weight: 600;
|
||
}
|
||
|
||
@supports (filter: opacity(65%) blur(50px)) {
|
||
#cw ~ * {
|
||
filter: opacity(65%) blur(50px);
|
||
}
|
||
|
||
#cw {
|
||
/* it doesn't matter if this is unsupported because
|
||
* either way the thing will be hidden */
|
||
mix-blend-mode: multiply;
|
||
}
|
||
}
|
||
|
||
.nsfw-label::after {
|
||
content: url(../18_plus_white.svg);
|
||
display: inline-block;
|
||
height: 0.9em; width: 0.9em;
|
||
vertical-align: -0.07em;
|
||
padding-left: 0.25em;
|
||
}
|
||
|
||
:checked ~ .nsfw-label::after {
|
||
content: url(../18_plus.svg);
|
||
}
|
||
|
||
#date { text-transform: lowercase; }
|
||
|
||
#info {
|
||
max-width: 80%;
|
||
margin: auto;
|
||
}
|
||
|
||
#info {
|
||
display: grid;
|
||
grid-template-columns: min-content auto;
|
||
column-gap: 1em;
|
||
align-items: baseline;
|
||
}
|
||
|
||
/* 'display: contents' removes things from the accessibility tree
|
||
* which is probably only a problem for screen readers?
|
||
*/
|
||
@media not speech {
|
||
.info-section {
|
||
display: contents;
|
||
}
|
||
}
|
||
|
||
#info figure {
|
||
width: min-content;
|
||
margin: 0.25em auto;
|
||
}
|
||
|
||
#info .light-bg {
|
||
background: hsl(0deg, 0%, 100%, 75%);
|
||
padding: 5px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
#info .floating {
|
||
float: right;
|
||
margin-left: 0.8em;
|
||
}
|
||
|
||
#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;
|
||
grid-gap: 0.5em;
|
||
align-items: baseline;
|
||
}
|
||
|
||
#updates dt {
|
||
font-size: 80%;
|
||
font-weight: 700;
|
||
grid-area: auto / 1;
|
||
}
|
||
|
||
#updates dd {
|
||
grid-area: auto / 2;
|
||
}
|
||
|
||
#updates .q {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.updated {
|
||
font-size: 90%;
|
||
font-style: italic;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
margin-top: 1em;
|
||
}
|
||
|
||
@media (pointer: coarse) {
|
||
footer {
|
||
font-size: 150%;
|
||
}
|
||
}
|