comm page stuff

comms.css

@@ -6,13 +6,47 @@
 }
 
 
-main { max-width: calc(var(--img-width) + 150px); }
+main {
+  max-width: calc(var(--img-width) + 150px);
+  position: relative;
+}
 
 h1 {
   font-size: 250%;
   --around-image: url(media/sparkles.svg);
 }
 
+#status {
+  position: absolute;
+  top: 1.25em; left: 1em;
+  transform: rotate(-8deg);
+  z-index: 100;
+
+  padding: 0.5em 0.75em;
+  border-radius: 0.3em;
+  font-size: 120%;
+
+  background: hsl(var(--hue), 80%, 80%);
+  border: 2px solid hsl(var(--hue), 80%, 35%);
+  box-shadow: 0 0 20px 5px hsla(var(--hue), 50%, 95%, 40%);
+  color: black;
+  text-shadow: none;
+}
+
+#status.closed { --hue: 350deg; }
+#status.soon   { --hue: 55deg;  }
+#status.open   { --hue: 110deg; }
+
+@media (prefers-color-scheme: dark) {
+  #status {
+    background: hsl(var(--hue), 90%, 30%);
+    border: 2px solid hsl(var(--hue), 80%, 15%);
+    box-shadow: 0 0 20px 5px hsla(var(--hue), 50%, 95%, 10%);
+    color: white;
+  }
+  #status.soon { --hue: 50deg; }
+}
+
 #examples, #examples > * {
   height: var(--img-height);
   width:  var(--img-width);
@@ -38,6 +72,7 @@ h1 {
   border-radius: 1em;
 }
 
+
 #examples dl {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -45,16 +80,16 @@ h1 {
 
 #examples dl > * {
   background: hsla(320deg, 40%, 20%, 60%);
-  font-size: 200%;
-  font-weight: 500;
   margin: 0;
   padding: 0.125em 0 0.25em;
 }
 
-#examples dt { grid-area: 1; align-self: start; }
-#examples dd { grid-area: 2; align-self: end;   }
+#examples :is(dt, dd) { text-align: center; }
 
-#examples a { font-weight: 600; }
+#examples dt { grid-area: 1; align-self: start; font-size: 200%; }
+#examples dd { grid-area: 2; align-self: end;   font-size: 300%; }
+
+#examples a { font-weight: 700; }
 
 #examples dl { pointer-events: none; }
 #examples a  { pointer-events: auto; }
@@ -64,14 +99,91 @@ h1 {
   text-align: left;
 
   background: hsla(45deg, 90%, 98%, 75%);
-  color: black;
+  color: var(--text-col);
+  --text-col: black;
   text-shadow: none;
   font-weight: 400;
+  font-size: 1.1rem;
 }
 
+#terms > details {
+  margin-top: 1em;
+}
+
+#terms :is(h2, h3, h4, h5, h6, b) {
+  font-weight: 600;
+}
+
+#terms a {
+  color: hsl(330deg, 80%, 40%);
+  font-weight: 600;
+}
+
+:is(h2, h3, h4, h5, h6, #aaa) > a {
+  color: inherit;
+  font-weight: inherit;
+}
+
+:is(h2, h3, h4, h5, h6, #aaa) > a:hover::after {
+  content: '§';
+  margin-left: 1em;
+  font-size: 70%;
+  font-weight: 400;
+}
+
+summary {
+  cursor: pointer;
+  display: inline-block;
+}
+
+#more-info > summary {
+  font-weight: 600;
+}
+#more-info[open] > summary {
+  margin-bottom: 0.75em;
+}
+
+summary::after {
+  content: 'show';
+
+  margin-left: 0.5ch;
+  border: 1pt solid var(--text-col);
+  border-radius: 4px;
+  padding: 0 0.25em;
+
+  font-size: 80%;
+  font-weight: 500;
+}
+[open] > summary::after { content: 'hide'; }
+
+ul > li {
+  list-style: '— ';
+}
+
+
 @media (prefers-contrast: high), (prefers-color-scheme: dark) {
   #terms {
     background: hsla(0deg, 0%, 0%, 65%);
-    color: white;
+    --text-col: white;
+  }
+
+  #terms a {
+    color: hsl(330deg, 90%, 85%);
+  }
+
+  :is(h2, h3, h4, h5, h6, #aaa) > a {
+    color: inherit;
+    font-weight: inherit;
+  }
+}
+
+
+@media (prefers-reduced-transparency) {
+  #status {
+    box-shadow: none;
+  }
+
+  #examples dl > * {
+    background: hsl(20deg, 35%, 25%);
   }
 }