Fix webkit (modern day IE courtesy of Apple® Inc.) stuff like broken modern media queries and no style for dropdowns

6 files changed, 11 insertions, 23 deletions

diff --git a/TODO b/TODO
index 6df7d13..d88b14a 100644
--- a/TODO
+++ b/TODO
@@ -1,6 +1,5 @@
 TODO:  make query options (-s -S) have togglable visibility, since they take a lot of room on mob.
 FIXME: repalce <select> with custom controls so I can style it, leave <select> in <noscript>
-DEBUG: iOS Chrome, media queries didn't hide wide content
 TODO:  decouple PHP from HTML, merge index.pgp and search.php. Just have templates and snippets
        and include those.
 TODO:  change GET query vars to be shorter or switch to a different schema
diff --git a/index.php b/index.php
index d83456b..4f39576 100644
--- a/index.php
+++ b/index.php
@@ -54,7 +54,7 @@
                 <form action="/search.php">
                     <div id="query_wrap">
                         <div    id="query_icon"></div>
-                        <input  id="query" type='search' value='<?php if($action === 'lmmtfy') echo $query;?>' name='query' required autofocus/>
+                        <input  id="query" type='search' value='<?php if($action === 'lmmtfy') echo $query;?>' name='query' autocorrect="off" autocapitalize="none" required autofocus/>
                         <button id="def"   type='submit' value='man' name='action' class="btn-def" aria-hidden="true" tabindex="-1"></button>
                         <span class="query_opt" title="section">-s</span>
                         <select id="sect"  name='section' title="section" autocomplete="off">
diff --git a/search.php b/search.php
index 4d3129b..d24a3b2 100644
--- a/search.php
+++ b/search.php
@@ -48,7 +48,7 @@
                 <nav id="search_pane">
                     <form>
                         <div id="query_wrap">
-                            <input  id="query" type='searcg' value='<?=$query;?>' name='query' required/>
+                            <input  id="query" type='searcg' value='<?=$query;?>' name='query' autocorrect="off" autocapitalize="none" required/>
                             <span class="query_opt" title="section">-s</span>
                             <select id="sect"  name='section' title="section" autocomplete="off">
                                 <option value=""></option>
diff --git a/style/main.css b/style/main.css
index 5b6a064..886dedd 100644
--- a/style/main.css
+++ b/style/main.css
@@ -310,6 +310,11 @@ button, input { all: unset; }
     user-select: none;
 }
 
+@supports (-webkit-touch-callout: none)
+{
+    #sect, #arch { border-bottom: 2px solid var(--border); }
+}
+
 button, input[type=submit]
 {
     color:            var(--btn-fg);
diff --git a/style/man.css b/style/man.css
index a1f6aed..4999be2 100644
--- a/style/man.css
+++ b/style/man.css
@@ -102,17 +102,6 @@
     overflow-wrap: break-word;
 }
 
-/*
-.head
-{
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-*/
-
 table
 {
     display: block;
@@ -191,7 +180,7 @@ pre
     #lmmtfy textarea:hover { box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); }
 }
 
-@media (width <= 800px)
+@media (max-width: 800px)
 {
     .manpage
     {
@@ -203,12 +192,7 @@ pre
     }
 
     #lmmtfy { margin-bottom: 3em; }
-
-    #lmmtfy > div
-    {
-        width: 90%;
-
-    }
+    #lmmtfy > div { width: 90%; }
 }
 
 
diff --git a/style/search.css b/style/search.css
index 291b482..168bb56 100644
--- a/style/search.css
+++ b/style/search.css
@@ -148,12 +148,12 @@
     #man { border-color: transparent; }
 }
 
-@media (width <= 970px)
+@media (max-width: 970px)
 {
     #topnav { display: none; }
 }
 
-@media (width <= 800px)
+@media (max-width: 800px)
 {
     #main > header
     {