[htdocs,2/2] style: tighten up spacing on smaller devices
Checks
Commit Message
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.
---
glibc.css | 28 ++++++++++++++++++++++++++++
1 file changed, 28 insertions(+)
Comments
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;
> + }
> +}
@@ -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;
+ }
+}