Files
shoelace/docs/pages/index.md
Cory LaViska bd50b7d4d7 test
2025-10-29 11:44:12 -04:00

24 KiB

layout
layout
blank.njk
<style> html, body, .theme-showcase { background-color: var(--wa-color-surface-lowered); } .showcase-examples-wrapper { container-type: inline-size; inline-size: 100%; min-block-size: 100%; box-sizing: border-box; padding: 1.75rem; background-color: var(--wa-color-surface-lowered); } .showcase-examples { column-count: 1; column-gap: var(--wa-space-l); & wa-card { display: inline-flex; width: 100%; &:has(+ wa-card) { margin-block-end: var(--wa-space-l); } &[appearance="plain"] { background-color: transparent !important; border-color: transparent !important; } } @container (width > 500px) { column-count: 2; } @container (width > 750px) { column-count: 3; } @container (width > 950px) { column-count: auto; column-width: 22rem; } } .showcase-code-sample { --spacing: 0; overflow: hidden; pre { color: var(--wa-color-text-quiet); } .tag { color: var(--wa-color-indigo-40); } .attribute { color: var(--wa-color-green-40); } .value { color: var(--wa-color-brand-40); } .wa-dark & { .tag { color: var(--wa-color-indigo-70); } .attribute { color: var(--wa-color-green-70); } .value { color: var(--wa-color-brand-70); } } } .theme-showcase { isolation: isolate; background-color: var(--wa-color-surface-lowered); border-radius: var(--wa-border-radius-l); overflow: hidden; @media (width < 500px) { flex-flow: column; } header { min-width: min(25ch, 100vw); align-self: center; padding: var(--wa-space-xl); box-sizing: border-box; h1 { margin-bottom: var(--wa-space-2xs); } wa-breadcrumb-item:not(:first-of-type, :last-of-type) { display: none; } p:empty { display: none; } } } wa-progress-bar { --track-height: 0.5em; } </style>