@@ -93,10 +93,12 @@ .css3 {.mix-symbol(@fa-var-css3-alt, @bright-blue)}
 .apple {.mix-symbol(@fa-var-apple, @gray-a)}
 .windows {.mix-symbol(@fa-var-windows, @bright-blue)}
 .linux {.mix-symbol(@fa-var-linux, #000)}
+.freebsd {.mix-symbol(@fa-var-freebsd, @bright-red)}
 .android {.mix-symbol(@fa-var-android, #A4C739)}
 
 .php {.mix-symbol(@fa-var-php, #777bb3)}
 .java {.mix-symbol(@fa-var-java, #0074BD)}
+.js {.mix-symbol(@fa-var-js, @text-color)}
 .aws {.mix-symbol(@fa-var-aws, #252F3E)}
 .nodejs {.mix-symbol(@fa-var-node-js, #689F63)}
 .erlang {.mix-symbol(@fa-var-erlang, #a90533)}

@@ -44,7 +44,7 @@ font-style: italic;
 }
 
 pre {
-  .mix-box(@light-gray, @dark-gray, @gray-c);
+  .mix-box(transparent, @dark-gray, transparent);
   .mix-responsive;
   white-space: pre-wrap;
   margin: auto;
@@ -124,7 +124,7 @@ font-family: "Font Awesome 5 Brands";
 }
 
 code, span.code {
-  .mix-inline-box(@light-gray, @dark-gray, @light-gray);
+  .mix-inline-box(transparent, @dark-gray, transparent);
   margin: 2px 0px;
   font-family: @monospace-font;
   font-size: 85%;
@@ -158,7 +158,7 @@ }
 
 samp, span.samp {
   font-size: 90%;
-  .mix-inline-box(@light-gray, @dark-gray, @light-gray);
+  .mix-inline-box(transparent, @dark-gray, transparent);
   .mix-hyphens(none);
 }
 

@@ -1,17 +1,20 @@ 
 .mix-box (@bg-color, @fg-color, @border-color) {
-  -moz-background-clip:padding;
-  -webkit-background-clip:padding-box;
-  background-clip:padding-box;
-  -webkit-border-radius:3px;
-  -moz-border-radius:3px;
-  border-radius:3px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip :padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
   margin: 10px auto;
-  padding:2px 4px 0 4px;
-  box-shadow:0 1px 3px rgba(0,0,0,0.1);
+  padding: 2px 4px 0 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   text-shadow: 0 1px 0 rgba(255,255,255,0.8);
-  color:@fg-color;
-  background-color:@bg-color;
+  color: @fg-color;
+  background-color: @bg-color;
   border:1px solid @border-color;
+  code, samp, pre {
+    color: @fg-color;
+  }
   a {
     color: @dark-blue;
   }

@@ -43,7 +43,7 @@ @gray-1: #111;
 
 @gray: @gray-9;
 @light-gray:#f8f8f8;
-@dark-gray: @gray-3;
+@dark-gray: @gray-2;
 @text-color: @gray-3;
 @heading-color: @gray-1;
 

@@ -3304,13 +3304,18 @@ margin: 10px auto;
   padding: 2px 4px 0 4px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-  color: #333;
-  background-color: #f8f8f8;
-  border: 1px solid #ccc;
+  color: #222;
+  background-color: transparent;
+  border: 1px solid transparent;
   white-space: pre-wrap;
   margin: auto;
   font-family: "Source Code Pro", "Monaco", "DejaVu Sans Mono", "Courier New", monospace;
   padding: 0;
+}
+pre code,
+pre samp,
+pre pre {
+  color: #222;
 }
 pre a {
   color: #264c72;
@@ -3401,8 +3406,8 @@ font-family: "Font Awesome 5 Brands";
 }
 code,
 span.code {
-  color: #333;
-  background-color: #f8f8f8;
+  color: #222;
+  background-color: transparent;
   padding: 0 3px 0;
   display: inline-block;
   width: auto;
@@ -3426,7 +3431,7 @@ hyphens: none;
 }
 kbd,
 span.kbd {
-  color: #333;
+  color: #222;
   background-color: #f8f8f8;
   padding: 0 3px 0;
   display: inline-block;
@@ -3474,8 +3479,8 @@ }
 samp,
 span.samp {
   font-size: 90%;
-  color: #333;
-  background-color: #f8f8f8;
+  color: #222;
+  background-color: transparent;
   padding: 0 3px 0;
   display: inline-block;
   width: auto;
@@ -3762,6 +3767,11 @@ background-color: #d8ebf8;
   border: 1px solid #A4D1EF;
   font-size: 90%;
 }
+.note code,
+.note samp,
+.note pre {
+  color: #264c72;
+}
 .note a {
   color: #264c72;
 }
@@ -3802,6 +3812,11 @@ background-color: #d8f5cd;
   border: 1px solid #B0EB99;
   font-size: 90%;
 }
+.tip code,
+.tip samp,
+.tip pre {
+  color: #009926;
+}
 .tip a {
   color: #264c72;
 }
@@ -3842,6 +3857,11 @@ background-color: #FFEBAD;
   border: 1px solid #FFDB70;
   font-size: 90%;
 }
+.warning code,
+.warning samp,
+.warning pre {
+  color: #705400;
+}
 .warning a {
   color: #264c72;
 }
@@ -3882,6 +3902,11 @@ background-color: #f8f8f8;
   border: 1px solid #f8f8f8;
   font-size: 90%;
 }
+.sidebar code,
+.sidebar samp,
+.sidebar pre {
+  color: #555;
+}
 .sidebar a {
   color: #264c72;
 }
@@ -3921,6 +3946,11 @@ color: #555;
   background-color: #f8f8f8;
   border: 1px solid #f8f8f8;
 }
+.output code,
+.output samp,
+.output pre {
+  color: #555;
+}
 .output a {
   color: #264c72;
 }
@@ -3945,6 +3975,11 @@ padding: 0 3px;
   border: 2px solid #999;
   white-space: pre-wrap;
   border-top: 10px solid #999;
+}
+.terminal code,
+.terminal samp,
+.terminal pre {
+  color: #eee;
 }
 .terminal a {
   color: #264c72;
@@ -4002,6 +4037,11 @@ padding: 0 3px;
   border: 2px solid #999;
   white-space: pre-wrap;
   border-top: 10px solid #999;
+}
+.terminal-su code,
+.terminal-su samp,
+.terminal-su pre {
+  color: #eee;
 }
 .terminal-su a {
   color: #264c72;
@@ -4839,6 +4879,14 @@ font-size: 100%;
   color: #000;
   content: "\f17c" " ";
 }
+.freebsd:before {
+  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #CC3300;
+  content: "\f3a4" " ";
+}
 .android:before {
   font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
   font-style: normal;
@@ -4862,6 +4910,14 @@ font-weight: normal;
   font-size: 100%;
   color: #0074BD;
   content: "\f4e4" " ";
+}
+.js:before {
+  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #333;
+  content: "\f3b8" " ";
 }
 .aws:before {
   font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";