Switch to grid layout

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

5 files changed, 23 insertions, 22 deletions

diff --git a/assets/asset/snaps/firefox-esr.png b/assets/asset/snaps/firefox-esr.png
deleted file mode 100644
index 882e871..0000000
--- a/assets/asset/snaps/firefox-esr.png
+++ /dev/null
diff --git a/assets/asset/snaps/qbittorrent.png b/assets/asset/snaps/qbittorrent.png
deleted file mode 100644
index 48aea36..0000000
--- a/assets/asset/snaps/qbittorrent.png
+++ /dev/null
diff --git a/hugo.toml b/hugo.toml
index ed0e673..7d80bf3 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -1,5 +1,5 @@
 baseURL = 'http://apps.jadupc.com/'
 languageCode = 'en-us'
-title = 'JaduPc Apps'
+title = 'JaduPc App Store'
 
 disableKinds = ["section", "taxonomy", "term", "RSS", "sitemap", "robotsTXT", "404"]
diff --git a/layouts/partials/app.html b/layouts/partials/app.html
index 4ccd861..84f1ac0 100644
--- a/layouts/partials/app.html
+++ b/layouts/partials/app.html
@@ -25,10 +25,4 @@
             <a {{ printf "apt://%s" .id | printf "href=%q" | safeHTMLAttr }} class="ins-btn">Install</a>
           </div>
         </div>
-
-        {{- with (printf "asset/snaps/%s.png" .id| resources.Get) -}}
-        <div class="image">
-          <img src="{{ .RelPermalink }}" alt="logo">
-        </div>
-        {{- end -}}
       </div>
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 {