prettier .scss

package.json

@@ -47,7 +47,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md,html,css}\"",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md,html,css,scss}\"",
     "start": "yarn run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean"
@@ -58,7 +58,7 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
+    "*.{js,jsx,ts,tsx,md,html,css,scss}": "prettier --write"
   },
   "repository": {
     "type": "git",

src/components/App/App.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .app {
   position: relative;

src/components/CodeExamples/CodeExamples.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .code-examples-tabs {
   border-top-left-radius: 12px;

src/components/FAQ/FAQ.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .faq {
   display: flex;

src/components/Footer/Footer.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .footer {
   background-color: #171917;

src/components/HomeBuilt/HomeBuilt.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .home-built {
   padding-top: 80px;

src/components/HomeNetwork/HomeNetwork.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .home-network {
   padding: 80px 0;

src/components/HomeSamples/HomeSamples.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .home-samples {
   text-align: center;

src/components/HomeStay/HomeStay.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .home-stay-header {
   h2 {

src/components/HomeTop/HomeTop.scss

@@ -20,13 +20,15 @@
     margin: 0 auto 35px;
   }
 
-  .wordmark, .logo {
+  .wordmark,
+  .logo {
     transform: translateY(40px);
     opacity: 0;
     transition: 1s transform, 1s opacity;
   }
 
-  &.active .wordmark, &.active .logo {
+  &.active .wordmark,
+  &.active .logo {
     transform: none;
     opacity: 1;
   }

src/components/HomeUpload/HomeUpload.scss

@@ -20,8 +20,7 @@
   transition: 0.2s background-color, 0.2s border, 0.2s color;
   background: $white;
   border-radius: 12px;
-  box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15),
-    0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.05);
   padding: 16px;
   opacity: 0;
   transform: translateY(40px);

src/components/LoadingSpinner/LoadingSpinner.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 @-webkit-keyframes spin {
   100% {

src/components/Mailing/Mailing.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .home-stay-form {
   max-width: 342px;
@@ -18,7 +18,7 @@
     }
   }
 
-  input[type='email'] {
+  input[type="email"] {
     border-radius: 4px;
     box-shadow: 0 2px 4px 0 rgba(90, 94, 91, 0.1);
     border: solid 1px #cbd3cd;
@@ -34,7 +34,7 @@
     }
   }
 
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     width: 20px;
     height: 20px;
     border-radius: 3px;
@@ -43,7 +43,7 @@
     display: inline-block;
     vertical-align: middle;
     margin: -2px 8px 0 0;
-    background-image: url('../../images/green-check.svg');
+    background-image: url("../../images/green-check.svg");
     background-repeat: no-repeat;
     background-size: 28px;
     background-position: top -300px center;
@@ -69,7 +69,7 @@
 }
 
 .home-stay-form.light {
-  input[type='email'] {
+  input[type="email"] {
     box-shadow: 0 2px 4px 0 rgba(90, 94, 91, 0.1);
     border-color: $white50;
     color: $white;
@@ -83,7 +83,7 @@
     }
   }
 
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     border-color: $white50;
   }
 

src/components/Sample/Sample.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .sample {
   display: block;

src/components/SocialLink/SocialLink.scss

@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
 
 .social-link {
   display: flex;

src/variables.scss

@@ -31,8 +31,8 @@ $lightGray: #969a97;
 $red: #e65c5c;
 
 // fonts
-$font: 'Haas Grot Text', Helvetica, Arial, Sans-Serif;
-$font2: 'Haas Grot Disp', Helvetica, Arial, Sans-Serif;
+$font: "Haas Grot Text", Helvetica, Arial, Sans-Serif;
+$font2: "Haas Grot Disp", Helvetica, Arial, Sans-Serif;
 
 // Breakpoints
 $tinybp: 374px;