web/_data/screenshots.json

@@ -1,19 +1,19 @@
 [{
-    "value": "CharacterCreator.jpg",
+    "value": "CharacterCreator",
     "text": "Create your own characters with unique personalities and skills and dress them however you like"
 }, {
-    "value": "BuildMode.jpg",
+    "value": "Map",
     "text": "Build houses and community spaces like parks and cafés and watch households inhabit them"
 }, {
-    "value": "Gameplay.jpg",
+    "value": "Gameplay",
     "text": "Control your household and tell your characters what to do, from cooking food to learning complex skills like programming and painting"
 }, {
-    "value": "Relationships.jpg",
+    "value": "Relationships",
     "text": "Have your characters interact, build relationships, grow families and live unique lives"
 }, {
-    "value": "Travel.jpg",
+    "value": "Lighting",
     "text": "Share your creations with the community by exporting lots and households from your game"
 }, {
-    "value": "Modding.png",
+    "value": "Modding",
     "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,14 +6,10 @@
 
     {% for item in site.data.screenshots %}
     <div class="screenshot">
-        <img src="media/screenshots/{{ item.value }}" width="100%" class="screen">
+        <img src="media/screenshots/{{ item.value }}.png" 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,11 +24,7 @@
             <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,7 +1,6 @@
 .top {
     background-image: url("media/large_background.png");
     background-size: 400%;
-    color: white;
 }
 
 .top a:link,
@@ -11,17 +10,11 @@
 
 .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;
@@ -93,19 +86,13 @@
     display: inline-block;
 }
 
-.trailer {
+.changelog img {
-    margin-top: 60px;
-    margin-bottom: 40px;
-    position: relative;
     width: 100%;
-    height: 0;
-    padding-bottom: 56.25%;
 }
 
-.trailer iframe {
+.changelog blockquote {
-    position: absolute;
+    margin-left: 2em;
-    top: 0;
+    margin-right: 2em;
-    left: 0;
+    font-style: italic;
-    width: 100%;
+    font-size: 18px;
-    height: 100%;
 }