From 98cc28af8d4cb81a7070ba0d43e2254eae073d01 Mon Sep 17 00:00:00 2001
From: dweller <dweller@cabin.digital>
Date: Tue, 5 Mar 2024 20:37:03 +0200
Subject: =?UTF-8?q?Fix=20webkit=20(modern=20day=20IE=20courtesy=20of=20App?=
 =?UTF-8?q?le=C2=AE=20Inc.)=20stuff=20like=20broken=20modern=20media=20que?=
 =?UTF-8?q?ries=20and=20no=20style=20for=20dropdowns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO             |  1 -
 index.php        |  2 +-
 search.php       |  2 +-
 style/main.css   |  5 +++++
 style/man.css    | 20 ++------------------
 style/search.css |  4 ++--
 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
     {
-- 
cgit v1.2.3