Use green and amber to color code and output

CHANGES.md

@@ -1,3 +1,12 @@
+0.9.0 (UNRELEASED)
+------------------
+
+### Changed
+
+- Change code and output colors from blue and green, respectively, to
+  green and amber, respectively.
+
+
 0.8.0 (2021-09-11)
 ------------------
 

index.html

@@ -40,11 +40,11 @@ int main()
 hello, world</samp>
 </pre>
 <p>
-  The command displayed in green above denotes keyboard input entered by
+  SPCSS shows any text in <code>&lt;samp&gt;</code> element in amber
-  a user. SPCSS shows any <code>&lt;kbd&gt;</code> element nested within
+  and any text in <code>&lt;kbd&gt;</code> element in green. This can
-  a <code>&lt;pre&gt;</code> in green in order to highlight keyboard
+  be used to differentiate between the output of a computer program
-  input. For example, the above code example was created with the
+  and the input a user types. For example, the above code example was
-  following HTML code:
+  created with the following HTML code:
 </p>
 <pre>
 <code>&lt;pre&gt;

sp.css

@@ -45,11 +45,13 @@ figcaption {
   font-size: small;
 }
 pre, code, samp, kbd {
-  color: #009;
   font-family: monospace, monospace;
 }
-pre kbd {
+pre, code, kbd {
-  color: #060;
+  color: #050;
+}
+samp {
+  color: #730;
 }
 pre, blockquote {
   background: #eee;
@@ -91,13 +93,14 @@ th, td {
     color: #9cf;
   }
   a:active {
-    color: #faa;
+    color: #f99;
   }
-  pre, code, samp, kbd {
+  pre, code, kbd {
-    color: #6cf;
-  }
-  pre kbd {
     color: #9c6;
+    font-family: monospace, monospace;
+  }
+  samp {
+    color: #db0;
   }
   pre, blockquote {
     background: #000;