Skip to content

Commit e241d71

Browse files
stragerstrager
committed
Website: fix relayouts on image loads
When a OS and editor logo <img> loads, its size changes, causing jarring re-layouts. This is because the browser doesn't know that the images are square before loading, so the browser images the images take up no width. Tell the browser that the images are square by giving them explicit width and height attributes. Make the image sizes look good even if main.css doesn't load by estimating the expected image size (which is relative to the font size).
1 parent 66abe72 commit e241d71

File tree

44 files changed

+623
-42
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+623
-42
lines changed

‎website/public/index.ejs.html

Lines changed: 77 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,8 @@ <h2>Install quick-lint-js</h2>
186186
src="vscode.png"
187187
alt=""
188188
aria-labelledby="install-vs-code"
189+
width="19"
190+
height="19"
189191
/>
190192
<span id="install-vs-code">install VS Code plugin</span></a
191193
>
@@ -197,6 +199,8 @@ <h2>Install quick-lint-js</h2>
197199
src="neovim.svg"
198200
alt=""
199201
aria-labelledby="install-neovim"
202+
width="19"
203+
height="19"
200204
/>
201205
<span id="install-neovim">install Neovim plugin</span></a
202206
>
@@ -208,6 +212,8 @@ <h2>Install quick-lint-js</h2>
208212
src="vim.gif"
209213
alt=""
210214
aria-labelledby="install-vim"
215+
width="19"
216+
height="19"
211217
/>
212218
<span id="install-vim">install Vim plugin</span></a
213219
>
@@ -219,6 +225,8 @@ <h2>Install quick-lint-js</h2>
219225
src="gnome-terminal.svg"
220226
alt=""
221227
aria-labelledby="install-cli"
228+
width="19"
229+
height="19"
222230
/>
223231
<span id="install-cli">install CLI</span></a
224232
>
@@ -230,6 +238,8 @@ <h2>Install quick-lint-js</h2>
230238
src="npm.svg"
231239
alt=""
232240
aria-labelledby="install-npm"
241+
width="19"
242+
height="19"
233243
/>
234244
<span id="install-npm">install CLI on npm</span></a
235245
>
@@ -426,7 +436,12 @@ <h2 id="linter-feature-comparison">Features</h2>
426436
<th class="has-link"><a href="install/vscode/">VS Code</a></th>
427437
<th class="has-link">
428438
<a href="install/vscode/"
429-
><img class="plugin-logo" src="vscode.png" alt=""
439+
><img
440+
class="plugin-logo"
441+
src="vscode.png"
442+
alt=""
443+
width="19"
444+
height="19"
430445
/></a>
431446
</th>
432447
<td class="good quick-lint-js has-link">
@@ -441,7 +456,12 @@ <h2 id="linter-feature-comparison">Features</h2>
441456
<th class="has-link"><a href="install/vim/">Vim</a></th>
442457
<th class="has-link">
443458
<a href="install/vim/"
444-
><img class="plugin-logo" src="vim.gif" alt=""
459+
><img
460+
class="plugin-logo"
461+
src="vim.gif"
462+
alt=""
463+
width="19"
464+
height="19"
445465
/></a>
446466
</th>
447467
<td class="good quick-lint-js has-link">
@@ -456,7 +476,12 @@ <h2 id="linter-feature-comparison">Features</h2>
456476
<th class="has-link"><a href="install/vim/">Neovim</a></th>
457477
<th class="has-link">
458478
<a href="install/vim/"
459-
><img class="plugin-logo" src="neovim.svg" alt=""
479+
><img
480+
class="plugin-logo"
481+
src="neovim.svg"
482+
alt=""
483+
width="19"
484+
height="19"
460485
/></a>
461486
</th>
462487
<td class="good quick-lint-js has-link">
@@ -469,7 +494,15 @@ <h2 id="linter-feature-comparison">Features</h2>
469494
</tr>
470495
<tr>
471496
<th>WebStorm</th>
472-
<th><img class="plugin-logo" src="webstorm.svg" alt="" /></th>
497+
<th>
498+
<img
499+
class="plugin-logo"
500+
src="webstorm.svg"
501+
alt=""
502+
width="19"
503+
height="19"
504+
/>
505+
</th>
473506
<td class="bad quick-lint-js"><span aria-label="no">❌</span></td>
474507
<td class="good"><span aria-label="yes">✅</span></td>
475508
<td class="good"><span aria-label="yes">✅</span></td>
@@ -478,7 +511,15 @@ <h2 id="linter-feature-comparison">Features</h2>
478511
</tr>
479512
<tr>
480513
<th>Sublime Text</th>
481-
<th><img class="plugin-logo" src="sublime-text.svg" alt="" /></th>
514+
<th>
515+
<img
516+
class="plugin-logo"
517+
src="sublime-text.svg"
518+
alt=""
519+
width="19"
520+
height="19"
521+
/>
522+
</th>
482523
<td class="bad quick-lint-js">
483524
<span aria-label="no">❌</span
484525
><span
@@ -496,7 +537,13 @@ <h2 id="linter-feature-comparison">Features</h2>
496537
<tr>
497538
<th>Notepad++</th>
498539
<th>
499-
<img class="plugin-logo" src="notepad-plus-plus.svg" alt="" />
540+
<img
541+
class="plugin-logo"
542+
src="notepad-plus-plus.svg"
543+
alt=""
544+
width="19"
545+
height="19"
546+
/>
500547
</th>
501548

