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

feat(portfolio): add mp-card--reflect variant (full-bleed image, mirror, progressive blur+tint), apply to Portfolio block + specimen

Browse Source
This commit is contained in:
Hermes committed 2026-09-16 17:36:54 +02:00
1 parent 49ea1238eb
commit fa4a3d91aa
11 files changed
+167 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/cases/design-system/index.html
+5 -5
View File
@@ -937,9 +937,9 @@
</div>
<p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
<h3>Карточка портфолио — bleed (mp-card)</h3>
<h3>Карточка портфолио — reflect (mp-card)</h3>
<div class="sg-portfolio-wrap">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<a class="mp-card mp-card--link mp-card--reflect" href="#components" tabindex="-1" aria-hidden="true" style="--card-cover:url('../../assets/shared/placeholder.webp')">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -951,16 +951,16 @@
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card--bleed</h3>
<h3 class="mp-card__title">mp-card--reflect</h3>
<ul class="mp-card__tags" aria-label="Теги">
<li class="mp-card__tag">Демо</li>
<li class="mp-card__tag">UI</li>
</ul>
<p class="mp-card__desc">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
<p class="mp-card__desc">Картинка на всю карточку, зеркальное отражение снизу, прогрессивное размытие и тонировка снизу вверх; текст в нижней части.</p>
</div>
</a>
</div>
<p class="sg-label">.mp-card--bleed — текст сверху, изображение bleed внизу справа</p>
<p class="sg-label">.mp-card--reflect — полноразмерная картинка, отражение и размытие снизу</p>
<h3>Заглушка при загрузке изображений</h3>
<p class="section__prose">
public/cases/template-elements-demo/index.html
+13 -7
View File
@@ -692,7 +692,7 @@
<h2 class="section__title">Портфолио</h2>
<ol class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="../ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -715,7 +715,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="../lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -738,7 +738,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="../manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -761,7 +761,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="../mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -784,7 +784,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="../orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -806,7 +806,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="../task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -829,7 +829,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="../task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -853,6 +853,12 @@
</li>
</ol>
</div>
<script>
document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
var i = c.querySelector('.mp-card__image');
if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
});
</script>
</section><section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
<div class="projects__heading">
public/css/main.css
+69
View File
@@ -3441,6 +3441,75 @@ html[data-theme="light"] .hero__portrait-shell {
.mp-card--bleed .mp-card__desc { order: 1; }
.mp-card--bleed .mp-card__tags { order: 2; }
/* Вариант: картинка на всю карточку, зеркальное отражение снизу,
прогрессивное размытие + тонировка цветом карточки снизу вверх;
текст поверх в нижней части. */
.mp-card--reflect {
position: relative;
flex-direction: column;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.mp-card--reflect .mp-card__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
overflow: hidden;
}
.mp-card--reflect .mp-card__image {
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
object-fit: cover;
}
/* прогрессивное размытие + тонировка снизу вверх */
.mp-card--reflect::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: color-mix(in srgb, var(--card) 60%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 85%);
mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 85%);
pointer-events: none;
}
/* зеркальное отображение (отражение) внизу */
.mp-card--reflect::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 45%;
z-index: 1;
background-image: var(--card-cover);
background-size: cover;
background-position: center;
transform: scaleY(-1);
transform-origin: bottom;
opacity: 0.55;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
pointer-events: none;
}
.mp-card--reflect .mp-card__body {
position: relative;
z-index: 2;
margin-top: auto;
padding: 1.2rem 1.35rem 1.3rem;
}
.mp-card--reflect .mp-card__title { order: 0; }
.mp-card--reflect .mp-card__desc { order: 1; }
.mp-card--reflect .mp-card__tags { order: 2; }
.mp-card--horizontal {
flex-direction: row;
align-items: stretch;
public/en/cases/design-system/index.html
+5 -5
View File
@@ -936,9 +936,9 @@
</div>
<p class="sg-label">.portfolio-card and child BEM classes</p>
<h3>Portfolio Card — bleed (mp-card)</h3>
<h3>Portfolio Card — reflect (mp-card)</h3>
<div class="sg-portfolio-wrap">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<a class="mp-card mp-card--link mp-card--reflect" href="#components" tabindex="-1" aria-hidden="true" style="--card-cover:url('../../../assets/shared/placeholder.webp')">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -950,16 +950,16 @@
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card--bleed</h3>
<h3 class="mp-card__title">mp-card--reflect</h3>
<ul class="mp-card__tags" aria-label="Tags">
<li class="mp-card__tag">Demo</li>
<li class="mp-card__tag">UI</li>
</ul>
<p class="mp-card__desc">Image pinned to the bottom-right corner, no padding; corner is rounded by the card.</p>
<p class="mp-card__desc">Full-bleed image, mirror reflection at the bottom, progressive blur and card-color tint from bottom up; text in the lower part.</p>
</div>
</a>
</div>
<p class="sg-label">.mp-card--bleed — text on top, image bleeds bottom-right</p>
<p class="sg-label">.mp-card--reflect — full-bleed image, reflection and blur at the bottom</p>
<h3>Placeholder while images are loading</h3>
<p class="section__prose">
public/en/cases/template-elements-demo/index.html
+13 -7
View File
@@ -692,7 +692,7 @@
<h2 class="section__title">Portfolio</h2>
<ol class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../ai-platform-primo-rpa/" aria-label="AI platform — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="../ai-platform-primo-rpa/" aria-label="AI platform — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -715,7 +715,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../lunacy/" aria-label="Graphics editor Lunacy — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="../lunacy/" aria-label="Graphics editor Lunacy — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -738,7 +738,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../manu-game-maker/" aria-label="MANU game engine — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="../manu-game-maker/" aria-label="MANU game engine — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -761,7 +761,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="../mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -784,7 +784,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="../orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -806,7 +806,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-distribution-concept/" aria-label="Task distribution service concept — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="../task-distribution-concept/" aria-label="Task distribution service concept — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -829,7 +829,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-tracker/" aria-label="Task tracker for a back-office system — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="../task-tracker/" aria-label="Task tracker for a back-office system — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -853,6 +853,12 @@
</li>
</ol>
</div>
<script>
document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
var i = c.querySelector('.mp-card__image');
if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
});
</script>
</section>
<section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
public/en/index.html
+13 -7
View File
@@ -303,7 +303,7 @@
<h2 class="section__title">Portfolio</h2>
<ol class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/ai-platform-primo-rpa/" aria-label="AI platform — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/ai-platform-primo-rpa/" aria-label="AI platform — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -326,7 +326,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/lunacy/" aria-label="Graphics editor Lunacy — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/lunacy/" aria-label="Graphics editor Lunacy — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -349,7 +349,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/manu-game-maker/" aria-label="MANU game engine — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/manu-game-maker/" aria-label="MANU game engine — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -372,7 +372,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -395,7 +395,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -417,7 +417,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-distribution-concept/" aria-label="Task distribution service concept — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/task-distribution-concept/" aria-label="Task distribution service concept — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -440,7 +440,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-tracker/" aria-label="Task tracker for a back-office system — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/task-tracker/" aria-label="Task tracker for a back-office system — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -464,6 +464,12 @@
</li>
</ol>
</div>
<script>
document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
var i = c.querySelector('.mp-card__image');
if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
});
</script>
</section>
<section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
public/index.html
+13 -7
View File
@@ -303,7 +303,7 @@
<h2 class="section__title">Портфолио</h2>
<ol class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -326,7 +326,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -349,7 +349,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -372,7 +372,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -395,7 +395,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -417,7 +417,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -440,7 +440,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -464,6 +464,12 @@
</li>
</ol>
</div>
<script>
document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
var i = c.querySelector('.mp-card__image');
if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
});
</script>
</section><section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
<div class="projects__heading">
src/pages/cases/design-system.en.html
+5 -5
View File
@@ -748,9 +748,9 @@
</div>
<p class="sg-label">.portfolio-card and child BEM classes</p>
<h3>Portfolio Card — bleed (mp-card)</h3>
<h3>Portfolio Card — reflect (mp-card)</h3>
<div class="sg-portfolio-wrap">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<a class="mp-card mp-card--link mp-card--reflect" href="#components" tabindex="-1" aria-hidden="true" style="--card-cover:url('{{assetPrefix}}assets/shared/placeholder.webp')">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -762,16 +762,16 @@
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card--bleed</h3>
<h3 class="mp-card__title">mp-card--reflect</h3>
<ul class="mp-card__tags" aria-label="Tags">
<li class="mp-card__tag">Demo</li>
<li class="mp-card__tag">UI</li>
</ul>
<p class="mp-card__desc">Image pinned to the bottom-right corner, no padding; corner is rounded by the card.</p>
<p class="mp-card__desc">Full-bleed image, mirror reflection at the bottom, progressive blur and card-color tint from bottom up; text in the lower part.</p>
</div>
</a>
</div>
<p class="sg-label">.mp-card--bleed — text on top, image bleeds bottom-right</p>
<p class="sg-label">.mp-card--reflect — full-bleed image, reflection and blur at the bottom</p>
<h3>Placeholder while images are loading</h3>
<p class="section__prose">
src/pages/cases/design-system.html
+5 -5
View File
@@ -749,9 +749,9 @@
</div>
<p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
<h3>Карточка портфолио — bleed (mp-card)</h3>
<h3>Карточка портфолио — reflect (mp-card)</h3>
<div class="sg-portfolio-wrap">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<a class="mp-card mp-card--link mp-card--reflect" href="#components" tabindex="-1" aria-hidden="true" style="--card-cover:url('{{assetPrefix}}assets/shared/placeholder.webp')">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -763,16 +763,16 @@
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card--bleed</h3>
<h3 class="mp-card__title">mp-card--reflect</h3>
<ul class="mp-card__tags" aria-label="Теги">
<li class="mp-card__tag">Демо</li>
<li class="mp-card__tag">UI</li>
</ul>
<p class="mp-card__desc">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
<p class="mp-card__desc">Картинка на всю карточку, зеркальное отражение снизу, прогрессивное размытие и тонировка снизу вверх; текст в нижней части.</p>
</div>
</a>
</div>
<p class="sg-label">.mp-card--bleed — текст сверху, изображение bleed внизу справа</p>
<p class="sg-label">.mp-card--reflect — полноразмерная картинка, отражение и размытие снизу</p>
<h3>Заглушка при загрузке изображений</h3>
<p class="section__prose">
src/partials/projects-section-mp.en.html
+13 -7
View File
@@ -3,7 +3,7 @@
<h2 class="section__title">Portfolio</h2>
<ol class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="AI platform — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="AI platform — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -26,7 +26,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}lunacy/" aria-label="Graphics editor Lunacy — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}lunacy/" aria-label="Graphics editor Lunacy — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -49,7 +49,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}manu-game-maker/" aria-label="MANU game engine — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}manu-game-maker/" aria-label="MANU game engine — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -72,7 +72,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -95,7 +95,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -117,7 +117,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-distribution-concept/" aria-label="Task distribution service concept — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-distribution-concept/" aria-label="Task distribution service concept — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -140,7 +140,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-tracker/" aria-label="Task tracker for a back-office system — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-tracker/" aria-label="Task tracker for a back-office system — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -164,4 +164,10 @@
</li>
</ol>
</div>
<script>
document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
var i = c.querySelector('.mp-card__image');
if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
});
</script>
</section>
src/partials/projects-section-mp.html
+13 -7
View File
@@ -3,7 +3,7 @@
<h2 class="section__title">Портфолио</h2>
<ol class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -26,7 +26,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -49,7 +49,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -72,7 +72,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -95,7 +95,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -117,7 +117,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -140,7 +140,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -164,4 +164,10 @@
</li>
</ol>
</div>
<script>
document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
var i = c.querySelector('.mp-card__image');
if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
});
</script>
</section>