From 697c45e361b6d5716b9c09fddefeead80b5e7704 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Wed, 17 Apr 2024 20:10:06 +0200
Subject: [PATCH] improved styling & made subsites less wide

---
 web/_layouts/blog.html  |  2 +-
 web/changelog.html      |  2 +-
 web/common_issues.html  |  2 +-
 web/community.html      |  2 +-
 web/content_policy.html |  2 +-
 web/ingamenews.html     |  2 +-
 web/preview.html        |  2 +-
 web/style.css           | 14 ++++++--------
 8 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/web/_layouts/blog.html b/web/_layouts/blog.html
index fa8154a..a9711ed 100644
--- a/web/_layouts/blog.html
+++ b/web/_layouts/blog.html
@@ -11,7 +11,7 @@ nav: blognav.html
     }));
 </script>
 
-<div class="section blog-section">
+<div class="section top-margin full-width-images less-wide">
     <h1>{{ page.title }}</h1>
     <p>📖 You can also read this post <a href="{{ page.itch }}">on itch</a> or <a href="{{ page.steam }}">on Steam</a>, or you can subscribe to <a href="../../#subscribe">the mailing list</a> or <a href="/feed.xml">the Atom feed</a>.</p>
 
diff --git a/web/changelog.html b/web/changelog.html
index a506f11..b8a9443 100644
--- a/web/changelog.html
+++ b/web/changelog.html
@@ -5,7 +5,7 @@ title: Tiny Life Changelog
 summary: The full changelog for Tiny Life
 ---
 
-<div class="section isolated-site">
+<div class="section top-margin full-width-images">
     <h1>Tiny Life Changelog</h1>
     <p>This is the full changelog for the game, as seen in the bottom-right corner of its main menu.</p>
 
diff --git a/web/common_issues.html b/web/common_issues.html
index da0e22e..ac18c74 100644
--- a/web/common_issues.html
+++ b/web/common_issues.html
@@ -5,7 +5,7 @@ title: Troubleshooting Common Issues with Tiny Life
 summary: Information on commonly faced issues in and around Tiny Life, and how to fix them
 ---
 
-<div class="section isolated-site">
+<div class="section top-margin full-width-images less-wide">
     <h1>Troubleshooting Common Issues</h1>
 
     {% capture raw_content %}{% include common_issues.md %}{% endcapture %}
diff --git a/web/community.html b/web/community.html
index b92a17a..fdec98c 100644
--- a/web/community.html
+++ b/web/community.html
@@ -6,7 +6,7 @@ summary: A fun simulation game where you mess with people's lives
 ---
 
 <div class="section">
-    <div class="community-top">
+    <div class="top-margin">
         <h1>💬 Community Showcase</h1>
         <p>Ever since Tiny Life released into Early Access, the game's community has been growing steadily, and you all have been absolutely amazing. You've released videos, livestreamed gameplay, created mods, households, lots and other custom content, and you've even drawn fan art of pre-made Tinies! We love community contributions, and so we want to dedicate this section to our community and showcase some of the awesome stuff you've created.</p>
         <p>As far as we're aware, all content on this page abides by the <a href="https://docs.tinylifegame.com/articles/content_policy.html">Tiny Life Content and Community Policy</a>, and you can consider content on this page to be officially endorsed. Nevertheless, please always take care when downloading and installing custom content and mods for Tiny Life.</p>
diff --git a/web/content_policy.html b/web/content_policy.html
index 7003502..88db8f4 100644
--- a/web/content_policy.html
+++ b/web/content_policy.html
@@ -5,7 +5,7 @@ title: Tiny Life Content and Community Policy
 summary: Rules for custom content and community engagement for Tiny Life
 ---
 
-<div class="section isolated-site">
+<div class="section top-margin full-width-images less-wide">
     <h1>Tiny Life Content and Community Policy</h1>
 
     {% capture raw_content %}{% include content_policy.md %}{% endcapture %}
diff --git a/web/ingamenews.html b/web/ingamenews.html
index b24bd0d..964cca5 100644
--- a/web/ingamenews.html
+++ b/web/ingamenews.html
@@ -5,7 +5,7 @@ title: Tiny Life In-Game News
 summary: Tiny Life's in-game news, but displayed on the web
 ---
 
-<div class="section isolated-site">
+<div class="section top-margin full-width-images">
     <h1>Tiny Life In-Game News</h1>
     <p>This is a web version of the in-game news that sometimes appear in the bottom-left corner of the main menu.</p>
 
diff --git a/web/preview.html b/web/preview.html
index 1fc13c6..bef405c 100644
--- a/web/preview.html
+++ b/web/preview.html
@@ -5,7 +5,7 @@ title: About Tiny Life Preview Versions
 summary: Information on preview versions of Tiny Life and how to access them
 ---
 
-<div class="section isolated-site">
+<div class="section top-margin full-width-images less-wide">
     <h1>About Preview Versions</h1>
 
     {% capture raw_content %}{% include preview.md %}{% endcapture %}
diff --git a/web/style.css b/web/style.css
index fd707f5..fd4b128 100644
--- a/web/style.css
+++ b/web/style.css
@@ -60,13 +60,15 @@ a:visited.wide-link {
     margin: 50px auto;
 }
 
-.blog-section {
-    max-width: 700px;
+.top-margin {
     margin-top: 70px;
 }
 
-.blog-section img,
-.isolated-site img {
+.less-wide {
+    max-width: 700px;
+}
+
+.full-width-images img {
     width: 100%;
     height: auto;
 }
@@ -231,10 +233,6 @@ a:visited.wide-link {
     font-style: italic;
 }
 
-.community-top, .isolated-site {
-    margin-top: 70px;
-}
-
 h1 .anchor-heading, h2 .anchor-heading, h3 .anchor-heading, h4 .anchor-heading, h5 .anchor-heading, h6 .anchor-heading {
     visibility: hidden;
 }