Show search on horizontal mobile screen

* stop using custom-media queries

1 files changed, 14 insertions, 15 deletions

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%;