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

style(mp-card): restyle mp-card__tag to filled chips; sync design-system portfolio-card specimen to real homepage card

Browse Source
This commit is contained in:
root committed 2026-09-17 21:52:50 +02:00
1 parent 9f1b6c6f15
commit 5f07f925f2
5 files changed
+80 -74
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/cases/design-system.en.html
+18 -17
View File
@@ -255,7 +255,7 @@
.sg-portfolio-wrap {
max-width: 100%;
}
.sg-portfolio-wrap .portfolio-card {
.sg-portfolio-wrap .mp-card {
pointer-events: none;
}
.sg-section-demo.section {
@@ -717,36 +717,37 @@
<li class="hero__tag">UX/UI</li>
</ul>
<p class="sg-label">.hero__tags / .hero__tag</p>
<ul class="portfolio-card__tags" style="display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.5rem 0">
<li class="portfolio-card__tag">portfolio-card__tag</li>
<li class="portfolio-card__tag">Web App</li>
<ul class="mp-card__tags" aria-label="Tag Demo" style="display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; list-style: none; padding: 0; margin: 0.5rem 0">
<li class="mp-card__tag">mp-card__tag</li>
<li class="mp-card__tag">Web App</li>
</ul>
<p class="sg-label">.portfolio-card__tags / .portfolio-card__tag</p>
<p class="sg-label">.mp-card__tags / .mp-card__tag</p>
<h3>Portfolio Card</h3>
<div class="sg-portfolio-wrap">
<a class="portfolio-card" href="#components" tabindex="-1" aria-hidden="true">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">portfolio-card</h3>
<p class="portfolio-card__summary">A brief two- or three-line description of the project for the Design System demo.</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-bottom" 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"
height="225"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card — portfolio</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">A brief two- or three-line description of the project for the Design System demo.</p>
</div>
</a>
</div>
<p class="sg-label">.portfolio-card and child BEM classes</p>
<p class="sg-label">.mp-card .mp-card--stack-bottom — text on top, cover at the bottom</p>
<h3>Placeholder while images are loading</h3>
<p class="section__prose">
src/pages/cases/design-system.html
+17 -16
View File
@@ -718,36 +718,37 @@
<li class="hero__tag">UX/UI</li>
</ul>
<p class="sg-label">.hero__tags / .hero__tag</p>
<ul class="portfolio-card__tags" style="display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.5rem 0">
<li class="portfolio-card__tag">portfolio-card__tag</li>
<li class="portfolio-card__tag">Web App</li>
<ul class="mp-card__tags" aria-label="Демо тегов" style="display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; list-style: none; padding: 0; margin: 0.5rem 0">
<li class="mp-card__tag">mp-card__tag</li>
<li class="mp-card__tag">Web App</li>
</ul>
<p class="sg-label">.portfolio-card__tags / .portfolio-card__tag</p>
<p class="sg-label">.mp-card__tags / .mp-card__tag</p>
<h3>Карточка портфолио</h3>
<div class="sg-portfolio-wrap">
<a class="portfolio-card" href="#components" tabindex="-1" aria-hidden="true">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">portfolio-card</h3>
<p class="portfolio-card__summary">Краткое описание проекта в две-три строки для демо Design System.</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-bottom" 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"
height="225"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">mp-card — портфолио</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">Краткое описание проекта в две-три строки для демо Design System.</p>
</div>
</a>
</div>
<p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
<p class="sg-label">.mp-card .mp-card--stack-bottom — текст сверху, обложка снизу</p>
<h3>Заглушка при загрузке изображений</h3>
<p class="section__prose">