From eece440559ac796b365e34be300855c3f0defa00 Mon Sep 17 00:00:00 2001
From: Quadrimus <dev@quadrimus.com>
Date: Wed, 27 Nov 2024 09:04:21 +0100
Subject: [PATCH] Improved games page

---
 games/index.html | 37 ++++++++++++++++++++++---------------
 style.css        | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/games/index.html b/games/index.html
index 496e0ca..4d39a3d 100644
--- a/games/index.html
+++ b/games/index.html
@@ -37,22 +37,29 @@ <h1>
 			</nav>
 		</header>
 		<main>
-			<section class="text">
+			<section>
 				<h2>WORIDII Chapter 1: Lurker</h2>
-				<p>
-					We are proud to announce our <b>FIRST VIDEO GAME</b>!
-				</p>
-				<p>
-					We're currently in <b>the production phase</b> of this passion project of ours,
-					and we can't wait to bring you more details!
-				</p>
-				<p>
-					You can look forward to exploring a&nbsp;dark location in a mysterious land of WORIDII!
-					You'll be there to examine your surroundings, the history of the place and a&nbsp;strange mystery.
-				</p>
-				<p>
-					Stay tuned for more info about the development and the game itself!
-				</p>
+			</section>
+			<section class="columns">
+				<div>
+					<p>
+						We are proud to announce our <b>FIRST VIDEO GAME</b>!
+					</p>
+					<p>
+						We're currently in <b>the production phase</b> of this passion project of ours,
+						and we can't wait to bring you more details!
+					</p>
+					<p>
+						You can look forward to exploring a&nbsp;dark location in a&nbsp;mysterious land of WORIDII!
+						You'll be there to examine your surroundings, the history of the place and a&nbsp;strange mystery.
+					</p>
+					<p>
+						Stay tuned for more info about the development and the game itself!
+					</p>
+				</div>
+				<div class="link">
+					<a href="https://woridii.com/">Go to game website ⇨</a>
+				</div>
 			</section>
 			<section class="blocks" style="--figure-height: 210px;">
 				<div>
diff --git a/style.css b/style.css
index c89d58b..cfc7905 100644
--- a/style.css
+++ b/style.css
@@ -196,6 +196,12 @@ nav {
 
 	section {
 		&.blocks {
+			align-items: center;
+			flex-direction: column;
+		}
+
+		&.columns {
+			align-items: center;
 			flex-direction: column;
 		}
 
@@ -403,6 +409,7 @@ section.blocks {
 		display: flex;
 		flex: 1;
 		flex-direction: column;
+		min-width: 20em;
 		padding: 1em;
 
 		& > h3 {
@@ -471,6 +478,42 @@ section.blocks {
 	}
 }
 
+section.columns {
+	display: flex;
+	justify-content: space-around;
+	margin: 1em 0.4em;
+
+	& > div {
+		flex-basis: 100%;
+		max-width: 27em;
+
+		&.link {
+			align-items: center;
+			display: flex;
+			justify-content: center;
+
+			a {
+				border: 0.1em solid var(--grey-background-color);
+				border-radius: 0.5em;
+				display: block;
+				font-size: 2em;
+				padding: 1em;
+				text-align: center;
+				text-decoration: none;
+				width: fit-content;
+
+				&:hover {
+					background-color: var(--grey-background-color) 50%;
+				}
+			}
+		}
+
+		& > p:first-child {
+			margin-top: 0;
+		}
+	}
+}
+
 section.conversion {
 	display: flex;
 	gap: 0.2em;