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

feat: add right-image horizontal cards

Browse Source
This commit is contained in:
Nikolay Mamadaev committed 2026-10-15 17:14:49 +02:00
1 parent 981f4b67af
commit fb867596cc
5 files changed
+74
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/cases/mini-projects-showcase/index.html
+17
View File
@@ -786,6 +786,23 @@
</div>
</div>
<div class="mp-showcase-specimen-row">
<div class="mp-showcase-specimen__card">
<p class="mp-showcase-specimen__label"><code>mp-card--horizontal-right</code> + <code>mp-card--link</code></p>
<a class="mp-card mp-card--link mp-card--horizontal mp-card--horizontal-right" href="#" aria-label="Horizontal с картинкой справа — пример карточки">
<div class="mp-card__media" aria-hidden="true">
<img class="mp-card__image" src="../../assets/shared/placeholder.webp" alt="" width="360" height="203" loading="lazy" decoding="async" />
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">Horizontal — картинка справа <span class="mp-card__ext" aria-hidden="true"></span></h3>
<ul class="mp-card__tags" aria-label="Тип проекта"><li class="mp-card__tag">приложение</li></ul>
<p class="mp-card__desc">Та же горизонтальная карточка, но превью закреплено справа.</p>
</div>
</a>
</div>
<div class="mp-showcase-specimen__desc"><p class="section__prose"><strong>Картинка справа.</strong> Добавьте модификатор <code>mp-card--horizontal-right</code> к горизонтальной карточке.</p></div>
</div>
<div class="mp-showcase-specimen-row">
<div class="mp-showcase-specimen__card">
<p class="mp-showcase-specimen__label"><code>mp-card--compact</code> + <code>mp-card--link</code></p>
public/css/main.css
+18
View File
@@ -3773,6 +3773,15 @@ html[data-theme="dark"] .mp-card--stack-bottom .mp-card__tag {
aspect-ratio: 16 / 9;
}
.mp-card--horizontal-right .mp-card__media {
order: 2;
padding: 1.15rem 1.15rem 1.15rem 0;
}
.mp-card--horizontal-right .mp-card__body {
order: 1;
}
.mp-card--horizontal.mp-card--hor-image .mp-card__image {
object-fit: contain;
aspect-ratio: 1;
@@ -3833,6 +3842,15 @@ html[data-theme="dark"] .mp-card--stack-bottom .mp-card__tag {
.mp-card--horizontal .mp-card__body {
padding: 1.15rem 1.25rem 1.35rem 1.25rem;
}
.mp-card--horizontal-right .mp-card__media {
order: 1;
padding: 1.15rem 1.25rem 0;
}
.mp-card--horizontal-right .mp-card__body {
order: 2;
}
}
@media (prefers-reduced-motion: reduce) {
public/en/cases/mini-projects-showcase/index.html
+11
View File
@@ -786,6 +786,17 @@
</div>
</div>
<div class="mp-showcase-specimen-row">
<div class="mp-showcase-specimen__card">
<p class="mp-showcase-specimen__label"><code>mp-card--horizontal-right</code> + <code>mp-card--link</code></p>
<a class="mp-card mp-card--link mp-card--horizontal mp-card--horizontal-right" href="#" aria-label="Horizontal with image on the right — example card">
<div class="mp-card__media" aria-hidden="true"><img class="mp-card__image" src="../../../assets/shared/placeholder.webp" alt="" width="360" height="203" loading="lazy" decoding="async" /></div>
<div class="mp-card__body"><h3 class="mp-card__title">Horizontal — image on the right <span class="mp-card__ext" aria-hidden="true"></span></h3><ul class="mp-card__tags" aria-label="Project type"><li class="mp-card__tag">app</li></ul><p class="mp-card__desc">The same horizontal card with the preview fixed on the right.</p></div>
</a>
</div>
<div class="mp-showcase-specimen__desc"><p class="section__prose"><strong>Image on the right.</strong> Add <code>mp-card--horizontal-right</code> to a horizontal card.</p></div>
</div>
<div class="mp-showcase-specimen-row">
<div class="mp-showcase-specimen__card">
<p class="mp-showcase-specimen__label"><code>mp-card--compact</code> + <code>mp-card--link</code></p>
src/partials/mini-projects-showcase-specimens.en.html
+11
View File
@@ -148,6 +148,17 @@
</div>
</div>
<div class="mp-showcase-specimen-row">
<div class="mp-showcase-specimen__card">
<p class="mp-showcase-specimen__label"><code>mp-card--horizontal-right</code> + <code>mp-card--link</code></p>
<a class="mp-card mp-card--link mp-card--horizontal mp-card--horizontal-right" href="#" aria-label="Horizontal with image on the right — example card">
<div class="mp-card__media" aria-hidden="true"><img class="mp-card__image" src="{{assetPrefix}}assets/shared/placeholder.webp" alt="" width="360" height="203" loading="lazy" decoding="async" /></div>
<div class="mp-card__body"><h3 class="mp-card__title">Horizontal — image on the right <span class="mp-card__ext" aria-hidden="true"></span></h3><ul class="mp-card__tags" aria-label="Project type"><li class="mp-card__tag">app</li></ul><p class="mp-card__desc">The same horizontal card with the preview fixed on the right.</p></div>
</a>
</div>
<div class="mp-showcase-specimen__desc"><p class="section__prose"><strong>Image on the right.</strong> Add <code>mp-card--horizontal-right</code> to a horizontal card.</p></div>
</div>
<div class="mp-showcase-specimen-row">
<div class="mp-showcase-specimen__card">
<p class="mp-showcase-specimen__label"><code>mp-card--compact</code> + <code>mp-card--link</code></p>
src/partials/mini-projects-showcase-specimens.html
+17
View File
@@ -148,6 +148,23 @@
</div>
</div>
<div class="mp-showcase-specimen-row">
<div class="mp-showcase-specimen__card">
<p class="mp-showcase-specimen__label"><code>mp-card--horizontal-right</code> + <code>mp-card--link</code></p>
<a class="mp-card mp-card--link mp-card--horizontal mp-card--horizontal-right" href="#" aria-label="Horizontal с картинкой справа — пример карточки">
<div class="mp-card__media" aria-hidden="true">
<img class="mp-card__image" src="{{assetPrefix}}assets/shared/placeholder.webp" alt="" width="360" height="203" loading="lazy" decoding="async" />
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">Horizontal — картинка справа <span class="mp-card__ext" aria-hidden="true"></span></h3>
<ul class="mp-card__tags" aria-label="Тип проекта"><li class="mp-card__tag">приложение</li></ul>
<p class="mp-card__desc">Та же горизонтальная карточка, но превью закреплено справа.</p>
</div>
</a>
</div>
<div class="mp-showcase-specimen__desc"><p class="section__prose"><strong>Картинка справа.</strong> Добавьте модификатор <code>mp-card--horizontal-right</code> к горизонтальной карточке.</p></div>
</div>
<div class="mp-showcase-specimen-row">
<div class="mp-showcase-specimen__card">
<p class="mp-showcase-specimen__label"><code>mp-card--compact</code> + <code>mp-card--link</code></p>