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": "CharacterCreator.jpg",
-}, {
+        "text": "Create your own characters with unique personalities and skills and dress them however you like",
-    "value": "BuildMode.jpg",
+        "alt": "A screenshot of the game's character creator, where a brown-haired Tiny called Anya Leslie is selected."
-    "text": "Build houses and community spaces like parks and cafés and watch households inhabit them"
+    },
-}, {
+    {
-    "value": "Gameplay.jpg",
+        "value": "BuildMode.jpg",
-    "text": "Control your household and tell your characters what to do, from cooking food to learning complex skills like programming and painting"
+        "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": "Relationships.jpg",
+    },
-    "text": "Have your characters interact, build relationships, grow families and live unique lives"
+    {
-}, {
+        "value": "Gameplay.jpg",
-    "value": "Travel.jpg",
+        "text": "Control your household and tell your characters what to do, from cooking food to learning complex skills like programming and painting",
-    "text": "Share your creations with the community by exporting lots and households from your game"
+        "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": "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": "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>

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;
 }