110 lines
1.9 KiB
CSS
110 lines
1.9 KiB
CSS
@import url(base.css);
|
|
|
|
:root {
|
|
--img-width: 1050px;
|
|
--img-height: 875px;
|
|
}
|
|
|
|
|
|
main {
|
|
max-width: calc(var(--img-width) + 150px);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 250%;
|
|
--around-image: url(media/sparkles.svg);
|
|
}
|
|
|
|
#examples dt {
|
|
position: relative;
|
|
}
|
|
|
|
#examples dt i {
|
|
display: inline-block;
|
|
transform: rotate(-8deg);
|
|
|
|
margin-left: 0.5em;
|
|
padding: 0.25em 0.75em;
|
|
border-radius: 0.3em;
|
|
font-size: 1.2rem;
|
|
font-style: normal;
|
|
|
|
background: hsl(var(--hue), 80%, 80%);
|
|
border: 2px solid hsl(var(--hue), 80%, 35%);
|
|
box-shadow: 8px 6px 5px hsla(0deg, 0%, 0%, 30%);
|
|
color: black;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.closed { --hue: 350deg; }
|
|
.soon { --hue: 55deg; }
|
|
.open { --hue: 110deg; }
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#examples dt i {
|
|
background: hsl(var(--hue), 90%, 30%);
|
|
border: 2px solid hsl(var(--hue), 80%, 15%);
|
|
box-shadow: none;
|
|
color: white;
|
|
}
|
|
.soon { --hue: 50deg; }
|
|
}
|
|
|
|
#examples, #examples > * {
|
|
height: var(--img-height);
|
|
width: var(--img-width);
|
|
}
|
|
|
|
#examples {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#examples > * {
|
|
position: absolute;
|
|
top: 0px; left: 0px;
|
|
margin: 0;
|
|
}
|
|
|
|
#examples {
|
|
width: var(--img-width);
|
|
box-sizing: border-box;
|
|
margin: 1em auto;
|
|
|
|
border: 3px solid var(--glow-col);
|
|
border-radius: 1em;
|
|
}
|
|
|
|
|
|
#examples dl {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
#examples dl > * {
|
|
background: hsla(320deg, 40%, 20%, 60%);
|
|
margin: 0;
|
|
padding: 0.125em 0 0.25em;
|
|
}
|
|
|
|
#examples :is(dt, dd) { text-align: center; }
|
|
|
|
#examples dt { grid-area: 1; align-self: start; font-size: 200%; }
|
|
#examples dd { grid-area: 2; align-self: end; font-size: 300%; }
|
|
|
|
#examples a { font-weight: 700; }
|
|
|
|
#examples dl { pointer-events: none; }
|
|
#examples a { pointer-events: auto; }
|
|
|
|
|
|
@media (prefers-reduced-transparency) {
|
|
#status {
|
|
box-shadow: none;
|
|
}
|
|
|
|
#examples dl > * {
|
|
background: hsl(20deg, 35%, 25%);
|
|
}
|
|
}
|