feat(aio): terminal code styling and code mixin

aio/src/styles/1-layouts/_content-layout.scss

@@ -21,4 +21,12 @@
 
 .sidenav-content button {
   min-width: 50px;
+}
+
+.l-sub-section {
+  color: $blue;
+  margin: 0px 0px 10px 0px;
+  padding: 10px;
+  background: $offwhite;
+  border-left: 4px solid $blue;
 }

aio/src/styles/2-modules/_code.scss

@@ -1,13 +1,14 @@
 .code-example {
-    background-color: $backgroundgray;
-    border-radius: 5px;
+    @include codeblock($backgroundgray);
     color: $darkgray;
-    padding: 20px;
-    margin: 24px auto;
-    border: 0.5px solid $lightgray;
 }
 
-.code-example pre {
+.code-shell code {
+    @include codeblock($darkgray);
+    color: $codegreen;
+}
+
+.code-example pre, code-example pre {
     margin: 0px;
     padding: 0px;
     white-space: pre-wrap;

aio/src/styles/_constants.scss

@@ -14,6 +14,7 @@ $lightgray: #DBDBDB;
 $mediumgray: #7E7E7E;
 $darkgray: #333;
 $black: #0A1014;
+$codegreen: #17ff0b;
 
 // GRADIENTS
 $bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);

aio/src/styles/mixins.scss

@@ -6,4 +6,12 @@
   transform: rotate($degrees);
   transition: transform 150ms;
   transition-timing-function: ease-in-out;
+}
+
+@mixin codeblock($bgcolor) {
+    background-color: $bgcolor;
+    border-radius: 5px;
+    padding: 20px;
+    margin: 24px auto;
+    border: 0.5px solid $lightgray;
 }