Use pixels for @media queries

jonathanhefner · jonathanhefner · commit 985512d1a201 · 2023-08-05T18:05:06.000-05:00
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 `&lt;body&gt;`, which seems to
have been the intention with these (40 * 15px == 600px =&gt; equal space
for panel and content).
diff --git 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
@@ -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%;

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`display: none;`
`5`	`5`	`}`
`6`	`6`
`7`		`- @media (max-width: 39.99em) {`
	`7`	`+ @media (max-width: 599px) {`
`8`	`8`	`.panel_mobile_button {`
`9`	`9`	`display: block;`
`10`	`10`	`height: 40px;`
`@@ -90,7 +90,7 @@`
`90`	`90`	`line-height: 1;`
`91`	`91`	`}`
`92`	`92`
`93`		`- @media (max-width: 39.99em) {`
	`93`	`+ @media (max-width: 599px) {`
`94`	`94`	`.panel`
`95`	`95`	`{`
`96`	`96`	`transition: left 0s ease-in-out;`
`@@ -122,7 +122,7 @@`
`122`	`122`	`text-align: center;`
`123`	`123`	`}`
`124`	`124`
`125`		`- @media (max-width: 39.99em) {`
	`125`	`+ @media (max-width: 599px) {`
`126`	`126`	`.panel .logo img {`
`127`	`127`	`width: 50%;`
`128`	`128`	`}`
`@@ -143,7 +143,7 @@`
`143`	`143`	`overflow-x: hidden;`
`144`	`144`	`}`
`145`	`145`
`146`		`- @media (max-width: 39.99em) {`
	`146`	`+ @media (max-width: 599px) {`
`147`	`147`	`.panel .header`
`148`	`148`	`{`
`149`	`149`	`width: 100%;`
`@@ -164,7 +164,7 @@`
`164`	`164`	`outline: none;`
`165`	`165`	`}`
`166`	`166`
`167`		`- @media (max-width: 39.99em) {`
	`167`	`+ @media (max-width: 599px) {`
`168`	`168`	`.panel .header input`
`169`	`169`	`{`
`170`	`170`	`width: 70%;`