From 971a97f81dca685ab3ee24210d47096914d22683 Mon Sep 17 00:00:00 2001
From: Yuri Sizov <yuris@humnom.net>
Date: Tue, 21 Feb 2023 17:53:03 +0100
Subject: [PATCH] Finalize page design and tweak mobile view

Also tweak the shared footer
---
 _includes/footer.html         |   2 +-
 _includes/showreel-shelf.html |  35 +++++++
 _layouts/default.html         |   2 +-
 assets/css/main.css           |  88 ++++++++--------
 pages/features.html           | 192 ++++++++++++++++++++++++++++++----
 pages/showcase.html           |  34 +-----
 6 files changed, 257 insertions(+), 96 deletions(-)
 create mode 100644 _includes/showreel-shelf.html

diff --git a/_includes/footer.html b/_includes/footer.html
index 35dfdf15ee..bbfb2c2fdd 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,7 +1,7 @@
 </main>
 
 <footer>
-	<div class="container flex">
+	<div class="container flex footer-container">
 		<div id="copyright">
 			<p>
 				© 2007-{{ site.time | date: '%Y' }} Juan Linietsky, Ariel Manzur and <a
diff --git a/_includes/showreel-shelf.html b/_includes/showreel-shelf.html
new file mode 100644
index 0000000000..9884685828
--- /dev/null
+++ b/_includes/showreel-shelf.html
@@ -0,0 +1,35 @@
+<style>
+	.showreel-video img {
+		max-width: 100%;
+		background-color: var(--card-background-color);
+		box-shadow: 0 5px 10px -3px #00000078;
+		border-radius: 7px;
+		display: block;
+	}
+</style>
+
+<section class="flex grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
+	<article>
+		<div class="showreel-video">
+			<a href="https://www.youtube.com/watch?v=UAS_pUTFA7o" target="_blank">
+				<img src="/assets/showcase/desktop-showcase.jpg" alt="Showreel: 2022 Godot Desktop Games">
+			</a>
+		</div>
+	</article>
+
+	<article>
+		<div class="showreel-video">
+			<a href="https://www.youtube.com/watch?v=xF3QiQfQxeQ" target="_blank">
+				<img src="/assets/showcase/mobile-showcase.jpg" alt="Showreel: 2022 Godot Mobile Games">
+			</a>
+		</div>
+	</article>
+
+	<article>
+		<div class="showreel-video">
+			<a href="https://www.youtube.com/watch?v=9kKp0oguzr8" target="_blank">
+				<img src="/assets/showcase/apps-showcase.jpg" alt="Showreel: 2022 Godot Apps &amp; Tools">
+			</a>
+		</div>
+	</article>
+</section>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index dafbc3f9f6..b1477415da 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -21,7 +21,7 @@
 	<link rel="alternate" type="application/rss+xml" title="Godot News" href="/rss.xml">
 	<link rel="icon" href="/assets/favicon.png" sizes="any">
 	<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
-	<link rel="stylesheet" href="/assets/css/main.css?102">
+	<link rel="stylesheet" href="/assets/css/main.css?103">
 	<link rel="stylesheet" href="/assets/css/tobii.min.css">
 	<link rel="preload" as="font" href="/assets/fonts/Montserrat-Bold.woff2" crossorigin>
 	<link rel="preload" as="font" href="/assets/fonts/Montserrat-ExtraBold.woff2" crossorigin>
diff --git a/assets/css/main.css b/assets/css/main.css
index e608dd90d7..b1b8d1daa4 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -518,37 +518,36 @@ footer {
   padding-bottom: 32px;
 }
 
-footer ul {
-  list-style: none;
-  margin: 0px;
-  float: left;
-  overflow-wrap: break-word;
-  margin-left: 32px;
-  padding-left: 0px;
-}
-
 footer a {
   color: var(--footer-link-color);
   text-decoration-color: var(--footer-link-underline-color);
 }
+
 #copyright {
   flex: 2;
 }
 #copyright > p:first-child {
   margin-top: 0;
 }
-#sitemap {
-  flex: 3;
 
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+#sitemap {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+	gap: 24px;
+	margin-left: 16px;
 }
