a lot of stylin and a little scriptin

style/18_plus.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.41421" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path clip-rule="evenodd" d="m0 0h32v32h-32z"/></clipPath><metadata/><path d="m0 0h32v32h-32z" fill="none"/><g clip-path="url(#a)"><circle cx="16" cy="16" r="16"/><circle cx="16" cy="16" fill="#e02a33" r="14"/><circle cx="16" cy="16" r="12"/><g fill="#fff" fill-rule="nonzero"><path d="m8.523 12.595-1.975 1.43v-2.418l1.975-1.481h2.23v11.748h-2.23z"/><path d="m16.321 22.061c-.693 0-1.311-.139-1.856-.417s-.974-.678-1.286-1.2-.468-1.124-.468-1.805v-.392c0-.533.125-1.024.375-1.472.249-.449.601-.803 1.055-1.064-.363-.216-.655-.52-.877-.911-.221-.392-.332-.843-.332-1.354v-.306c0-.579.139-1.113.418-1.601.278-.488.672-.877 1.183-1.166.511-.29 1.112-.434 1.805-.434.692 0 1.297.144 1.813.434.516.289.911.678 1.183 1.166.273.488.409 1.022.409 1.601v.306c0 .499-.114.948-.341 1.345s-.516.704-.868.92c.454.272.803.632 1.047 1.081.244.448.366.928.366 1.438v.392c0 .692-.156 1.3-.468 1.822s-.743.922-1.294 1.2c-.55.278-1.172.417-1.864.417zm.017-7.236c.386 0 .692-.128.919-.383s.341-.582.341-.979v-.323c0-.375-.117-.687-.349-.937-.233-.25-.537-.374-.911-.374-.375 0-.679.124-.911.374-.233.25-.349.562-.349.937v.323c0 .409.113.738.34.988.227.249.534.374.92.374zm0 5.346c.442 0 .797-.141 1.064-.425s.4-.664.4-1.141v-.409c0-.454-.133-.823-.4-1.106-.267-.284-.622-.426-1.064-.426-.432 0-.784.142-1.056.426-.272.283-.409.652-.409 1.106v.409c0 .465.131.843.392 1.132.261.29.619.434 1.073.434z"/><path d="m22.834 16.943h-2.073v-1.886h2.073v-2.073h1.886v2.073h2.073v1.886h-2.073v2.073h-1.886z"/></g></g></svg>

style/base.css

@@ -0,0 +1,109 @@
+@import url(../fonts/muller/muller.css);
+
+html {
+  --thumb-size: 200px;
+  --page-size: 1000px;
+
+  --back-dark: hsl(129, 54%, 54%);
+  --back-light: hsl(119, 69%, 69%);
+  --dark-tum: hsl(41, 41%, 79%);
+  --light-tum: hsl(47, 59%, 85%);
+  --lighter-tum: hsl(47, 74%, 89%);
+  --text-hue: 42;
+  --text: hsl(var(--text-hue), 25%, 24%);
+  --text-link: hsl(111, 30%, 42%);
+  --shadow: hsla(42, 25%, 24%, 40%);
+  --bheight: 121px;
+  --bplacement: 60vh;
+
+  background:
+    url(border.png) left 0% bottom calc(var(--bplacement) - var(--bheight))
+      repeat-x fixed,
+    linear-gradient(to top,
+                    transparent var(--bplacement),
+                    var(--back-light) var(--bplacement),
+                    var(--back-dark))
+      fixed,
+    url(spots.png) repeat fixed,
+    linear-gradient(to top,
+                    var(--dark-tum)    0vh,
+                    var(--lighter-tum) var(--bplacement))
+      fixed;
+
+  color: var(--text);
+  font-family: Muller;
+  font-size: 16pt;
+
+  --red: hsla(340, 100%, 70%, 60%);
+  --green: hsla(93, 100%, 63%, 60%);
+  --yellow: hsla(60, 100%, 70%, 60%);
+}
+
+
+body {
+  margin: 2rem auto;
+  padding: 1em 1em 1.5em 1em;
+  border: 5px solid var(--dark-tum);
+  box-shadow: 0px 0px 50px var(--shadow);
+  background: var(--lighter-tum);
+}
+
+
+b { font-weight: 600; }
+b b { font-weight: 900; }
+
+h1, h2, h3 { font-weight: 900; }
+h1 { font-size: 150%; }
+h2 { font-size: 130%; }
+h3 { font-size: 100%; }
+h4 { font-size: 100%; font-weight: 600; }
+
+header {
+  position: relative;
+  text-align: center;
+  margin: 0 0 1em 0;
+  --small: 90%;
+}
+
+header h1 {
+  font-size: 300%;
+  font-weight: 100;
+  margin: 0;
+}
+
+
+a {
+  color: var(--text-link);
+  font-weight: 500;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+ul {
+  padding-left: 1em;
+}
+
+ul > li {
+  list-style: '— ';
+  padding-left: 0;
+}
+
+section + section { margin-top: 1em; }
+section > section + section { margin-top: 0.75em; }
+
+h1[id] a, h2[id] a, h3[id] a, h4[id] a, h5[id] a {
+  color: inherit;
+  font-weight: inherit;
+  text-decoration: none;
+}
+
+h1[id]:hover::after,
+h2[id]:hover::after,
+h3[id]:hover::after,
+h4[id]:hover::after,
+h5[id]:hover::after {
+  content: ' §';
+  opacity: 60%;
+}

style/gallery.css

@@ -0,0 +1,65 @@
+@import url(base.css);
+
+body {
+  max-width: 50em;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--image-size));
+  grid-gap: 1.5em;
+  justify-content: center;
+  justify-items: center;
+  align-items: center;
+
+  --image-size: 200px;
+  --border-thickness: 2px;
+  padding: 0;
+  margin: 0;
+}
+
+.item {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  width: calc(var(--image-size) + 2 * var(--border-thickness));
+  height: calc(var(--image-size) + 2 * var(--border-thickness));
+}
+
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+.item * {
+  transition: all 0.2s ease-in-out;
+}
+
+.item img {
+  border: 2px solid var(--text);
+  box-shadow: 0 0 10px var(--shadow);
+}
+
+.item figcaption {
+  width: calc(100% - 4 * var(--border-thickness));
+  margin: 0;
+  padding: var(--border-thickness);
+
+  position: absolute;
+  left: 0;
+  bottom: 0;
+
+  background: hsl(0, 0%, 100%, 75%);
+  text-shadow: 0 0 2px white;
+  border: 2px solid var(--text);
+}
+
+.item:hover img {
+  filter: contrast(120%);
+}
+
+.item:hover figcaption {
+  opacity: 20%;
+  transform: translate(-5%, 80%) rotateZ(7deg);
+}

