New design for code blocks

w3c · Feb 17, 2017 · 01ae36a · 01ae36a
1 parent 5423bf7
commit 01ae36a
Showing 1 changed file with 23 additions and 10 deletions.
diff --git a/examples/css/core.css b/examples/css/core.css
@@ -58,22 +58,35 @@ img {
   border: none;
 }
 
-code {
-  font-family: "Courier new", Courier, Monospace;
-  font-weight: bold;
+pre,
+code,
+samp,
+.sourcecode {
+  color: hsl(11, 81%, 43%);
+  font-family: "Menlo", "Consolas", "DejaVu Sans Mono", "Monaco", monospace;
+  font-size: .9em;
+  page-break-inside: avoid;
+  hyphens: none;
+  text-transform: none;
+  white-space: pre-line;
 }
 
-[hidden] {
-  display: none;
+pre code,
+code code {
+  font-size: 100%;
 }
 
+pre,
 .sourcecode {
-  font-family: "Courier new", Courier, Monospace;
-  margin: 0;
+  margin: 1em 0;
   padding: 1em;
-  border: thin solid black;
-  background: #EEEEEE;
-  font-size: 120%;
+  border-radius: .2em;
+  overflow: auto;
+  background: hsl(24, 20%, 95%);
+}
+
+[hidden] {
+  display: none;
 }
 
 #example {