Pumpkin-MC/Market-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: too big plugin cards

Browse Source
This commit is contained in:
Alexander Medvedev 2026-04-26 10:35:43 +02:00
parent c5e08f120d
commit 9932faef6a
2 changed files with 20 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.css
View File

@ -552,10 +552,11 @@ h3 {
}
/* --- Plugin Grid --- */
.plugin-grid {
.plugin-grid,
.home-plugin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
}
.plugin-card-link {
@ -1095,12 +1096,12 @@ h3 {
}
.pcv2-info {
padding: 0.85rem 1rem 1rem;
padding: 0.75rem 0.85rem 0.85rem;
flex-grow: 1;
}
.pcv2-name {
font-size: 0.95rem;
font-size: 0.9rem;
font-weight: 700;
color: #f0f0f0;
margin: 0 0 0.15rem;
@ -1111,16 +1112,16 @@ h3 {
}
.pcv2-dev {
font-size: 0.72rem;
font-size: 0.68rem;
color: #5a6070;
margin: 0 0 0.55rem;
margin: 0 0 0.5rem;
}
.pcv2-desc {
font-size: 0.77rem;
font-size: 0.72rem;
color: #8b909a;
line-height: 1.55;
margin: 0 0 0.75rem;
line-height: 1.5;
margin: 0 0 0.65rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@ -1130,16 +1131,16 @@ h3 {
.pcv2-footer {
display: flex;
align-items: center;
gap: 0.9rem;
padding-top: 0.65rem;
gap: 0.75rem;
padding-top: 0.55rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pcv2-stat {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.7rem;
gap: 0.25rem;
font-size: 0.65rem;
color: #5a6070;
}

166
src/pages/AuthorProfilePage.tsx
View File

@ -197,168 +197,12 @@ const AuthorProfilePage = () => {
</div>
<style>{`
.home-plugin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
padding: 0 0 4rem;
}
.plugin-card-link { text-decoration: none; display: block; }
.plugin-card-v2 {
position: relative;
border-radius: 10px;
overflow: hidden;
background: var(--mp-surface, #16191f);
border: 1px solid var(--mp-border, rgba(255,255,255,0.07));
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
will-change: transform;
}
.plugin-card-v2:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0,0,0,0.45);
border-color: rgba(255,255,255,0.14);
}
.pcv2-preview {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--mp-bg, #0d0f12);
}
.pcv2-preview-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.plugin-card-v2:hover .pcv2-preview-img { transform: scale(1.04); }
.pcv2-preview-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.8rem;
font-weight: 800;
letter-spacing: -0.04em;
color: rgba(255,255,255,0.9);
font-family: var(--font-display, system-ui);
user-select: none;
}
.pcv2-preview-fade {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 30%, rgba(13,15,18,0.55) 65%, rgba(13,15,18,0.96) 100%);
pointer-events: none;
}
.pcv2-category-badge {
position: absolute;
top: 10px; left: 10px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
background: rgba(13,15,18,0.72);
backdrop-filter: blur(6px);
.stat-pill {
background: rgba(255,255,255,0.05);
padding: 0.4rem 1rem;
border-radius: 20px;
fontSize: 0.85rem;
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.75);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.pcv2-price-badge {
position: absolute;
top: 10px; right: 10px;
font-size: 0.7rem;
font-weight: 700;
padding: 0.2rem 0.55rem;
border-radius: 4px;
backdrop-filter: blur(6px);
display: flex;
align-items: center;
gap: 0.35rem;
}
.pcv2-price-badge.free {
background: rgba(6,214,160,0.18);
border: 1px solid rgba(6,214,160,0.35);
color: #06d6a0;
}
.pcv2-price-badge.paid {
background: rgba(255,209,102,0.16);
border: 1px solid rgba(255,209,102,0.35);
color: #ffd166;
}
.pcv2-price-badge.sale {
background: rgba(255,107,107,0.18);
border: 1px solid rgba(255,107,107,0.4);
color: #ff6b6b;
}
.pcv2-price-original {
text-decoration: line-through;
opacity: 0.55;
font-weight: 500;
}
.pcv2-sale-pct {
font-size: 0.58rem;
font-weight: 800;
background: rgba(255,107,107,0.25);
border-radius: 3px;
padding: 1px 4px;
letter-spacing: 0.04em;
}
.pcv2-info { padding: 0.85rem 1rem 1rem; }
.pcv2-name {
font-size: 0.95rem;
font-weight: 700;
color: var(--mp-text-1, #f0f0f0);
margin: 0 0 0.15rem;
font-family: var(--font-display, system-ui);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pcv2-dev { font-size: 0.72rem; color: var(--mp-text-3, #5a6070); margin: 0 0 0.55rem; }
.pcv2-desc {
font-size: 0.77rem;
color: var(--mp-text-2, #8b909a);
line-height: 1.55;
margin: 0 0 0.75rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pcv2-footer {
display: flex;
align-items: center;
gap: 0.9rem;
padding-top: 0.65rem;
border-top: 1px solid var(--mp-border, rgba(255,255,255,0.06));
}
.pcv2-stat {
display: flex; align-items: center; gap: 0.3rem;
font-size: 0.7rem; color: var(--mp-text-3, #5a6070);
}
.pcv2-stat svg { opacity: 0.6; }
.pcv2-accent-bar {
position: absolute; bottom: 0; left: 0; right: 0;
height: 2px; opacity: 0;
transition: opacity 0.2s ease;
}
.plugin-card-v2:hover .pcv2-accent-bar { opacity: 1; }
.pcv2-sale-strip {
background: linear-gradient(90deg, rgba(255,107,107,0.15), rgba(255,107,107,0.05));
border-top: 1px solid rgba(255,107,107,0.2);
padding: 0.3rem 1rem;
font-size: 0.65rem;
font-weight: 700;
color: #ff6b6b;
letter-spacing: 0.06em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.4rem;
}
`}</style>
</div>