From 55d255641cb2535f9af4373414db10f84cf48a27 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Thu, 15 Jun 2023 15:29:04 +0200
Subject: [PATCH] improved devlogs & social sections on mobile

---
 web/Gemfile.lock          | 56 ++++++++++++++++++++++-----------------
 web/_includes/social.html |  2 +-
 web/style/style.css       | 14 ++++++++++
 3 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/web/Gemfile.lock b/web/Gemfile.lock
index 67efe42..06bcb98 100644
--- a/web/Gemfile.lock
+++ b/web/Gemfile.lock
@@ -1,68 +1,74 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
+    addressable (2.8.4)
+      public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.2.2)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
+    eventmachine (1.2.7)
     eventmachine (1.2.7-x64-mingw32)
-    ffi (1.15.5-x64-mingw32)
+    ffi (1.15.5)
     forwardable-extended (2.6.0)
+    google-protobuf (3.23.3)
     http_parser.rb (0.8.0)
-    i18n (1.8.11)
+    i18n (1.14.1)
       concurrent-ruby (~> 1.0)
-    jekyll (4.2.1)
+    jekyll (4.3.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
       i18n (~> 1.0)
-      jekyll-sass-converter (~> 2.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 2.3)
+      kramdown (~> 2.3, >= 2.3.1)
       kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.4.0)
+      mercenary (>= 0.3.6, < 0.5)
       pathutil (~> 0.9)
-      rouge (~> 3.0)
+      rouge (>= 3.0, < 5.0)
       safe_yaml (~> 1.0)
-      terminal-table (~> 2.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
     jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-postfiles (3.1.0)
       jekyll (>= 3.8.6, < 5)
-    jekyll-sass-converter (2.1.0)
-      sassc (> 2.0.1, < 3.0)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (2.3.1)
+    kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.7.1)
+    liquid (4.0.4)
+    listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.6)
-    rb-fsevent (0.11.0)
+    public_suffix (5.0.1)
+    rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.5)
-    rouge (3.27.0)
+    rouge (4.1.2)
     safe_yaml (1.0.5)
-    sassc (2.4.0-x64-mingw32)
-      ffi (~> 1.9)
-    terminal-table (2.0.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.8.0)
-    webrick (1.7.0)
+    sass-embedded (1.63.4-x64-mingw-ucrt)
+      google-protobuf (~> 3.23)
+    sass-embedded (1.63.4-x64-mingw32)
+      google-protobuf (~> 3.23)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.4.2)
+    webrick (1.8.1)
 
 PLATFORMS
+  x64-mingw-ucrt
   x64-mingw32
 
 DEPENDENCIES
diff --git a/web/_includes/social.html b/web/_includes/social.html
index e4772d0..600f415 100644
--- a/web/_includes/social.html
+++ b/web/_includes/social.html
@@ -4,7 +4,7 @@
         If you want to stay up to date with Tiny Life's development, you should follow the game on Twitter or subscribe to the mailing list below. You can also join the Discord to ask questions or share your gameplay!
     </p>
 
-    <div class="row justify-content-center">
+    <div class="row justify-content-center socials">
         <div class="col-auto" style="padding: 10px;">
             <a class="twitter-timeline" href="https://twitter.com/TinyLifeGame" width="350" height="600"></a>
             <script defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
diff --git a/web/style/style.css b/web/style/style.css
index c7b38a0..383f92e 100644
--- a/web/style/style.css
+++ b/web/style/style.css
@@ -109,6 +109,7 @@ pre.highlight {
     min-width: 250px;
     width: 45%;
     display: inline-block;
+    margin-right: 20px;
 }
 
 .devlog-date {
@@ -190,4 +191,17 @@ pre.highlight {
         padding-top: 10px;
         padding-bottom: 10px;
     }
+
+    .socials {
+        max-width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .devlog {
+        display: block;
+        width: 90%;
+        margin-left: auto;
+        margin-right: auto;
+    }
 }