feat(portfolio): add portfolio-card--bleed variant, use in Portfolio block + design-system
- new .portfolio-card--bleed: image pinned bottom-right, no padding, corner rounded by card (overflow:hidden) - design-system catalog: add bleed specimen (ru/en) - projects-section (ru/en): portfolio cards now use --bleed
This commit is contained in:
1 parent
97ea48bc6f
commit
336f9b5707
31 files changed
+333
-208
No files matched your search
@@ -3792,6 +3792,24 @@ html[data-font="mono"] .portfolio-card__title {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Вариант: изображение прижато к нижнему правому углу карточки без отступов;
|
||||
скругление угла задаёт сама карточка (overflow:hidden + border-radius). */
|
||||
.portfolio-card--bleed .portfolio-card__cover {
|
||||
align-self: flex-end;
|
||||
width: 60%;
|
||||
aspect-ratio: 4 / 3;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.portfolio-card--bleed .portfolio-card__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.portfolio-card:hover .portfolio-card__title,
|
||||
.portfolio-card:focus-visible .portfolio-card__title {
|
||||
color: var(--accent-text);
|
||||
@@ -3832,6 +3850,13 @@ html[data-font="mono"] .portfolio-card__title {
|
||||
height: 100%;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.portfolio-card--bleed .portfolio-card__cover {
|
||||
width: 100%;
|
||||
align-self: stretch;
|
||||
aspect-ratio: 16 / 9;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skills-intro {
|
||||
|
||||
Reference in new issue
Block a user