gallery/style/shiny/single.css
2021-04-16 23:48:55 +02:00

125 lines
1.9 KiB
CSS

@import url(base.css);
:root {
--image-width: 1000px;
}
#mainfig {
margin: 1em auto;
width: min-content;
position: relative;
overflow: hidden;
border: 2px solid white;
border-radius: 1em;
box-shadow: var(--text-shadow);
}
#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;
}
#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 + * img {
filter: blur(50px);
opacity: 65%;
}
.alts input {
display: none;
}
.alts ul, .tags ul, .links ul {
padding: 0;
display: flex;
align-items: flex-start;
}
.alts ul {
justify-content: center;
}
.alts li, .tags li, .links li {
list-style: none;
}
.alts label, .tags li, .links li {
margin-right: 0.5em;
padding: 0 0.35em;
border-radius: 0.25em;
border: 1px solid white;
background: hsl(330deg, 40%, 16%, 80%);
text-shadow: none;
}
.alts :checked + label {
color: hsl(330deg, 40%, 16%, 80%);
background: white;
}
.alts a, .tags a, .links a {
text-decoration: none;
}
.info section {
display: grid;
grid-template-columns: 10% auto;
grid-gap: 2em;
align-items: baseline;
width: calc(var(--image-width) - 10%);
margin: auto;
}
.info h2, .info ul, .info p {
margin: 0.35em;
}
footer {
font-size: 90%;
text-align: center;
margin-top: 1em;
}
@media (pointer: coarse) {
.alts label, .tags li, .links li {
font-size: 200%;
border-width: 2px;
}
}
@media (prefers-reduced-motion: no-preference) {
.alts label {
transition-property: color, background;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}
}