added new promo art and trailer

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/style.css

@@ -86,13 +86,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 {
+.trailer iframe {
-    margin-left: 2em;
+    position: absolute;
-    margin-right: 2em;
+    top: 0;
-    font-style: italic;
+    left: 0;
-    font-size: 18px;
+    width: 100%;
+    height: 100%;
 }