502549
<td class="bad quick-lint-js"><span aria-label="no">❌</span></td>
@@ -507,7 +554,15 @@ <h2 id="linter-feature-comparison">Features</h2>
507554
</tr>
508555
<tr>
509556
<th>Atom</th>
510-
<th><img class="plugin-logo" src="atom.svg" alt="" /></th>
557+
<th>
558+
<img
559+
class="plugin-logo"
560+
src="atom.svg"
561+
alt=""
562+
width="19"
563+
height="19"
564+
/>
565+
</th>
511566
<td class="bad quick-lint-js"><span aria-label="no">❌</span></td>
512567
<td class="good"><span aria-label="yes">✅</span></td>
513568
<td class="good"><span aria-label="yes">✅</span></td>
@@ -518,7 +573,12 @@ <h2 id="linter-feature-comparison">Features</h2>
518573
<th><a href="install/emacs/">Emacs</a></th>
519574
<th>
520575
<a href="install/emacs/"
521-
><img class="plugin-logo" src="emacs.svg" alt=""
576+
><img
577+
class="plugin-logo"
578+
src="emacs.svg"
579+
alt=""
580+
width="19"
581+
height="19"
522582
/></a>
523583
</th>
524584
<td class="good quick-lint-js has-link">
@@ -531,7 +591,15 @@ <h2 id="linter-feature-comparison">Features</h2>
531591
</tr>
532592
<tr>
533593
<th>Codespaces</th>
534-
<th><img class="plugin-logo" src="codespaces.png" alt="" /></th>
594+
<th>
595+
<img
596+
class="plugin-logo"
597+
src="codespaces.png"
598+
alt=""
599+
width="19"
600+
height="19"
601+
/>
602+
</th>
535603
<td class="bad quick-lint-js"><span aria-label="no">❌</span></td>
536604
<td class="bad"><span aria-label="no">❌</span></td>
537605
<td class="bad"><span aria-label="no">❌</span></td>

‎website/public/install/cli/arch-linux/index.ejs.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,15 @@ <h2>
3232
src="../../../gnome-terminal.svg"
3333
alt=""
3434
title="CLI and LSP server"
35+
width="29"
36+
height="29"
3537
/><img
3638
class="os-logo"
3739
src="../../../arch-linux.svg"
3840
alt=""
3941
title="Arch Linux"
42+
width="29"
43+
height="29"
4044
/>
4145
Install CLI and LSP server on Arch Linux
4246
</h2>
@@ -47,6 +51,8 @@ <h2>
4751
src="../../../linux.svg"
4852
alt="GNU/Linux"
4953
title="GNU/Linux"
54+
width="19"
55+
height="19"
5056
/>
5157
</p>
5258

‎website/public/install/cli/debian/index.ejs.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,22 @@ <h2>
3232
src="../../../gnome-terminal.svg"
3333
alt=""
3434
title="CLI and LSP server"
35+
width="29"
36+
height="29"
3537
/><img
3638
class="os-logo"
3739
src="../../../debian.svg"
3840
alt=""
3941
title="Debian"
42+
width="29"
43+
height="29"
4044
/><img
4145
class="install-logo"
4246
src="../../../ubuntu.svg"
4347
alt=""
4448
title="Ubuntu"
49+
width="29"
50+
height="29"
4551
/>
4652
Install CLI and LSP server on Debian/Ubuntu
4753
</h2>
@@ -52,6 +58,8 @@ <h2>
5258
src="../../../linux.svg"
5359
alt="GNU/Linux"
5460
title="GNU/Linux"
61+
width="19"
62+
height="19"
5563
/>
5664
</p>
5765

