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

Чистые URL для кейсов: cases/slug/ вместо cases/slug.html, исправлены пути к ассетам

Browse Source
This commit is contained in:
Local Build committed 2026-08-15 16:37:54 +02:00
1 parent c66b9b856f
commit c4bfe5c9ee
43 files changed
+10703 -10489
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/cases/template-elements-demo.html
+22 -22
View File
@@ -107,7 +107,7 @@
<div class="case-links-grid">
<a class="case-link-card" href="https://www.examples.com/" target="_blank" rel="noopener noreferrer">
<span class="case-link-card__media" aria-hidden="true">
<img src="../assets/template-elements-demo/wallpaper-1.jpg" alt="" loading="lazy" decoding="async" />
<img src="{{assetPrefix}}assets/template-elements-demo/wallpaper-1.jpg" alt="" loading="lazy" decoding="async" />
</span>
<span class="case-link-card__body">
<span class="case-link-card__title">Источник с превью</span>
@@ -129,19 +129,19 @@
<h3>Картинка: 50% от оригинала (без превью)</h3>
<figure class="case-media case-media--natural">
<img src="../assets/template-elements-demo/hello.gif" alt="Демо GIF в натуральном размере" loading="lazy" decoding="async" />
<img src="{{assetPrefix}}assets/template-elements-demo/hello.gif" alt="Демо GIF в натуральном размере" loading="lazy" decoding="async" />
<figcaption>Изображение в уменьшенном натуральном размере, по центру.</figcaption>
</figure>
<h3>Картинка: по ширине контента (с превью)</h3>
<figure class="case-media case-media--content">
<img src="../assets/template-elements-demo/wallpaper-1.jpg" alt="Демо изображения по ширине контента" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/wallpaper-1.jpg" alt="Демо изображения по ширине контента" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Изображение по ширине контента. Клик открывает viewer.</figcaption>
</figure>
<h3>Картинка: чуть шире контента (с превью)</h3>
<figure class="case-media case-media--wide">
<img src="../assets/template-elements-demo/wallpaper-1.jpg" alt="Демо изображения шире контента" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/wallpaper-1.jpg" alt="Демо изображения шире контента" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Изображение немного выходит за пределы контентной колонки.</figcaption>
</figure>
@@ -153,7 +153,7 @@
<div class="case-media-tall" data-case-tall-root>
<div class="case-media-tall__clip" id="template-demo-tall-clip" data-case-tall-clip>
<img
src="../assets/template-elements-demo/img-long.webp"
src="{{assetPrefix}}assets/template-elements-demo/img-long.webp"
alt="Демо: длинный вертикальный скрин интерфейса"
width="1200"
loading="lazy"
@@ -186,25 +186,25 @@
<figure class="case-media case-media-gallery" style="--case-gallery-cols: 3">
<div class="case-media-gallery__grid">
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-1.webp" alt="Демо миниатюра 1" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-1.webp" alt="Демо миниатюра 1" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-2.webp" alt="Демо миниатюра 2" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-2.webp" alt="Демо миниатюра 2" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-3.webp" alt="Демо миниатюра 3" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-3.webp" alt="Демо миниатюра 3" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-4.webp" alt="Демо миниатюра 4" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-4.webp" alt="Демо миниатюра 4" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-5.webp" alt="Демо миниатюра 5" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-5.webp" alt="Демо миниатюра 5" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-6.webp" alt="Демо миниатюра 6" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-6.webp" alt="Демо миниатюра 6" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-7.webp" alt="Демо миниатюра 7" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-7.webp" alt="Демо миниатюра 7" loading="lazy" decoding="async" data-image-viewer />
</div>
</div>
<figcaption>Сетка в колонке статьи; на этом примере три колонки на десктопе.</figcaption>
@@ -217,25 +217,25 @@
<figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
<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 />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-1.webp" alt="Wide-сетка, кадр 1" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-2.webp" alt="Wide-сетка, кадр 2" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-2.webp" alt="Wide-сетка, кадр 2" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-3.webp" alt="Wide-сетка, кадр 3" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-3.webp" alt="Wide-сетка, кадр 3" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-4.webp" alt="Wide-сетка, кадр 4" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-4.webp" alt="Wide-сетка, кадр 4" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-5.webp" alt="Wide-сетка, кадр 5" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-5.webp" alt="Wide-сетка, кадр 5" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-6.webp" alt="Wide-сетка, кадр 6" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-6.webp" alt="Wide-сетка, кадр 6" loading="lazy" decoding="async" data-image-viewer />
</div>
<div class="case-media-gallery__item">
<img src="../assets/template-elements-demo/small-image-7.webp" alt="Wide-сетка, кадр 7" loading="lazy" decoding="async" data-image-viewer />
<img src="{{assetPrefix}}assets/template-elements-demo/small-image-7.webp" alt="Wide-сетка, кадр 7" loading="lazy" decoding="async" data-image-viewer />
</div>
</div>
<figcaption>Ширина как у wide-картинки; на узком экране wide-обёртка схлопывается в 100% ширины колонки (см. медиазапросы).</figcaption>
@@ -252,9 +252,9 @@
<h3>Видео: карточка с тенью и фиксированными малыми углами</h3>
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
<div class="case-video-shell">
<video controls preload="metadata" playsinline poster="../assets/template-elements-demo/video-1.webp" data-case-video-player style="display: block; width: 100%; height: auto">
<source src="../assets/template-elements-demo/video-1.webm" type="video/webm" />
<source src="../assets/template-elements-demo/video-1.mp4" type="video/mp4" />
<video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/template-elements-demo/video-1.webp" data-case-video-player style="display: block; width: 100%; height: auto">
<source src="{{assetPrefix}}assets/template-elements-demo/video-1.webm" type="video/webm" />
<source src="{{assetPrefix}}assets/template-elements-demo/video-1.mp4" type="video/mp4" />
Ваш браузер не поддерживает видео.
</video>
</div>