andre/fitme3070.pt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(site): YOURFIT icons keep their aspect ratio (wide box), black until hover

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Sonnet 5.5 committed 2026-10-13 18:40:27 +01:00
1 parent 356554db42
commit 4b6329f529
1 file changed
+31
Download Patch File Download Diff File Expand all files Collapse all files
site/assets/css/style.css
+31
View File
@@ -4421,6 +4421,37 @@ h3.contact-title {
.trainer-item .trainer-pic:hover img { filter: saturate(1); }
.trainer-item .trainer-pic:hover::before { opacity: 0; }
/* Official YOURFIT lock-ups are wide (≈4.5:1) PNGs. In the square icon box they
were squeezed to 44px wide while keeping their height attribute, so they came
out stretched and unreadable. Give their box a wide landscape shape and keep
the natural aspect ratio. */
.icon-box-item .ib-icon:has(img[src*="yourfit"]),
.md-card .ib-icon:has(img[src*="yourfit"]) {
width: 148px;
max-width: 100%;
}
.icon-box-item .ib-icon img[src*="yourfit"],
.md-card .ib-icon img[src*="yourfit"] {
width: 124px;
height: auto;
max-width: 100%;
max-height: none;
object-fit: contain;
}
/* At rest the YOURFIT lock-ups are black like every other icon; their own
(certified) colours come back on hover, on the white face. */
.icon-box-item .ib-icon img[src*="yourfit"],
.md-card .ib-icon img[src*="yourfit"] {
filter: brightness(0);
transition: filter .45s ease;
}
@media (max-width: 767px) {
.icon-box-item .ib-icon:has(img[src*="yourfit"]),
.md-card .ib-icon:has(img[src*="yourfit"]) { width: 128px; }
.icon-box-item .ib-icon img[src*="yourfit"],
.md-card .ib-icon img[src*="yourfit"] { width: 106px; }
}
@media (max-width: 991px) {
.gal-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 150px; }
}