css: use @layer and break site.css into a handful of files

1 files changed, 587 insertions, 0 deletions

diff --git a/src/static/css/miscellany.css b/src/static/css/miscellany.css
new file mode 100644
index 00000000..70c7b571
--- /dev/null
+++ b/src/static/css/miscellany.css
@@ -0,0 +1,587 @@
+/* Squares */
+
+@layer layout {
+  .square {
+    position: relative;
+    width: 100%;
+  }
+
+  .square::after {
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+  }
+
+  .square-content {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* Utility spans */
+
+@layer print {
+  .nowrap {
+    white-space: nowrap;
+  }
+
+  .blockwrap, .chunkwrap {
+    display: inline-block;
+  }
+
+  p .current {
+    font-weight: 800;
+  }
+
+  .js-hide,
+  .js-show-once-data,
+  .js-hide-once-data {
+    display: none;
+  }
+}
+
+/* Totally miscellaneous typography */
+
+@layer layout {
+  dl dt {
+    padding-left: 40px;
+  }
+
+  dl dt {
+    /* Heads up, this affects the measurement
+     * for dl dt which are .content-heading!
+     */
+    margin-bottom: 2px;
+  }
+
+  dl dt[id]:not(.content-heading) {
+    --custom-scroll-offset: calc(2.5em - 2px);
+  }
+
+  dl dd {
+    margin-bottom: 1em;
+  }
+
+  dl ul,
+  dl ol {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  li .origin-details {
+    display: block;
+    margin-left: 2ch;
+  }
+
+  li > ul {
+    margin-top: 5px;
+  }
+}
+
+@layer print {
+  center {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  .flash-act-title {
+    display: inline-block;
+    text-decoration: inherit;
+  }
+
+  a .flash-act-title {
+    color: var(--primary-color);
+  }
+
+  .other-group-accent,
+  .rerelease-line {
+    opacity: 0.7;
+    font-style: oblique;
+  }
+
+  .other-group-accent {
+    white-space: nowrap;
+  }
+
+  .other-group-accent a {
+    color: var(--page-primary-color);
+  }
+
+  dt .by, li .by {
+    font-style: oblique;
+  }
+
+  dt .by a, li .by a {
+    display: inline-block;
+  }
+
+  p code {
+    font-size: 0.95em;
+    font-family: "courier new", monospace;
+    font-weight: 800;
+    line-height: 1.1;
+  }
+
+  /* "has-details" means a "has a <details> element" here. */
+  ul > li.has-details {
+    list-style-type: none;
+    margin-left: -17px;
+  }
+
+  li .origin-details {
+    font-size: 0.9em;
+    font-style: oblique;
+  }
+}
+
+/* Ordinary links */
+
+@layer print {
+  a {
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+    text-decoration-style: solid !important;
+  }
+
+  a.current {
+    font-weight: 800;
+  }
+
+  a.series {
+    font-style: oblique;
+  }
+
+  a:not([href]) {
+    cursor: default;
+  }
+
+  a:not([href]):hover {
+    text-decoration: none;
+  }
+}
+
+/* Links with symbols */
+
+@layer print {
+  a .normal-content {
+    color: white;
+  }
+
+  .external-link:not(.from-content) {
+    white-space: nowrap;
+  }
+
+  .external-link.indicate-external::after {
+    content: '\00a0➚';
+    font-style: normal;
+  }
+
+  .external-link.indicate-external:hover::after {
+    color: white;
+  }
+
+  .image-media-link::after {
+    /* Thanks to Jay Freestone for being awesome:
+     * https://www.jayfreestone.com/writing/wrapping-and-inline-pseudo-elements/
+     */
+
+    pointer-events: none;
+    content: '\200b';
+    padding-left: 22px;
+
+    background-color: var(--primary-color);
+
+    /* mask-image is set in content JavaScript,
+     * because we can't identify the correct nor
+     * absolute path to the file from CSS.
+     */
+
+    mask-repeat: no-repeat;
+    mask-position: calc(100% - 2px);
+  }
+
+  .image-media-link:hover::after {
+    background-color: white;
+  }
+}
+
+/* Label elements */
+
+@layer interaction {
+  label:hover span {
+    text-decoration: underline;
+    text-decoration-style: solid;
+  }
+
+  label > input[type=checkbox]:not(:checked) + span {
+    opacity: 0.8;
+  }
+}
+
+/* Progress elements */
+
+@layer material {
+  progress {
+    accent-color: var(--primary-color);
+  }
+}
+
+/* Code blocks */
+
+@layer print {
+  pre.content-code {
+    position: relative;
+    white-space: nowrap;
+
+    max-width: calc(100vw - 180px);
+
+    /* Welcome to heck. */
+    font-family: inherit;
+
+    border: 1px dashed var(--primary-color);
+  }
+
+  pre.content-code span {
+    display: block;
+    overflow-x: scroll;
+    padding: 5px 20px 5px 5px;
+    background: black;
+    color: white;
+  }
+
+  pre.content-code::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: -15px 0 24px -8px black inset;
+    pointer-events: none;
+  }
+
+  pre.content-code code {
+    font-family: "courier new", monospace;
+    font-weight: 800;
+    font-size: 0.8em;
+  }
+}
+
+/* HR elements, of various flavors */
+
+@layer print {
+  #content hr {
+    border: 1px inset #808080;
+  }
+
+  #content hr.split {
+    color: #808080;
+  }
+
+  #content hr.split::before {
+    content: "(split)";
+  }
+
+  #content hr.main-separator {
+    color: var(--dim-color);
+    clear: none;
+    margin-top: -0.25em;
+    margin-bottom: 1.75em;
+  }
+
+  #content hr.main-separator::before {
+    content: "♦";
+    font-size: 1.2em;
+  }
+
+  #content hr.split,
+  #content hr.main-separator {
+    position: relative;
+    overflow: hidden;
+    border: none;
+  }
+
+  #content hr.split::after,
+  #content hr.main-separator::after {
+    display: inline-block;
+    content: "";
+    width: calc(100% - min(calc(8vw - 35px), 45px));
+    position: absolute;
+    top: 50%;
+    margin-left: 10px;
+  }
+
+  #content hr.split::after {
+    border: 1px inset currentColor;
+    margin-top: -2px;
+  }
+
+  #content hr.main-separator::after {
+    border-bottom: 1px solid currentColor;
+  }
+
+  hr.cute,
+  #content hr.cute,
+  .sidebar hr.cute {
+    border-color: var(--primary-color);
+    border-style: none none dotted none;
+  }
+}
+
+/* Images and media embedded right into content, effects */
+
+@layer layout {
+  a.align-center, img.align-center,
+  audio.align-center, video.align-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  a.align-full, a.align-full img,
+  img.align-full, video.align-full {
+    width: 100%;
+  }
+
+  .content-image {
+    display: inline-block !important;
+  }
+}
+
+@layer material {
+  img.pixelate, .pixelate img,
+  video.pixelate, .pixelate video {
+    image-rendering: crisp-edges;
+  }
+}
+
+@layer print {
+  p > img, li > img {
+    max-width: 100%;
+    object-fit: contain;
+    height: auto;
+    vertical-align: text-bottom;
+  }
+}
+
+/* Paths and filenames */
+
+@layer print {
+  span.path, code.filename {
+    font-size: 0.95em;
+    font-family: "courier new", monospace;
+    font-weight: 800;
+    background: #ccc3;
+
+    padding: 0.05em 0.5ch;
+    border: 1px solid #ccce;
+    border-radius: 2px;
+    line-height: 1.4;
+  }
+
+  blockquote :is(span.path, code.filename) {
+    font-size: 0.9em;
+  }
+
+  .image-details code.filename {
+    margin-left: -0.4ch;
+    opacity: 0.8;
+  }
+
+  .image-details code.filename:hover {
+    opacity: 1;
+    cursor: text;
+  }
+
+  span.path i {
+    display: inline-block;
+    font-style: normal;
+  }
+
+  span.path i::before {
+    content: "\0020/\0020";
+    color: #ccc;
+  }
+}
+
+/* Spoiler elements */
+
+@layer print {
+  s.spoiler {
+    display: inline-block;
+    color: transparent;
+    text-decoration: underline;
+    text-decoration-color: white;
+    text-decoration-style: dashed;
+    text-decoration-skip: none;
+    text-decoration-skip-ink: none;
+  }
+
+  s.spoiler::selection {
+    color: black;
+    background: white;
+  }
+
+  s.spoiler::-moz-selection {
+    color: black;
+    background: white;
+  }
+}
+
+/* Summary elements */
+
+@layer print {
+  summary > span b {
+    font-weight: normal;
+    color: var(--primary-color);
+  }
+
+  summary > span:hover {
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-color: var(--primary-color);
+  }
+
+  summary > span:hover a {
+    text-decoration: none !important;
+  }
+
+  summary > span:hover:has(a:hover),
+  summary > span:hover:has(a.nested-hover),
+  summary.has-nested-hover > span {
+    text-decoration: none !important;
+  }
+
+  summary > span:hover:has(a:hover) a,
+  summary > span:hover:has(a.nested-hover) a,
+  summary.has-nested-hover > span a {
+    text-decoration: underline !important;
+  }
+
+  summary.underline-white > span:hover {
+    text-decoration-color: white;
+  }
+
+  /* This link isn't supposed to be underlined *at all*
+   * when the summary (and not link) is hovered, but
+   * for some reason Safari is still applying its colored
+   * and dotted(!) underline. Get around the apparent
+   * effect by just making it white.
+   */
+  summary.underline-white > span:hover a:not(:hover) {
+    text-decoration-color: white;
+  }
+}
+
+/* "Drops" */
+
+@layer layout {
+  .drop {
+    padding: 15px 20px;
+    width: max-content;
+    max-width: min(60vw, 600px);
+  }
+
+  .commentary-drop {
+    margin-top: 25px;
+    margin-bottom: 15px;
+    margin-left: 20px;
+    padding: 10px 20px;
+    max-width: min(60vw, 300px);
+  }
+}
+
+@layer material {
+  .drop {
+    border: 1px dotted var(--primary-color);
+    border-radius: 6px;
+
+    background:
+      linear-gradient(var(--bg-color), var(--bg-color)),
+      linear-gradient(#000000bb, #000000bb),
+      var(--primary-color);
+
+    --drop-shadow: 0 -2px 6px -1px var(--dim-color) inset;
+    box-shadow: var(--drop-shadow);
+  }
+}
+
+@layer interaction {
+  .drop.shiny {
+    cursor: default;
+  }
+
+  @supports (box-shadow: 1px 1px 1px color-mix(in srgb, blue, 40% red)) {
+    @property --drop-shine {
+      syntax: '<percentage>';
+      initial-value: 0%;
+      inherits: false;
+    }
+
+    .drop.shiny {
+      cursor: default;
+      transition: --drop-shine 0.2s;
+    }
+
+    .drop.shiny:hover {
+      --drop-shine: 100%;
+
+      box-shadow:
+        var(--drop-shadow),
+        0 2px 4px -0.5px color-mix(in srgb, var(--primary-color), calc(100% - var(--drop-shine)) transparent);
+    }
+  }
+}
+
+/* Track sections, and similar */
+
+@layer layout {
+  .album-group-list dt,
+  .group-series-list dt {
+    padding-left: 0;
+  }
+
+  .album-group-list dd,
+  .group-series-list dd {
+    margin-left: 0;
+  }
+
+  .album-group-list li {
+    padding-left: 1.5ch;
+    text-indent: -1.5ch;
+  }
+
+  .album-group-list li > * {
+    text-indent: 0;
+  }
+
+  .album-group-list blockquote,
+  .group-series-list blockquote {
+    max-width: 540px;
+    margin-bottom: 9px;
+    margin-top: 3px;
+  }
+
+  .album-group-list blockquote p:first-child,
+  .group-series-list blockquote p:first-child {
+    margin-top: 0;
+  }
+
+  .album-group-list blockquote p:last-child,
+  .group-series-list blockquote p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@layer print {
+  .album-group-list dt,
+  .group-series-list dt {
+    font-style: oblique;
+  }
+}