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

feat(portfolio): add mp-card--bleed variant, use in Portfolio block + design-system

Browse Source
This commit is contained in:
Hermes committed 2026-09-16 16:14:07 +02:00
1 parent 336f9b5707
commit f550f70318
11 files changed
+119 -94
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/cases/design-system/index.html
+13 -13
View File
@@ -937,20 +937,12 @@
</div>
<p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
<h3>Карточка портфолио — bleed</h3>
<h3>Карточка портфолио — bleed (mp-card)</h3>
<div class="sg-portfolio-wrap">
<a class="portfolio-card portfolio-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">portfolio-card--bleed</h3>
<p class="portfolio-card__summary">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
<ul class="portfolio-card__tags" aria-label="Теги">
<li class="portfolio-card__tag">Демо</li>
<li class="portfolio-card__tag">UI</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<div class="mp-card__media" aria-hidden="true">
<img
class="portfolio-card__image"
class="mp-card__image"
src="../../assets/shared/placeholder.webp"
alt=""
width="400"
@@ -958,9 +950,17 @@
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card--bleed</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>
</div>
</a>
</div>
<p class="sg-label">.portfolio-card--bleed — изображение bleed внизу справа</p>
<p class="sg-label">.mp-card--bleed — текст сверху, изображение bleed внизу справа</p>
<h3>Заглушка при загрузке изображений</h3>
<p class="section__prose">
public/cases/template-elements-demo/index.html
+7 -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" href="../ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="../lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="../manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="../mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="../orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="../task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="../task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="../task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
public/css/main.css
+25
View File
@@ -3409,6 +3409,31 @@ html[data-theme="light"] .hero__portrait-shell {
aspect-ratio: 16 / 9;
}
/* Вариант: текст сверху (заголовок → описание → теги),
изображение прижато к нижнему правому углу без отступов;
угол скругляется самой карточкой (overflow:hidden + border-radius). */
.mp-card--bleed {
flex-direction: column-reverse;
}
.mp-card--bleed .mp-card__media {
width: 60%;
align-self: flex-end;
aspect-ratio: 4 / 3;
padding: 0;
margin: 0;
border: 0;
}
.mp-card--bleed .mp-card__image {
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
object-fit: cover;
}
.mp-card--bleed .mp-card__title { order: 0; }
.mp-card--bleed .mp-card__desc { order: 1; }
.mp-card--bleed .mp-card__tags { order: 2; }
.mp-card--horizontal {
flex-direction: row;
align-items: stretch;
public/en/cases/design-system/index.html
+13 -13
View File
@@ -936,20 +936,12 @@
</div>
<p class="sg-label">.portfolio-card and child BEM classes</p>
<h3>Portfolio Card — bleed</h3>
<h3>Portfolio Card — bleed (mp-card)</h3>
<div class="sg-portfolio-wrap">
<a class="portfolio-card portfolio-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">portfolio-card--bleed</h3>
<p class="portfolio-card__summary">Image pinned to the bottom-right corner with no padding; the corner is rounded by the card.</p>
<ul class="portfolio-card__tags" aria-label="Tags">
<li class="portfolio-card__tag">Demo</li>
<li class="portfolio-card__tag">UI</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<div class="mp-card__media" aria-hidden="true">
<img
class="portfolio-card__image"
class="mp-card__image"
src="../../../assets/shared/placeholder.webp"
alt=""
width="400"
@@ -957,9 +949,17 @@
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card--bleed</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>
</div>
</a>
</div>
<p class="sg-label">.portfolio-card--bleed — image bleeds bottom-right</p>
<p class="sg-label">.mp-card--bleed — text on top, image bleeds bottom-right</p>
<h3>Placeholder while images are loading</h3>
<p class="section__prose">
public/en/cases/template-elements-demo/index.html
+7 -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" href="../ai-platform-primo-rpa/" aria-label="AI platform — open case">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="../lunacy/" aria-label="Graphics editor Lunacy — open case">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="../manu-game-maker/" aria-label="MANU game engine — open case">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="../mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<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">
<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" href="../orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<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">
<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" href="../task-distribution-concept/" aria-label="Task distribution service concept — open case">
<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">
<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" href="../task-tracker/" aria-label="Task tracker for a back-office system — open case">
<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">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
public/en/index.html
+7 -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" href="cases/ai-platform-primo-rpa/" aria-label="AI platform — open case">
<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">
<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" href="cases/lunacy/" aria-label="Graphics editor Lunacy — open case">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="cases/manu-game-maker/" aria-label="MANU game engine — open case">
<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">
<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" href="cases/mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<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">
<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" href="cases/orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<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">
<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" href="cases/task-distribution-concept/" aria-label="Task distribution service concept — open case">
<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">
<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" href="cases/task-tracker/" aria-label="Task tracker for a back-office system — open case">
<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">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
public/index.html
+7 -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" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src/pages/cases/design-system.en.html
+13 -13
View File
@@ -748,20 +748,12 @@
</div>
<p class="sg-label">.portfolio-card and child BEM classes</p>
<h3>Portfolio Card — bleed</h3>
<h3>Portfolio Card — bleed (mp-card)</h3>
<div class="sg-portfolio-wrap">
<a class="portfolio-card portfolio-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">portfolio-card--bleed</h3>
<p class="portfolio-card__summary">Image pinned to the bottom-right corner with no padding; the corner is rounded by the card.</p>
<ul class="portfolio-card__tags" aria-label="Tags">
<li class="portfolio-card__tag">Demo</li>
<li class="portfolio-card__tag">UI</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<div class="mp-card__media" aria-hidden="true">
<img
class="portfolio-card__image"
class="mp-card__image"
src="{{assetPrefix}}assets/shared/placeholder.webp"
alt=""
width="400"
@@ -769,9 +761,17 @@
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card--bleed</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>
</div>
</a>
</div>
<p class="sg-label">.portfolio-card--bleed — image bleeds bottom-right</p>
<p class="sg-label">.mp-card--bleed — text on top, image bleeds bottom-right</p>
<h3>Placeholder while images are loading</h3>
<p class="section__prose">
src/pages/cases/design-system.html
+13 -13
View File
@@ -749,20 +749,12 @@
</div>
<p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
<h3>Карточка портфолио — bleed</h3>
<h3>Карточка портфолио — bleed (mp-card)</h3>
<div class="sg-portfolio-wrap">
<a class="portfolio-card portfolio-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">portfolio-card--bleed</h3>
<p class="portfolio-card__summary">Изображение прижато к нижнему правому углу без отступов; угол скругляется по карточке.</p>
<ul class="portfolio-card__tags" aria-label="Теги">
<li class="portfolio-card__tag">Демо</li>
<li class="portfolio-card__tag">UI</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="#components" tabindex="-1" aria-hidden="true">
<div class="mp-card__media" aria-hidden="true">
<img
class="portfolio-card__image"
class="mp-card__image"
src="{{assetPrefix}}assets/shared/placeholder.webp"
alt=""
width="400"
@@ -770,9 +762,17 @@
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card--bleed</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>
</div>
</a>
</div>
<p class="sg-label">.portfolio-card--bleed — изображение bleed внизу справа</p>
<p class="sg-label">.mp-card--bleed — текст сверху, изображение bleed внизу справа</p>
<h3>Заглушка при загрузке изображений</h3>
<p class="section__prose">
src/partials/projects-section-mp.en.html
+7 -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" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="AI platform — open case">
<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">
<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" href="{{casesPrefix}}lunacy/" aria-label="Graphics editor Lunacy — open case">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="{{casesPrefix}}manu-game-maker/" aria-label="MANU game engine — open case">
<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">
<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" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<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">
<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" href="{{casesPrefix}}orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<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">
<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" href="{{casesPrefix}}task-distribution-concept/" aria-label="Task distribution service concept — open case">
<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">
<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" href="{{casesPrefix}}task-tracker/" aria-label="Task tracker for a back-office system — open case">
<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">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src/partials/projects-section-mp.html
+7 -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" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="{{casesPrefix}}lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="{{casesPrefix}}manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="{{casesPrefix}}orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="{{casesPrefix}}task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" 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" href="{{casesPrefix}}task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"