Message ID | 20231220031439.495-2-vapier@gentoo.org |
---|---|
State | New |
Headers | show |
Series | [htdocs,1/2] add meta viewport settings for mobile devices | expand |
On 12/19/23 22:14, Mike Frysinger wrote: > The current padding & margins work well when on a larger screen -- > it provides a very comfortable view. However, on smaller screens, > especially on mobile devices, the large amount of whitespace ends > up crowding out meaningful content leading to a lot of scrolling. > > Scale down the spacing on smaller screens to maximize content. > The focus is on removing "extra" padding around elements rather > then padding among the content itself (e.g., line height and > paragraph breaks). Now reading on a phone is very comfortable. Agreed. LGTM. Applied. Reviewed-by: Carlos O'Donell <carlos@redhat.com> > --- > glibc.css | 28 ++++++++++++++++++++++++++++ > 1 file changed, 28 insertions(+) > > diff --git a/glibc.css b/glibc.css > index 04f8f243fce5..40f6d6e2f8d7 100644 > --- a/glibc.css > +++ b/glibc.css > @@ -146,3 +146,31 @@ pre.keys { > background:#eee; > width:80%; > } > + > +/* This is ~768px with 16pt font. */ > +@media only screen and (max-width: 50em) { > + body { > + margin: 0; > + } > + > + #banner, #footer, #centercontent, #menucontent { > + margin-left: 0; > + margin-right: 0; > + } > + > + #banner { > + min-height: 1em; > + } > + > + #centercontent { > + padding: 0; > + } > + > + #menucontent { > + padding: 5px; > + } > + > + #banner h1 { > + font-size: 1.3em; > + } > +}
diff --git a/glibc.css b/glibc.css index 04f8f243fce5..40f6d6e2f8d7 100644 --- a/glibc.css +++ b/glibc.css @@ -146,3 +146,31 @@ pre.keys { background:#eee; width:80%; } + +/* This is ~768px with 16pt font. */ +@media only screen and (max-width: 50em) { + body { + margin: 0; + } + + #banner, #footer, #centercontent, #menucontent { + margin-left: 0; + margin-right: 0; + } + + #banner { + min-height: 1em; + } + + #centercontent { + padding: 0; + } + + #menucontent { + padding: 5px; + } + + #banner h1 { + font-size: 1.3em; + } +}