add missing margin & align code styling

Author: andirotter

src/styles/app.scss

@@ -8,6 +8,7 @@ $red: #C14566;
 $green: #398277;
 $purple: #403D58;
 $yellow: #FFD45E;
+$border-radius: 4px;
 
 html {
   font-size: 62.5%
@@ -41,6 +42,30 @@ code {
   overflow: auto;
 }
 
+@mixin code-space-full-width {
+  padding: 1rem 1.5rem;
+  margin: 0 .2rem;
+}
+
+@mixin code-space-inline {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+}
+
+@mixin code-highlight-white {
+  color: white;
+  background-color: rgba(white, 0.15);
+  border: 1px solid #E1E1E1;
+  border-radius: $border-radius;
+}
+
+@mixin code-highlight-black {
+  color: black;
+  background-color: rgba(69, 76, 82, 0.05);
+  border: 1px solid rgba(69, 76, 82, 0.25);
+  border-radius: $border-radius;
+}
+
 .button,
 button {
   display: block;
@@ -86,6 +111,23 @@ header h1 {
   font-size: 8rem;
   margin-bottom: 0;
   margin-top: 0;
+  line-height: 1.2;
+  font-weight: 300;
+}
+
+header h2 {
+  font-size: 4.2rem;
+  line-height: 1.25;
+  font-weight: 300;  
+}
+
+section h3 {
+  margin-top: 0;
+  line-height: 1.3;
+}
+
+section p, code {
+  line-height: 1.6;
 }
 
 header .button.button-download {
@@ -124,6 +166,11 @@ section {
       letter-spacing: 1px;
     }
   }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 30px;
+  }
 }
 
 ul {
@@ -205,9 +252,8 @@ a.brand {
     }
   }
   code {
-    color: white;
-    background-color: rgba(white, 0.15);
-    border: 1px solid rgba(white, 0.65);
+    @include code-highlight-white();
+    @include code-space-inline();
   }
 }
 
@@ -229,11 +275,10 @@ a.brand {
     &:hover, &:focus {
       border-color: white;
     }
-  }
+  } 
   code {
-    color: white;
-    background-color: rgba(white, 0.15);
-    border: 1px solid rgba(white, 0.65);
+    @include code-highlight-white();
+    @include code-space-full-width();
   }
 }
 
@@ -256,9 +301,8 @@ a.brand {
     }
   }
   code {
-    color: black;
-    background-color: rgba($gray, 0.05);
-    border: 1px solid rgba($gray, 0.25);
+    @include code-highlight-black();
+    @include code-space-inline();
   }
 }
 
@@ -282,9 +326,8 @@ a.brand {
     }
   }
   code {
-    color: white;
-    background-color: rgba(white, 0.15);
-    border: 1px solid rgba(white, 0.65);
+    @include code-highlight-white();
+    @include code-space-inline();
   }
 }