Style src blocks.

default_environment/stylesheet/main.css

@@ -1,15 +1,20 @@
 :root {
+    --unused-1: #6ccff6;
     --main-max-width: 800px;
     --site-background-color: #0a0a0a;
     --site-text-color: #fffffc;
     --header-divider-color: #6a687a;
-    --unused-1: #6ccff6;
-    --unused-2: #84828f;
+
+    --src-block-background-color: #141414;
+    --src-block-border-color: #84828f;
+    --src-block-language-color: #0a0a0a;
+    --src-block-language-background: #84828f;
 }
 
 body {
     color: var(--site-text-color);
     background-color: var(--site-background-color);
+    font-family: source-sans-pro, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', sans-serif;
 
     a:link, a:visited {
         /* TODO: Should I use a different color for links? */
@@ -48,6 +53,28 @@ body {
     p {
         margin: 1rem 0;
     }
+
+    .src_block {
+        background: var(--src-block-background-color);
+        border-radius: 3px;
+        border: 1px solid var(--src-block-border-color);
+        font-size: 1rem;
+        font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+        .src_language {
+            display: inline-block;
+            color: var(--src-block-language-color);
+            background: var(--src-block-language-background);
+            border-radius: 0 0 3px 0;
+            padding: 0.1rem 0.5rem;
+            font-size: 0.8rem;
+            vertical-align: top;
+        }
+
+        .src_body {
+            margin: 0.5rem;
+        }
+    }
 }
 
 /* A stand-alone blog post (not in a blog stream). */

default_environment/templates/html/src_block.dust

@@ -1,9 +1,13 @@
-<table>
-  <tbody>
-    {#.lines}
-      <tr>
-        <td><code>{.}</code></td>
-      </tr>
-    {/.lines}
-  </tbody>
-</table>
+<div class="src_block">
+  <!-- TODO: Get the language from the render context. -->
+  <div class="src_language">text</div>
+  <table class="src_body">
+    <tbody>
+      {#.lines}
+        <tr>
+          <td><code>{.}</code></td>
+        </tr>
+      {/.lines}
+    </tbody>
+  </table>
+</div>