diff --git a/docs/gallery/anvil/index.html b/docs/gallery/anvil/index.html index 2a3f191f..0d10560c 100644 --- a/docs/gallery/anvil/index.html +++ b/docs/gallery/anvil/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/apothecary-shelf/index.html b/docs/gallery/apothecary-shelf/index.html index 00367832..b7c155c3 100644 --- a/docs/gallery/apothecary-shelf/index.html +++ b/docs/gallery/apothecary-shelf/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/armature-bend/index.html b/docs/gallery/armature-bend/index.html index 9edb1674..f3961581 100644 --- a/docs/gallery/armature-bend/index.html +++ b/docs/gallery/armature-bend/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/attribute-domain-shear/index.html b/docs/gallery/attribute-domain-shear/index.html index 1c757ec8..cf250513 100644 --- a/docs/gallery/attribute-domain-shear/index.html +++ b/docs/gallery/attribute-domain-shear/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/bake-normal-high-to-low/index.html b/docs/gallery/bake-normal-high-to-low/index.html index 91768b08..54b43927 100644 --- a/docs/gallery/bake-normal-high-to-low/index.html +++ b/docs/gallery/bake-normal-high-to-low/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/bmesh-gear/index.html b/docs/gallery/bmesh-gear/index.html index 6bfa1e15..625100a4 100644 --- a/docs/gallery/bmesh-gear/index.html +++ b/docs/gallery/bmesh-gear/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/book-trolley/index.html b/docs/gallery/book-trolley/index.html index 03074832..8e438b9a 100644 --- a/docs/gallery/book-trolley/index.html +++ b/docs/gallery/book-trolley/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/bookshelf/index.html b/docs/gallery/bookshelf/index.html index 1dd0ea9d..b9fd8f91 100644 --- a/docs/gallery/bookshelf/index.html +++ b/docs/gallery/bookshelf/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/brazier/index.html b/docs/gallery/brazier/index.html index 23321a96..f3200315 100644 --- a/docs/gallery/brazier/index.html +++ b/docs/gallery/brazier/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/butter-churn/index.html b/docs/gallery/butter-churn/index.html index 560f7bf3..09fc2327 100644 --- a/docs/gallery/butter-churn/index.html +++ b/docs/gallery/butter-churn/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/campfire/index.html b/docs/gallery/campfire/index.html index c298cbce..caec3f6d 100644 --- a/docs/gallery/campfire/index.html +++ b/docs/gallery/campfire/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/car-mirror-symmetry/index.html b/docs/gallery/car-mirror-symmetry/index.html index e92d364b..d29edb01 100644 --- a/docs/gallery/car-mirror-symmetry/index.html +++ b/docs/gallery/car-mirror-symmetry/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/cart/index.html b/docs/gallery/cart/index.html index 60ce6f92..e9a13815 100644 --- a/docs/gallery/cart/index.html +++ b/docs/gallery/cart/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/chopping-block/index.html b/docs/gallery/chopping-block/index.html index 7e950537..c1874772 100644 --- a/docs/gallery/chopping-block/index.html +++ b/docs/gallery/chopping-block/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/collision-hull-proxy/index.html b/docs/gallery/collision-hull-proxy/index.html index 2351b650..f60bca94 100644 --- a/docs/gallery/collision-hull-proxy/index.html +++ b/docs/gallery/collision-hull-proxy/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/color-attribute-wheel/index.html b/docs/gallery/color-attribute-wheel/index.html index a9d0e5e0..892777df 100644 --- a/docs/gallery/color-attribute-wheel/index.html +++ b/docs/gallery/color-attribute-wheel/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/compositor-glare/index.html b/docs/gallery/compositor-glare/index.html index 8cfbbd17..f8def181 100644 --- a/docs/gallery/compositor-glare/index.html +++ b/docs/gallery/compositor-glare/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/crate-stack/index.html b/docs/gallery/crate-stack/index.html index e26f066c..365687e8 100644 --- a/docs/gallery/crate-stack/index.html +++ b/docs/gallery/crate-stack/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/cross-version-property-delete/index.html b/docs/gallery/cross-version-property-delete/index.html index 3c5eac1c..1e31314a 100644 --- a/docs/gallery/cross-version-property-delete/index.html +++ b/docs/gallery/cross-version-property-delete/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/curve-bevel-arc/index.html b/docs/gallery/curve-bevel-arc/index.html index bc620057..80d90710 100644 --- a/docs/gallery/curve-bevel-arc/index.html +++ b/docs/gallery/curve-bevel-arc/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/custom-normals-shade/index.html b/docs/gallery/custom-normals-shade/index.html index 8f1aa591..b0b97c1d 100644 --- a/docs/gallery/custom-normals-shade/index.html +++ b/docs/gallery/custom-normals-shade/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/damped-track-aim/index.html b/docs/gallery/damped-track-aim/index.html index 811f1b18..8a06df6a 100644 --- a/docs/gallery/damped-track-aim/index.html +++ b/docs/gallery/damped-track-aim/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/degenerate-bevel-weld/index.html b/docs/gallery/degenerate-bevel-weld/index.html index d8356726..b9d348d9 100644 --- a/docs/gallery/degenerate-bevel-weld/index.html +++ b/docs/gallery/degenerate-bevel-weld/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/depsgraph-export/index.html b/docs/gallery/depsgraph-export/index.html index c2178ba8..32e11fb5 100644 --- a/docs/gallery/depsgraph-export/index.html +++ b/docs/gallery/depsgraph-export/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/driver-wave/index.html b/docs/gallery/driver-wave/index.html index fa50a8e3..ffce4d0e 100644 --- a/docs/gallery/driver-wave/index.html +++ b/docs/gallery/driver-wave/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/export-preset-axis/index.html b/docs/gallery/export-preset-axis/index.html index 05669891..f27c8415 100644 --- a/docs/gallery/export-preset-axis/index.html +++ b/docs/gallery/export-preset-axis/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/fence-kit/index.html b/docs/gallery/fence-kit/index.html index 25f84280..aa5a9054 100644 --- a/docs/gallery/fence-kit/index.html +++ b/docs/gallery/fence-kit/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/gltf-export-roundtrip/index.html b/docs/gallery/gltf-export-roundtrip/index.html index 82f09013..cd58c38e 100644 --- a/docs/gallery/gltf-export-roundtrip/index.html +++ b/docs/gallery/gltf-export-roundtrip/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/gltf-skin-roundtrip/index.html b/docs/gallery/gltf-skin-roundtrip/index.html index 298f9b65..d2449ed5 100644 --- a/docs/gallery/gltf-skin-roundtrip/index.html +++ b/docs/gallery/gltf-skin-roundtrip/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/gn-instance-grid/index.html b/docs/gallery/gn-instance-grid/index.html index d9cd73c9..556c629b 100644 --- a/docs/gallery/gn-instance-grid/index.html +++ b/docs/gallery/gn-instance-grid/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/gn-modifier-inputs/index.html b/docs/gallery/gn-modifier-inputs/index.html index 0987dc16..6a998932 100644 --- a/docs/gallery/gn-modifier-inputs/index.html +++ b/docs/gallery/gn-modifier-inputs/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/gn-sdf-remesh/index.html b/docs/gallery/gn-sdf-remesh/index.html index 0b6334fd..44dbb819 100644 --- a/docs/gallery/gn-sdf-remesh/index.html +++ b/docs/gallery/gn-sdf-remesh/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/gn-sim-fountain/index.html b/docs/gallery/gn-sim-fountain/index.html index 07517d9d..a1d9590c 100644 --- a/docs/gallery/gn-sim-fountain/index.html +++ b/docs/gallery/gn-sim-fountain/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/gn-socket-rename/index.html b/docs/gallery/gn-socket-rename/index.html index 56a830c4..108a3db2 100644 --- a/docs/gallery/gn-socket-rename/index.html +++ b/docs/gallery/gn-socket-rename/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/gn-zone-iterate/index.html b/docs/gallery/gn-zone-iterate/index.html index f8299322..00544673 100644 --- a/docs/gallery/gn-zone-iterate/index.html +++ b/docs/gallery/gn-zone-iterate/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/gp-lineart-contour/index.html b/docs/gallery/gp-lineart-contour/index.html index 28ca493b..58ce1693 100644 --- a/docs/gallery/gp-lineart-contour/index.html +++ b/docs/gallery/gp-lineart-contour/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/grain-sacks/index.html b/docs/gallery/grain-sacks/index.html index 7a39e755..15a16c04 100644 --- a/docs/gallery/grain-sacks/index.html +++ b/docs/gallery/grain-sacks/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/grease-pencil-rosette/index.html b/docs/gallery/grease-pencil-rosette/index.html index 6518c554..1e593d5a 100644 --- a/docs/gallery/grease-pencil-rosette/index.html +++ b/docs/gallery/grease-pencil-rosette/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/grindstone/index.html b/docs/gallery/grindstone/index.html index 2c498acd..4757da2f 100644 --- a/docs/gallery/grindstone/index.html +++ b/docs/gallery/grindstone/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/hand-pump/index.html b/docs/gallery/hand-pump/index.html index a52f948e..168d385f 100644 --- a/docs/gallery/hand-pump/index.html +++ b/docs/gallery/hand-pump/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/hay-bale/index.html b/docs/gallery/hay-bale/index.html index 5cb771d2..7a314be1 100644 --- a/docs/gallery/hay-bale/index.html +++ b/docs/gallery/hay-bale/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/hitching-post/index.html b/docs/gallery/hitching-post/index.html index df09b089..0311ac4b 100644 --- a/docs/gallery/hitching-post/index.html +++ b/docs/gallery/hitching-post/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/image-pixels-testcard/index.html b/docs/gallery/image-pixels-testcard/index.html index 9005d7ff..266f1c02 100644 --- a/docs/gallery/image-pixels-testcard/index.html +++ b/docs/gallery/image-pixels-testcard/index.html @@ -104,6 +104,12 @@ .density-btn + .density-btn { border-left: 1px solid var(--border); } .density-btn:hover { color: var(--select); } .density-btn.active { background: var(--select); color: #1a1b1e; } + /* Segmented groups clip overflow, so the ring has to sit inside. */ + .density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; } + .sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); + border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; + font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } + .sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; } .tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; } @@ -123,6 +129,14 @@ transition: color 0.15s, border-color 0.15s; } .chip:hover { color: var(--select); border-color: var(--select); } .chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); } + @media (max-width: 559px) { + .controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; } + .controls-row { gap: 0.4rem; } + .searchwrap { flex-basis: 100%; } + .count { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; } + .density-btn { padding: 0.36rem 0.5rem; } + } @media (max-width: 719px) { html.js .tags-toggle { display: inline-block; } html.js .chips { display: none; } @@ -160,8 +174,12 @@ transition: outline-color 0.12s ease, border-color 0.12s ease; } .card:hover { border-color: var(--select); outline-color: var(--select); } .card.hidden { display: none; } - .card-media { display: block; background: var(--bg2); line-height: 0; } - .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } + .card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; } + .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; + transition: transform 0.35s ease, opacity 0.3s ease; } + .card:hover .card-media img { transform: scale(1.03); } + html.js .grid .card-media img { opacity: 0; } + html.js .grid .card-media img.is-loaded { opacity: 1; } .card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; } .card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; } .card-body h2 a { color: var(--text); } @@ -200,6 +218,7 @@ .md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; } .md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; } .md p { margin: 0.7rem 0; } + .md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; } .md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; } .md li { margin: 0.3rem 0; } .md .table-wrap { overflow-x: auto; margin: 0.9rem 0; } @@ -306,8 +325,8 @@ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } - .card { transition: none; } - .card:hover { transform: none; } + .card, .card-media img { transition: none; } + .card:hover .card-media img { transform: none; } .to-top { transition: none; } } diff --git a/docs/gallery/index.html b/docs/gallery/index.html index 59c0754e..554b568e 100644 --- a/docs/gallery/index.html +++ b/docs/gallery/index.html @@ -4,14 +4,14 @@ Examples and Showcase — Blender Developer Tools - + - + @@ -20,7 +20,7 @@ - + @@ -338,7 +357,7 @@

Examples and Showcase

-

Runnable, smoke-gated Blender Python examples — each executed headless on Blender 5.2 LTS and 4.5 LTS (5.1 on the weekly cron), so every render reflects code that actually runs. Showcase pieces share the grid and carry the 'showcase' tag; they are budget-conformance props, not examples.

+

Runnable, smoke-gated Blender Python examples — each executed headless on Blender 5.2 LTS and 4.5 LTS (5.1 on the weekly cron), so every render reflects code that actually runs. Showcase pieces share the grid (use the Showcase filter to see only them); they are budget-conformance props, not examples.

@@ -349,56 +368,66 @@

Examples and Showcase

52 examples, 36 showcase pieces +
+ + + +
+
-
-
-
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -