Template:Main page/styles.css: Difference between revisions
Hero slider animation styles |
Slider: 3-slide timing |
||
| Line 21: | Line 21: | ||
/* HERO SLIDER */ | /* HERO SLIDER */ | ||
.vg-slide { position: relative; height: 450px; max-width: 560px; margin: 0 auto 34px; } | .vg-slide { position: relative; height: 450px; max-width: 560px; margin: 0 auto 34px; } | ||
.vg-slide-item { position: absolute; top: 0; left: 0; right: 0; text-align: center; opacity: 0; animation: | .vg-slide-item { position: absolute; top: 0; left: 0; right: 0; text-align: center; opacity: 0; animation: vgfade12 12s infinite; } | ||
.vg-s1 { opacity: 1; animation-delay: 0s; } | .vg-s1 { opacity: 1; animation-delay: 0s; } | ||
.vg-s2 { animation-delay: 4s; } | .vg-s2 { animation-delay: 4s; } | ||
.vg-s3 { animation-delay: 8s; } | .vg-s3 { animation-delay: 8s; } | ||
.vg-slide-item img { filter: sepia(0.35); border: 10px solid #fffdf7; box-shadow: 0 12px 32px rgba(70, 35, 10, 0.28); background: #fffdf7; max-height: 370px; width: auto; max-width: 100%; } | .vg-slide-item img { filter: sepia(0.35); border: 10px solid #fffdf7; box-shadow: 0 12px 32px rgba(70, 35, 10, 0.28); background: #fffdf7; max-height: 370px; width: auto; max-width: 100%; } | ||
.vg-slide-cap { margin-top: 12px; font-size: 11px; letter-spacing: 4px; color: #6e5f4c; } | .vg-slide-cap { margin-top: 12px; font-size: 11px; letter-spacing: 4px; color: #6e5f4c; } | ||
@keyframes | @keyframes vgfade12 { | ||
0% { opacity: 0; } | 0% { opacity: 0; } | ||
8% { opacity: 1; } | |||
33% { opacity: 1; } | |||
41% { opacity: 0; } | |||
100% { opacity: 0; } | 100% { opacity: 0; } | ||
} | } | ||
| Line 116: | Line 115: | ||
@media (prefers-reduced-motion: reduce) { | @media (prefers-reduced-motion: reduce) { | ||
.vg-slide-item { animation: none; } | .vg-slide-item { animation: none; } | ||
.vg-s2, .vg-s3 | .vg-s2, .vg-s3 { display: none; } | ||
} | } | ||