From 985512d1a2018efea83b1ef5988187a9e9338f21 Mon Sep 17 00:00:00 2001 From: Jonathan Hefner Date: Thu, 3 Aug 2023 11:23:37 -0500 Subject: [PATCH] Use pixels for `@media` queries These `@media` queries are concerned with displaying a side panel that is explicitly 300px wide. Therefore, they should be expressed in terms of pixels instead of variable-width units. Also note that `em` in a `@media` query is based on the default font size of the browser configured by the user, _not_ the font size of ``, which seems to have been the intention with these (40 * 15px == 600px => equal space for panel and content). --- .../generator/template/rails/resources/css/main.css | 4 ++-- .../generator/template/rails/resources/css/panel.css | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/rdoc/generator/template/rails/resources/css/main.css b/lib/rdoc/generator/template/rails/resources/css/main.css index 2b3bb1d1..1b075a89 100644 --- a/lib/rdoc/generator/template/rails/resources/css/main.css +++ b/lib/rdoc/generator/template/rails/resources/css/main.css @@ -23,7 +23,7 @@ body { grid-template-columns: 100%; } -@media (min-width: 40em) { +@media (min-width: 600px) { body { grid-template-rows: min-content min-content auto min-content; grid-template-columns: 300px auto; @@ -238,7 +238,7 @@ pre margin: 1em; } -@media (min-width: 40em) { +@media (min-width: 600px) { #content { max-width: 980px; margin: 2em 3.5em; diff --git a/lib/rdoc/generator/template/rails/resources/css/panel.css b/lib/rdoc/generator/template/rails/resources/css/panel.css index 3f79bacf..f9aab79f 100644 --- a/lib/rdoc/generator/template/rails/resources/css/panel.css +++ b/lib/rdoc/generator/template/rails/resources/css/panel.css @@ -4,7 +4,7 @@ display: none; } - @media (max-width: 39.99em) { + @media (max-width: 599px) { .panel_mobile_button { display: block; height: 40px; @@ -90,7 +90,7 @@ line-height: 1; } - @media (max-width: 39.99em) { + @media (max-width: 599px) { .panel { transition: left 0s ease-in-out; @@ -122,7 +122,7 @@ text-align: center; } - @media (max-width: 39.99em) { + @media (max-width: 599px) { .panel .logo img { width: 50%; } @@ -143,7 +143,7 @@ overflow-x: hidden; } - @media (max-width: 39.99em) { + @media (max-width: 599px) { .panel .header { width: 100%; @@ -164,7 +164,7 @@ outline: none; } - @media (max-width: 39.99em) { + @media (max-width: 599px) { .panel .header input { width: 70%;