@luz-ds/landing 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -11
- package/dist/classes.json +1 -1
- package/dist/components/footer.css +1 -1
- package/dist/components/footer.min.css +1 -1
- package/dist/components/glow.css +1 -1
- package/dist/components/glow.min.css +1 -1
- package/dist/components/header.css +1 -1
- package/dist/components/header.min.css +1 -1
- package/dist/components/hero.css +1 -1
- package/dist/components/hero.min.css +1 -1
- package/dist/components/main.css +1 -1
- package/dist/components/main.min.css +1 -1
- package/dist/components/section.css +1 -1
- package/dist/components/section.min.css +1 -1
- package/dist/components/stat.css +1 -1
- package/dist/components/stat.min.css +1 -1
- package/dist/landing.css +2 -2
- package/dist/landing.min.css +1 -1
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @luz-ds/landing
|
|
2
2
|
|
|
3
|
-
The page structure of one kind of site, a landing page: the page of a product, a service or an event that asks the visitor to act. Its header, hero, main, sections, stats, footer and glow are classes on native elements, laid out in the markup by core's objects (`.o-page`, `.o-sticky`, `.o-container`, `.o-row`, `.o-stack`, `.o-grid--split`) and core's navbar; this package adds only their skin and rhythm. `@luz-ds/
|
|
3
|
+
The page structure of one kind of site, a landing page: the page of a product, a service or an event that asks the visitor to act. Its header, hero, main, sections, stats, footer and glow are classes on native elements, laid out in the markup by core's objects (`.o-page`, `.o-sticky`, `.o-container`, `.o-row`, `.o-stack`, `.o-grid--split`) and core's navbar; this package adds only their skin and rhythm. `@luz-ds/catalog` is optional: load it for the search, the language switch or the cookie banner.
|
|
4
4
|
|
|
5
|
-
> **Beta, version 0.x.** Landing has a version of its own, apart from tokens, core and
|
|
5
|
+
> **Beta, version 0.x.** Landing has a version of its own, apart from tokens, core and catalog, and grows in minor versions while it is 0.x: any of them may change a class. Pin an exact version and read the changelog before you upgrade.
|
|
6
6
|
|
|
7
7
|
## When to use it
|
|
8
8
|
|
|
@@ -13,12 +13,12 @@ The blocks of an event landing page (hero, programme, speakers, tickets, call to
|
|
|
13
13
|
|
|
14
14
|
## Prerequisites
|
|
15
15
|
|
|
16
|
-
Requires `@luz-ds/tokens` and `@luz-ds/core`, version `^0.1.0`, declared as peer dependencies, loaded in that order before this package. `@luz-ds/
|
|
16
|
+
Requires `@luz-ds/tokens` and `@luz-ds/core`, version `^0.1.0 || ^0.2.0`, declared as peer dependencies, loaded in that order before this package. `@luz-ds/catalog` (`^0.1.0 || ^0.2.0`) is an optional peer: load it before this package if you use its pieces; the patterns work without it.
|
|
17
17
|
|
|
18
18
|
## Installation
|
|
19
19
|
|
|
20
20
|
```bash
|
|
21
|
-
npm install @luz-ds/tokens @luz-ds/core @luz-ds/
|
|
21
|
+
npm install @luz-ds/tokens @luz-ds/core @luz-ds/catalog @luz-ds/landing
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
## Usage
|
|
@@ -28,7 +28,7 @@ npm install @luz-ds/tokens @luz-ds/core @luz-ds/site @luz-ds/landing
|
|
|
28
28
|
```js
|
|
29
29
|
import '@luz-ds/tokens/css'
|
|
30
30
|
import '@luz-ds/core/css'
|
|
31
|
-
import '@luz-ds/
|
|
31
|
+
import '@luz-ds/catalog/css'
|
|
32
32
|
import '@luz-ds/landing/css'
|
|
33
33
|
```
|
|
34
34
|
|
|
@@ -37,15 +37,15 @@ import '@luz-ds/landing/css'
|
|
|
37
37
|
```html
|
|
38
38
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.1.0/dist/luz-tokens.min.css">
|
|
39
39
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.1.0/dist/luz.min.css">
|
|
40
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/
|
|
40
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.1.0/dist/catalog.min.css">
|
|
41
41
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/landing@0.1.0/dist/landing.min.css">
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
There is no script. Add core's and
|
|
44
|
+
There is no script. Add core's and catalog's if you use their behaviours.
|
|
45
45
|
|
|
46
46
|
## Package exports
|
|
47
47
|
|
|
48
|
-
- **`./css`** → `landing.css` — the patterns, in the cascade layer `luz.landing`, after `luz.
|
|
48
|
+
- **`./css`** → `landing.css` — the patterns, in the cascade layer `luz.landing`, after `luz.catalog` (`./css/min` for the minified twin)
|
|
49
49
|
- **`./components/*`** → `dist/components/` — one stylesheet per pattern, `<name>.css` and `<name>.min.css`, each in `luz.landing`, for a page that loads only what it uses
|
|
50
50
|
|
|
51
51
|
## Classes included
|
|
@@ -59,11 +59,11 @@ There is no script. Add core's and site's if you use their behaviours.
|
|
|
59
59
|
<!-- luz:ai-agents:start -->
|
|
60
60
|
## For AI agents
|
|
61
61
|
|
|
62
|
-
`@luz-ds/landing` 0.
|
|
62
|
+
`@luz-ds/landing` 0.2.0 is in beta: any release may break anything. Read the breaking changes below before you update, and use only what the files under "Read first" list.
|
|
63
63
|
|
|
64
64
|
### Breaking changes
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
#### Breaking: `@luz-ds/site` is now `@luz-ds/catalog`, the name the home and the docs already gave to level 3. Install `@luz-ds/catalog` and load `catalog.css` / `catalog.min.css` and `catalog.js` / `catalog.min.js` where you loaded the `site.*` files; its subpaths (`/search`, `/consent`, `/mode`, `/css`, `/css/min`, `/print.css`, `/components/*`, `/classes.json`, `/custom-elements.json`) keep their names. The cascade layer is `luz.catalog` instead of `luz.site`, in the order statement every stylesheet repeats (so tokens and core change too). The landing, cms, app and docs packages take `@luz-ds/catalog` as their optional peer. `luz-check` reads the new names and its `load/order` rule says tokens, core, catalog. The docs of the package are at `/docs/catalog/` (was `/docs/site/`). The tags (`<luz-search>`, `<luz-consent>`, `<luz-mode>`, `<luz-lang-switch>`, `<luz-submenu>`, `<luz-banner>`) and their classes do not change.
|
|
67
67
|
|
|
68
68
|
Older versions: https://github.com/nandovejer/luz/blob/main/packages/landing/CHANGELOG.md
|
|
69
69
|
|
|
@@ -78,7 +78,7 @@ Older versions: https://github.com/nandovejer/luz/blob/main/packages/landing/CHA
|
|
|
78
78
|
|
|
79
79
|
This package needs `@luz-ds/tokens` and `@luz-ds/core` loaded first.
|
|
80
80
|
|
|
81
|
-
`@luz-ds/
|
|
81
|
+
`@luz-ds/catalog` is optional: the CSS of this package works with the packages above alone.
|
|
82
82
|
|
|
83
83
|
### Check what you write
|
|
84
84
|
|
package/dist/classes.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schema": 1,
|
|
3
3
|
"package": "@luz-ds/landing",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"classes": [
|
|
6
6
|
{ "name": "luz-landing-footer", "kind": "pattern", "layer": "luz.landing", "files": ["components/footer.css"], "defined": true, "block": "luz-landing-footer" },
|
|
7
7
|
{ "name": "luz-landing-footer__brand", "kind": "pattern", "layer": "luz.landing", "files": ["components/footer.css"], "defined": true, "block": "luz-landing-footer", "part": "brand" },
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
2
|
@layer luz.landing {
|
|
3
3
|
/* ==========================================================================
|
|
4
4
|
LUZ Landing: footer.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.landing{.luz-landing-footer{padding-block:var(--luz-space-lg) var(--luz-space-xl);border-block-start:1px solid var(--luz-divider)}.luz-landing-footer>.o-row{justify-content:space-between;gap:var(--luz-space-md)}@media(max-width:768px){.luz-landing-footer>.o-row{flex-flow:column nowrap;align-items:flex-start}}.luz-landing-footer>.o-grid{gap:var(--luz-space-lg)}@media(min-width:768px){.luz-landing-footer>.o-grid{grid-template-columns:minmax(0,2fr);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}}.luz-landing-footer__brand,.luz-landing-footer__col,.luz-landing-footer__col :where(ul){display:grid;align-content:start;gap:var(--luz-space-xs);margin:0}.luz-landing-footer__brand>*,.luz-landing-footer__col-title{margin:0}.luz-landing-footer__col-title{font-family:var(--luz-font-sans);font-size:var(--luz-text-sm);font-weight:600;letter-spacing:0;color:var(--luz-text-primary)}.luz-landing-footer__col :where(ul){padding:0;list-style:none}.luz-landing-footer__col :where(a){display:inline-flex;align-items:center;min-block-size:var(--luz-control-sm)}}
|
package/dist/components/glow.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
2
|
@layer luz.landing {
|
|
3
3
|
/* ==========================================================================
|
|
4
4
|
LUZ Landing: glow.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.landing{.luz-landing-glow{--luz-landing-glow-start: 100%;background:radial-gradient(circle at var(--luz-landing-glow-x, var(--luz-landing-glow-start)) 0%,var(--luz-brand-subtle),transparent 28%),linear-gradient(180deg,var(--luz-surface-page) 0%,var(--luz-surface-muted) 100%)}.luz-landing-glow:dir(ltr){--luz-landing-glow-start: 0%}@media print{.luz-landing-glow{background:none}}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
2
|
@layer luz.landing {
|
|
3
3
|
/* ==========================================================================
|
|
4
4
|
LUZ Landing: header.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.landing{.luz-landing-header{padding-block:var(--luz-space-2xs);border-block-end:1px solid var(--luz-divider);background:var(--luz-surface-page)}.luz-landing-header>.o-row{gap:var(--luz-space-xs) var(--luz-space-md)}.luz-landing-header__brand{display:inline-flex;align-items:center;gap:var(--luz-space-xs);min-block-size:var(--luz-control-lg);margin-inline-end:auto;color:var(--luz-text-primary);font-family:var(--luz-font-sans);font-size:var(--luz-text-base);font-weight:600;text-decoration:none}.luz-landing-header__actions{gap:var(--luz-space-xs)}.luz-landing-header :where(luz-lang-switch){--luz-lang-switch-top: var(--luz-bar-h)}@media(min-width:769px){.luz-landing-header>.o-row{column-gap:var(--luz-space-lg)}}@supports (anchor-name: --luz-bar){.luz-landing-header{anchor-name:--luz-bar;anchor-scope:--luz-bar}.luz-landing-header :where(luz-lang-switch){--luz-lang-switch-top: anchor(--luz-bar end, var(--luz-bar-h))}}}
|
package/dist/components/hero.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
2
|
@layer luz.landing {
|
|
3
3
|
/* ==========================================================================
|
|
4
4
|
LUZ Landing: hero.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.landing{.luz-landing-hero{--luz-grid-min: 24rem;gap:var(--luz-space-xl) var(--luz-space-2xl);align-items:center;padding-block-start:var(--luz-space-3xl)}.luz-landing-hero__copy,.luz-landing-hero__media{min-inline-size:0}.luz-landing-hero__copy{overflow-wrap:anywhere}.luz-landing-hero__eyebrow,.luz-landing-section__eyebrow{margin-block-end:var(--luz-space-sm);font-family:var(--luz-font-mono);font-size:var(--luz-text-xs);font-weight:500;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--luz-text-secondary)}.luz-landing-hero__title,.luz-landing-section__title{font-family:var(--luz-font-heading);font-size:var(--luz-text-4xl);font-weight:300;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;color:var(--luz-text-primary)}.luz-landing-hero__eyebrow:lang(ar),.luz-landing-section__eyebrow:lang(ar){font-family:var(--luz-font-sans)}.luz-landing-hero__eyebrow:lang(ar),.luz-landing-section__eyebrow:lang(ar),.luz-landing-hero__title:lang(ar),.luz-landing-section__title:lang(ar){letter-spacing:0}.luz-landing-hero__lead,.luz-landing-section__lead{max-inline-size:70ch;font-size:var(--luz-text-xl);line-height:1.4;text-wrap:pretty;color:var(--luz-text-secondary)}.luz-landing-hero__lead{margin-block:var(--luz-space-md) var(--luz-space-lg)}.luz-landing-hero--centered{--luz-grid-min: 100%;text-align:center}.luz-landing-hero--centered>.luz-landing-hero__copy{justify-self:center;max-inline-size:min(100%,48rem)}.luz-landing-hero--centered .luz-landing-hero__lead{margin-inline:auto}.luz-landing-hero--centered .o-actions{justify-content:center}:root:has(.luz-landing-hero__media--bleed){container-type:inline-size}.luz-landing-hero__media--bleed{margin-inline:calc(50% - 50cqi)}@media(max-width:1023px){.luz-landing-hero{padding-block-start:calc(var(--luz-space-xl) + var(--luz-space-xs))}.luz-landing-hero__title{font-size:var(--luz-text-3xl)}.luz-landing-hero__lead{font-size:var(--luz-text-lg)}}@media(max-width:640px){.luz-landing-hero__title{font-size:var(--luz-text-2xl)}.luz-landing-hero__lead{font-size:var(--luz-text-base)}}}
|
package/dist/components/main.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
2
|
@layer luz.landing {
|
|
3
3
|
/* ==========================================================================
|
|
4
4
|
LUZ Landing: main.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.landing{.luz-landing-main{gap:var(--luz-space-3xl);padding-block:0 var(--luz-space-3xl)}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
2
|
@layer luz.landing {
|
|
3
3
|
/* ==========================================================================
|
|
4
4
|
LUZ Landing: section.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.landing{.luz-landing-section{gap:var(--luz-space-md)}.luz-landing-section__eyebrow{margin-block-end:0}.luz-landing-section__title,.luz-landing-stat__value{font-size:var(--luz-text-3xl)}.luz-landing-hero__title em,.luz-landing-section__title em{color:var(--luz-landing-title-accent, inherit)}.luz-landing-section__lead{font-size:var(--luz-text-lg)}@media(max-width:1023px){.luz-landing-section__title,.luz-landing-stat__value{font-size:var(--luz-text-2xl)}}@media(max-width:640px){.luz-landing-section__title,.luz-landing-stat__value{font-size:var(--luz-text-xl)}.luz-landing-section__lead{font-size:var(--luz-text-base)}}}
|
package/dist/components/stat.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
2
|
@layer luz.landing {
|
|
3
3
|
/* ==========================================================================
|
|
4
4
|
LUZ Landing: stat.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.landing{.luz-landing-stat{display:grid;gap:var(--luz-space-2xs);min-inline-size:0}.luz-landing-stat>*{margin:0}.luz-landing-stat__value{font-family:var(--luz-font-heading);font-weight:300;font-variant-numeric:tabular-nums;line-height:1.1;overflow-wrap:anywhere;color:var(--luz-text-primary)}.luz-landing-stat__label{font-size:var(--luz-text-base);color:var(--luz-text-secondary)}}
|
package/dist/landing.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
2
|
@layer luz.landing {
|
|
3
3
|
/* ==========================================================================
|
|
4
4
|
LUZ Landing
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
a native element, laid out in the markup by core's objects (.o-page,
|
|
8
8
|
.o-sticky, .o-container, .o-row, .o-stack, .o-grid--split); the landing
|
|
9
9
|
adds only its skin and its rhythm.
|
|
10
|
-
Requires: @luz-ds/tokens and @luz-ds/core loaded first; @luz-ds/
|
|
10
|
+
Requires: @luz-ds/tokens and @luz-ds/core loaded first; @luz-ds/catalog
|
|
11
11
|
optional, loaded before this file.
|
|
12
12
|
========================================================================== */
|
|
13
13
|
|
package/dist/landing.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.landing{.luz-landing-header{padding-block:var(--luz-space-2xs);border-block-end:1px solid var(--luz-divider);background:var(--luz-surface-page)}.luz-landing-header>.o-row{gap:var(--luz-space-xs) var(--luz-space-md)}.luz-landing-header__brand{display:inline-flex;align-items:center;gap:var(--luz-space-xs);min-block-size:var(--luz-control-lg);margin-inline-end:auto;color:var(--luz-text-primary);font-family:var(--luz-font-sans);font-size:var(--luz-text-base);font-weight:600;text-decoration:none}.luz-landing-header__actions{gap:var(--luz-space-xs)}.luz-landing-header :where(luz-lang-switch){--luz-lang-switch-top: var(--luz-bar-h)}@media(min-width:769px){.luz-landing-header>.o-row{column-gap:var(--luz-space-lg)}}@supports (anchor-name: --luz-bar){.luz-landing-header{anchor-name:--luz-bar;anchor-scope:--luz-bar}.luz-landing-header :where(luz-lang-switch){--luz-lang-switch-top: anchor(--luz-bar end, var(--luz-bar-h))}}.luz-landing-hero{--luz-grid-min: 24rem;gap:var(--luz-space-xl) var(--luz-space-2xl);align-items:center;padding-block-start:var(--luz-space-3xl)}.luz-landing-hero__copy,.luz-landing-hero__media{min-inline-size:0}.luz-landing-hero__copy{overflow-wrap:anywhere}.luz-landing-hero__eyebrow,.luz-landing-section__eyebrow{margin-block-end:var(--luz-space-sm);font-family:var(--luz-font-mono);font-size:var(--luz-text-xs);font-weight:500;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--luz-text-secondary)}.luz-landing-hero__title,.luz-landing-section__title{font-family:var(--luz-font-heading);font-size:var(--luz-text-4xl);font-weight:300;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;color:var(--luz-text-primary)}.luz-landing-hero__eyebrow:lang(ar),.luz-landing-section__eyebrow:lang(ar){font-family:var(--luz-font-sans)}.luz-landing-hero__eyebrow:lang(ar),.luz-landing-section__eyebrow:lang(ar),.luz-landing-hero__title:lang(ar),.luz-landing-section__title:lang(ar){letter-spacing:0}.luz-landing-hero__lead,.luz-landing-section__lead{max-inline-size:70ch;font-size:var(--luz-text-xl);line-height:1.4;text-wrap:pretty;color:var(--luz-text-secondary)}.luz-landing-hero__lead{margin-block:var(--luz-space-md) var(--luz-space-lg)}.luz-landing-hero--centered{--luz-grid-min: 100%;text-align:center}.luz-landing-hero--centered>.luz-landing-hero__copy{justify-self:center;max-inline-size:min(100%,48rem)}.luz-landing-hero--centered .luz-landing-hero__lead{margin-inline:auto}.luz-landing-hero--centered .o-actions{justify-content:center}:root:has(.luz-landing-hero__media--bleed){container-type:inline-size}.luz-landing-hero__media--bleed{margin-inline:calc(50% - 50cqi)}@media(max-width:1023px){.luz-landing-hero{padding-block-start:calc(var(--luz-space-xl) + var(--luz-space-xs))}.luz-landing-hero__title{font-size:var(--luz-text-3xl)}.luz-landing-hero__lead{font-size:var(--luz-text-lg)}}@media(max-width:640px){.luz-landing-hero__title{font-size:var(--luz-text-2xl)}.luz-landing-hero__lead{font-size:var(--luz-text-base)}}.luz-landing-main{gap:var(--luz-space-3xl);padding-block:0 var(--luz-space-3xl)}.luz-landing-section{gap:var(--luz-space-md)}.luz-landing-section__eyebrow{margin-block-end:0}.luz-landing-section__title,.luz-landing-stat__value{font-size:var(--luz-text-3xl)}.luz-landing-hero__title em,.luz-landing-section__title em{color:var(--luz-landing-title-accent, inherit)}.luz-landing-section__lead{font-size:var(--luz-text-lg)}@media(max-width:1023px){.luz-landing-section__title,.luz-landing-stat__value{font-size:var(--luz-text-2xl)}}@media(max-width:640px){.luz-landing-section__title,.luz-landing-stat__value{font-size:var(--luz-text-xl)}.luz-landing-section__lead{font-size:var(--luz-text-base)}}.luz-landing-stat{display:grid;gap:var(--luz-space-2xs);min-inline-size:0}.luz-landing-stat>*{margin:0}.luz-landing-stat__value{font-family:var(--luz-font-heading);font-weight:300;font-variant-numeric:tabular-nums;line-height:1.1;overflow-wrap:anywhere;color:var(--luz-text-primary)}.luz-landing-stat__label{font-size:var(--luz-text-base);color:var(--luz-text-secondary)}.luz-landing-footer{padding-block:var(--luz-space-lg) var(--luz-space-xl);border-block-start:1px solid var(--luz-divider)}.luz-landing-footer>.o-row{justify-content:space-between;gap:var(--luz-space-md)}@media(max-width:768px){.luz-landing-footer>.o-row{flex-flow:column nowrap;align-items:flex-start}}.luz-landing-footer>.o-grid{gap:var(--luz-space-lg)}@media(min-width:768px){.luz-landing-footer>.o-grid{grid-template-columns:minmax(0,2fr);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}}.luz-landing-footer__brand,.luz-landing-footer__col,.luz-landing-footer__col :where(ul){display:grid;align-content:start;gap:var(--luz-space-xs);margin:0}.luz-landing-footer__brand>*,.luz-landing-footer__col-title{margin:0}.luz-landing-footer__col-title{font-family:var(--luz-font-sans);font-size:var(--luz-text-sm);font-weight:600;letter-spacing:0;color:var(--luz-text-primary)}.luz-landing-footer__col :where(ul){padding:0;list-style:none}.luz-landing-footer__col :where(a){display:inline-flex;align-items:center;min-block-size:var(--luz-control-sm)}.luz-landing-glow{--luz-landing-glow-start: 100%;background:radial-gradient(circle at var(--luz-landing-glow-x, var(--luz-landing-glow-start)) 0%,var(--luz-brand-subtle),transparent 28%),linear-gradient(180deg,var(--luz-surface-page) 0%,var(--luz-surface-muted) 100%)}.luz-landing-glow:dir(ltr){--luz-landing-glow-start: 0%}@media print{.luz-landing-glow{background:none}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luz-ds/landing",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "LUZ Design System — the page structure of a landing page (header, hero, main, sections, footer, glow), built on @luz-ds/core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -38,18 +38,18 @@
|
|
|
38
38
|
"access": "public"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"@luz-ds/core": "^0.1.0",
|
|
42
|
-
"@luz-ds/
|
|
43
|
-
"@luz-ds/tokens": "^0.1.0"
|
|
41
|
+
"@luz-ds/core": "^0.1.0 || ^0.2.0",
|
|
42
|
+
"@luz-ds/catalog": "^0.1.0 || ^0.2.0",
|
|
43
|
+
"@luz-ds/tokens": "^0.1.0 || ^0.2.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependenciesMeta": {
|
|
46
|
-
"@luz-ds/
|
|
46
|
+
"@luz-ds/catalog": {
|
|
47
47
|
"optional": true
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@luz-ds/
|
|
52
|
-
"@luz-ds/core": "0.
|
|
53
|
-
"@luz-ds/tokens": "0.
|
|
51
|
+
"@luz-ds/catalog": "0.2.0",
|
|
52
|
+
"@luz-ds/core": "0.2.0",
|
|
53
|
+
"@luz-ds/tokens": "0.2.0"
|
|
54
54
|
}
|
|
55
55
|
}
|