102 lines
1.7 KiB
CSS
102 lines
1.7 KiB
CSS
@import url(base.css);
|
|
|
|
main {
|
|
max-width: 35em;
|
|
}
|
|
|
|
|
|
#mlem {
|
|
margin: 36px auto -50px;
|
|
position: relative;
|
|
height: 219px;
|
|
width: 420px;
|
|
}
|
|
.mlem-text {
|
|
font-size: 110%;
|
|
position: absolute;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
.niss { bottom: 100%; left: 20px; }
|
|
.nisse { bottom: 85%; right: 0; }
|
|
/* doing this to an animation might be too much
|
|
#mlem picture {
|
|
filter: drop-shadow(0 0 30px var(--glow-col));
|
|
}
|
|
*/
|
|
#mlem img {
|
|
/* firefox doesn't support "pixelated" but does treat "crisp-edges"
|
|
* to mean that */
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
header {
|
|
margin: 0;
|
|
ruby-position: under;
|
|
}
|
|
header h1 {
|
|
margin-top: 0;
|
|
}
|
|
rt {
|
|
font-size: 60%;
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
@media (hover) {
|
|
[title] {
|
|
text-decoration: dotted underline;
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
[title]::after {
|
|
content: url(media/info.svg);
|
|
display: inline-block;
|
|
width: 0.75em; height: 0.75em;
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
@media (hover: none) {
|
|
[title]::after {
|
|
content: attr(title);
|
|
font-size: 75%;
|
|
font-weight: var(--weight);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
|
|
rt { --around-image: url(media/star.svg); }
|
|
h1, h2 { --around-image: url(media/sparkles.svg); }
|
|
|
|
[href='#listen']::before {
|
|
vertical-align: middle;
|
|
height: 1.2em; width: 1.2em;
|
|
}
|
|
|
|
[href='#listen']::before {
|
|
content: url(media/speaker.svg);
|
|
display: inline-block;
|
|
}
|
|
|
|
#links .icon {
|
|
display: block;
|
|
margin: auto;
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
filter: drop-shadow(0 0 10px var(--glow-col));
|
|
}
|
|
|
|
#links ul {
|
|
display: grid;
|
|
grid-column-gap: 1em;
|
|
grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
|
|
|
|
max-width: 85%;
|
|
margin: auto;
|
|
padding: 0;
|
|
font-size: 125%;
|
|
}
|
|
|
|
#links li { list-style: none; }
|