refactor: improve UI for small screens

1 files changed, 12 insertions, 0 deletions

diff --git a/webpack.config.js b/webpack.config.js
index eafa1ca..1e79e43 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -101,6 +101,18 @@ const loaders = {
       plugins: () =>
         [
           require('postcss-import')(),
+          require('postcss-custom-media')({
+            importFrom: [
+              {
+                customMedia: {
+                  '--breakpoint-not-small': 'screen and (min-width: 30em)',
+                  '--breakpoint-medium':
+                    'screen and (min-width: 30em) and (max-width: 60em)',
+                  '--breakpoint-large': 'screen and (min-width: 60em)'
+                }
+              }
+            ]
+          }),
           require('postcss-nested')(),
           require('autoprefixer')(),
           require('postcss-extend-rule')(),