/* With the following in an HTML ...
* Dave's iPhone SE 3rd Gen (and previous iPhone 6) with Display Zoom enabled reports a width of 320 px. (Without zoom, it would report 750/2=375 px.)
* The original iPhone SE, (iPhone 4 size) would also report 320px.
* iPhone 7 & 8 Plus report the largest, 1080/2.608=414px. iPhone X goes back down, reporting 1125/3=375px.
* Barb's iPad Pro 9.7-inch reports 1536/2=768px. (The smallest reported width of recent iPads).
Experiment with different-width devices by resizing a Firefox window in macOS. (Firefox goes down to width:450px; Safari stops at width:575px.)
Code for phone-first, assuming a minimum width of 320px. Then implement layout changes at various larger widths, wherever it seems appealing.
BMobile.css is designed for 320px. While it scales up nicely for larger phones, at tablet/computer width, it starts to feel too horizonally stretched.
So at 500px, a bordered div.sPage with width:420px gets laid over an app-specific body with a color-gradient background. */
html { font-family:Verdana,sans-serif; } /* Verdana was designed for display readability, and is widely available by default, per Wikipedia */
/* background-color hides default of white showing briefly when swiping beyond top or bottom. margin eliminates a minimal default on iPhone. */
body { background-color:black; margin:0px; }
div.sPage { background-color:black; color:white; }
@media screen and (min-width:500px) {
div.sPage { width:420px; min-height:95vh; margin-left:auto; margin-right:auto; border:0.5em double gray;}
}
/* Suppress decoration of hyperlinks internal to this web app. */
a.sInternal { color:inherit; text-decoration:none; }
a.sExternal { color:yellow; }
img.sApplication { width:100%; height:auto; }
/* Primary section choices. */
div.sHeaderGreen { background-color:green; } /* First section on the page, with border-top provided by div.page or top edge of display. */
div.sHeaderBlue { background-color:blue; } /* First section on the page, with border-top provided by div.page or top edge of display. */
div.sSlogan { border-top-style:solid; border-width:0.1em; text-align:center; font-style:italic; }
div.sSection { border-top-style:solid; border-width:0.1em; } /* Fixed text body content. */
div.sButton { border-top-style:solid; border-width:0.1em; background-color:#303030; } /* Currently identical to div.input, but leave separate since styling is so flakey. */
/* Primary section add-ons. Common symbols: Search=🔎 Menu/Re-Order=☰ Edit=✏ Delete=🗑 */
div.sPadded { padding:0.8em 0.5em 0.8em 0.5em; } /* Add to sections with text; as opposed to images, which can go right to the edge. */
span.sSymbol { font-size:1.2em; } /* HTML editing symbols look best when a little larger. For use inside div.header, div.triplet and div.twin, where text is possible (e.g. 'Done'). */
img.sThumbnail { padding-top:1em; display:block; margin-left:auto; margin-right:auto; }
img.sLandscape { width:80%; height:auto; }
img.sPortrait { width:60%; height:auto; }
.sCenter { text-align:center; } /* Example: A timestamp or subtitle below a thumbnail. */
/* Primary section layout choices. */
div.sHeaderLeft { display:inline-block; width:20%; text-align:left; } /* Include to allow the text to spill over into header.center. */
div.sHeaderCenter { display:inline-block; width:56%; text-align:center; } /* The remainder. */
div.sHeaderRight { display:inline-block; width:20%; text-align:right; } /* Typically a menu symbol. */
div.sLabelLeft { display:inline-block; width:90%; text-align:left; } /* A 28-char label on the left. */
div.sSymbolRight { display:inline-block; width:8%; text-align:right; font-size:1.2em; } /* A symbol on the right. */
span.sSubtitle { font-size:0.8em; } /* Use after both div.label-left + div.symbol-right, or within div.label-center. */
div.sSymbolLeft { display:inline-block; width:8%; text-align:left; font-size:1.2em; } /* A symbol on the left. */
div.sLabelCenter { display:inline-block; width:80%; text-align:center; } /* A 24-char label (including arrow) in the center. */
/* div.sSymbolRight, above, completes this trio. */
div.sTripletLeft { display:inline-block; width:32%; text-align:left; } /* Three equal blocks. */
div.sTripletCenter { display:inline-block; width:32%; text-align:center; } /* Three equal blocks. */
div.sTripletRight { display:inline-block; width:32%; text-align:right; } /* Three equal blocks. */
div.sTwinLeft { display:inline-block; width:49%; text-align:left; } /* Two equal blocks. */
div.sTwinRight { display:inline-block; width:49%; text-align:right; } /* Two equal blocks. */
/* Color-coded text choices. */
.sYellow { color:yellow; }
.sGreen { color:green; }
.sRed { color:red; }
/* Hide most Submit buttons. Use class="sSubmit" onclick="document.getElementById('sSubmitId').click();" on any other element instead. */
.sSubmit { cursor:pointer; }
div.sInput { border-top-style:solid; border-width:0.1em; background-color:#303030; } /* background-color here ensures controls with width:95% appear more like width:100%. */
/* The formatting of all input tags is shaky, and very much platform dependent. The following is a decent compromise. Some flavors of (like submit, and textarea) ignore
class colors and implicit inherit, but honor explicit inherit. Some, like radio, checkbox and textarea, show a smaller verion of the button/box/text without font-size:1em,
which seems to be the max in most cases. */
input { background-color:inherit; color:inherit; font-size:1em; }
input[type=password],input[type=text] { width:95%; } /* More than 95% is too big on iPhone 6. */
input#sSubmitId { display:none; } /* Hide most Submit buttons. Use class="sSubmit" onclick="document.getElementById('sSubmitId').click();" on any other element instead. */
textarea { background-color:inherit; color:inherit; width:99%; height:6em; font-size:1em; }
table { border-style:solid; border-width:0.1em; border-collapse:collapse; text-align:left; } /* text-align applies to both th and td cells. */
th { border-style:solid; border-width:0.1em; padding:0.1em; }
td { border-style:solid; border-width:0.1em; padding:0.1em; }