style/index.css

@@ -0,0 +1,57 @@
+@import url(base.css);
+
+body {
+  width: 40em;
+}
+
+.gallery-list {
+  display: grid;
+  grid-template-columns: repeat(2, 50%);
+
+  margin: 0;
+  padding: 0;
+
+  font-size: 150%;
+  font-weight: 600;
+}
+
+.gallery-list a {
+  display: block;
+  font-weight: inherit;
+  color: var(--text);
+  padding: 0.5em;
+
+  transition: all 0.25s ease-in-out;
+}
+
+.gallery-list a:hover {
+  transform: scale(110%);
+  text-decoration: none;
+}
+
+.gallery-list li {
+  list-style: none;
+  text-align: center;
+
+  background: var(--green);
+}
+
+.gallery-list li:nth-child(2n) {
+  border-left: 2px solid hsla(0, 0%, 100%, 30%);
+}
+
+.gallery-list li:nth-child(2n+1) {
+  border-right: 2px solid hsla(0, 0%, 100%, 30%);
+}
+
+
+.gallery-list .nsfw {
+  background: var(--red);
+}
+
+.nsfw a:after {
+  content: url(18_plus.png);
+  padding-left: 0.15em;
+  vertical-align: middle;
+  opacity: 75%;
+}

style/single.css

@@ -0,0 +1,141 @@
+@import url(base.css);
+
+body {
+  max-width: calc(var(--page-size) + 200px);
+  position: relative;
+}
+
+.date, .artist {
+  font-weight: 400;
+  position: absolute;
+  top: 0.1em;
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  font-style: oblique;
+}
+.date { right: 0.1em; }
+.artist { left: 0.1em; }
+
+#mainfig {
+  justify-content: center;
+  border: 2px solid var(--text);
+  margin: auto;
+  height: min-content;
+  width: min-content;
+  overflow: hidden;
+  position: relative;
+}
+
+#mainimg {
+  display: block;
+}
+
+#cw {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+  font-size: 250%;
+  font-weight: 900;
+  color: white;
+  background: hsla(var(--text-hue), 35%, 15%, 80%);
+  mix-blend-mode: multiply;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#cw::before {
+  content: 'cw:\A0'; /* nsbp */
+  font-weight: 600;
+}
+
+#cw + * img {
+  filter: blur(50px);
+}
+
+figcaption p {
+  margin: 0;
+}
+
+.info {
+  margin: 1em auto;
+  width: var(--page-size);
+}
+
+.info > section {
+  display: grid;
+  grid-gap: 1em;
+  grid-template-columns: 10em calc(var(--page-size) - 11em);
+  justify-content: center;
+  align-items: baseline;
+  margin: 1em;
+}
+
+.info h2 {
+  font-size: inherit;
+  font-weight: 500;
+  margin: 0;
+  justify-self: end;
+}
+
+.info ul, .alts ul {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.alts ul {
+  justify-content: center;
+}
+
+.alts [type=checkbox], .alts [type=radio] {
+  display: none;
+}
+
+.alts :checked + label {
+  background: var(--yellow);
+  border-color: var(--text);
+}
+
+.alts .nsfw label::after {
+  content: url(18_plus_small.png);
+  vertical-align: middle;
+  padding-left: 0.15em;
+}
+
+.info ul {
+  padding: 0;
+  margin: 0;
+}
+
+.info li, .alts li {
+  list-style: none;
+}
+
+.info li, .alts label {
+  padding: 0 0.5em;
+  margin: 0 0.25em;
+  background: var(--light-tum);
+  border: 1px solid var(--dark-tum);
+  border-radius: 5px;
+}
+
+.info p:first-child {
+  margin-top: 0;
+}
+
+.info p {
+  margin: 0.25em 0;
+}
+
+footer {
+  font-size: 90%;
+  font-style: oblique;
+  text-align: center;
+}