Show search on horizontal mobile screen

* stop using custom-media queries

3 files changed, 15 insertions, 19 deletions

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 7584873d..9ff3446e 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -17,6 +17,6 @@
     "selector-id-pattern": null,
     "selector-class-pattern": null,
     "color-function-notation": "legacy",
-    "alpha-values-notation": "number"
+    "alpha-value-notation": "number"
   }
 }
diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index ff22fffe..156a0574 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -1,6 +1,4 @@
 @import url("../../../node_modules/evil-icons/assets/evil-icons.css");
-@custom-media --viewport-desktop (width >=62.5rem);
-@custom-media --viewport-mobile (width < 62.5rem);
 
 :root {
     --main-width: 1000px;
@@ -636,7 +634,7 @@ blockquote {
     background: #EEEEE5;
     width: 150px;
 }
-@media screen and (max-width: 850px) {
+@media screen and (width <= 992px) {
     #newmessage .img,
     #newmessage .tags {
         width: 100%;
@@ -845,7 +843,7 @@ blockquote {
     padding: 20px;
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (width <= 480px) {
     .dialog-opened {
         position: fixed;
         width: 100%;
@@ -986,10 +984,8 @@ article p {
     margin: 6px 0 0 0;
 }
 
-@media (--viewport-mobile) {
-    #sidebar {
-        background: var(--text-background-color);
-    }
+#sidebar {
+    background: var(--text-background-color);
 }
 
 #signup,
@@ -1072,7 +1068,16 @@ input.submit {
     color: red;
 }
 
-@media (--viewport-desktop) {
+@media screen and (width > 480px) {
+    .desktop {
+        display: block;
+    }
+    .mobile {
+        display: none;
+    }
+}
+
+@media screen and (width > 992px) {
     @supports (position: sticky) {
         #column {
             position: sticky;
@@ -1105,12 +1110,6 @@ input.submit {
         #footer {
             padding: 10px;
         }
-        .desktop {
-            display: block;
-        }
-        .mobile {
-            display: none;
-        }
         #content {
             padding-bottom: 12px;
             width: 100%;
diff --git a/webpack.config.js b/webpack.config.js
index e191be0d..87483ead 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -48,9 +48,6 @@ module.exports = () => {
                                 plugins: [
                                     [
                                         'postcss-preset-env',
-                                        {
-                                            'stage': 0
-                                        },
                                         'stylelint',
                                         'autoprefixer',
                                         {