polish status page copy and surface links inside cyan blocks

- merge SLO source link into intro, add monitored sites line
- exclude status embed from fadeUp animation so it stays centered
- underline links inside cyan blocks so they're distinguishable from prose

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: robertDurst

docs/status.html.pm

@@ -2,8 +2,8 @@
 
 ◊(define-meta title "Status")
 
-◊h2{System Status}
+◊cyan{Live SLOs for our projects, defined in ◊link["https://caffeine-lang.run/"]{Caffeine} (◊link["https://github.com/Brickell-Research/slos"]{source}) and rendered by Datadog.}
 
-◊cyan{We dogfood ◊link["https://caffeine-lang.run/"]{Caffeine} on our own infrastructure. The dashboard below is rendered from SLO definitions written in Caffeine and shipped to Datadog.}
+◊small{Monitored: ◊link["https://brickellresearch.org/"]{brickellresearch.org} · ◊link["https://caffeine-lang.run/"]{caffeine-lang.run} · ◊link["https://dawnpass.brickellresearch.org/"]{dawnpass.brickellresearch.org}}
 
-<iframe src="https://p.datadoghq.com/sb/embed/5132f4c8-409d-11ee-9683-da7ad0900002-679fca999eae93e17c4c020056700d2e" title="Dashboard Name" width="800" height="800"></iframe>
+◊datadog-embed["https://p.datadoghq.com/sb/embed/5132f4c8-409d-11ee-9683-da7ad0900002-679fca999eae93e17c4c020056700d2e"]

docs/styles.css

