scroll down for more

web/_data/screenshots.json

@@ -1,19 +1,19 @@
 [{
-    "value": "CharacterCreator",
+    "value": "CharacterCreator.jpg",
     "text": "Create your own characters with unique personalities and skills and dress them however you like"
 }, {
-    "value": "Map",
+    "value": "BuildMode.jpg",
     "text": "Build houses and community spaces like parks and cafés and watch households inhabit them"
 }, {
-    "value": "Gameplay",
+    "value": "Gameplay.jpg",
     "text": "Control your household and tell your characters what to do, from cooking food to learning complex skills like programming and painting"
 }, {
-    "value": "Relationships",
+    "value": "Relationships.jpg",
     "text": "Have your characters interact, build relationships, grow families and live unique lives"
 }, {
-    "value": "Lighting",
+    "value": "Travel.jpg",
     "text": "Share your creations with the community by exporting lots and households from your game"
 }, {
-    "value": "Modding",
+    "value": "Modding.png",
     "text": "Create additional content through the game's built-in C# modding API, like <a href=\"https://github.com/ssblur/IttyMod\">Itty</a> by ssblur"
 }]

web/_includes/about.html

@@ -6,10 +6,14 @@
 
     {% for item in site.data.screenshots %}
     <div class="screenshot">
-        <img src="media/screenshots/{{ item.value }}.png" width="100%" class="screen">
+        <img src="media/screenshots/{{ item.value }}" width="100%" class="screen">
         <div class="feature feature-{{ forloop.index0 | modulo: 2 }}">
             <p>{{ item.text }}</p>
         </div>
     </div>
     {% endfor %}
+
+    <div class="trailer">
+        <iframe src="https://www.youtube.com/embed/iw-D7queVUI" title="Tiny Life Trailer" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
 </div>

web/_includes/top.html

@@ -24,7 +24,11 @@
             <a class="link" href="https://press.ellpeck.de/tinylife/">Get Press Kit</a>
         </div>
     </div>
+    <div class="top-footer">
+        <p>▼ Scroll down for more ▼</p>
+    </div>
 </div>
+
 <script>
     let x = Math.random() * 100;
     let y = Math.random() * 100;

web/style.css

@@ -1,6 +1,7 @@
 .top {
     background-image: url("media/large_background.png");
     background-size: 400%;
+    color: white;
 }
 
 .top a:link,
@@ -10,11 +11,17 @@
 
 .top-content {
     text-align: center;
-    color: white;
     padding-top: 20px;
     padding-bottom: 60px;
 }
 
+.top-footer {
+    position: absolute;
+    bottom: 30px;
+    left: auto;
+    right: auto;
+}
+
 .section {
     width: 95%;
     max-width: 950px;
@@ -86,13 +93,19 @@
     display: inline-block;
 }
 
-.changelog img {
+.trailer {
+    margin-top: 60px;
+    margin-bottom: 40px;
+    position: relative;
     width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
 }
 
-.changelog blockquote {
-    margin-left: 2em;
-    margin-right: 2em;
-    font-style: italic;
-    font-size: 18px;
+.trailer iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }