[htdocs] make site a bit better on mobile devices

Message ID 20240109024240.5710-1-vapier@gentoo.org
State New
Headers
Series [htdocs] make site a bit better on mobile devices |

Commit Message

Mike Frysinger Jan. 9, 2024, 2:42 a.m. UTC
  Tighten up spacing on smaller devices so the content is the focus,
and the navbar/topbar don't suck up so much fixed space.
---
 docs.html     |  1 +
 download.html |  1 +
 faq.html      |  1 +
 index.html    |  1 +
 info.html     |  1 +
 mailing.html  |  1 +
 newlib.css    | 31 +++++++++++++++++++++++++++++++
 news.html     |  1 +
 8 files changed, 38 insertions(+)
  

Comments

Jeff Johnston Jan. 9, 2024, 6:19 p.m. UTC | #1
Patch merged.  Thanks.

-- Jeff J.

On Mon, Jan 8, 2024 at 9:43 PM Mike Frysinger <vapier@gentoo.org> wrote:

> Tighten up spacing on smaller devices so the content is the focus,
> and the navbar/topbar don't suck up so much fixed space.
> ---
>  docs.html     |  1 +
>  download.html |  1 +
>  faq.html      |  1 +
>  index.html    |  1 +
>  info.html     |  1 +
>  mailing.html  |  1 +
>  newlib.css    | 31 +++++++++++++++++++++++++++++++
>  news.html     |  1 +
>  8 files changed, 38 insertions(+)
>
> diff --git a/docs.html b/docs.html
> index a7fd3c9644f1..b086b77b9905 100644
> --- a/docs.html
> +++ b/docs.html
> @@ -1,5 +1,6 @@
>  <html>
>  <head>
> +<meta name="viewport" content="width=device-width, initial-scale=1.0">
>  <link rel="stylesheet" href="newlib.css" />
>  </head>
>  <body>
> diff --git a/download.html b/download.html
> index 448ee89644ca..88cb836b3196 100644
> --- a/download.html
> +++ b/download.html
> @@ -1,5 +1,6 @@
>  <html>
>  <head>
> +<meta name="viewport" content="width=device-width, initial-scale=1.0">
>  <link rel="stylesheet" href="newlib.css" />
>  </head>
>  <body>
> diff --git a/faq.html b/faq.html
> index f5855ce0c22d..048166e190ac 100644
> --- a/faq.html
> +++ b/faq.html
> @@ -1,5 +1,6 @@
>  <html>
>  <head>
> +<meta name="viewport" content="width=device-width, initial-scale=1.0">
>  <link rel="stylesheet" href="newlib.css" />
>  </head>
>  <body>
> diff --git a/index.html b/index.html
> index 4bfbd06b2808..4eeb1e85d5ca 100644
> --- a/index.html
> +++ b/index.html
> @@ -2,6 +2,7 @@
>
>         <head>
>                 <title>The Newlib Homepage</title>
> +               <meta name="viewport" content="width=device-width,
> initial-scale=1.0">
>                 <link rel="stylesheet" href="newlib.css" />
>         </head>
>
> diff --git a/info.html b/info.html
> index 057148bdfea8..cb8f93ef04d2 100644
> --- a/info.html
> +++ b/info.html
> @@ -1,5 +1,6 @@
>  <html>
>  <head>
> +<meta name="viewport" content="width=device-width, initial-scale=1.0">
>  <link rel="stylesheet" href="newlib.css" />
>  </head>
>  <body>
> diff --git a/mailing.html b/mailing.html
> index c0c2a92d2ae0..ca860c1ef1c7 100644
> --- a/mailing.html
> +++ b/mailing.html
> @@ -1,5 +1,6 @@
>  <html>
>  <head>
> +<meta name="viewport" content="width=device-width, initial-scale=1.0">
>  <link rel="stylesheet" href="newlib.css" />
>  </head>
>  <body>
> diff --git a/newlib.css b/newlib.css
> index af265d5573df..09d63acedb4a 100644
> --- a/newlib.css
> +++ b/newlib.css
> @@ -69,3 +69,34 @@ body.main {
>    height: 100%;
>    width: 100%;
>  }
> +
> +/* This is ~768px with 16pt font.  */
> +@media only screen and (max-width: 50em) {
> +  .main tr.top {
> +    height: 70px;
> +  }
> +
> +  .main td.left {
> +    width: 100px;
> +  }
> +}
> +
> +/* This is ~480px with 16pt font.  */
> +@media only screen and (max-width: 30em) {
> +  .main td.left {
> +    width: 5%;
> +  }
> +
> +  ul {
> +    padding-left: 1em;
> +  }
> +
> +  dd {
> +    margin-left: 1em;
> +  }
> +
> +  /* How many spaces-per-tab.  */
> +  pre {
> +    tab-size: 4;
> +  }
> +}
> diff --git a/news.html b/news.html
> index d2e51a57a475..a0d8f42c0560 100644
> --- a/news.html
> +++ b/news.html
> @@ -1,5 +1,6 @@
>  <html>
>  <head>
> +<meta name="viewport" content="width=device-width, initial-scale=1.0">
>  <link rel="stylesheet" href="newlib.css" />
>  </head>
>  <body>
> --
> 2.43.0
>
>
  

