diff --git a/Styles/app.css b/Styles/app.css index 892256d..ba94b70 100644 --- a/Styles/app.css +++ b/Styles/app.css @@ -15,5 +15,6 @@ @import "./theme.css"; @import "./neo.css"; +@import "./touch.css"; @import "./base.css"; @import "./feed.css"; diff --git a/Styles/base.css b/Styles/base.css index a998602..d691320 100644 --- a/Styles/base.css +++ b/Styles/base.css @@ -5,6 +5,12 @@ outline: none; } + /* The page never scrolls itself (the feed and the pages scroll inside), so a pull past its top would only make a phone + reload the app. Only vertically: a sideways overscroll is the trackpad's back gesture. */ + html, body { + overscroll-behavior-y: none; + } + details > summary::-webkit-details-marker { color: var(--color-base-content); } diff --git a/Styles/touch.css b/Styles/touch.css new file mode 100644 index 0000000..8289264 --- /dev/null +++ b/Styles/touch.css @@ -0,0 +1,14 @@ +/* Touch screens. + + A phone's layout uses the width variants (max-md:, md:) at the call site; how big a thing is to a finger uses the + pointer: everything here sits under @media (pointer: coarse), so a mouse matches none of it and desktop keeps + daisyUI's sizes. The rules are plain CSS in Tailwind's utilities layer: like neo.css's @utility overrides they beat + daisyUI's rules, which sit in sublayers of it, and they set daisyUI's own size variables where it has one. */ +@layer utilities { + @media (pointer: coarse) { + /* Field text at 16px: iOS zooms into a focused field whose text is smaller, now that zooming is allowed. */ + :where(.input, .select, .textarea) { + --font-size-min: 1rem; + } + } +} diff --git a/wwwroot/index.html b/wwwroot/index.html index 74dba4b..4354084 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -3,7 +3,7 @@
- +