Improved games page

quadrimus · Nov 27, 2024 · eece440 · eece440
1 parent 674325e
commit eece440
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 15 deletions.
diff --git 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
@@ -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;