commit 67f8544b5b7db1f589d2e9d7d6283b27df690a2b
from: Omar Polo <op@omarpolo.com>
date: Tue Sep 22 09:29:08 2020 UTC

some style modification

(random order)

 - no more monospace for the text, only for code
 - changed the background of the code blocks
 - changed the foreground of the code blocks
 - added the name of the programming language in the code block

commit - a4fbe900237910a1027346b7bd1c3f6ee278a3b3
commit + 67f8544b5b7db1f589d2e9d7d6283b27df690a2b
blob - 74043ffbaf8407c112f3e8c26a21ded8e5637577
blob + 3bbed97007ff990220fde1f62374a296a71632a5
--- resources/css/style.css
+++ resources/css/style.css
@@ -1,3 +1,4 @@
+/* -*- css-indent-offset: 2; -*- */
 @charset "utf-8";
 
 html, body, div, span, applet, object, iframe,
@@ -30,7 +31,6 @@ html, body {
 body {
   background-color: #ffffea;
   color: #383838;
-  font-family: monospace;
   padding: 1rem;
 }
 
@@ -107,26 +107,12 @@ article {
   margin-bottom: 30px;
 }
 
-h2::before {
-  content: "## ";
-}
+h2::before { font-family: monospace; content: "## "; }
+h3::before { font-family: monospace; content: "### "; }
+h4::before { font-family: monospace; content: "#### "; }
+h5::before { font-family: monospace; content: "##### "; }
+h6::before { font-family: monospace; content: "###### "; }
 
-h3::before {
-  content: "### ";
-}
-
-h4::before {
-  content: "#### ";
-}
-
-h5::before {
-  content: "##### ";
-}
-
-h6::before {
-  content: "###### ";
-}
-
 h1 {
   position: relative;
   display: table-cell;
@@ -145,6 +131,7 @@ h1::after, h2.fragment::after {
   bottom: 0px;
   left: 0;
   white-space: nowrap;
+  font-family: monospace;
 }
 
 h2.fragment {
@@ -157,6 +144,7 @@ h2.fragment {
 
 h2.fragment::after {
   content: '-----------------------------------------------------------------';
+  font-family: monospace;
 }
 
 h2.fragment::before {
@@ -250,19 +238,39 @@ ol {
   list-style: decimal;
 }
 
-pre, code {
+code {
   color: #971174;
+  font-family: monospace;
 }
 
 pre {
+  position: relative;
   padding: 20px;
-  overflow-x: auto;
+  overflow: visible;
   border-width: 1px;
   border-color: #999999;
   border-style: solid;
+  border-radius: 3px;
   line-height: 1.4;
+  background-color: #fdf6e3;
 }
 
+pre code {
+  color: #333;
+}
+
+pre code::after {
+  content: attr(class);
+  position: absolute;
+  right: 10px;
+  top: -10px;
+  border: 1px solid #999999;
+  border-radius: 4px;
+  background-color: #e1dbca;
+  padding: 4px;
+  font-family: monospace;
+}
+
 em {
   font-style: italic;
 }
@@ -302,6 +310,8 @@ q:before, q:after {
 img {
   max-width: 100%;
   height: auto;
+  display: block;
+  margin: 1rem auto;
 }
 
 figure figcaption {