diff --git a/web/_data/features.json b/web/_data/features.json new file mode 100644 index 0000000..b669413 --- /dev/null +++ b/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" + } +] diff --git a/web/_data/screenshots.json b/web/_data/screenshots.json deleted file mode 100644 index 40e1eb7..0000000 --- a/web/_data/screenshots.json +++ /dev/null @@ -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 Itty by ssblur", - "alt": "A screenshot of ssblur's mod Itty, with its timeline menu open, showing various messages sent by different Tinies." - } -] diff --git a/web/_includes/about.html b/web/_includes/about.html index c2ad459..ab405d9 100644 --- a/web/_includes/about.html +++ b/web/_includes/about.html @@ -3,15 +3,23 @@

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.

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!

- {% for item in site.data.screenshots %} -
- {{ item.alt }} -
-

{{ item.text }}

+ {% for item in site.data.features %} +
+
+
+

{{ item.title }}

+
+ {{ item.alt }}
+
    + {% for line in item.text %} +
  • {{ line }}
    • + {% endfor %} +
{% endfor %} +

Watch the Trailer

diff --git a/web/media/banners/Actions.png b/web/media/banners/Actions.png new file mode 100644 index 0000000..939abd7 Binary files /dev/null and b/web/media/banners/Actions.png differ diff --git a/web/media/banners/BuildMode.png b/web/media/banners/BuildMode.png new file mode 100644 index 0000000..d092b80 Binary files /dev/null and b/web/media/banners/BuildMode.png differ diff --git a/web/media/banners/CharacterCreator.png b/web/media/banners/CharacterCreator.png new file mode 100644 index 0000000..65ce3d8 Binary files /dev/null and b/web/media/banners/CharacterCreator.png differ diff --git a/web/media/banners/CustomContent.png b/web/media/banners/CustomContent.png new file mode 100644 index 0000000..6308fee Binary files /dev/null and b/web/media/banners/CustomContent.png differ diff --git a/web/media/banners/Modding.png b/web/media/banners/Modding.png new file mode 100644 index 0000000..e13802e Binary files /dev/null and b/web/media/banners/Modding.png differ diff --git a/web/media/banners/Relationships.png b/web/media/banners/Relationships.png new file mode 100644 index 0000000..10808d0 Binary files /dev/null and b/web/media/banners/Relationships.png differ diff --git a/web/media/screenshots/BuildMode.jpg b/web/media/screenshots/BuildMode.jpg deleted file mode 100644 index 81ea1bc..0000000 Binary files a/web/media/screenshots/BuildMode.jpg and /dev/null differ diff --git a/web/media/screenshots/CharacterCreator.jpg b/web/media/screenshots/CharacterCreator.jpg deleted file mode 100644 index 31bb59a..0000000 Binary files a/web/media/screenshots/CharacterCreator.jpg and /dev/null differ diff --git a/web/media/screenshots/Gameplay.jpg b/web/media/screenshots/Gameplay.jpg deleted file mode 100644 index a13a91d..0000000 Binary files a/web/media/screenshots/Gameplay.jpg and /dev/null differ diff --git a/web/media/screenshots/Modding.png b/web/media/screenshots/Modding.png deleted file mode 100644 index 248fbeb..0000000 Binary files a/web/media/screenshots/Modding.png and /dev/null differ diff --git a/web/media/screenshots/Relationships.jpg b/web/media/screenshots/Relationships.jpg deleted file mode 100644 index 91cb805..0000000 Binary files a/web/media/screenshots/Relationships.jpg and /dev/null differ diff --git a/web/media/screenshots/Travel.jpg b/web/media/screenshots/Travel.jpg deleted file mode 100644 index 96a1a0e..0000000 Binary files a/web/media/screenshots/Travel.jpg and /dev/null differ diff --git a/web/style.css b/web/style.css index 0b01223..ff0c64b 100644 --- a/web/style.css +++ b/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;