Update home page images (#726)

src/.vuepress/theme/components/Home.vue

@@ -41,6 +41,18 @@
 					<h2>{{ feature.title }}</h2>
 					<p>{{ feature.details }}</p>
 				</div>
+				<section class="feature__Animation">
+					<img
+						class="feature__Animation--dark"
+						alt="Feature image (Dark theme)"
+						:src="$withBase('/assets/home_' + feature.image + '-dark.png')"
+					/>
+					<img
+						class="feature__Animation--light"
+						alt="Feature image (Light theme)"
+						:src="$withBase('/assets/home_' + feature.image + '-light.png')"
+					/>
+				</section>
 			</div>
 		</div>
 
@@ -174,6 +186,24 @@ export default {
 				color $textColor
 			p
 				color $textColorLight
+		&__Animation
+			display block
+			position relative
+			&--light
+			&--dark
+				border-radius 6px
+				max-height 38em
+				max-width 100%
+				margin-left auto
+				margin-right auto
+				left 0
+				right 0
+			&--light
+				animation fade 2s ease-in-out 2s infinite alternate
+				box-shadow 0 10px 50px 0px #ddd
+			&--dark
+				position absolute
+				box-shadow 0 10px 50px 0px #ddd
 	footer
 		position relative
 		.footer
@@ -202,6 +232,16 @@ export default {
 					width 1em
 					height 1em
 
+@keyframes fade
+	0%
+		opacity 1
+	25%
+		opacity 1
+	75%
+		opacity 0
+	100%
+		opacity 0
+
 @media (max-width: $MQNarrow)
 	.home
 		.feature

src/README.md

@@ -10,10 +10,13 @@ buttonDownloadLink: /download/
 buttonGuides: User Guide
 buttonGuidesLink: /help/guides/getting-started
 features:
-  - title: Tracking
-    details: Automatically keep track of your manga with MyAnimeList, AniList, Kitsu, Shikimori, and Bangumi
   - title: Extensions
     details: Online and offline reading from hundred of different sources
+    image: library
+  - title: Tracking
+    details: Automatically keep track of your manga with MyAnimeList, AniList, Kitsu, Shikimori, and Bangumi
+    image: tracking
   - title: Customization
     details: A configurable reader with multiple reading modes, custom color filters, and other settings
+    image: reader
 ---