-#sitemap li {
+#sitemap .sitemap-group {
+  float: left;
+  list-style: none;
+  margin: 0px;
+  overflow-wrap: break-word;
+  padding-left: 0px;
+}
+#sitemap .sitemap-group li {
   line-height: 20px;
   margin-bottom: 10px;
 }
-#sitemap strong {
+#sitemap .sitemap-group strong {
   color: var(--footer-link-color);
 }
 #social {
@@ -1041,6 +1040,28 @@ pre > code {
   }
 }
 
+@media (max-width: 1020px) {
+  footer {
+    text-align: center;
+  }
+  .footer-container {
+    flex-direction: column;
+  }
+
+  #social {
+    margin: auto;
+    width: 30%;
+    min-width: 250px;
+    margin-top: 32px;
+  }
+  #social h4 {
+    text-align: center;
+  }
+  #social > div {
+    justify-content: space-around;
+  }
+}
+
 @media (max-width: 900px) {
   a.patreonLink,
   a.patreonLink > .patreon {
@@ -1091,32 +1112,6 @@ pre > code {
     display: none;
   }
 
-  footer {
-    text-align: center;
-  }
-  #sitemap {
-    flex-direction: column;
-    align-items: center;
-
-    margin-left: 0;
-  }
-  #sitemap .sitemap-group {
-    margin-top: 32px;
-    margin-left: 0;
-  }
-  #social {
-    margin: auto;
-    width: 30%;
-    min-width: 250px;
-    margin-top: 32px;
-  }
-  #social h4 {
-    text-align: center;
-  }
-  #social > div {
-    justify-content: space-around;
-  }
-
   .tabs {
     overflow: auto;
     scroll-behavior: smooth;
@@ -1130,6 +1125,15 @@ pre > code {
     padding-left: 0;
   }
 }
+
+@media (max-width: 720px) {
+	#sitemap {
+		grid-template-columns: 1fr;
+		gap: 12px;
+		margin-left: 0;
+	}
+}
+
 @media (max-width: 500px) {
   #sfc_graphic {
     width: 100%;
diff --git a/pages/features.html b/pages/features.html
index c1a23b7d07..3b51a5dda5 100644
--- a/pages/features.html
+++ b/pages/features.html
@@ -12,19 +12,38 @@ layout: default
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		background-color: var(--dark-color);
 	}
 
 	.features-why h2 {
+		color: var(--dark-color-text-title);
 		font-size: 40px;
-		margin: 36px 54px;
+		margin: 36px 54px 8px 54px;
 	}
 
 	.feature-container {
 		display: grid;
 		justify-content: center;
-		align-items: center;
 		gap: 16px;
+		grid-template-columns: 1fr;
+		margin: auto;
 		margin-bottom: 32px;
+		width: 1200px;
+		max-width: 1200px;
+	}
+	@media (max-width: 1250px) {
+		.feature-container {
+			width: auto;
+			padding-left: 16px;
+			padding-right: 16px;
+		}
+	}
+	@media (max-width: 900px) {
+		.feature-container {
+			width: auto;
+			overflow: auto;
+			flex-direction: column;
+		}
 	}
 
 	.feature-container h3 {
@@ -38,6 +57,14 @@ layout: default
 	.feature-container.feature-container-2x h3 {
 		grid-column: span 2;
 	}
+	@media (max-width: 1020px) {
+		.feature-container.feature-container-2x {
+			grid-template-columns: 1fr;
+		}
+		.feature-container.feature-container-2x h3 {
+			grid-column: span 1;
+		}
+	}
 	
 	.feature-container.feature-container-3x {
 		grid-template-columns: 1fr 1fr 1fr;
@@ -45,18 +72,58 @@ layout: default
 	.feature-container.feature-container-3x h3 {
 		grid-column: span 3;
 	}
+	@media (max-width: 1020px) {
+		.feature-container.feature-container-3x {
+			grid-template-columns: 1fr 1fr;
+		}
+		.feature-container.feature-container-3x h3 {
+			grid-column: span 2;
+		}
+	}
+	@media (max-width: 800px) {
+		.feature-container.feature-container-3x {
+			grid-template-columns: 1fr;
+		}
+		.feature-container.feature-container-3x h3 {
+			grid-column: span 1;
+		}
+	}
 
 	.feature-card {
 		background-color: var(--card-background-color);
 		border-radius: 12px;
 	}
 
+	.feature-card p {
+		margin-top: 24px;
+		margin-bottom: 12px;
+	}
+
+	.feature-card strong {
+		color: var(--navbar-link-current-color);
+	}
+
+	.features-showreel {
+		background-color: var(--dark-color);
+		color: var(--dark-color-text-hl);
+		padding: 24px 32px 28px 32px;
+	}
+
+	.features-showreel p {
+		margin-top: 0;
+		margin-bottom: 8px;
+	}
+
 	.features-complete-list {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
 
+	.features-complete-list .btn.btn-flat.btn-flat-white {
+		color: var(--base-color-text-title);
+	}
+
 	.features-download {
 		display: flex;
 		flex-direction: column;
@@ -64,9 +131,16 @@ layout: default
 		align-items: center;
 		gap: 16px;
 		background-color: var(--dark-color);
+		padding: 16px;
+	}
+	@media (max-width: 900px) {
+		.features-download {
+			padding: 16px;
+		}
 	}
 
 	.features-download p {
+		color: var(--dark-color-text-title);
 		margin: 0;
 	}
 
@@ -76,8 +150,14 @@ layout: default
 		align-items: center;
 		gap: 32px;
 	}
+	@media (max-width: 800px) {
+		.features-download-ready {
+			flex-direction: column;
+		}
+	}
 
 	.features-download-ready h2 {
+		color: var(--dark-color-text-title);
 		font-weight: 600;
 		margin: 0;
 	}
@@ -87,6 +167,9 @@ layout: default
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		background-color: var(--dark-color);
+		color: var(--dark-color-text-hl);
+		margin-bottom: 24px;
 	}
 
 	@media (max-width: 900px) {
@@ -98,7 +181,7 @@ layout: default
 	.showcase-carousel {
 		position: relative;
 		width: 100%;
-		max-width: 720px;
+		max-width: 780px;
 		aspect-ratio: 16/9;
 	}
 
@@ -135,7 +218,7 @@ layout: default
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background-color: var(--base-color);
+		background-color: var(--dark-color);
 		width: 100%;
 		height: 100%;
 	}
@@ -271,7 +354,7 @@ layout: default
 		<h2>Main features</h2>
 	</div>
 
-	<div class="container feature-container feature-container-2x" id="design">
+	<div class="feature-container feature-container-2x" id="design">
 		<h3>Intuitive scene-driven design</h3>
 
 		<div class="card base-padding feature-card">
@@ -293,45 +376,116 @@ layout: default
 		</div>
 	</div>
 
-	<div class="container feature-container feature-container-3x" id="script">
-		<h3>Scripting</h3>
+	<div class="feature-container feature-container-3x" id="script">
+		<h3>Coding tools that fit your needs</h3>
 
 		<div class="card base-padding feature-card">
-			<strong>GDScript is easy</strong>
+			<strong>Write code without hurdles with a high-level scripting language</strong>
 			<p>
 				...
 			</p>
 		</div>
 
 		<div class="card base-padding feature-card">
-			<strong>C# is first-class</strong>
+			<strong>Leverage your C# experience to feel right at home</strong>
 			<p>
 				...
 			</p>
 		</div>
 
 		<div class="card base-padding feature-card">
-			<strong>GDExtension and modules</strong>
+			<strong>Go with another language or modify the engine itself</strong>
 			<p>
 				...
 			</p>
 		</div>
 	</div>
 
-	<div class="container feature-container" id="features_2d">
-		<h3>3D features</h3>
+	<div class="feature-container feature-container-2x" id="features_3d">
+		<h3>Simple yet powerful 3D engine</h3>
+
+		<div class="card base-padding feature-card">
+			<strong>Support both high and low-end devices</strong>
+			<p>
+				...
+			</p>
+		</div>
+
+		<div class="card base-padding feature-card">
+			<strong>Seamlessly integrate with your asset pipeline</strong>
+			<p>
+				...
+			</p>
+		</div>
 	</div>
 
-	<div class="container feature-container" id="features_3d">
-		<h3>2D and GUI features</h3>
+	<div class="feature-container feature-container-3x" id="features_2d">
+		<h3>Specialized 2D workflow for games and apps</h3>
+
+		<div class="card base-padding feature-card">
+			<strong>Work with real 2D and pixel-based unit system</strong>
+			<p>
+				...
+			</p>
+		</div>
+
+		<div class="card base-padding feature-card">
+			<strong>Save time creating worlds with a tile map editor</strong>
+			<p>
+				...
+			</p>
+		</div>
+
+		<div class="card base-padding feature-card">
+			<strong>Master usability with a flexible GUI system</strong>
+			<p>
+				...
+			</p>
+		</div>
 	</div>
 
-	<div class="container feature-container" id="deploy">
-		<h3>Portability</h3>
+	<div class="feature-container features-showreel">
+		<p>
+			Watch our annual showreel videos to see more examples of projects using Godot!
+		</p>
+
+		{% include showreel-shelf.html %}
 	</div>
 
-	<div class="container feature-container" id="open_source">
-		<h3>Openness</h3>
+	<div class="feature-container feature-container-2x" id="deploy">
+		<h3>Cross-platform support with one project</h3>
+
+		<div class="card base-padding feature-card">
+			<strong>Deliver your game to desktop and mobile</strong>
+			<p>
+				...
+			</p>
+		</div>
+
+		<div class="card base-padding feature-card">
+			<strong>Partner with a publisher to target consoles</strong>
+			<p>
+				...
+			</p>
+		</div>
+	</div>
+
+	<div class="feature-container feature-container-2x" id="open_source">
+		<h3>Completely open and free</h3>
+
+		<div class="card base-padding feature-card">
+			<strong>Download and create with no contracts or hidden fees</strong>
+			<p>
+				...
+			</p>
+		</div>
+
+		<div class="card base-padding feature-card">
+			<strong>Find the logic behind any system in open source codebase</strong>
+			<p>
+				...
+			</p>
+		</div>
 	</div>
 
 	<div class="features-complete-list">
@@ -342,7 +496,7 @@ layout: default
 
 </div>
 
-<div id="call-to-action" class="container card base-padding features-download">
+<div id="call-to-action" class="container card features-download">
 	<div class="features-download-ready">
 		<h2>Ready to start?</h2>
 		<div>
diff --git a/pages/showcase.html b/pages/showcase.html
index a5d38a8989..ac5b753fc0 100644
--- a/pages/showcase.html
+++ b/pages/showcase.html
@@ -26,31 +26,7 @@ layout: default
 		Every year, we make a series of videos highlighting the best games made with Godot. Here are the latest ones:
 	</p>
 
-	<section class="flex grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
-		<article>
-			<div class="showcase-card video">
-				<a href="https://www.youtube.com/watch?v=UAS_pUTFA7o" target="_blank">
-					<img src="/assets/showcase/desktop-showcase.jpg" alt="Showreel: 2022 Godot Desktop Games">
-				</a>
-			</div>
-		</article>
-
-		<article>
-			<div class="showcase-card video">
-				<a href="https://www.youtube.com/watch?v=xF3QiQfQxeQ" target="_blank">
-					<img src="/assets/showcase/mobile-showcase.jpg" alt="Showreel: 2022 Godot Mobile Games">
-				</a>
-			</div>
-		</article>
-
-		<article>
-			<div class="showcase-card video">
-				<a href="https://www.youtube.com/watch?v=9kKp0oguzr8" target="_blank">
-					<img src="/assets/showcase/apps-showcase.jpg" alt="Showreel: 2022 Godot Apps &amp; Tools">
-				</a>
-			</div>
-		</article>
-	</section>
+	{% include showreel-shelf.html %}
 
 	<style>
 		.showcase-card h3 {
@@ -112,14 +88,6 @@ layout: default
 		.showcase-card .no-capsule h3 {
 			text-shadow: 0 4px 5px black;
 		}
-
-		.showcase-card.video img {
-			max-width: 100%;
-			background-color: var(--card-background-color);
-			box-shadow: 0 5px 10px -3px #00000078;
-			border-radius: 7px;
-			display: block;
-		}
 	</style>
 
 	<!-- Filter will go here -->