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

public/cases/design-system/index.html
+17 -16
View File
@@ -906,36 +906,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="../../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">
public/css/main.css
+10 -8
View File
@@ -3349,15 +3349,17 @@ html[data-theme="light"] .hero__portrait-shell {
.mp-card__tag {
display: inline-flex;
align-items: center;
padding: 0.22rem 0.58rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: lowercase;
min-height: 1.95rem;
padding: 0.25rem 0.82rem;
border: 0;
border-radius: var(--radius-btn);
background: color-mix(in srgb, var(--surface) 62%, var(--bg-elevated) 38%);
color: var(--text-muted);
border: 1px solid color-mix(in srgb, var(--line) 92%, var(--text-muted));
border-radius: 999px;
line-height: 1.2;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
white-space: nowrap;
}
.mp-card__media {
public/en/cases/design-system/index.html
+18 -17
View File
@@ -348,7 +348,7 @@
.sg-portfolio-wrap {
max-width: 100%;
}
.sg-portfolio-wrap .portfolio-card {
.sg-portfolio-wrap .mp-card {
pointer-events: none;
}
.sg-section-demo.section {
@@ -905,36 +905,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="../../../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">