diff mbox series

[htdocs,2/2] style: tighten up spacing on smaller devices

Message ID 20231220031439.495-2-vapier@gentoo.org
State New
Headers show
Series [htdocs,1/2] add meta viewport settings for mobile devices | expand

Commit Message

Mike Frysinger Dec. 20, 2023, 3:14 a.m. UTC 
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

Carlos O'Donell Feb. 16, 2024, 7:35 p.m. UTC | #1 
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 mbox series

Patch

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;
+	}
+}