Format Scss

src/styles/app.scss

@@ -1,19 +1,19 @@
-@import 'tachyons-ext';
+@import "tachyons-ext";
 
-$body-font: 'Fira Sans', Helvetica, Arial, sans-serif;
-$header-font: 'Alfa Slab One', serif;
+$body-font: "Fira Sans", Helvetica, Arial, sans-serif;
+$header-font: "Alfa Slab One", serif;
 
-$gray: #454C52;
-$red: #C14566;
+$gray: #454c52;
+$red: #c14566;
 $green: #398277;
-$purple: #403D58;
-$yellow: #FFD45E;
+$purple: #403d58;
+$yellow: #ffd45e;
 $border-radius: 4px;
-$link-color: #1EAEDB;
+$link-color: #1eaedb;
 $footer-gray: #303030;
 
 html {
-  font-size: 62.5%
+  font-size: 62.5%;
 }
 
 @media screen and (min-width: 30em) {
@@ -33,7 +33,7 @@ body {
   display: flex;
   flex-direction: column;
   & > #main-content {
-      flex: 1;
+    flex: 1;
   }
 }
 
@@ -43,12 +43,12 @@ body {
 }
 
 code {
-  padding: .2rem .5rem;
-  margin: 0 .2rem;
+  padding: 0.2rem 0.5rem;
+  margin: 0 0.2rem;
   font-size: 90%;
   white-space: nowrap;
-  background: #F1F1F1;
-  border: 1px solid #E1E1E1;
+  background: #f1f1f1;
+  border: 1px solid #e1e1e1;
   border-radius: 4px;
   overflow: auto;
 }
@@ -61,7 +61,7 @@ pre > code {
 @mixin code-highlight-white {
   color: white;
   background-color: rgba(black, 0.3);
-  border: 1px solid #E1E1E1;
+  border: 1px solid #e1e1e1;
   border-radius: $border-radius;
 }
 
@@ -80,15 +80,16 @@ button {
   padding: 8px 30px;
   text-align: center;
   font-weight: 600;
-  letter-spacing: .1rem;
+  letter-spacing: 0.1rem;
   text-transform: uppercase;
   text-decoration: none;
   border-radius: 4px;
   border: 1px solid;
   cursor: pointer;
   box-sizing: border-box;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     outline: 0;
   }
 }
@@ -109,7 +110,8 @@ code.code-header {
   margin: 0 0 3px 0;
 }
 
-header h1, section h2 {
+header h1,
+section h2 {
   z-index: 999999;
   position: relative;
   letter-spacing: 1px;
@@ -137,7 +139,8 @@ section h3 {
   line-height: 1.3;
 }
 
-section p, code {
+section p,
+code {
   line-height: 1.6;
 }
 
@@ -151,7 +154,8 @@ header .button.button-download {
   font-size: 2.25rem;
   margin-top: 20px;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     border-color: black;
   }
 }
@@ -181,8 +185,8 @@ section {
   }
 
   h2 {
-      font-family: $body-font;
-      font-weight: 800;
+    font-family: $body-font;
+    font-weight: 800;
   }
 
   h3 {
@@ -265,7 +269,8 @@ a.brand {
     border-color: $purple;
     color: white;
     text-decoration: none;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       border-color: white;
     }
   }
@@ -289,7 +294,8 @@ a.brand {
     border-color: $purple;
     color: white;
     text-decoration: none;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       border-color: white;
     }
   }
@@ -299,7 +305,7 @@ a.brand {
 }
 
 .white {
-   color: black;
+  color: black;
   .highlight {
     background-color: $yellow;
   }
@@ -312,7 +318,8 @@ a.brand {
     border-color: $yellow;
     color: $gray;
     text-decoration: none;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       border-color: $gray;
     }
   }
@@ -336,7 +343,8 @@ a.brand {
     border-color: $red;
     color: white;
     text-decoration: none;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       border-color: white;
     }
   }
@@ -418,7 +426,7 @@ footer .attribution {
 }
 
 footer .languages {
-  color: $gray
+  color: $gray;
 }
 
 blockquote {
@@ -431,7 +439,7 @@ blockquote {
 }
 
 blockquote::before {
-  content: '“';
+  content: "“";
   color: $gray;
   font-size: 3em;
   position: absolute;
@@ -493,7 +501,8 @@ blockquote::before {
   min-height: 300px;
 }
 
-#share-your-experience h3, #production-domains h3 {
+#share-your-experience h3,
+#production-domains h3 {
   padding-bottom: 20px;
   text-align: center;
 }
@@ -524,7 +533,6 @@ blockquote::before {
   }
 }
 
-
 #rust-trademarks {
   img {
     vertical-align: middle;
@@ -635,8 +643,8 @@ blockquote::before {
   background-color: rgba(white, 0.15);
   border: 1px solid rgba(white, 0.65);
   margin-bottom: 20px;
-  padding: .2rem .5rem;
-  margin: 0 .2rem;
+  padding: 0.2rem 0.5rem;
+  margin: 0 0.2rem;
   border-radius: 4px;
 }
 
@@ -672,15 +680,15 @@ blockquote::before {
   }
 }
 
-  section header {
-    padding: {
-      top: 10px;
-      bottom: 30px;
-    }
-    h2 {
-      font-size: 3rem;
-    }
+section header {
+  padding: {
+    top: 10px;
+    bottom: 30px;
   }
+  h2 {
+    font-size: 3rem;
+  }
+}
 
 .team {
   text-align: center;
@@ -744,10 +752,10 @@ blockquote::before {
 }
 
 #pb4 {
-    padding-bottom: 3.8em;
+  padding-bottom: 3.8em;
 }
 
 .max-height-5rem {
-    /* Tachyons is missing this class */
-    max-height: 5rem;
+  /* Tachyons is missing this class */
+  max-height: 5rem;
 }