added alt text to images

web/_data/screenshots.json

@@ -1,19 +1,32 @@
-[{
-    "value": "CharacterCreator.jpg",
-    "text": "Create your own characters with unique personalities and skills and dress them however you like"
-}, {
-    "value": "BuildMode.jpg",
-    "text": "Build houses and community spaces like parks and cafés and watch households inhabit them"
-}, {
-    "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.jpg",
-    "text": "Have your characters interact, build relationships, grow families and live unique lives"
-}, {
-    "value": "Travel.jpg",
-    "text": "Share your creations with the community by exporting lots and households from your game"
-}, {
-    "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"
-}]
+[
+    {
+        "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

@@ -5,7 +5,7 @@
 
     {% 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 }}" alt="{{ item.alt }}" width="100%" class="screen">
         <div class="feature feature-{{ forloop.index0 | modulo: 2 }}">
             <p>{{ item.text }}</p>
         </div>
@@ -15,4 +15,4 @@
     <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>
+</div>

web/_includes/social.html

@@ -7,7 +7,7 @@
     <div class="row justify-content-center">
         <div class="col-auto" style="padding: 10px;">
             <a class="twitter-timeline" href="https://twitter.com/TinyLifeGame" width="350" height="600"></a>
-            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+            <script defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
         </div>
         <div class="col-auto" style="padding: 10px;">
             <iframe id="discord-widget" title="Ellpeck Games Discord server" width="350" height="600" allowtransparency="true" frameborder="0" src="https://discordapp.com/widget?id=181435613147430913&theme=light"></iframe>

web/_includes/top.html

@@ -25,7 +25,3 @@
         </div>
     </div>
 </div>
-
-<script>
-    $(".top").css("background-position", `${Math.random() * 100}% ${Math.random() * 100}%`);
-</script>

web/style.css

@@ -13,7 +13,7 @@ body {
 
 .top {
     background-image: url("media/large_background.png");
-    background-size: 400%;
+    background-size: cover;
     color: white;
 }