admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: case-media-gallery--wide — 4 колонки, выход за колонку как у case-media--wide

Browse Source
This commit is contained in:
root committed 2026-09-10 21:35:49 +02:00
1 parent bd9b749a10
commit a43aaa5e22
3 files changed
+12 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/cases/template-elements-demo/index.html
+2 -2
View File
@@ -401,9 +401,9 @@
<h3>Галерея: сетка на ширину страницы с боковыми отступами</h3>
<p class="section__prose">
Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь две колонки на широком экране (<code>--case-gallery-cols: 2</code>).
Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь четыре колонки на широком экране (<code>--case-gallery-cols: 4</code>).
</p>
<figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
<figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 4">
<div class="case-media-gallery__grid">
<div class="case-media-gallery__item">
<img src="../../assets/template-elements-demo/small-image-1.webp" alt="Wide-сетка, кадр 1" loading="lazy" decoding="async" data-image-viewer />
public/css/main.css
+8
View File
@@ -1928,6 +1928,14 @@ video:-webkit-full-screen {
--case-gallery-cols: 3;
}
/* Wide-галерея: 4 колонки и выход за колонку контента (как у .case-media--wide) */
.case-media-gallery--wide {
--case-gallery-cols: 4;
width: min(calc(100vw - (max(var(--space), env(safe-area-inset-left)) + max(var(--space), env(safe-area-inset-right)))), calc(100% + 8rem));
margin-left: 50%;
transform: translateX(-50%);
}
.case-media-gallery > figcaption {
width: 100%;
text-align: center;
src/pages/cases/template-elements-demo.html
+2 -2
View File
@@ -212,9 +212,9 @@
<h3>Галерея: сетка на ширину страницы с боковыми отступами</h3>
<p class="section__prose">
Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь две колонки на широком экране (<code>--case-gallery-cols: 2</code>).
Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь четыре колонки на широком экране (<code>--case-gallery-cols: 4</code>).
</p>
<figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
<figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 4">
<div class="case-media-gallery__grid">
<div class="case-media-gallery__item">
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-1.webp" alt="Wide-сетка, кадр 1" loading="lazy" decoding="async" data-image-viewer />