style tweaks

style/shiny/base.css

@@ -12,6 +12,8 @@
       );
 
   --text-col: white;
+  --text-shadow-col: hsl(0, 0%, 0%, 75%);
+  --text-shadow: 2px 2px 3px var(--text-shadow-col);
   --nsfw-sticker-rotate: 15deg;
 
   --focus-box: 0 0 20px hsl(55deg, 60%, 90%, 80%);
@@ -24,6 +26,9 @@
   --shadow: 0 0 3em var(--shadow-col);
   --background: hsla(0, 0%, 0%, 60%);
 
+  --button-bg: hsl(330deg, 40%, 16%, 100%);
+  --button-corner: 0.25em;
+
   font-family: Muller;
   font-size: x-large;
   font-weight: 600;
@@ -53,7 +58,6 @@ h3 { font-size: 110%; }
   border-radius: var(--border-radius);
 
   color: var(--text-col);
-  --text-shadow: 2px 2px 3px hsl(0, 0%, 0%, 75%);
   text-shadow: var(--text-shadow);
 }
 
@@ -145,10 +149,9 @@ figure > img {
 }
 
 .bb-choice label, .bb-links li {
-  --button-bg: hsl(330deg, 40%, 16%, 100%);
   margin-right: 0.5em;
   padding: 0 0.35em;
-  border-radius: 0.25em;
+  border-radius: var(--button-corner);
 
   border: 1px solid var(--text-col);
   background: var(--button-bg);
@@ -167,17 +170,41 @@ figure > img {
 
 summary {
   cursor: pointer;
-}
-
-summary > * {
-  display: inline;
+  position: relative;
 }
 
 summary:focus-within {
   outline: none;
-  color: var(--focus-text);
 }
 
+summary { list-style: none; }
+summary::-webkit-details-marker { display: none; }
+
+summary::after {
+  --fg: var(--text-col);
+  --bg: var(--button-bg);
+
+  background: var(--bg);
+  color: var(--fg);
+  text-shadow: none;
+
+  border: 1px solid var(--fg);
+  border-radius: var(--button-corner);
+
+  position: absolute;
+  right: 0; top: 0;
+  padding: 2px 5px;
+  margin-left: 1ex;
+}
+
+details       summary::after { content: 'show'; }
+details[open] summary::after {
+  content: 'hide';
+  --fg: var(--button-bg);
+  --bg: var(--text-col);
+}
+
+
 dt {
   font-size: 120%;
 }
@@ -198,6 +225,13 @@ dt .btw {
 }
 
 
+p {
+  text-align: justify;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+
 .threecol {
   columns: 3;
   column-gap: 2em;

style/shiny/single.css

@@ -142,10 +142,21 @@
   margin-left: 0.8em;
 }
 
-#info h2, #info ul, #info ol, #info p, #info dl {
+#info .shaped {
+  /* maybe one day... */
+  /* shape-outside: attr(src url); */
+  shape-margin: 1em;
+  filter: drop-shadow(5px 5px 8px #0008);
+}
+
+#info h2, #info ul, #info ol, #info p, #info dl, #info details {
   margin: 0.35em;
 }
 
+#info details > * {
+  margin-left: 0;
+}
+
 #updates dl {
   display: grid;
   grid-template-columns: min-content auto;