search

GatienH / gm-staging

0 stars 0 forks source link

Referees - define vars for images dynamic margins #27

Open GatienH opened 3 years ago

GatienH commented 3 years ago

Related to #19

From 

.referees-list div {
  margin: 0 30px;
}

@keyframes slideshowLR-70 {
  0%    { left: 0; }
  100%  { left: calc(-100% + 1147px); } /* 1147px = 787px + 12 * margin = 787px + 12 * 30px */
}

To

:root {
  --margin-sm: 20px;
  --margin-md: 30px;
  --margin-lg: 60px;
 }

@media (min-width: 576px) {
  .referees-list div {
    margin: 0 var(--margin-md);
  }

  .top-list div {
    animation: slideshowLR-70 var(--top-list-duration) linear infinite;
  }
}

@keyframes slideshowLR-70 {
  0%    { left: 0; }
  100%  { left: calc(-100% + 787px + (12 * var(--margin-md))); }
}