@@ -1,4 +1,8 @@
-* { margin: 0; padding: 0; box-sizing: border-box; }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
 body {
   background-color: #000000;
@@ -10,24 +14,58 @@ body {
   padding: 2rem;
 }
 
-a { color: #00CED1; text-decoration: none; }
-a:hover { text-decoration: underline; }
-a:focus-visible { outline: 2px solid #00CED1; outline-offset: 2px; border-radius: 2px; }
+a {
+  color: #00CED1;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
 
-::selection { background: #FF1493; color: #000000; }
+a:focus-visible {
+  outline: 2px solid #00CED1;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
 
-h1, h2, h3, h4, h5, h6 {
+::selection {
+  background: #FF1493;
+  color: #000000;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: #FF1493;
   font-family: 'JetBrains Mono', monospace;
 }
 
-h1 { font-size: 2em; margin-bottom: 0; }
-h1 a { color: #FF1493; }
-h1 a:hover { text-decoration: none; }
+h1 {
+  font-size: 2em;
+  margin-bottom: 0;
+}
 
-h2 { font-size: 1.4em; margin-top: 1.8rem; margin-bottom: 0.6em; }
+h1 a {
+  color: #FF1493;
+}
 
-header { margin-bottom: 1.2rem; }
+h1 a:hover {
+  text-decoration: none;
+}
+
+h2 {
+  font-size: 1.4em;
+  margin-top: 1.8rem;
+  margin-bottom: 0.6em;
+}
+
+header {
+  margin-bottom: 1.2rem;
+}
 
 .logo {
   float: right;
@@ -43,15 +81,46 @@ header { margin-bottom: 1.2rem; }
 }
 
 
-main p { margin-bottom: 1em; }
+main p {
+  margin-bottom: 1em;
+}
+
+.cyan {
+  color: #00CED1;
+}
+
+.cyan a {
+  text-decoration: underline;
+  text-decoration-color: rgba(0, 206, 209, 0.4);
+  text-underline-offset: 3px;
+}
+
+.cyan a:hover {
+  text-decoration-color: #00CED1;
+}
+
+.pink {
+  color: #FF1493;
+}
 
-.cyan { color: #00CED1; }
-.pink { color: #FF1493; }
-.small { font-size: 0.8em; color: #757f8a; }
-.blurb { font-size: 0.88em; color: #8892a0; }
+.small {
+  font-size: 0.8em;
+  color: #757f8a;
+}
 
-ul { margin-left: 1.5em; margin-bottom: 1em; }
-li { margin-bottom: 0.8em; }
+.blurb {
+  font-size: 0.88em;
+  color: #8892a0;
+}
+
+ul {
+  margin-left: 1.5em;
+  margin-bottom: 1em;
+}
+
+li {
+  margin-bottom: 0.8em;
+}
 
 .project {
   background: #0a0a14;
@@ -69,19 +138,31 @@ li { margin-bottom: 0.8em; }
   border-radius: 8px;
 }
 
-.project h3 { margin-bottom: 0.5rem; }
-.project h3 a { color: #E0FFFF; }
-.project h3 a:hover { color: #00CED1; }
+.project h3 {
+  margin-bottom: 0.5rem;
+}
+
+.project h3 a {
+  color: #E0FFFF;
+}
 
-.project-desc { margin-bottom: 0.8rem; }
+.project h3 a:hover {
+  color: #00CED1;
+}
+
+.project-desc {
+  margin-bottom: 0.8rem;
+}
 
 .project-status {
   font-size: 0.9em;
   color: #8892a0;
   margin-bottom: 0;
 }
 
-.project-status em { color: #00CED1; }
+.project-status em {
+  color: #00CED1;
+}
 
 
 .status-embed {
@@ -99,12 +180,14 @@ li { margin-bottom: 0.8em; }
 .status-embed iframe {
   display: block;
   width: 100%;
-  height: 800px;
+  height: 600px;
   border: 0;
 }
 
 @media (max-width: 600px) {
-  .status-embed iframe { height: 600px; }
+  .status-embed iframe {
+    height: 600px;
+  }
 }
 
 .manifesto-comment {
@@ -127,29 +210,78 @@ li { margin-bottom: 0.8em; }
 
 /* Subtle entrance animation */
 @keyframes fadeUp {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-header, main > div > *, footer {
+header,
+main>div>*:not(.status-embed),
+footer {
   animation: fadeUp 0.4s ease both;
 }
 
-header { animation-delay: 0s; }
-main > div > *:nth-child(1) { animation-delay: 0.04s; }
-main > div > *:nth-child(2) { animation-delay: 0.08s; }
-main > div > *:nth-child(3) { animation-delay: 0.12s; }
-main > div > *:nth-child(4) { animation-delay: 0.16s; }
-main > div > *:nth-child(5) { animation-delay: 0.2s; }
-main > div > *:nth-child(6) { animation-delay: 0.24s; }
-main > div > *:nth-child(7) { animation-delay: 0.28s; }
-main > div > *:nth-child(8) { animation-delay: 0.32s; }
-main > div > *:nth-child(9) { animation-delay: 0.36s; }
-main > div > *:nth-child(10) { animation-delay: 0.4s; }
-footer { animation-delay: 0.45s; }
+header {
+  animation-delay: 0s;
+}
+
+main>div>*:nth-child(1) {
+  animation-delay: 0.04s;
+}
+
+main>div>*:nth-child(2) {
+  animation-delay: 0.08s;
+}
+
+main>div>*:nth-child(3) {
+  animation-delay: 0.12s;
+}
+
+main>div>*:nth-child(4) {
+  animation-delay: 0.16s;
+}
+
+main>div>*:nth-child(5) {
+  animation-delay: 0.2s;
+}
+
+main>div>*:nth-child(6) {
+  animation-delay: 0.24s;
+}
+
+main>div>*:nth-child(7) {
+  animation-delay: 0.28s;
+}
+
+main>div>*:nth-child(8) {
+  animation-delay: 0.32s;
+}
+
+main>div>*:nth-child(9) {
+  animation-delay: 0.36s;
+}
+
+main>div>*:nth-child(10) {
+  animation-delay: 0.4s;
+}
+
+footer {
+  animation-delay: 0.45s;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  header, main > div > *, footer { animation: none; }
+
+  header,
+  main>div>*,
+  footer {
+    animation: none;
+  }
 }
 
 footer {
@@ -164,10 +296,28 @@ footer {
 
 /* Mobile responsive */
 @media (max-width: 600px) {
-  body { padding: 1.2rem; }
-  h1 { font-size: 1.5em; }
-  .logo { width: 80px; }
-  .tagline { font-size: 1.1em; }
-  .project { padding: 1rem; }
-  .project-logo { width: 40px; height: 40px; }
-}
+  body {
+    padding: 1.2rem;
+  }
+
+  h1 {
+    font-size: 1.5em;
+  }
+
+  .logo {
+    width: 80px;
+  }
+
+  .tagline {
+    font-size: 1.1em;
+  }
+
+  .project {
+    padding: 1rem;
+  }
+
+  .project-logo {
+    width: 40px;
+    height: 40px;
+  }
+}