Revamp homepage layout

CarbonChess · Jun 23, 2021 · f691b62 · f691b62
1 parent cebfa55
commit f691b62
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 27 deletions.
diff --git a/images/backgrounds/big-squares-low-opacity.svg b/images/backgrounds/big-squares-low-opacity.svg
diff --git a/images/backgrounds/big-squares.svg b/images/backgrounds/big-squares.svg
diff --git a/pages/home/index.html b/pages/home/index.html
@@ -5,29 +5,27 @@
 
 <h2>Select opponent</h2>
 
-<div class="cards">
-
-	<a href="/menu/bot/" class="card big">
+<div class="cards showcase">
+	<a href="/menu/bot/" class="card big" style="grid-area: computer;">
 		<img src="/images/icons/computer.svg" height="100px" alt="Computer" class="card-image">
 		<span class="card-heading">Computer</span>
 		<span class="card-description">Play against the computer</span>
 	</a>
-
-	<a href="/menu/offline/" class="card big">
+	<a href="/menu/offline/" class="card big" style="grid-area: offline;">
 		<img src="/images/icons/offline.svg" height="100px" alt="Offline" class="card-image">
 		<span class="card-heading">Offline</span>
 		<span class="card-description">Play against someone on the same device</span>
 	</a>
-
-	<a href="/menu/online/" class="card big">
+	<a href="/menu/online/" class="card big showcase-tall" style="grid-area: online;">
 		<img src="/images/icons/online.svg" height="100px" alt="Online" class="card-image">
 		<span class="card-heading">Online</span>
 		<span class="card-description">Play against someone anywhere in the world</span>
 	</a>
-
-	<a href="/menu/puzzles/" class="card big">
-		<img src="/images/icons/puzzle.svg" height="100px" alt="Online" class="card-image">
-		<span class="card-heading">Puzzles</span>
-		<span class="card-description">Find the best move in various levels</span>
+	<a href="/menu/puzzles/" class="card big showcase-wide" style="grid-area: puzzle;">
+		<img src="/images/icons/puzzle.svg" height="100px" alt="Puzzle" class="card-image">
+		<div>
+			<span class="card-heading">Puzzles</span>
+			<span class="card-description">Find the best moves to make across various levels</span>
+		</div>
 	</a>
 </div>
diff --git a/styles/common.nvss b/styles/common.nvss
@@ -11,7 +11,7 @@ html {
 }
 
 body {
-	--background: url('/images/backgrounds/variety.svg');
+	--background: url('/images/backgrounds/big-squares.svg');
 	background-color: var(--bg-colour);
 	background-image: var(--background);
 	background-repeat: no-repeat;

diff --git a/styles/home.nvss b/styles/home.nvss
@@ -61,6 +61,12 @@ input[type="text"] {
 	display: flex;
 	flex-wrap: wrap;
 	place-content: center;
+
+	&.showcase {
+		display: grid;
+		grid-template-areas: "online offline computer" "online puzzle puzzle";
+		gap: 1em;
+	}
 }
 
 .card {
@@ -102,10 +108,24 @@ input[type="text"] {
 	}
 
 	&.big {
-		margin: 1em;
 		height: 250px;
 		width: 250px;
-		border-radius: 1em;
+		border-radius: 0;
+
+		&.showcase-wide {
+			display: flex;
+			width: 100%;
+			grid-area: auto / span 2;
+			gap: 1em;
+			text-align: left;
+			font-size: 130%;
+		}
+
+		&.showcase-tall {
+			height: 100%;
+			grid-area: span 2 / auto;
+			font-size: 130%;
+		}
 
 		@ $(BR).. {
 			height: 325px;
@@ -214,16 +234,6 @@ input[type="text"] {
 		font-size: 1.15em;
 	}
 
-	.card.big &::before {
-		content: ' ';
-		height: 1px;
-		width: 55px;
-		background: #c8c8c8;
-		display: block;
-		margin-left: 74px;
-		margin-bottom: 1em;
-	}
-
 	.card:hover &::before {
 		background: var(--accent-colour);
 		height: 3px;