From 690e76d59b825d9f57d373d8feecb7ba6a928335 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Wed, 31 Aug 2022 12:14:32 +0200
Subject: [PATCH] some styling improvements to the site

---
 web/_includes/social.html | 14 +++++++-------
 web/_includes/top.html    |  8 ++++----
 web/style.css             | 22 +++++++++++++++++++++-
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/web/_includes/social.html b/web/_includes/social.html
index a4bb08b..3ee6c32 100644
--- a/web/_includes/social.html
+++ b/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>
diff --git a/web/_includes/top.html b/web/_includes/top.html
index 440249e..103e028 100644
--- a/web/_includes/top.html
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/web/style.css b/web/style.css
index 7ca4382..e5d88a9 100644
--- a/web/style.css
+++ b/web/style.css
@@ -147,4 +147,24 @@ body {
     margin-top: 40px;
     padding: 20px;
     border-radius: 5px;
-}
\ No newline at end of file
+}
+
+@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;
+    }
+
+}