Update npm dependencies. Remove node-sass to avoid 'tar' vulnerability.

package.json

@@ -39,28 +39,27 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.4.3",
-    "@babel/preset-env": "^7.4.3",
-    "babel-jest": "^24.7.1",
-    "dotenv": "^7.0.0",
+    "@babel/core": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "babel-jest": "^24.8.0",
+    "dotenv": "^8.0.0",
     "file-loader": "^3.0.1",
     "https-proxy-agent": "^2.2.1",
-    "jest": "^24.7.1",
-    "netlify-lambda": "^1.4.3",
-    "node-fetch": "^2.3.0",
-    "node-sass": "^4.11.0",
+    "jest": "^24.8.0",
+    "netlify-lambda": "^1.4.7",
+    "node-fetch": "^2.5.0",
     "npm-run-all": "^4.1.5",
     "parcel": "^1.12.3",
     "posthtml-include": "^1.2.0",
-    "super-gigi": "^1.17.1",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0",
+    "sass": "~1.20.1",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.3.1"
   },
   "dependencies": {
     "clipboard": "^2.0.4",
-    "file-type": "^10.10.0",
-    "hint.css": "^2.5.1",
+    "file-type": "^11.0.0",
+    "hint.css": "^2.6.0",
     "nprogress": "^0.2.0",
     "prismjs": "^1.16.0"
   },

src/index.html

@@ -87,7 +87,7 @@ <h2>Why?</h2>
             <section>
                 <h2>Features</h2>
                 <p>List of supported video providers:</p>
-                <div class="providers">
+                <div class="row providers">
                     <div class="provider"><i class="fas fa-check"></i><span>Youtube</span></div>
                     <div class="provider"><i class="fas fa-check"></i><span>Facebook (low-quality)</span></div>
                     <div class="provider"><i class="fas fa-check"></i><span>Dailymotion</span></div>

src/styles/_code.scss

@@ -196,12 +196,12 @@ pre .line-highlight {
 }
 
 pre.language {
-  @extend pre[class*="language-"];
+  @extend pre, [class*=language-];
 }
 
 code.language {
-  @extend code[class*="language-"];
-  @extend code[class*="language"];
+  @extend code, [class*=language-];
+  @extend code, [class*=language];
 }
 
 code {

src/styles/_grid.scss

@@ -1,6 +1,19 @@
 .row {
-  @include grid-row();
+  display: flex;
+  flex: 1 0 auto;
+  flex-wrap: wrap;
   padding: 2em 0;
+
+  @media screen and (min-width: (map-get($breakpoints, "large") + "px")) {
+    margin: 0 -15px;
+  }
+
+  > * {
+    @media screen and (min-width: (map-get($breakpoints, "large") + "px")) {
+      padding: 0 15px;
+    }
+    width: 100%;
+  }
 }
 
 .container {
@@ -9,21 +22,21 @@
   padding: 0.5rem 1.5rem;
 }
 
-@media screen and (min-width: map-get($breakpoints, "large")) {
+@media screen and (min-width: (map-get($breakpoints, "large") + "px")) {
   .container {
     max-width: 960px;
     width: 960px;
   }
 }
 
-@media screen and (min-width: map-get($breakpoints, "xlarge")) {
+@media screen and (min-width: (map-get($breakpoints, "xlarge") + "px")) {
   .container {
     max-width: 1152px;
     width: 1152px;
   }
 }
 
-@media screen and (min-width: map-get($breakpoints, "xxlarge")) {
+@media screen and (min-width: (map-get($breakpoints, "xxlarge") + "px")) {
   .container {
     max-width: 1344px;
     width: 1344px;

src/styles/_homepage.scss

@@ -1,10 +1,17 @@
 .site-app {
+
   &--input {
-    @include grid-column((xxsmall: 1 of 1, large: 2 of 5));
+    @media screen and (min-width: (map-get($breakpoints, "large") + "px")) {
+      width: 40%;
+    }
   }
-
+  
   &--output {
-    @include grid-column((xxsmall: 1 of 1, large: 3 of 5));
+    @media screen and (min-width: (map-get($breakpoints, "large") + "px")) {
+      width: 60%;
+    }
+
+    grid-template-columns: 1fr 5fr;
     .output-frame {
       border-radius: 0px 0px 0.3em 0.3em;
       overflow: hidden;
@@ -32,7 +39,7 @@
       }
     }
 
-    @media screen and (max-width: map-get($breakpoints, "large") - 0.05em) {
+    @media screen and (max-width: ((map-get($breakpoints, "large") - 1) + "px")) {
       .output-frame {
         width: 100vw;
         margin: 0 -1.5em -2.5em;
@@ -89,9 +96,16 @@ form {
 }
 
 .providers {
-  @include grid-row();
   .provider {
-    @include grid-column((xxsmall: 1 of 1, small: 1 of 2, large: 1 of 3, xlarge: 1 of 4));
+    @media screen and (min-width: (map-get($breakpoints, "small") + "px")) {
+      width: (100% / 2);
+    }
+    @media screen and (min-width: (map-get($breakpoints, "large") + "px")) {
+      width: (100% / 3);
+    }
+    @media screen and (min-width: (map-get($breakpoints, "xlarge") + "px")) {
+      width: (100% / 4);
+    }
     cursor: default;
     display: block;
     .fa-check {

src/styles/_variables.scss

@@ -11,3 +11,13 @@ $color-text-dark: #37474f;
 
 $header-background-color: #494949;
 $header-background-color: #42474b;
+
+$breakpoints: (
+  xxsmall: 0,
+  xsmall: 480,
+  small: 640,
+  medium: 720,
+  large: 1024,
+  xlarge: 1280,
+  xxlarge: 1440
+) !default;

src/styles/index.scss

@@ -1,5 +1,3 @@
-// http://objectway.github.io/super-gigi/
-@import "super-gigi/dist/_main";
 @import "nprogress/nprogress";
 @import "hint.css/src/hint";