Skip to content

Commit 9b3a5ac

Browse files
devongovettdevongovett
committed
Add chart captions
1 parent b6c24f4 commit 9b3a5ac

File tree

1 file changed

+96
-67
lines changed

1 file changed

+96
-67
lines changed

‎website/index.html‎

Lines changed: 96 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -35,47 +35,50 @@ <h2>An extremely fast CSS parser, transformer, bundler, and minifier.</h2>
3535
<h3>Light speed</h3>
3636
<p><strong>Lightning CSS is over 100x faster than comparable JavaScript-based tools.</strong> It can minify over 2.7 million lines of code per second on a single thread.</p>
3737
<p style="font-size: 0.85em">Lightning CSS is written in Rust, a native systems programming language. It was built with performance in mind from the start, designed to make efficient use of memory, and limit AST passes.</p>
38-
<div class="chart" role="img" aria-label="Build time chart. CSSNano – 544ms, ESBuild – 17.2ms, Lightning CSS – 4.16ms" style="max-width: 800px; margin-top: 40px; position: relative; padding-bottom: 110px; white-space: nowrap">
39-
<div style="text-align: center; font-weight: bold; font-size: 15px; margin-left: 90px; margin-bottom: 12px">Build time</div>
40-
<div style="position: absolute; left: 90px; right: 15px; height: 110px">
41-
<div style="position: absolute; top: 0; left: 0; bottom: 20px; width: 1px; background: white"></div>
42-
<div style="position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-size: 12px">0ms</div>
43-
<div class="line" style="position: absolute; top: 0; left: 25%; bottom: 20px; width: 1px; background: white"></div>
44-
<div class="line" style="position: absolute; left: 25%; bottom: 0; transform: translateX(-50%); font-size: 12px">150ms</div>
45-
<div style="position: absolute; top: 0; left: 50%; bottom: 20px; width: 1px; background: white"></div>
46-
<div style="position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px">300ms</div>
47-
<div class="line" style="position: absolute; top: 0; left: 75%; bottom: 20px; width: 1px; background: white"></div>
48-
<div class="line" style="position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); font-size: 12px">450ms</div>
49-
<div style="position: absolute; top: 0; left: 100%; bottom: 20px; width: 1px; background: white"></div>
50-
<div style="position: absolute; left: 100%; bottom: 0; transform: translateX(-50%); font-size: 12px">600ms</div>
51-
52-
<div class="bars" style="position: absolute; left: 1px; top: 0; right: 70px; --cssnano: 544.81; --esbuild: 17.2; --lightningcss: 4.16">
53-
<div style="position: absolute; top: 5px; left: 0; width: 100%; height: 20px; background: var(--gold)"></div>
54-
<div class="label" style="position: absolute; left: calc(100% + 5px); top: 5px; line-height: 20px; font-size: 12px">544.81ms</div>
55-
<div style="position: absolute; top: 35px; left: 0; width: calc(1% * var(--esbuild) / var(--cssnano) * 100); height: 20px; background: var(--gold)"></div>
56-
<div style="position: absolute; left: calc(1% * var(--esbuild) / var(--cssnano) * 100 + 5px); top: 35px; line-height: 20px; font-size: 12px">17.2ms</div>
57-
<div style="position: absolute; top: 65px; left: 0; width: calc(1% * var(--lightningcss) / var(--cssnano) * 100); height: 20px; background: var(--gold)"></div>
58-
<div style="position: absolute; left: calc(1% * var(--lightningcss) / var(--cssnano) * 100 + 5px); top: 65px; line-height: 20px; font-size: 12px">4.16ms</div>
59-
</div>
60-
<style>
61-
@media (width < 700px) {
62-
.warp .bars {
63-
right: 5px !important;
64-
}
65-
66-
.warp .bars .label {
67-
left: auto !important;
68-
right: 5px;
69-
color: black;
38+
<figure>
39+
<div class="chart" role="img" aria-label="Build time chart. CSSNano – 544ms, ESBuild – 17.2ms, Lightning CSS – 4.16ms" style="max-width: 800px; margin-top: 40px; position: relative; padding-bottom: 110px; white-space: nowrap">
40+
<div style="text-align: center; font-weight: bold; font-size: 15px; margin-left: 90px; margin-bottom: 12px">Build time</div>
41+
<div style="position: absolute; left: 90px; right: 15px; height: 110px">
42+
<div style="position: absolute; top: 0; left: 0; bottom: 20px; width: 1px; background: white"></div>
43+
<div style="position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-size: 12px">0ms</div>
44+
<div class="line" style="position: absolute; top: 0; left: 25%; bottom: 20px; width: 1px; background: white"></div>
45+
<div class="line" style="position: absolute; left: 25%; bottom: 0; transform: translateX(-50%); font-size: 12px">150ms</div>
46+
<div style="position: absolute; top: 0; left: 50%; bottom: 20px; width: 1px; background: white"></div>
47+
<div style="position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px">300ms</div>
48+
<div class="line" style="position: absolute; top: 0; left: 75%; bottom: 20px; width: 1px; background: white"></div>
49+
<div class="line" style="position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); font-size: 12px">450ms</div>
50+
<div style="position: absolute; top: 0; left: 100%; bottom: 20px; width: 1px; background: white"></div>
51+
<div style="position: absolute; left: 100%; bottom: 0; transform: translateX(-50%); font-size: 12px">600ms</div>
52+
53+
<div class="bars" style="position: absolute; left: 1px; top: 0; right: 70px; --cssnano: 544.81; --esbuild: 17.2; --lightningcss: 4.16">
54+
<div style="position: absolute; top: 5px; left: 0; width: 100%; height: 20px; background: var(--gold)"></div>
55+
<div class="label" style="position: absolute; left: calc(100% + 5px); top: 5px; line-height: 20px; font-size: 12px">544.81ms</div>
56+
<div style="position: absolute; top: 35px; left: 0; width: calc(1% * var(--esbuild) / var(--cssnano) * 100); height: 20px; background: var(--gold)"></div>
57+
<div style="position: absolute; left: calc(1% * var(--esbuild) / var(--cssnano) * 100 + 5px); top: 35px; line-height: 20px; font-size: 12px">17.2ms</div>
58+
<div style="position: absolute; top: 65px; left: 0; width: calc(1% * var(--lightningcss) / var(--cssnano) * 100); height: 20px; background: var(--gold)"></div>
59+
<div style="position: absolute; left: calc(1% * var(--lightningcss) / var(--cssnano) * 100 + 5px); top: 65px; line-height: 20px; font-size: 12px">4.16ms</div>
60+
</div>
61+
<style>
62+
@media (width < 700px) {
63+
.warp .bars {
64+
right: 5px !important;
65+
}
66+
67+
.warp .bars .label {
68+
left: auto !important;
69+
right: 5px;
70+
color: black;
71+
}
7072
}
71-
}
72-
</style>
73+
</style>
7374

74-
<div style="position: absolute; right: calc(100% + 10px); top: 5px; line-height: 20px; font-size: 13px">CSSNano</div>
75-
<div style="position: absolute; right: calc(100% + 10px); top: 35px; line-height: 20px; font-size: 13px">ESBuild</div>
76-
<div style="position: absolute; left: -10px; transform: translateX(-100%); top: 65px; line-height: 20px; font-size: 13px">Lightning CSS</div>
75+
<div style="position: absolute; right: calc(100% + 10px); top: 5px; line-height: 20px; font-size: 13px">CSSNano</div>
76+
<div style="position: absolute; right: calc(100% + 10px); top: 35px; line-height: 20px; font-size: 13px">ESBuild</div>
77+
<div style="position: absolute; left: -10px; transform: translateX(-100%); top: 65px; line-height: 20px; font-size: 13px">Lightning CSS</div>
78+
</div>
7779
</div>
78-
</div>
80+
<figcaption>Time to minify Bootstrap 4 (~10,000 lines). See the <a href="https://github.com/parcel-bundler/lightningcss#benchmarks" target="_blank">readme</a> for more benchmarks.</figcaption>
81+
</figure>
7982
</section>
8083
<section class="future">
8184
<div class="inner">
@@ -104,34 +107,37 @@ <h3 class="title">Live in the future</h3>
104107
<h3>Crush it!</h3>
105108
<p style="font-weight: bold;">Lightning CSS is not only fast when it comes to build time. It produces smaller output, so your website loads faster too.</p>
106109
<p style="font-size: 0.85em">The Lightning CSS minifier combines longhand properties into shorthands, removes unnecessary vendor prefixes, merges compatible adjacent rules, removes unnecessary default values, reduces <code>calc()</code> expressions, shortens colors, minifies gradients, and much more.</p>
107-
<div class="chart" role="img" aria-label="Output size chart. CSSNano – 155.89 KB, ESBuild – 156.57 KB, Lightning CSS – 139.74 KB" style="max-width: 800px; margin-top: 40px; position: relative; padding-bottom: 110px; white-space: nowrap">
108-
<div style="text-align: center; font-weight: bold; font-size: 15px; margin-left: 90px; margin-bottom: 12px">Output size</div>
109-
<div style="position: absolute; left: 90px; right: 15px; height: 110px">
110-
<div style="position: absolute; top: 0; left: 0; bottom: 20px; width: 1px; background: black"></div>
111-
<div style="position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-size: 12px">0 KB</div>
112-
<div class="line" style="position: absolute; top: 0; left: 25%; bottom: 20px; width: 1px; background: black"></div>
113-
<div class="line" style="position: absolute; left: 25%; bottom: 0; transform: translateX(-50%); font-size: 12px">40 KB</div>
114-
<div style="position: absolute; top: 0; left: 50%; bottom: 20px; width: 1px; background: black"></div>
115-
<div style="position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px">80 KB</div>
116-
<div class="line" style="position: absolute; top: 0; left: 75%; bottom: 20px; width: 1px; background: black"></div>
117-
<div class="line" style="position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); font-size: 12px">120 KB</div>
118-
<div style="position: absolute; top: 0; left: 100%; bottom: 20px; width: 1px; background: black"></div>
119-
<div style="position: absolute; left: 100%; bottom: 0; transform: translateX(-50%); font-size: 12px">160 KB</div>
120-
121-
<div style="position: absolute; left: 1px; top: 0; right: 5px; --cssnano: 155.89; --esbuild: 156.57; --lightningcss: 139.74">
122-
<div style="position: absolute; top: 5px; left: 0; width: calc(1% * var(--cssnano) / var(--esbuild) * 100); height: 20px; background: rgb(186, 25, 33)"></div>
123-
<div style="position: absolute; right: calc(100% + 5px - 1% * var(--cssnano) / var(--esbuild) * 100); top: 5px; line-height: 20px; font-size: 12px; color: white">155.89 KB</div>
124-
<div style="position: absolute; top: 35px; left: 0; width: 100%; height: 20px; background: rgb(186, 25, 33)"></div>
125-
<div style="position: absolute; right: 5px; top: 35px; line-height: 20px; font-size: 12px; color: white">156.57 KB</div>
126-
<div style="position: absolute; top: 65px; left: 0; width: calc(1% * var(--lightningcss) / var(--esbuild) * 100); height: 20px; background: rgb(186, 25, 33)"></div>
127-
<div style="position: absolute; right: calc(100% + 5px - 1% * var(--lightningcss) / var(--esbuild) * 100); top: 65px; line-height: 20px; font-size: 12px; color: white">139.74 KB</div>
110+
<figure>
111+
<div class="chart" role="img" aria-label="Output size chart. CSSNano – 155.89 KB, ESBuild – 156.57 KB, Lightning CSS – 139.74 KB" style="max-width: 800px; margin-top: 40px; position: relative; padding-bottom: 110px; white-space: nowrap">
112+
<div style="text-align: center; font-weight: bold; font-size: 15px; margin-left: 90px; margin-bottom: 12px">Output size</div>
113+
<div style="position: absolute; left: 90px; right: 15px; height: 110px">
114+
<div style="position: absolute; top: 0; left: 0; bottom: 20px; width: 1px; background: black"></div>
115+
<div style="position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-size: 12px">0 KB</div>
116+
<div class="line" style="position: absolute; top: 0; left: 25%; bottom: 20px; width: 1px; background: black"></div>
117+
<div class="line" style="position: absolute; left: 25%; bottom: 0; transform: translateX(-50%); font-size: 12px">40 KB</div>
118+
<div style="position: absolute; top: 0; left: 50%; bottom: 20px; width: 1px; background: black"></div>
119+
<div style="position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px">80 KB</div>
120+
<div class="line" style="position: absolute; top: 0; left: 75%; bottom: 20px; width: 1px; background: black"></div>
121+
<div class="line" style="position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); font-size: 12px">120 KB</div>
122+
<div style="position: absolute; top: 0; left: 100%; bottom: 20px; width: 1px; background: black"></div>
123+
<div style="position: absolute; left: 100%; bottom: 0; transform: translateX(-50%); font-size: 12px">160 KB</div>
124+
125+
<div style="position: absolute; left: 1px; top: 0; right: 5px; --cssnano: 155.89; --esbuild: 156.57; --lightningcss: 139.74">
126+
<div style="position: absolute; top: 5px; left: 0; width: calc(1% * var(--cssnano) / var(--esbuild) * 100); height: 20px; background: rgb(186, 25, 33)"></div>
127+
<div style="position: absolute; right: calc(100% + 5px - 1% * var(--cssnano) / var(--esbuild) * 100); top: 5px; line-height: 20px; font-size: 12px; color: white">155.89 KB</div>
128+
<div style="position: absolute; top: 35px; left: 0; width: 100%; height: 20px; background: rgb(186, 25, 33)"></div>
129+
<div style="position: absolute; right: 5px; top: 35px; line-height: 20px; font-size: 12px; color: white">156.57 KB</div>
130+
<div style="position: absolute; top: 65px; left: 0; width: calc(1% * var(--lightningcss) / var(--esbuild) * 100); height: 20px; background: rgb(186, 25, 33)"></div>
131+
<div style="position: absolute; right: calc(100% + 5px - 1% * var(--lightningcss) / var(--esbuild) * 100); top: 65px; line-height: 20px; font-size: 12px; color: white">139.74 KB</div>
132+
</div>
133+
134+
<div style="position: absolute; right: calc(100% + 10px); top: 5px; line-height: 20px; font-size: 13px">CSSNano</div>
135+
<div style="position: absolute; right: calc(100% + 10px); top: 35px; line-height: 20px; font-size: 13px">ESBuild</div>
136+
<div style="position: absolute; left: -10px; transform: translateX(-100%); top: 65px; line-height: 20px; font-size: 13px">Lightning CSS</div>
128137
</div>
129-
130-
<div style="position: absolute; right: calc(100% + 10px); top: 5px; line-height: 20px; font-size: 13px">CSSNano</div>
131-
<div style="position: absolute; right: calc(100% + 10px); top: 35px; line-height: 20px; font-size: 13px">ESBuild</div>
132-
<div style="position: absolute; left: -10px; transform: translateX(-100%); top: 65px; line-height: 20px; font-size: 13px">Lightning CSS</div>
133138
</div>
134-
</div>
139+
<figcaption>Output size after minifying Bootstrap 4 (~10,000 lines). See the <a href="https://github.com/parcel-bundler/lightningcss#benchmarks" target="_blank">readme</a> for more benchmarks.</figcaption>
140+
</figure>
135141
</section>
136142
<section class="modules">
137143
<div class="compartment main">
@@ -374,6 +380,21 @@ <h3>Browser grade</h3>
374380
line-height: 1.4em;
375381
}
376382

