new style

style/shiny/single.css

@@ -0,0 +1,125 @@
+@import url(base.css);
+
+:root {
+  --image-width: 1000px;
+}
+
+#mainfig {
+  margin: 1em auto;
+  width: min-content;
+  position: relative;
+  overflow: hidden;
+  border: 2px solid white;
+  border-radius: 1em;
+  box-shadow: var(--text-shadow);
+}
+
+#mainimg {
+  display: block;
+}
+
+#cw {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+  background: hsl(330deg, 20%, 36%);
+  mix-blend-mode: multiply;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#cw-text {
+  font-size: 200%;
+  font-weight: 600;
+  color: hsl(330deg, 100%, 90%);
+  text-shadow: none;
+  transform: rotate(-45deg);
+
+  background: hsl(330deg, 40%, 16%);
+  padding: 0.25em 0.5em;
+  border-radius: 0.5em;
+}
+
+#cw + * img {
+  filter: blur(50px);
+  opacity: 65%;
+}
+
+
+.alts input {
+  display: none;
+}
+
+.alts ul, .tags ul, .links ul {
+  padding: 0;
+  display: flex;
+  align-items: flex-start;
+}
+
+.alts ul {
+  justify-content: center;
+}
+
+.alts li, .tags li, .links li {
+  list-style: none;
+}
+
+.alts label, .tags li, .links li {
+  margin-right: 0.5em;
+  padding: 0 0.35em;
+  border-radius: 0.25em;
+
+  border: 1px solid white;
+  background: hsl(330deg, 40%, 16%, 80%);
+  text-shadow: none;
+}
+
+.alts :checked + label {
+  color: hsl(330deg, 40%, 16%, 80%);
+  background: white;
+}
+
+.alts a, .tags a, .links a {
+  text-decoration: none;
+}
+
+.info section {
+  display: grid;
+  grid-template-columns: 10% auto;
+  grid-gap: 2em;
+  align-items: baseline;
+  width: calc(var(--image-width) - 10%);
+  margin: auto;
+}
+
+.info h2, .info ul, .info p {
+  margin: 0.35em;
+}
+
+footer {
+  font-size: 90%;
+  text-align: center;
+  margin-top: 1em;
+}
+
+@media (pointer: coarse) {
+  .alts label, .tags li, .links li {
+    font-size: 200%;
+    border-width: 2px;
+  }
+}
+
+
+@media (prefers-reduced-motion: no-preference) {
+  .alts label {
+    transition-property: color, background;
+    transition-duration: 0.25s;
+    transition-timing-function: ease-in-out;
+  }
+}