117 lines
2.6 KiB
CSS
117 lines
2.6 KiB
CSS
.logo-soup {
|
|
--logo-soup-gap: clamp(1rem, 2vw, 2rem);
|
|
--logo-soup-base-size: 48px;
|
|
--logo-soup-effective-size: var(--logo-soup-base-size);
|
|
--logo-soup-gap-factor: 1;
|
|
--logo-soup-width-factor: 3.5;
|
|
--logo-soup-gray-opacity: 0.72;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.logo-soup__track {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: calc(var(--logo-soup-gap) * var(--logo-soup-gap-factor));
|
|
width: max-content;
|
|
}
|
|
|
|
.logo-soup.layout-carousel .logo-soup__track {
|
|
animation: logo-soup-scroll var(--logo-soup-speed, 22s) linear infinite;
|
|
}
|
|
|
|
.logo-soup.layout-grid .logo-soup__track {
|
|
display: grid;
|
|
grid-template-columns: repeat(
|
|
auto-fit,
|
|
minmax(min(100%, calc(var(--logo-soup-effective-size) * 2.4)), 1fr)
|
|
);
|
|
justify-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.logo-soup.pause-on-hover:hover .logo-soup__track {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.logo-soup__item {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
justify-content: center;
|
|
min-height: calc(var(--logo-soup-effective-size) + 1.5rem);
|
|
padding: 0.75rem 1rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logo-soup.layout-grid .logo-soup__item {
|
|
padding-inline: calc(var(--logo-soup-gap) * 0.25);
|
|
width: 100%;
|
|
}
|
|
|
|
.logo-soup__image {
|
|
display: block;
|
|
height: var(--logo-soup-effective-size);
|
|
max-width: min(calc(var(--logo-soup-effective-size) * var(--logo-soup-width-factor)), 22vw);
|
|
object-fit: contain;
|
|
opacity: 0.92;
|
|
transform: translate3d(0, 0, 0);
|
|
transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
|
|
width: auto;
|
|
}
|
|
|
|
.logo-soup.layout-grid .logo-soup__image {
|
|
margin-inline: auto;
|
|
max-width: min(100%, calc(var(--logo-soup-effective-size) * var(--logo-soup-width-factor)));
|
|
}
|
|
|
|
.logo-soup.crop-to-content .logo-soup__item {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.logo-soup.align-by-visual-center .logo-soup__image {
|
|
transform: translate(-2%, -2%);
|
|
}
|
|
|
|
.logo-soup.align-by-visual-center-x .logo-soup__image {
|
|
transform: translateX(-2%);
|
|
}
|
|
|
|
.logo-soup.align-by-visual-center-y .logo-soup__image {
|
|
transform: translateY(-2%);
|
|
}
|
|
|
|
.logo-soup.is-grayscale .logo-soup__image {
|
|
filter: grayscale(100%);
|
|
opacity: var(--logo-soup-gray-opacity);
|
|
}
|
|
|
|
.logo-soup__item:hover .logo-soup__image,
|
|
.logo-soup__item:focus .logo-soup__image {
|
|
filter: grayscale(0%);
|
|
opacity: 1;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
@keyframes logo-soup-scroll {
|
|
from {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
to {
|
|
transform: translateX(calc(-50% - (var(--logo-soup-gap) / 2)));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 781px) {
|
|
.logo-soup__item {
|
|
min-height: calc(var(--logo-soup-effective-size) + 1rem);
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
.logo-soup__image {
|
|
max-width: min(calc(var(--logo-soup-effective-size) * 2.5), 34vw);
|
|
}
|
|
}
|