fix(website): fix code examples on certain screen sizes

strager · strager · commit 7c0792a176f9 · 2023-12-31T16:48:51.000-05:00
Depending on the font and the viewport size, the code examples on https://quick-lint-js.com/blog/version-1.0/ might overflow. This happens on Firefox on my macOS machine, but not on Firefox on my Linux machine. Tweak the CSS breakpoint to prevent overflowing.
diff --git a/website/public/main.css b/website/public/main.css
@@ -809,7 +809,9 @@ kbd.keystroke {
   #editors-support img {
     padding-bottom: 1rem;
   }
+}
 
+@media only screen and (max-width: 46em) {
   .eslint-comparison {
     border-bottom: solid 1px #aaaa;
     grid-template-areas: "eslint" "qljs";

Original file line number	Diff line number	Diff line change
`@@ -809,7 +809,9 @@ kbd.keystroke {`
`809`	`809`	`#editors-support img {`
`810`	`810`	`padding-bottom: 1rem;`
`811`	`811`	`}`
	`812`	`+}`
`812`	`813`
	`814`	`+@media only screen and (max-width: 46em) {`
`813`	`815`	`.eslint-comparison {`
`814`	`816`	`border-bottom: solid 1px #aaaa;`
`815`	`817`	`grid-template-areas: "eslint" "qljs";`