2020-07-20 16:40:34 -04:00
|
|
|
@import url(base.css);
|
2020-10-06 16:07:39 -04:00
|
|
|
@import url(nsfw-warning.css);
|
2021-03-12 23:28:43 -05:00
|
|
|
@import url(pkmn.css);
|
2020-07-20 16:40:34 -04:00
|
|
|
|
|
|
|
:root {
|
|
|
|
--image-width: 1000px;
|
|
|
|
}
|
|
|
|
|
2020-10-06 16:07:39 -04:00
|
|
|
.page {
|
2020-07-23 13:59:07 -04:00
|
|
|
max-width: var(--image-width);
|
|
|
|
}
|
|
|
|
|
2020-07-20 16:40:34 -04:00
|
|
|
#mainfig {
|
2020-08-08 19:22:00 -04:00
|
|
|
--border-thickness: 2px;
|
|
|
|
|
2020-07-20 16:40:34 -04:00
|
|
|
margin: 1em auto;
|
|
|
|
width: min-content;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
2020-08-08 19:22:00 -04:00
|
|
|
border: var(--border-thickness) solid var(--text-col);
|
2020-07-20 16:40:34 -04:00
|
|
|
border-radius: 1em;
|
|
|
|
box-shadow: var(--text-shadow);
|
2020-07-24 08:23:12 -04:00
|
|
|
background: hsl(340, 45%, 65%);
|
2020-07-20 16:40:34 -04:00
|
|
|
}
|
|
|
|
|
2020-08-03 17:06:19 -04:00
|
|
|
#mainfig:focus-within {
|
|
|
|
box-shadow: var(--focus-box);
|
|
|
|
}
|
|
|
|
|
2020-07-20 16:40:34 -04:00
|
|
|
#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;
|
2020-08-03 13:38:45 -04:00
|
|
|
|
|
|
|
cursor: pointer;
|
2020-07-20 16:40:34 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
#cw-text {
|
|
|
|
font-size: 200%;
|
2020-09-13 20:37:27 -04:00
|
|
|
font-weight: 700;
|
2020-07-20 16:40:34 -04:00
|
|
|
color: hsl(330deg, 100%, 90%);
|
|
|
|
text-shadow: none;
|
2022-08-16 21:22:13 -04:00
|
|
|
transform: rotate(-15deg);
|
2020-07-20 16:40:34 -04:00
|
|
|
|
|
|
|
background: hsl(330deg, 40%, 16%);
|
|
|
|
padding: 0.25em 0.5em;
|
|
|
|
border-radius: 0.5em;
|
|
|
|
}
|
2020-09-13 20:35:56 -04:00
|
|
|
#cw-text::before {
|
|
|
|
content: 'cw: ';
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
2020-07-20 16:40:34 -04:00
|
|
|
|
2020-08-30 12:45:13 -04:00
|
|
|
@supports (filter: opacity(65%) blur(50px)) {
|
2020-08-30 10:47:25 -04:00
|
|
|
#cw ~ * {
|
2020-08-30 12:45:13 -04:00
|
|
|
filter: opacity(65%) blur(50px);
|
2020-08-30 10:47:25 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
#cw {
|
|
|
|
/* it doesn't matter if this is unsupported because
|
|
|
|
* either way the thing will be hidden */
|
|
|
|
mix-blend-mode: multiply;
|
|
|
|
}
|
2020-07-20 16:40:34 -04:00
|
|
|
}
|
|
|
|
|
2021-08-23 10:38:51 -04:00
|
|
|
/*
|
2020-08-04 12:58:40 -04:00
|
|
|
.nsfw-label::after {
|
2020-07-24 12:40:03 -04:00
|
|
|
content: url(../18_plus_white.svg);
|
|
|
|
display: inline-block;
|
|
|
|
height: 0.9em; width: 0.9em;
|
|
|
|
vertical-align: -0.07em;
|
|
|
|
padding-left: 0.25em;
|
|
|
|
}
|
|
|
|
|
2020-08-04 12:58:40 -04:00
|
|
|
:checked ~ .nsfw-label::after {
|
2020-07-24 12:40:03 -04:00
|
|
|
content: url(../18_plus.svg);
|
|
|
|
}
|
2021-08-23 10:38:51 -04:00
|
|
|
*/
|
2020-07-24 12:40:03 -04:00
|
|
|
|
2020-09-25 17:08:44 -04:00
|
|
|
#date { text-transform: lowercase; }
|
|
|
|
|
2020-08-04 12:26:36 -04:00
|
|
|
#info {
|
|
|
|
max-width: 80%;
|
|
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
|
2021-03-07 18:13:22 -05:00
|
|
|
#info {
|
2020-07-20 16:40:34 -04:00
|
|
|
display: grid;
|
2021-03-07 18:13:22 -05:00
|
|
|
grid-template-columns: min-content auto;
|
|
|
|
column-gap: 1em;
|
2020-07-20 16:40:34 -04:00
|
|
|
align-items: baseline;
|
|
|
|
}
|
|
|
|
|
2021-03-07 18:13:22 -05:00
|
|
|
/* 'display: contents' removes things from the accessibility tree
|
|
|
|
* which is probably only a problem for screen readers?
|
|
|
|
*/
|
|
|
|
@media not speech {
|
|
|
|
.info-section {
|
|
|
|
display: contents;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-28 16:21:56 -04:00
|
|
|
#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;
|
2020-08-28 16:27:09 -04:00
|
|
|
margin-left: 0.8em;
|
2020-08-28 16:21:56 -04:00
|
|
|
}
|
|
|
|
|
2021-06-05 01:34:59 -04:00
|
|
|
#info .floating.left {
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
|
2021-03-12 23:28:22 -05:00
|
|
|
#info .shaped {
|
|
|
|
/* maybe one day... */
|
|
|
|
/* shape-outside: attr(src url); */
|
|
|
|
shape-margin: 1em;
|
2021-05-24 07:04:03 -04:00
|
|
|
margin-right: -1em;
|
2021-03-14 01:40:23 -05:00
|
|
|
filter: drop-shadow(5px 5px 8px #0006);
|
2021-03-12 23:28:22 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
#info h2, #info ul, #info ol, #info p, #info dl, #info details {
|
2021-11-21 05:52:09 -05:00
|
|
|
margin: 0.35em 0;
|
2020-07-20 16:40:34 -04:00
|
|
|
}
|
|
|
|
|
2021-03-12 23:28:22 -05:00
|
|
|
#info details > * {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
|
2020-09-19 01:51:52 -04:00
|
|
|
#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;
|
|
|
|
}
|
|
|
|
|
2020-09-25 17:08:44 -04:00
|
|
|
#updates .q {
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
|
2020-09-19 01:51:52 -04:00
|
|
|
.updated {
|
|
|
|
font-size: 90%;
|
|
|
|
font-style: italic;
|
|
|
|
}
|
|
|
|
|
2020-07-20 16:40:34 -04:00
|
|
|
footer {
|
|
|
|
text-align: center;
|
|
|
|
margin-top: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (pointer: coarse) {
|
2020-07-23 13:59:07 -04:00
|
|
|
footer {
|
|
|
|
font-size: 150%;
|
|
|
|
}
|
2020-07-20 16:40:34 -04:00
|
|
|
}
|
2021-08-23 10:35:36 -04:00
|
|
|
|
|
|
|
|
|
|
|
#alts {
|
|
|
|
margin: 1.5em 0;
|
|
|
|
text-align: center;
|
2021-09-11 11:18:48 -04:00
|
|
|
display: grid;
|
|
|
|
grid-gap: 0.5em;
|
2022-12-26 16:04:57 -05:00
|
|
|
grid-template-columns: minmax(auto, 10em) auto minmax(auto, 10em);
|
2021-09-11 11:18:48 -04:00
|
|
|
}
|
|
|
|
|
2022-12-26 16:04:57 -05:00
|
|
|
#alts.cat :is(h3, ul) { margin: 0; }
|
2021-09-11 11:18:48 -04:00
|
|
|
|
|
|
|
#alts section {
|
|
|
|
display: contents;
|
|
|
|
}
|
2021-08-23 10:35:36 -04:00
|
|
|
|
|
|
|
#alts h3 {
|
|
|
|
font-weight: 600;
|
|
|
|
display: inline;
|
|
|
|
padding-right: 0.5em;
|
2021-09-11 11:18:48 -04:00
|
|
|
text-align: right;
|
2022-12-26 16:04:57 -05:00
|
|
|
grid-area: auto / 1 / auto / auto;
|
2021-09-11 11:18:48 -04:00
|
|
|
}
|
|
|
|
|
2022-12-26 16:04:57 -05:00
|
|
|
#alts ul {
|
2021-09-11 11:18:48 -04:00
|
|
|
display: inline flex;
|
2022-12-26 16:04:57 -05:00
|
|
|
grid-area: auto / 2 / auto / auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cat ul { justify-content: start; }
|
|
|
|
|
|
|
|
#skipAllDiv {
|
|
|
|
align-self: start;
|
|
|
|
justify-content: end;
|
|
|
|
grid-area: 1 / 3 / auto / auto;
|
2021-08-23 10:35:36 -04:00
|
|
|
}
|