Merge pull request #61 from yamat47/root-hero

Add hero image to top page.

app/app/assets/stylesheets/media.css

@@ -5,6 +5,7 @@
 @import url('media/application-header.css');
 @import url('media/application-mobile-navigation.css');
 @import url('media/breadcrumbs.css');
+@import url('media/hero.css');
 @import url('media/game-fields.css');
 @import url('media/game-schedule-list.css');
 @import url('media/game-schedule-season-list.css');

app/app/assets/stylesheets/media/hero.css

@@ -0,0 +1,51 @@
+@keyframes image-switch-animation {
+  0% { opacity: 0; }
+  5% { opacity: 1; }
+  25% { opacity: 1; }
+  30% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+.hero-container {
+  width: 100vw;
+  height: 50vw;
+  position: relative;
+
+  @media (max-width: 768px) {
+    height: 75vw;
+  }
+}
+
+.hero-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+
+  animation: image-switch-animation 25s infinite;
+
+  &:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  &:nth-child(2) {
+    animation-delay: 5s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 10s;
+  }
+
+  &:nth-child(4) {
+    animation-delay: 15s;
+  }
+
+  &:nth-child(5) {
+    animation-delay: 20s;
+  }
+}

app/app/views/media/homes/show.html.haml

@@ -1 +1,6 @@
-This is 'homes#show'
+:ruby
+  images = %w[hero-1.jpg hero-2.jpg hero-3.jpg hero-4.jpg hero-5.jpg]
+
+.hero-container
+  - images.each do |image|
+    = image_tag image, class: 'hero-image'