133 lines
2.1 KiB
CSS
133 lines
2.1 KiB
CSS
@import url(base.css);
|
||
|
||
:root {
|
||
--image-width: 1000px;
|
||
}
|
||
|
||
body {
|
||
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::after {
|
||
content: attr(data-width) ' × ' attr(data-height);
|
||
|
||
position: absolute;
|
||
top: calc(0px - var(--border-thickness));
|
||
right: calc(0px - var(--border-thickness));
|
||
padding: 0.15em 0.75em;
|
||
|
||
background: hsl(0, 0%, 0%, 50%);
|
||
border: var(--border-thickness) solid var(--text-col);
|
||
border-bottom-left-radius: 1em;
|
||
}
|
||
|
||
#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%);
|
||
mix-blend-mode: multiply;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
#cw-text {
|
||
font-size: 200%;
|
||
font-weight: 600;
|
||
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 ~ * {
|
||
filter: blur(50px);
|
||
opacity: 65%;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
#info {
|
||
max-width: 80%;
|
||
margin: auto;
|
||
}
|
||
|
||
.info-section {
|
||
display: grid;
|
||
grid-template-columns: 10% auto;
|
||
grid-gap: 2em;
|
||
align-items: baseline;
|
||
}
|
||
|
||
#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 h2, #info ul, #info p, #info dl {
|
||
margin: 0.35em;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
margin-top: 1em;
|
||
}
|
||
|
||
@media (pointer: coarse) {
|
||
footer {
|
||
font-size: 150%;
|
||
}
|
||
}
|