‎website/public/install/cli/homebrew/index.ejs.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,15 @@ <h2>
3232
src="../../../gnome-terminal.svg"
3333
alt=""
3434
title="CLI and LSP server"
35+
width="29"
36+
height="29"
3537
/><img
3638
class="os-logo"
3739
src="../../../homebrew.svg"
3840
alt=""
3941
title="Homebrew"
42+
width="29"
43+
height="29"
4044
/>
4145
Install CLI and LSP server on macOS with Homebrew
4246
</h2>
@@ -47,6 +51,8 @@ <h2>
4751
src="../../../macos.svg"
4852
alt="macOS"
4953
title="macOS"
54+
width="19"
55+
height="19"
5056
/>
5157
</p>
5258
<p>

‎website/public/install/cli/index.ejs.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ <h2>
3131
src="../../gnome-terminal.svg"
3232
alt=""
3333
title="CLI and LSP server"
34+
width="29"
35+
height="29"
3436
/>
3537
Install CLI and LSP server
3638
</h2>
@@ -45,6 +47,8 @@ <h3>
4547
src="../../linux.svg"
4648
alt=""
4749
title=""
50+
width="22"
51+
height="22"
4852
/>&nbsp;GNU/Linux
4953
</h3>
5054
<ul>
@@ -54,6 +58,8 @@ <h3>
5458
class="install-logo"
5559
src="../../debian.svg"
5660
alt=""
61+
width="19"
62+
height="19"
5763
/>&nbsp;Debian</a
5864
>
5965
</li>
@@ -63,6 +69,8 @@ <h3>
6369
class="install-logo"
6470
src="../../ubuntu.svg"
6571
alt=""
72+
width="19"
73+
height="19"
6674
/>&nbsp;Ubuntu</a
6775
>
6876
</li>
@@ -72,6 +80,8 @@ <h3>
7280
class="install-logo"
7381
src="../../arch-linux.svg"
7482
alt=""
83+
width="19"
84+
height="19"
7585
/>&nbsp;Arch Linux</a
7686
>
7787
</li>
@@ -81,6 +91,8 @@ <h3>
8191
class="install-logo"
8292
src="../../nix.svg"
8393
alt=""
94+
width="19"
95+
height="19"
8496
/>&nbsp;Nix</a
8597
>
8698
</li>
@@ -90,6 +102,8 @@ <h3>
90102
class="install-logo"
91103
src="../../npm.svg"
92104
alt=""
105+
width="19"
106+
height="19"
93107
/>&nbsp;npm<span class="footnote-marker"
94108
><span
95109
aria-label="goodies not included"
@@ -124,6 +138,8 @@ <h3>
124138
src="../../macos.svg"
125139
alt=""
126140
title=""
141+
width="22"
142+
height="22"
127143
/>&nbsp;macOS
128144
</h3>
129145
<ul>
@@ -133,6 +149,8 @@ <h3>
133149
class="install-logo"
134150
src="../../homebrew.svg"
135151
alt=""
152+
width="19"
153+
height="19"
136154
/>&nbsp;Homebrew</a
137155
>
138156
</li>
@@ -142,6 +160,8 @@ <h3>
142160
class="install-logo"
143161
src="../../nix.svg"
144162
alt=""
163+
width="19"
164+
height="19"
145165
/>&nbsp;Nix</a
146166
>
147167
</li>
@@ -151,6 +171,8 @@ <h3>
151171
class="install-logo"
152172
src="../../npm.svg"
153173
alt=""
174+
width="19"
175+
height="19"
154176
/>&nbsp;npm<span class="footnote-marker"
155177
><span
156178
aria-label="goodies not included"
@@ -185,6 +207,8 @@ <h3>
185207
src="../../windows.svg"
186208
alt=""
187209
title=""
210+
width="22"
211+
height="22"
188212
/>&nbsp;Windows
189213
</h3>
190214
<ul>
@@ -194,6 +218,8 @@ <h3>
194218
class="install-logo"
195219
src="../../npm.svg"
196220
alt=""
221+
width="19"
222+
height="19"
197223
/>&nbsp;npm<span class="footnote-marker"
198224
><span
199225
aria-label="goodies not included"

0 commit comments

Comments
 (0)