chore(demo): restyle demo output for the accessible markup

Author: grega

docs/anatomy.html

@@ -39,10 +39,12 @@ <h1>Anatomy of a Friendly Error Message</h1>
               <div class="anatomy__zone-tag">Explain &amp; Suggest - Title &amp; Summary</div>
             </div>
             <div class="anatomy__zone-body">
-              <div class="pfem__title">This variable doesn't exist yet</div>
-              <div class="pfem__summary">Your code uses the variable "<em>firstname</em>", but it hasn't been created
+              <p class="pfem__title">This variable doesn't exist yet</p>
+              <p class="pfem__summary">Your code uses the variable <code class="pfem__var">firstname</code>, but it
+                hasn't been created
                 yet.
-                Check line 2. If you meant to print the text <em>firstname</em>, put it in double quotes.</div>
+                Check <span class="pfem__line">line 2</span>. If you meant to print the text <code
+                  class="pfem__var">firstname</code>, put it in double quotes.</p>
             </div>
           </div>
 
@@ -53,9 +55,10 @@ <h1>Anatomy of a Friendly Error Message</h1>
               <div class="anatomy__zone-tag">Hint &amp; Direct - Why it happened</div>
             </div>
             <div class="anatomy__zone-body">
-              <div class="pfem__why">Without speech marks Python treats <em>firstname</em> as a variable, and this
+              <p class="pfem__why">Without speech marks Python treats <code class="pfem__var">firstname</code> as a
+                variable, and this
                 variable
-                does not exist yet.</div>
+                does not exist yet.</p>
             </div>
           </div>
 
@@ -67,7 +70,7 @@ <h1>Anatomy of a Friendly Error Message</h1>
             </div>
             <div class="anatomy__zone-body">
               <ul class="pfem__steps">
-                <li>If it is meant to be text, put speech marks around <em>firstname</em>.</li>
+                <li>If it is meant to be text, put speech marks around <code class="pfem__var">firstname</code>.</li>
                 <li>If it is meant to be a variable, make it first (for example: <code>firstname = "Jo"</code>).</li>
                 <li>Check spelling and capital letters.</li>
               </ul>
@@ -81,8 +84,11 @@ <h1>Anatomy of a Friendly Error Message</h1>
               <div class="anatomy__zone-tag">Solve - Suggested fix</div>
             </div>
             <div class="anatomy__zone-body">
-              <pre class="pfem__patch">firstname = "Jo"
-print("Hello, " + firstname)</pre>
+              <div class="pfem__patch">
+                <p class="pfem__patch-label">Suggested fix</p>
+                <pre class="pfem__patch-code"><code>firstname = "Jo"
+print("Hello, " + firstname)</code></pre>
+              </div>
             </div>
           </div>
 

docs/styles.css

@@ -101,33 +101,73 @@ h1 {
   color: #5b3f99;
 }
 
+.pfem > :first-child { margin-top: 0; }
+.pfem > :last-child { margin-bottom: 0; }
+
 .pfem__title {
   font-weight: 600;
   color: #1a1a1a;
-  margin-bottom: 1rem;
+  margin: 0 0 1rem;
   line-height: 1.4;
 }
 
 .pfem__summary {
   color: #2c3e50;
-  margin-bottom: 1rem;
+  margin: 0 0 1rem;
   line-height: 1.6;
   font-size: 1rem;
 }
 
 .pfem__why {
   color: #555;
   margin: 1rem 0;
-  padding: 1rem 1rem;
-  padding-left: 1rem;
+  padding: 1rem;
   border-left: 0.5rem solid #3498db;
   background: #f0f7ff;
   border-radius: 0.5rem;
   line-height: 1.6;
 }
 
+/* inline code tokens share a monospace pill; the tint varies by token type */
+.pfem__var,
+.pfem__code,
+.pfem__file {
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 0.9em;
+  padding: 0.08em 0.32em;
+  border-radius: 0.25rem;
+}
+
+/* variable names & the offending code line — purple */
+.pfem__var,
+.pfem__code {
+  background: #efe8ff;
+  color: #5b3f99;
+}
+
+/* file name — teal */
+.pfem__file {
+  background: #e0f2f1;
+  color: #00695c;
+}
+
+/* line-number token — not code, so a proportional pill in a warm amber */
+.pfem__line {
+  font-weight: 600;
+  font-size: 0.9em;
+  background: #fff4de;
+  color: #8a5a00;
+  padding: 0.08em 0.32em;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+}
+
+.pfem__steps {
+  margin: 1rem 0;
+  padding-left: 1.5rem;
+}
+
 .pfem__steps li {
-  margin-left: 1rem;
   margin-bottom: 0.5rem;
   color: #2c3e50;
   line-height: 1.6;
@@ -138,12 +178,27 @@ h1 {
   background: #e8f5e9;
   border: 1px solid #4caf50;
   border-radius: 0.5rem;
-  padding: 1rem 1rem;
+  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+}
+
+.pfem__patch-label {
+  margin: 0 0 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: #2e7d32;
+}
+
+.pfem__patch-code {
+  margin: 0;
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
   font-size: 0.9rem;
   color: #1b5e20;
-  margin: 1rem 0;
   line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-x: auto;
 }
 
 .pfem__details {
@@ -166,6 +221,10 @@ h1 {
   overflow-x: auto;
 }
 
+.pfem__details pre code {
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+}
+
 .demo__error {
   background: #ffebee;
   border: 1px solid #ef5350;