some styling improvements to the site

InGameNews.md

@@ -1,7 +0,0 @@
-# Tiny Life Release Survey
-
-Tiny Life is currently in open beta, but within the next year, we'd like to release a full, paid version of Tiny Life for desktop devices and consoles. For this process, we'd like some feedback from people that may be considering buying the full version once it's released.
-
-[Take the survey](https://ell.lt/tlrelease)
-
-Thanks for your feedback!

web/_includes/social.html

@@ -5,12 +5,12 @@
     </p>
 
     <div class="row justify-content-center">
-        <div class="col-auto">
-            <a class="twitter-timeline" href="https://twitter.com/TinyLifeGame" width="400" height="600"></a>
+        <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>
         </div>
-        <div class="col-auto">
-            <iframe id="discord-widget" title="Ellpeck Games Discord server" width="400" height="600" allowtransparency="true" frameborder="0" src="https://discordapp.com/widget?id=181435613147430913&theme=light"></iframe>
+        <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>
         </div>
     </div>
 
@@ -25,12 +25,12 @@
                 <p><input type="text" name="name" placeholder="Name (optional)"></p>
 
                 <p>
-                <input id="16f4b" type="checkbox" name="l" checked value="16f4bf5a-7133-4255-958e-1d325fea6ba8">
-                <label for="16f4b">🏡 Tiny Life News</label>
+                    <input id="16f4b" type="checkbox" name="l" checked value="16f4bf5a-7133-4255-958e-1d325fea6ba8">
+                    <label for="16f4b">🏡 Tiny Life News</label>
                 </p>
 
                 <p><input type="submit" value="Subscribe"></p>
             </div>
         </form>
-</div>
+    </div>
 </div>

web/_includes/top.html

@@ -1,6 +1,6 @@
 <div id="top" class="top d-flex justify-content-center align-items-center vh-100">
     <div class="top-content">
-        <image src="media/logo.png" width="100%" height="auto" alt="Tiny Life"></image>
+        <img src="media/logo.png" width="100%" height="auto" alt="Tiny Life"></image>
         <h4>A fun simulation game where you mess with people's lives</h4>
 
         <div class="container top-container">
@@ -8,13 +8,13 @@
                 <div class="col site">
                     <h3>Play the free beta</h3>
                     <a href="https://ellpeck.itch.io/tiny-life">
-                        <image src="media/itch.png" alt="itch.io" width="200px" height="auto"></image>
+                        <img src="media/itch.png" alt="itch.io" width="200px" height="auto"></image>
                     </a>
                 </div>
                 <div class="col site">
                     <h3>Wishlist and play</h3>
                     <a href="https://store.steampowered.com/app/1651490/Tiny_Life/">
-                        <image src="media/steam.png" alt="Steam" width="200px" height="auto"></image>
+                        <img src="media/steam.png" alt="Steam" width="200px" height="auto"></image>
                     </a>
                 </div>
             </div>
@@ -48,4 +48,4 @@
             background.css("background-position", `${x}% ${y}%`);
         }, 30);
     });
-</script>
+</script>

web/style.css

@@ -147,4 +147,24 @@ body {
     margin-top: 40px;
     padding: 20px;
     border-radius: 5px;
-}
+}
+
+@media (max-width: 576px) {
+
+    .top-content {
+        max-width: 90%;
+    }
+
+    .top-container img {
+        max-width: 150px;
+    }
+
+    .top-container h3 {
+        font-size: 1.5rem;
+    }
+
+    .top-content {
+        padding-top: 40px;
+    }
+
+}