added the new banners and text to the website

web/_data/features.json

@@ -0,0 +1,62 @@
+[
+    {
+        "value": "CharacterCreator.png",
+        "title": "Create",
+        "text": [
+            "Create your own characters with unique personalities and skills",
+            "With over 100 clothing items and thousands of colors available, create your Tinies exactly how you want",
+            "Choose from different age groups, each with their own unique interactions and gameplay"
+        ],
+        "alt": "A banner showing the game's character creator"
+    },
+    {
+        "value": "BuildMode.png",
+        "title": "Build",
+        "text": [
+            "Build houses and community spaces like parks and cafés and watch households inhabit them",
+            "Pick from hundreds of furniture items, wallpapers, tiles, roofs and more to make each building unique",
+            "Choose items wisely to maximize skill and need gain for your Tinies, but minimize the lot's final price"
+        ],
+        "alt": "A banner showing the game's build mode"
+    },
+    {
+        "value": "Actions.png",
+        "title": "Interact",
+        "text": [
+            "Control your household and tell your characters what to do",
+            "Choose from many complex skills, like cooking, painting, programming, woodworking and more",
+            "With multiple members in your household, let the AI manage your unattended Tinies for you"
+        ],
+        "alt": "A split banner showing a Tiny's life goals menu, as well as the interactions of a fridge"
+    },
+    {
+        "value": "Relationships.png",
+        "title": "Build Relationships",
+        "text": [
+            "Have your characters interact, build relationships, grow families and live unique lives",
+            "Explore multiple public and residential lots in the vast open world",
+            "Control multiple households in one save file to play out your own story"
+        ],
+        "alt": "A banner showing a relationship tooltip for a Tiny called Jeremiah Jenson, whom the currently selected Tiny is dating"
+    },
+    {
+        "value": "CustomContent.png",
+        "title": "Share",
+        "text": [
+            "Share your creations with the community by exporting lots and households from your game",
+            "Use the Steam Workshop integration to easily upload and download custom content",
+            "Integrate your own story into your content by writing descriptions for your Tinies and lots"
+        ],
+        "alt": "A banner showing part of the household import menu, with the Walden household in the center"
+    },
+    {
+        "value": "Modding.png",
+        "title": "Add Content",
+        "text": [
+            "Create additional content through the game's built-in C# modding API",
+            "Share your mods using the game's Steam Workshop integration",
+            "Install mods from community members to enhance your gameplay"
+        ],
+        "alt": "A split banner showing the game's custom content menu with the Example Mod installed, as well as a part of the Example Mod's code"
+    }
+]

web/_data/screenshots.json

@@ -1,32 +0,0 @@
-[
-    {
-        "value": "CharacterCreator.jpg",
-        "text": "Create your own characters with unique personalities and skills and dress them however you like",
-        "alt": "A screenshot of the game's character creator, where a brown-haired Tiny called Anya Leslie is selected."
-    },
-    {
-        "value": "BuildMode.jpg",
-        "text": "Build houses and community spaces like parks and cafés and watch households inhabit them",
-        "alt": "A screenshot of the game's build mode, where the user is currently placing a double bed in the bedroom of a small house."
-    },
-    {
-        "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",
-        "alt": "A screenshot where a fridge in a house is selected, with options to serve or make food visible. The selected person has long, red hair and is feeling fine."
-    },
-    {
-        "value": "Relationships.jpg",
-        "text": "Have your characters interact, build relationships, grow families and live unique lives",
-        "alt": "A screenshot where the cursor is hovering over a Tiny called Jeremiah Jenson, which the selected Tiny is dating, and has a good relationship with. The relationships tab is also open, showing the selected Tiny's relationships with various Tinies."
-    },
-    {
-        "value": "Travel.jpg",
-        "text": "Share your creations with the community by exporting lots and households from your game",
-        "alt": "A screenshot of the camera, zoomed out, over a house in a forested area which is selected, with the options to visit the lot, called Campers' Lane 5, visible."
-    },
-    {
-        "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",
-        "alt": "A screenshot of ssblur's mod Itty, with its timeline menu open, showing various messages sent by different Tinies."
-    }
-]

web/_includes/about.html

@@ -3,15 +3,23 @@
     <p>Tiny Life is a fun simulation game that aims to capture the essence of games like The Sims series, but in an isometric pixelart style.</p>
     <p>In the game, you control a set of people that live together in a household. You take care of their daily needs, build their skills, forge new relationships... or just mess up their entire life in whatever way you can think of!</p>
 
-    {% for item in site.data.screenshots %}
-    <div class="screenshot">
-        <img src="media/screenshots/{{ item.value }}" alt="{{ item.alt }}" width="100%" class="screen">
-        <div class="feature feature-{{ forloop.index0 | modulo: 2 }}">
-            <p>{{ item.text }}</p>
+    {% for item in site.data.features %}
+    <div class="feature">
+        <div class="feature-banner">
+            <div class="feature-title">
+                <h2>{{ item.title }}</h2>
             </div>
+            <img src="media/banners/{{ item.value }}" alt="{{ item.alt }}" width="100%" class="screen">
+        </div>
+        <ul>
+            {% for line in item.text %}
+            <li>{{ line }}</li>
+            {% endfor %}
+        </ul>
     </div>
     {% endfor %}
 
+    <h2>Watch the Trailer</h2>
     <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>

web/style.css

@@ -53,37 +53,36 @@ body {
     width: 150px;
 }
 
-.screenshot {
-    position: relative;
+.feature {
     margin-top: 40px;
     margin-bottom: 40px;
 }
 
-.feature {
+.feature-banner {
+    position: relative;
+}
+
+.feature ul {
+    margin-top: 1rem;
+}
+
+.feature-title {
     margin: 10px;
     padding: 10px;
-    max-width: 60%;
     color: white;
     background: rgb(0, 0, 0, 0.7);
-    border-radius: 8px;
     position: absolute;
+    text-align: center;
+    transform: translate(-50%, 0);
+    left: 50%;
     top: 0;
+    white-space: nowrap;
 }
 
-.feature p {
+.feature-title h2 {
     margin-bottom: 0;
 }
 
-.feature-0 {
-    text-align: left;
-    left: 0;
-}
-
-.feature-1 {
-    text-align: right;
-    right: 0;
-}
-
 .footer {
     text-align: center;
     padding: 15px;
@@ -105,8 +104,6 @@ body {
 }
 
 .trailer {
-    margin-top: 60px;
-    margin-bottom: 40px;
     position: relative;
     width: 100%;
     height: 0;