383+
figure {
384+
max-width: 800px;
385+
margin: 0;
386+
}
387+
388+
figcaption {
389+
font-size: 10px;
390+
text-align: center;
391+
margin-top: 20px;
392+
}
393+
394+
figcaption a {
395+
color: inherit;
396+
}
397+
377398
@media (width < 500px) {
378399
main section {
379400
margin: 20px 10px;
@@ -401,13 +422,17 @@ <h3>Browser grade</h3>
401422
max-width: 900px;
402423
}
403424

425+
.warp figcaption {
426+
color: #aaa;
427+
}
428+
404429
.crush {
405430
background-image: url(crush.svg), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='rgb(0 0 0 / .2)' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"), linear-gradient(to bottom right, lch(75% 82.34 80.104), lch(68% 82.34 80.104));
406-
background-size: contain, auto;
431+
background-size: 600px auto, auto, auto;
407432
background-repeat: no-repeat, repeat;
408-
background-position: right top;
433+
background-position: bottom right;
409434
color: black;
410-
padding-right: 540px;
435+
padding-right: 550px;
411436
}
412437

413438
.crush h3 {
@@ -421,6 +446,10 @@ <h3>Browser grade</h3>
421446
word-spacing: .1em;
422447
}
423448

449+
.crush figcaption {
450+
color: #222;
451+
}
452+
424453
@media (width < 1200px) {
425454
.crush {
426455
padding-right: var(--padding);

0 commit comments

Comments
 (0)