Merge pull request #3 from lokesh-coder/develop

Fix blob shape overflow on change

Author: lokesh-coder

README.md

@@ -7,20 +7,22 @@
 
 </h3>
 
-<h4  align="center">Create beautiful blob shapes with minimal code. </h4>
+<h4  align="center">Generate beautiful blob shapes for web and flutter apps. </h4>
 
 &nbsp;
 
 <div class="highlight highlight-source-shell">
 <pre>
-<div align="center"><strong >Blobs App</strong></div>
+<div align="center"><strong >Blobs Generator</strong></div>
 <div align="center"><a align="center" href="https://blobs.app/">https://blobs.app/</a></div>
 </pre>
 </div>
 
 ### Preview
 
-![frame2-iMac](https://user-images.githubusercontent.com/1754676/83411638-46b9ea80-a436-11ea-92b2-60ba4e845003.png)
+![preview](https://user-images.githubusercontent.com/1754676/84493278-20f9d480-acc5-11ea-8667-ee0df8f35442.png)
+
+![preview2](https://user-images.githubusercontent.com/1754676/84492711-3a4e5100-acc4-11ea-942c-37f9cd802fcf.png)
 
 ### Blobs for flutter
 

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "rm -rf build && NODE_ENV=production npm run build:css && webpack ---config ./config/webpack.prod.config.js",
-    "dev": "npm run watch:css && webpack-dev-server --config ./config/webpack.dev.config.js --open",
+    "dev": "npm run watch:css && webpack-dev-server --config ./config/webpack.prod.config.js --open",
     "lint": "./node_modules/.bin/eslint --ext .js,.jsx src/",
     "lint: fix": "./node_modules/.bin/eslint --ext .js,.jsx src/ --fix",
     "build:css": "postcss src/assets/css/styles.css -o src/assets/css/main.css",
@@ -44,6 +44,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.0.1",
     "css-loader": "^3.5.2",
+    "cssnano": "^4.1.10",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "^2.20.2",

postcss.config.js

@@ -1,4 +1,10 @@
 const tailwindcss = require("tailwindcss");
 module.exports = {
-  plugins: [tailwindcss("./tailwind.config.js"), require("autoprefixer")],
+  plugins: [
+    tailwindcss("./tailwind.config.js"),
+    require("autoprefixer"),
+    require("cssnano")({
+      preset: "default",
+    }),
+  ],
 };

src/app.scss

@@ -13,6 +13,7 @@ html body {
 
   #blobSvg {
     max-width: 500px;
+    overflow: visible;
   }
 
   .stroke {