Adriano/InsanityLab-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migliora il layout mobile delle sezioni home

Browse Source 
MethodSteps passa a una sola colonna con step in orizzontale, PartnersStrip
riduce loghi e spaziature, TrainingCards ridimensiona testi e padding.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
AdrianoDev
2026-08-15 19:17:15 +02:00
parent d6c6597d0a
commit cd73906c08
3 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/home/MethodSteps.astro
+10 -1
View File
@@ -42,5 +42,14 @@ const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(
.method__circle span { position: absolute; top: -6px; left: -6px; font-family: var(--font-heading); font-size: 2.4rem; color: var(--c-heading); background: var(--c-bg-alt); padding: 0 8px; }
.method__step h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; }
.method__step p { font-size: .85rem; color: var(--c-text-light); }
@media (max-width: 767px) { .method__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
/* una colonna con lo step in orizzontale: a due colonne i titoli lunghi
si spezzavano su quattro righe. */
.method__row { grid-template-columns: 1fr; gap: 28px; text-align: left; }
.method__step { display: grid; grid-template-columns: 104px 1fr; column-gap: 18px; align-items: start; }
.method__circle { width: 104px; height: 104px; margin: 0; grid-row: 1 / span 2; }
.method__circle span { font-size: 1.8rem; top: -4px; left: -4px; }
.method__step h3 { margin-top: 4px; }
.method__note { text-align: left; margin-left: 0; max-width: none; }
}
</style>
src/components/home/PartnersStrip.astro
+5
View File
@@ -16,4 +16,9 @@ const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(
.pstrip { background: var(--c-accent); padding-block: 40px; }
.pstrip__in { display: flex; align-items: center; justify-content: space-around; gap: 30px; flex-wrap: wrap; }
.pstrip img { height: 44px; width: auto; opacity: .9; }
@media (max-width: 767px) {
.pstrip { padding-block: 28px; }
.pstrip__in { justify-content: center; gap: 20px 28px; }
.pstrip img { height: 30px; }
}
</style>
src/components/home/TrainingCards.astro
+7 -1
View File
@@ -46,5 +46,11 @@ const isSwapRow = (i: number) => Math.floor(i / 2) % 2 === 1;
.tcards__photo { overflow: hidden; }
.tcards__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .5s ease; }
.tcards__photo:hover .tcards__img { transform: scale(1.06); }
@media (max-width: 767px) { .tcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
.tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcards__cell { padding: 22px 16px; }
.tcards__cell h3 { font-size: 1rem; letter-spacing: .08em; }
.tcards__cell p { font-size: .74rem; }
.tcards__link { font-size: .62rem; letter-spacing: .14em; margin-top: 12px; }
}
</style>