Switch to grid layout

Signed-off-by: Mubashshir <ahm@jadupc.com>

1 files changed, 22 insertions, 15 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 36aa446..fcd956c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -7,6 +7,14 @@
 	font-family: 'Poppins', sans-serif;
 }
 
+
+.homepage-header {
+	margin-bottom: 1em;
+	text-align: center;
+	color: white;
+	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+}
+
 a {
 	text-decoration: none;
 }
@@ -14,17 +22,9 @@ a {
 body {
 	background: linear-gradient(45deg, #C9409060, #0350C660);
 	padding: 10px;
-
-	min-height: 100vh;
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	flex-direction: column;
+	min-height: 101vh;
 }
 
-
 .catagory {
 	border-bottom: 3px solid gray;
 	border-radius: 2px;
@@ -42,14 +42,14 @@ body {
 
 .app-container {
 	display: flex;
-	flex-direction: row;
 	flex-wrap: wrap;
+	justify-content: space-around;
 }
 
 
 .card {
-	width: 24vw;
-	height: 30vh;
+	min-width: 360px;
+	min-height: 290px;
 	margin: 5px;
 	border-radius: 10px;
 
@@ -81,21 +81,26 @@ body {
 }
 
 .title {
-	flex-direction: row;
 	display: grid;
-	grid-template-rows: 40% 40% 20%;
-	grid-template-columns: 20% 20% 20% 20% 20%;
+	grid-template-rows: 1fr 1fr 1fr;
+	grid-template-columns: 3fr 4fr 3fr;
+	margin-left: 5px;
+	margin-right: 5px;
 }
 
 .name {
 	color: #ffffff;
 	font-size: 24px;
 	text-shadow: 1px 1px 5px black;
+	grid-row: 1/2;
+	grid-column: 1/4;
 }
 
 .gen-name {
 	color: #ffffff;
 	text-shadow: 1px 1px 2px black;
+	grid-column: 1/4;
+	grid-row: 2/3;
 }
 
 .ins-btn {
@@ -111,6 +116,8 @@ body {
 	font-weight: 700;
 
 	transition: all 200ms ease-in-out;
+	grid-row: 3/4;
+	grid-column: 2/3;
 }
 
 .ins-btn:hover {