| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> |
| <title>Lightning CSS</title> |
| <link rel="icon" href="favicon.svg"> |
| <link rel="mask-icon" href="favicon.svg" color="#f9bb03"> |
| <meta name="description" content="An extremely fast CSS parser, transformer, bundler, and minifier."> |
| <meta name="twitter:card" content="summary_large_image"> |
| <meta name="twitter:image" content="og.jpeg"> |
| <meta name="twitter:site" content="@lightningcss"> |
| <meta name="twitter:creator" content="@lightningcss"> |
| <meta property="og:type" content="website"> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:url" content="https://lightningcss.dev"> |
| <meta property="og:title" content="Lightning CSS"> |
| <meta property="og:description" content="An extremely fast CSS parser, transformer, bundler, and minifier."> |
| <meta property="og:image" content="og.jpeg"> |
| <link rel="preload" as="font" type="font/woff2" crossorigin href="https://use.typekit.net/af/916187/00000000000000007735bfa0/30/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3"> |
| <link rel="preload" as="image" href="lightspeed.svg"> |
| </head> |
| <body> |
| <header> |
| <svg viewBox="495 168 360 654"> |
| <path class="outer" d="M594.41,805c-.71,0-1.43-.15-2.11-.47-2.2-1.03-3.34-3.48-2.72-5.83l67.98-253.71h-140.45c-1.86,0-3.57-1.04-4.44-2.69-.86-1.65-.73-3.65,.34-5.18l26.85-38.35q25.56-36.51,104.91-149.83l106.31-151.82c1.39-1.99,4.01-2.69,6.21-1.66,2.2,1.03,3.34,3.48,2.72,5.83l-67.98,253.71h140.45c1.86,0,3.57,1.04,4.43,2.69,.86,1.65,.73,3.65-.34,5.18l-238.07,340c-.96,1.37-2.51,2.13-4.1,2.13Zm-67.69-270h137.37c1.55,0,3.02,.72,3.97,1.96,.95,1.23,1.27,2.84,.86,4.34l-62.33,232.61,216.29-308.9h-137.36c-1.55,0-3.02-.72-3.97-1.96-.95-1.23-1.27-2.84-.86-4.34l62.33-232.61-90.04,128.59q-79.35,113.32-104.91,149.83l-21.34,30.48Z"/> |
| <path class="inner" d="M594.41,805c-.71,0-1.43-.15-2.11-.47-2.2-1.03-3.34-3.48-2.72-5.83l67.98-253.71h-140.45c-1.86,0-3.57-1.04-4.44-2.69-.86-1.65-.73-3.65,.34-5.18l26.85-38.35q25.56-36.51,104.91-149.83l106.31-151.82c1.39-1.99,4.01-2.69,6.21-1.66,2.2,1.03,3.34,3.48,2.72,5.83l-67.98,253.71h140.45c1.86,0,3.57,1.04,4.43,2.69,.86,1.65,.73,3.65-.34,5.18l-238.07,340c-.96,1.37-2.51,2.13-4.1,2.13Zm-67.69-270h137.37c1.55,0,3.02,.72,3.97,1.96,.95,1.23,1.27,2.84,.86,4.34l-62.33,232.61,216.29-308.9h-137.36c-1.55,0-3.02-.72-3.97-1.96-.95-1.23-1.27-2.84-.86-4.34l62.33-232.61-90.04,128.59q-79.35,113.32-104.91,149.83l-21.34,30.48Z"/> |
| </svg> |
| <h1>Lightning CSS</h1> |
| <h2>An extremely fast CSS parser, transformer, bundler, and minifier.</h2> |
| <p><a href="./playground/index.html">Playground</a> • <a href="docs.html">Docs</a> • <a href="https://docs.rs/lightningcss" target="_blank">Rust docs</a> • <a href="https://npmjs.com/lightningcss" target="_blank">npm</a> • <a href="https://github.com/parcel-bundler/lightningcss" target="_blank">GitHub</a></p> |
| </header> |
| <main> |
| <section class="warp"> |
| <h3>Light speed</h3> |
| <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> |
| <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> |
| <p><a href="docs.html">Get started →</a></p> |
| <figure> |
| <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"> |
| <div style="text-align: center; font-weight: bold; font-size: 15px; margin-left: 90px; margin-bottom: 12px">Build time</div> |
| <div style="position: absolute; left: 90px; right: 15px; height: 110px"> |
| <div style="position: absolute; top: 0; left: 0; bottom: 20px; width: 1px; background: white"></div> |
| <div style="position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-size: 12px">0ms</div> |
| <div class="line" style="position: absolute; top: 0; left: 25%; bottom: 20px; width: 1px; background: white"></div> |
| <div class="line" style="position: absolute; left: 25%; bottom: 0; transform: translateX(-50%); font-size: 12px">150ms</div> |
| <div style="position: absolute; top: 0; left: 50%; bottom: 20px; width: 1px; background: white"></div> |
| <div style="position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px">300ms</div> |
| <div class="line" style="position: absolute; top: 0; left: 75%; bottom: 20px; width: 1px; background: white"></div> |
| <div class="line" style="position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); font-size: 12px">450ms</div> |
| <div style="position: absolute; top: 0; left: 100%; bottom: 20px; width: 1px; background: white"></div> |
| <div style="position: absolute; left: 100%; bottom: 0; transform: translateX(-50%); font-size: 12px">600ms</div> |
| |
| <div class="bars" style="position: absolute; left: 1px; top: 0; right: 70px; --cssnano: 544.81; --esbuild: 17.2; --lightningcss: 4.16"> |
| <div style="position: absolute; top: 5px; left: 0; width: 100%; height: 20px; background: var(--gold)"></div> |
| <div class="label" style="position: absolute; left: calc(100% + 5px); top: 5px; line-height: 20px; font-size: 12px">544.81ms</div> |
| <div style="position: absolute; top: 35px; left: 0; width: calc(1% * var(--esbuild) / var(--cssnano) * 100); height: 20px; background: var(--gold)"></div> |
| <div style="position: absolute; left: calc(1% * var(--esbuild) / var(--cssnano) * 100 + 5px); top: 35px; line-height: 20px; font-size: 12px">17.2ms</div> |
| <div style="position: absolute; top: 65px; left: 0; width: calc(1% * var(--lightningcss) / var(--cssnano) * 100); height: 20px; background: var(--gold)"></div> |
| <div style="position: absolute; left: calc(1% * var(--lightningcss) / var(--cssnano) * 100 + 5px); top: 65px; line-height: 20px; font-size: 12px">4.16ms</div> |
| </div> |
| <style> |
| @media (width < 700px) { |
| .warp .bars { |
| right: 5px !important; |
| } |
| |
| .warp .bars .label { |
| left: auto !important; |
| right: 5px; |
| color: black; |
| } |
| } |
| </style> |
| |
| <div style="position: absolute; right: calc(100% + 10px); top: 5px; line-height: 20px; font-size: 13px">CSSNano</div> |
| <div style="position: absolute; right: calc(100% + 10px); top: 35px; line-height: 20px; font-size: 13px">ESBuild</div> |
| <div style="position: absolute; left: -10px; transform: translateX(-100%); top: 65px; line-height: 20px; font-size: 13px">Lightning CSS</div> |
| </div> |
| </div> |
| <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> |
| </figure> |
| </section> |
| <section class="future"> |
| <div class="inner"> |
| <h3 class="title">Live in the future</h3> |
| <div class="description"> |
| <p><strong>Lightning CSS lets you use modern CSS features and future syntax today.</strong> Features such as CSS nesting, custom media queries, high gamut color spaces, logical properties, and new selector features are automatically converted to more compatible syntax based on your browser targets.</p> |
| <p>Lightning CSS also automatically adds vendor prefixes for your browser targets, so you can keep your source code clean and repetition free.</p> |
| <p><a href="transpilation.html">Learn more →</a></p> |
| </div> |
| <div class="example"> |
| <div class="targets"><h4>Target Browsers</h4><code>last 2 versions</code></div> |
| <div class="box input"><h4 class="title">Input</h4><pre> |
| <code><span class="class">.foo</span> { |
| <span class="property">color</span>: <span class="keyword">oklab</span>(<span class="number">59.686% 0.1009 0.1192</span>); |
| }</code></pre></div> |
| <div class="box"><h4 class="title">Output</h4><pre> |
| <code><span class="class">.foo</span> { |
| <span class="property">color</span>: <span class="number">#c65d07</span>; |
| <span class="property">color</span>: <span class="keyword">color</span>(<span class="keyword">display-p3</span> <span class="number">.724144 .386777 .148795</span>); |
| <span class="property">color</span>: <span class="keyword">lab</span>(<span class="number">52.2319% 40.1449 59.9171</span>); |
| }</code></pre> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="crush"> |
| <h3>Crush it!</h3> |
| <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> |
| <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> |
| <p><a href="minification.html">Details →</a></p> |
| <figure> |
| <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"> |
| <div style="text-align: center; font-weight: bold; font-size: 15px; margin-left: 90px; margin-bottom: 12px">Output size</div> |
| <div style="position: absolute; left: 90px; right: 15px; height: 110px"> |
| <div style="position: absolute; top: 0; left: 0; bottom: 20px; width: 1px; background: black"></div> |
| <div style="position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-size: 12px">0 KB</div> |
| <div class="line" style="position: absolute; top: 0; left: 25%; bottom: 20px; width: 1px; background: black"></div> |
| <div class="line" style="position: absolute; left: 25%; bottom: 0; transform: translateX(-50%); font-size: 12px">40 KB</div> |
| <div style="position: absolute; top: 0; left: 50%; bottom: 20px; width: 1px; background: black"></div> |
| <div style="position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px">80 KB</div> |
| <div class="line" style="position: absolute; top: 0; left: 75%; bottom: 20px; width: 1px; background: black"></div> |
| <div class="line" style="position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); font-size: 12px">120 KB</div> |
| <div style="position: absolute; top: 0; left: 100%; bottom: 20px; width: 1px; background: black"></div> |
| <div style="position: absolute; left: 100%; bottom: 0; transform: translateX(-50%); font-size: 12px">160 KB</div> |
| |
| <div style="position: absolute; left: 1px; top: 0; right: 5px; --cssnano: 155.89; --esbuild: 156.57; --lightningcss: 139.74"> |
| <div style="position: absolute; top: 5px; left: 0; width: calc(1% * var(--cssnano) / var(--esbuild) * 100); height: 20px; background: rgb(186, 25, 33)"></div> |
| <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> |
| <div style="position: absolute; top: 35px; left: 0; width: 100%; height: 20px; background: rgb(186, 25, 33)"></div> |
| <div style="position: absolute; right: 5px; top: 35px; line-height: 20px; font-size: 12px; color: white">156.57 KB</div> |
| <div style="position: absolute; top: 65px; left: 0; width: calc(1% * var(--lightningcss) / var(--esbuild) * 100); height: 20px; background: rgb(186, 25, 33)"></div> |
| <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> |
| </div> |
| |
| <div style="position: absolute; right: calc(100% + 10px); top: 5px; line-height: 20px; font-size: 13px">CSSNano</div> |
| <div style="position: absolute; right: calc(100% + 10px); top: 35px; line-height: 20px; font-size: 13px">ESBuild</div> |
| <div style="position: absolute; left: -10px; transform: translateX(-100%); top: 65px; line-height: 20px; font-size: 13px">Lightning CSS</div> |
| </div> |
| </div> |
| <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> |
| </figure> |
| </section> |
| <section class="modules"> |
| <div class="compartment main"> |
| <h3>CSS modules</h3> |
| <p><strong>Lightning CSS supports CSS modules, which locally scope classes, ids, <code>@keyframes</code>, CSS variables, and more.</strong> This ensures that there are no unintended name clashes between different CSS files.</p> |
| <p style="font-size: 0.8em">Lightning CSS generates a mapping of the original names to scoped names, which can be used from your JavaScript. This also enables unused classes and variables to be tree-shaken.</p> |
| <p><a href="css-modules.html">Documentation →</a></p> |
| </div> |
| <pre class="compartment input"><code>.heading { |
| composes: typography from './typography.css'; |
| color: gray; |
| }</code></pre> |
| <pre class="compartment output"><code>.EgL3uq_heading { |
| color: gray; |
| }</code></pre> |
| <pre class="compartment json"><code>{ |
| "heading": { |
| "name": "EgL3uq_heading", |
| "composes": [{ |
| "type": "dependency", |
| "name": "typography", |
| "specifier": "./typography.css" |
| }] |
| } |
| }</code></pre> |
| </section> |
| <section class="parser"> |
| <div> |
| <h3>Browser grade</h3> |
| <p><strong>Lightning CSS is written in Rust, using the <a href="https://github.com/servo/rust-cssparser" target="_blank">cssparser</a> and <a href="https://github.com/servo/stylo/tree/main/selectors" target="_blank">selectors</a> crates created by Mozilla and used by Firefox.</strong> These provide a solid CSS-parsing foundation on top of which Lightning CSS implements support for all specific CSS rules and properties.</p> |
| <p style="font-size: 0.85em">Lightning CSS fully parses every CSS rule, property, and value just as a browser would. This reduces duplicate work for transformers, leading to improved performance and minification.</p> |
| <p><a href="transforms.html">Custom transforms →</a></p> |
| </div> |
| <pre><code><span class="ident">Background</span>([<span class="ident">Background</span> { |
| image: <span class="ident">Url</span>(<span class="ident">Url</span> { url: <span class="string">"img.png"</span> }), |
| color: <span class="ident">CssColor</span>(<span class="ident">RGBA</span>(<span class="ident">RGBA</span> { red: <span class="number">0</span>, green: <span class="number">0</span>, blue: <span class="number">0</span>, alpha: <span class="number">0</span> })), |
| position: <span class="ident">Position</span> { |
| x: <span class="ident">Length</span>(<span class="ident">Dimension</span>(<span class="ident">Px</span>(<span class="number">20.0</span>))), |
| y: <span class="ident">Length</span>(<span class="ident">Dimension</span>(<span class="ident">Px</span>(<span class="number">10.0</span>))), |
| }, |
| repeat: <span class="ident">BackgroundRepeat</span> { |
| x: <span class="ident">Repeat</span>, |
| y: <span class="ident">Repeat</span>, |
| }, |
| size: <span class="ident">Explicit</span> { |
| width: <span class="ident">LengthPercentage</span>(<span class="ident">Dimension</span>(<span class="ident">Px</span>(<span class="number">50.0</span>))), |
| height: <span class="ident">LengthPercentage</span>(<span class="ident">Dimension</span>(<span class="ident">Px</span>(<span class="number">100.0</span>))), |
| }, |
| attachment: <span class="ident">Scroll</span>, |
| origin: <span class="ident">PaddingBox</span>, |
| clip: <span class="ident">BorderBox</span>, |
| }])</code></pre> |
| </section> |
| </main> |
| <footer> |
| Copyright © 2024 Devon Govett and Parcel Contributors. |
| </footer> |
| <style> |
| html { |
| color-scheme: dark; |
| background: #111; |
| } |
| |
| body { |
| font-family: system-ui; |
| --gold: lch(80% 82.34 80.104); |
| --gold-text: lch(85% 82.34 80.104); |
| --gold-shadow: lch(80% 82.34 80.104 / .7); |
| } |
| |
| @font-face { |
| font-family:"din-1451-lt-pro-engschrift"; |
| src:url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/l?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/d?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/a?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("opentype"); |
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; |
| } |
| |
| @font-face { |
| font-family:"urbane-rounded"; |
| src:url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("opentype"); |
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; |
| } |
| |
| header { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 100px 0; |
| font-size: 16px; |
| background: radial-gradient(closest-side, lch(80% 82.34 80.104 / .3), transparent); |
| display: grid; |
| column-gap: 50px; |
| grid-template-areas: "logo header" |
| "logo subheader" |
| ". links"; |
| } |
| |
| header svg { |
| filter: drop-shadow(0 0 5px var(--gold-shadow)) drop-shadow(0 0 20px var(--gold-shadow)); |
| grid-area: logo; |
| place-self: center end; |
| width: 100px; |
| } |
| |
| header svg .outer { |
| stroke-width: 30px; |
| stroke: var(--gold); |
| } |
| |
| header svg .inner { |
| fill: lch(100% 82.34 80.104); |
| } |
| |
| header h1 { |
| font-family: urbane-rounded; |
| font-size: 100px; |
| -webkit-text-stroke: 3px var(--gold-text); |
| color: transparent; |
| filter: drop-shadow(0 0 3px var(--gold-shadow)) drop-shadow(0 0 15px var(--gold)); |
| padding: 20px 0; |
| margin: 0; |
| letter-spacing: -0.02em; |
| } |
| |
| header h1::selection { |
| -webkit-text-stroke-color: #fffddd; |
| background-color: var(--gold-text); |
| } |
| |
| header h2 { |
| font-family: urbane-rounded; |
| color: lch(65% 85 35); |
| text-shadow: 0 0 20px lch(65% 85 35); |
| margin: 0; |
| letter-spacing: -0.02em; |
| } |
| |
| header p { |
| grid-area: links; |
| } |
| |
| header a { |
| font-family: urbane-rounded; |
| font-size: 1.05em; |
| color: lch(90% 50.34 80.104); |
| filter: drop-shadow(0 0 8px lch(90% 50.34 80.104 / .7)); |
| text-decoration-color: lch(90% 50.34 80.104 / 0); |
| text-decoration-style: wavy; |
| text-decoration-thickness: 2px; |
| text-underline-offset: 2px; |
| text-decoration-skip-ink: none; |
| transition: text-decoration-color 150ms; |
| } |
| |
| header a:hover { |
| text-decoration-color: lch(90% 50.34 80.104); |
| } |
| |
| @media (width < 950px) { |
| header { |
| column-gap: 30px; |
| } |
| |
| header h1 { |
| font-size: 80px; |
| } |
| |
| header h2 { |
| font-size: 20px; |
| } |
| |
| header svg { |
| width: 80px; |
| } |
| } |
| |
| @media (width < 800px) { |
| header { |
| column-gap: 15px; |
| padding: 30px 0; |
| } |
| |
| header h1 { |
| font-size: 60px; |
| } |
| |
| header h2 { |
| font-size: 16px; |
| } |
| |
| header a { |
| font-size: 14px; |
| } |
| |
| header svg { |
| width: 60px; |
| } |
| } |
| |
| @media (width < 500px) { |
| header { |
| grid-template-areas: "logo" |
| "header" |
| "subheader" |
| "links"; |
| place-items: center; |
| text-align: center; |
| gap: 8px; |
| } |
| header h1 { |
| font-size: 38px; |
| -webkit-text-stroke-width: 1.5px; |
| padding: 0; |
| } |
| |
| header h2 { |
| font-size: 14px; |
| } |
| |
| header a { |
| font-size: 13px; |
| } |
| |
| header svg { |
| place-self: center; |
| } |
| } |
| |
| main { |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| main section { |
| --padding: 60px; |
| padding: var(--padding); |
| margin: 60px; |
| font-size: 22px; |
| --radius: 50px; |
| border-radius: var(--radius); |
| } |
| |
| main section h3 { |
| margin-top: 0; |
| font-size: 1.8em; |
| } |
| |
| main section p { |
| line-height: 1.4em; |
| } |
| |
| main p a { |
| font-weight: bold; |
| font-size: 0.9em; |
| color: inherit; |
| text-decoration: none; |
| } |
| |
| main p a:hover { |
| text-decoration: underline; |
| } |
| |
| figure { |
| max-width: 800px; |
| margin: 0; |
| } |
| |
| figcaption { |
| font-size: 10px; |
| text-align: center; |
| margin-top: 20px; |
| } |
| |
| figcaption a { |
| color: inherit; |
| } |
| |
| @media (width < 500px) { |
| main section { |
| margin: 20px 10px; |
| --padding: 20px; |
| --radius: 20px; |
| font-size: 16px; |
| } |
| } |
| |
| .warp { |
| background: black; |
| color: white; |
| background-image: radial-gradient(rgb(10 3 34 / .2), rgb(10 3 34 / .7)), url(lightspeed.svg); |
| background-size: cover; |
| background-position: center center; |
| box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); |
| } |
| |
| .warp h3 { |
| color: var(--gold-text); |
| text-shadow: 0 0 15px var(--gold-shadow); |
| } |
| |
| .warp p { |
| max-width: 900px; |
| } |
| |
| .warp figcaption { |
| color: #aaa; |
| } |
| |
| .warp p a { |
| color: var(--gold-text); |
| text-shadow: 0 0 7px var(--gold-shadow); |
| } |
| |
| .crush { |
| 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)); |
| background-size: 600px auto, auto, auto; |
| background-repeat: no-repeat, repeat; |
| background-position: bottom right; |
| color: black; |
| padding-right: 550px; |
| } |
| |
| .crush h3 { |
| font-size: 3em; |
| margin-bottom: 0; |
| color: lch(42.758% 73.588 34.159); |
| -webkit-text-stroke: 1px black; |
| text-shadow: 3px 3px 0 black; |
| text-transform: uppercase; |
| width: fit-content; |
| word-spacing: .1em; |
| } |
| |
| .crush figcaption { |
| color: #222; |
| } |
| |
| .crush p a { |
| color: lch(30% 73.588 34.159); |
| } |
| |
| @media (width < 1200px) { |
| .crush { |
| padding-right: var(--padding); |
| padding-bottom: 500px; |
| background-position: bottom right; |
| background-size: auto 500px, auto, auto; |
| } |
| } |
| |
| @media (width < 500px) { |
| .crush { |
| padding-bottom: 300px; |
| background-size: auto 300px, auto, auto; |
| } |
| } |
| |
| .future { |
| background: #215178; |
| color: white; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='rgba(255,255,255,0.05)' fill-opacity='1'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), radial-gradient(#1F4D97, #030B16); |
| box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); |
| position: relative; |
| --color: lch(85% 58 205); |
| } |
| |
| .future .title { |
| font-family: din-1451-lt-pro-engschrift, sans-serif; |
| text-transform: uppercase; |
| position: absolute; |
| --height: 1.2em; |
| top: calc(var(--height) * -.5); |
| left: calc(var(--height) * 1.5); |
| margin-left: -5px; |
| background: var(--color); |
| filter: drop-shadow(0 0 8px var( --color)); |
| width: fit-content; |
| color: #030B16; |
| margin-top: 0; |
| } |
| |
| .future h3.title { |
| font-size: 1.6em; |
| line-height: var(--height); |
| } |
| |
| .future h4.title { |
| font-size: 16px; |
| line-height: var(--height); |
| } |
| |
| .future .title:before { |
| content: ''; |
| display: inline-block; |
| position: absolute; |
| right: 100%; |
| width: 0; |
| height: 0; |
| border-top: var(--height) solid var( --color); |
| border-left: var(--height) solid transparent; |
| } |
| |
| .future .title:after { |
| content: ''; |
| display: inline-block; |
| position: absolute; |
| left: 100%; |
| width: 0; |
| height: 0; |
| border-bottom: var(--height) solid var( --color); |
| border-right: var(--height) solid transparent; |
| } |
| |
| .future .inner { |
| border: 2px solid var(--color); |
| box-shadow: 0 0 15px var( --color), inset 0 0 15px var( --color); |
| border-radius: 20px; |
| padding: 20px; |
| display: flex; |
| flex-direction: row; |
| position: relative; |
| } |
| |
| .future .description { |
| margin: 40px; |
| } |
| |
| .future .description p:first-child { |
| margin-top: 0; |
| } |
| |
| .future .description p:last-child { |
| margin-bottom: 0; |
| } |
| |
| .future .example { |
| display: flex; |
| flex-direction: column; |
| gap: 30px; |
| flex-shrink: 0; |
| } |
| |
| .future .box { |
| --color: lch(64% 103 0); |
| border: 2px solid var(--color); |
| background: lch(64% 103 0 / .15); |
| border-radius: 10px; |
| box-shadow: 0 0 20px var(--color), inset 0 0 10px var(--color); |
| padding: 15px; |
| text-shadow: 0 0 8px var(--color); |
| position: relative; |
| width: fit-content; |
| margin-left: auto; |
| max-width: 100%; |
| box-sizing: border-box; |
| } |
| |
| .future .box code { |
| font-size: 14px; |
| display: block; |
| overflow: visible auto; |
| } |
| |
| .future .box .title { |
| color: white |
| } |
| |
| .future .box .property { |
| color: white; |
| } |
| |
| .future .box .keyword { |
| color: var(--color); |
| } |
| |
| .future .box .number { |
| color: lch(71% 103 52); |
| } |
| |
| .future .box .class { |
| color: lch(87% 107 89); |
| } |
| |
| .future .targets h4 { |
| font-family: din-1451-lt-pro-engschrift, sans-serif; |
| text-transform: uppercase; |
| display: inline; |
| vertical-align: middle; |
| margin: 0; |
| margin-right: 10px; |
| color: lch(85% 58 205 / .7); |
| } |
| |
| .future .targets { |
| border: 2px solid lch(85% 58 205 / .5); |
| box-shadow: 0 0 10px lch(85% 58 205 / .5); |
| border-radius: 6px; |
| padding: 8px; |
| width: fit-content; |
| margin-left: auto; |
| font-size: 16px; |
| } |
| |
| .future .targets code { |
| font-size: 15px; |
| } |
| |
| .future a { |
| color: lch(85% 58 205); |
| text-shadow: 0 0 10px lch(85% 58 205 / .6); |
| } |
| |
| @media (width < 1200px) { |
| .future .inner { |
| flex-direction: column; |
| } |
| |
| .future .box, .future .targets { |
| margin-left: 0 |
| } |
| } |
| |
| @media (width < 500px) { |
| .future .description { |
| margin: 20px 4px; |
| } |
| |
| .future .box { |
| padding: 10px; |
| } |
| |
| .future .targets h4 { |
| display: block; |
| } |
| } |
| |
| .parser { |
| background-image: linear-gradient(rgb(0 0 0 / .1), rgb(0 0 0 / .1)), image-set("metal.jpeg?as=webp&width=1200" 1x, "metal.jpeg?as=webp&width=2400" 2x); |
| background-size: cover; |
| color: black; |
| text-shadow: inset 0 2px 5px black; |
| position: relative; |
| --inset: 35px; |
| padding: calc(var(--padding) + var(--inset) * .6); |
| display: flex; |
| column-gap: 40px; |
| row-gap: 20px; |
| box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); |
| } |
| |
| .parser > * { |
| z-index: 2; |
| } |
| |
| .parser:before { |
| content: ''; |
| position: absolute; |
| inset: calc(var(--inset) / 2); |
| border-radius: calc(var(--radius) * .8); |
| box-shadow: inset 2px 3px 10px rgb(0 0 0 / .7), 1px 1px 0 rgb(255 255 255 / .4); |
| background: rgb(0 0 0 / .05); |
| pointer-events: none; |
| z-index: 0; |
| } |
| |
| .parser:after { |
| content: ''; |
| position: absolute; |
| inset: var(--inset); |
| border-radius: calc(var(--radius) * .4); |
| box-shadow: inset 1px 1px 0 rgb(255 255 255 / .4), 2px 3px 10px rgb(0 0 0 / .7); |
| background: rgb(255 255 255 / .25); |
| pointer-events: none; |
| z-index: 1; |
| } |
| |
| .parser h3 { |
| font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| text-shadow: 3px 3px 2px rgba(255,255,255,0.35); |
| background-color: rgba(0 0 0 / .65); |
| color: transparent; |
| -webkit-background-clip: text; |
| background-clip: text; |
| } |
| |
| .parser p { |
| text-shadow: 0 1px 0 white; |
| } |
| |
| .parser p:last-child { |
| margin-bottom: 0; |
| } |
| |
| .parser pre { |
| padding: 20px; |
| width: fit-content; |
| margin: 0; |
| margin-right: -40px; |
| font-size: .6em; |
| display: flex; |
| align-items: end; |
| text-shadow: 0 1px 0 rgb(255 255 255 / .6); |
| font-weight: bold; |
| overflow: auto; |
| max-width: 100%; |
| flex-shrink: 0; |
| margin-top: auto; |
| } |
| |
| .parser pre .ident { |
| color: lch(30% 80 300); |
| } |
| |
| .parser pre .string { |
| color: lch(40% 108 144); |
| } |
| |
| .parser pre .number { |
| color: lch(35% 117 348); |
| } |
| |
| .parser a { |
| color: black; |
| } |
| |
| .parser p:last-of-type a { |
| font-size: 0.8em; |
| } |
| |
| @media (width < 1200px) { |
| .parser { |
| flex-direction: column; |
| } |
| |
| .parser pre { |
| margin: 0; |
| padding: 0; |
| } |
| } |
| |
| @media (width < 500px) { |
| .parser { |
| --inset: 25px; |
| } |
| |
| .parser p, .parser pre { |
| text-shadow: 0 1px 0 rgb(255 255 255 / .6); |
| } |
| } |
| |
| .modules { |
| background: black; |
| box-shadow: 0 0 0 1px rgb(255 255 255 / .2), 2px 2px 5px rgb(255 255 255 / .2); |
| padding: 0; |
| display: grid; |
| grid-template-areas: "main input input" |
| "main output json"; |
| } |
| |
| .modules .compartment { |
| padding: max(20px, calc(var(--padding) / 2)); |
| border: 20px solid black; |
| border-radius: 40px; |
| --shadow-size: 20px; |
| --inner-shadow-size: 2px; |
| box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15), inset -1px -1px var(--inner-shadow-size) rgb(255 255 255 / .3), inset 4px 8px var(--shadow-size) rgb(0 0 0 / .9); |
| margin: 0; |
| overflow: auto; |
| background: #ba1921; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%23fff' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E"); |
| } |
| |
| .modules .compartment.main { |
| grid-area: main; |
| border-top-left-radius: 50px; |
| border-bottom-left-radius: 50px; |
| padding: 60px 60px 50px 60px; |
| margin-right: -20px; |
| --shadow-size: 40px; |
| --inner-shadow-size: 4px; |
| } |
| |
| .modules .compartment.main p:last-child { |
| margin-bottom: 0; |
| } |
| |
| .modules .compartment:not(.main) { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .modules h3 { |
| text-transform: uppercase; |
| font-size: 1.45em; |
| border-top: 4px solid white; |
| border-bottom: 4px solid white; |
| line-height: 1.5em; |
| width: fit-content; |
| } |
| |
| .modules p { |
| font-family: Georgia, 'Times New Roman', Times, serif; |
| font-size: 0.87em; |
| } |
| |
| .modules pre { |
| font-size: 14px; |
| } |
| |
| .modules .compartment.input { |
| grid-area: input; |
| border-top-right-radius: 50px; |
| } |
| |
| .modules .compartment.output { |
| grid-area: output; |
| margin-top: -20px; |
| } |
| |
| .modules .compartment.json { |
| grid-area: json; |
| margin-top: -20px; |
| margin-left: -20px; |
| border-bottom-right-radius: 50px; |
| } |
| |
| @media (width < 1200px) { |
| .modules { |
| grid-template-areas: "main main" |
| "input input" |
| "output json"; |
| } |
| |
| .modules .compartment.main { |
| border-top-right-radius: 50px; |
| margin-right: 0; |
| } |
| |
| .modules .compartment.input { |
| margin-top: -20px; |
| } |
| |
| .modules .compartment.output { |
| border-bottom-left-radius: 50px; |
| } |
| |
| .modules .compartment:not(.main) { |
| justify-content: start; |
| } |
| } |
| |
| @media (width < 500px) { |
| .modules { |
| grid-template-areas: "main" "input" "output" "json"; |
| } |
| |
| .modules .compartment { |
| border-radius: calc(var(--radius) * 1.5) !important; |
| --shadow-size: 15px; |
| } |
| |
| .modules .compartment.main { |
| padding: 30px; |
| --shadow-size: 25px; |
| } |
| |
| .modules .compartment.json { |
| margin: 0; |
| margin-top: -20px; |
| } |
| |
| .modules pre { |
| font-size: 12px; |
| } |
| } |
| |
| footer { |
| font-size: 12px; |
| color: #666; |
| text-align: center; |
| padding-bottom: 20px; |
| } |
| |
| @media (width < 600px) { |
| .chart .line { |
| display: none; |
| } |
| } |
| </style> |
| </body> |
| </html> |