Patch

diff --git a/docs.html b/docs.html
index a7fd3c9644f1..b086b77b9905 100644
--- a/docs.html
+++ b/docs.html
@@ -1,5 +1,6 @@ 
 <html>
 <head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="newlib.css" />
 </head>
 <body>
diff --git a/download.html b/download.html
index 448ee89644ca..88cb836b3196 100644
--- a/download.html
+++ b/download.html
@@ -1,5 +1,6 @@ 
 <html>
 <head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="newlib.css" />
 </head>
 <body>
diff --git a/faq.html b/faq.html
index f5855ce0c22d..048166e190ac 100644
--- a/faq.html
+++ b/faq.html
@@ -1,5 +1,6 @@ 
 <html>
 <head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="newlib.css" />
 </head>
 <body>
diff --git a/index.html b/index.html
index 4bfbd06b2808..4eeb1e85d5ca 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@ 
 
 	<head>
 		<title>The Newlib Homepage</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="newlib.css" />
 	</head>
 
diff --git a/info.html b/info.html
index 057148bdfea8..cb8f93ef04d2 100644
--- a/info.html
+++ b/info.html
@@ -1,5 +1,6 @@ 
 <html>
 <head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="newlib.css" />
 </head>
 <body>
diff --git a/mailing.html b/mailing.html
index c0c2a92d2ae0..ca860c1ef1c7 100644
--- a/mailing.html
+++ b/mailing.html
@@ -1,5 +1,6 @@ 
 <html>
 <head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="newlib.css" />
 </head>
 <body>
diff --git a/newlib.css b/newlib.css
index af265d5573df..09d63acedb4a 100644
--- a/newlib.css
+++ b/newlib.css
@@ -69,3 +69,34 @@  body.main {
   height: 100%;
   width: 100%;
 }
+
+/* This is ~768px with 16pt font.  */
+@media only screen and (max-width: 50em) {
+  .main tr.top {
+    height: 70px;
+  }
+
+  .main td.left {
+    width: 100px;
+  }
+}
+
+/* This is ~480px with 16pt font.  */
+@media only screen and (max-width: 30em) {
+  .main td.left {
+    width: 5%;
+  }
+
+  ul {
+    padding-left: 1em;
+  }
+
+  dd {
+    margin-left: 1em;
+  }
+
+  /* How many spaces-per-tab.  */
+  pre {
+    tab-size: 4;
+  }
+}
diff --git a/news.html b/news.html
index d2e51a57a475..a0d8f42c0560 100644
--- a/news.html
+++ b/news.html
@@ -1,5 +1,6 @@ 
 <html>
 <head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="newlib.css" />
 </head>
 <body>