Game Showcase Section + Additional Fixes (#257)

* game showcase section + additional fixes * prettier fixes --------- Co-authored-by: Cameron <[email protected]>
HaxeFlixel · Mar 27, 2024 · 5e72008 · 5e72008
1 parent a4b1b06
commit 5e72008
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 134 deletions.
diff --git a/content/_layouts/demos-layout.liquid b/content/_layouts/demos-layout.liquid
@@ -1,17 +1,19 @@
 ---
 layout: default.liquid
 ---
-<h1 class="title ">{{ title }} 
-<div class="float-end">
-	<a
-	class="github-button"
-	href="https://github.com/haxeflixel/flixel-demos"
-	data-color-scheme="no-preference: light_high_contrast; light: light_high_contrast; dark: dark_high_contrast;"
-	data-size="large"
-	data-show-count="true"
-	aria-label="Star haxeflixel/flixel on GitHub"
-	>haxeflixel/flixel-demos</a>
-</div>	
- </h1>
+<h1 class="title ">
+	{{ title }}
+	<div class="float-end">
+		<a
+			class="github-button"
+			href="https://github.com/haxeflixel/flixel-demos"
+			data-color-scheme="no-preference: light_high_contrast; light: light_high_contrast; dark: dark_high_contrast;"
+			data-size="large"
+			data-show-count="true"
+			aria-label="Star haxeflixel/flixel on GitHub"
+			>haxeflixel/flixel-demos</a
+		>
+	</div>
+</h1>
 
 {{ content }}
diff --git a/content/_layouts/documentation-layout.liquid b/content/_layouts/documentation-layout.liquid
@@ -1,21 +1,22 @@
 ---
 layout: default
 ---
-<h1 class="title">{{ title }}
+<h1 class="title">
+	{{ title }}
 
-<div class="float-end">
-	<a
-	class="github-button"
-	href="https://github.com/haxeflixel/flixel-docs"
-	data-color-scheme="no-preference: light_high_contrast; light: light_high_contrast; dark: dark_high_contrast;"
-	data-size="large"
-	data-show-count="true"
-	aria-label="Star haxeflixel/flixel on GitHub"
-	>haxeflixel/flixel-docs</a>
-</div>	
+	<div class="float-end">
+		<a
+			class="github-button"
+			href="https://github.com/haxeflixel/flixel-docs"
+			data-color-scheme="no-preference: light_high_contrast; light: light_high_contrast; dark: dark_high_contrast;"
+			data-size="large"
+			data-show-count="true"
+			aria-label="Star haxeflixel/flixel on GitHub"
+			>haxeflixel/flixel-docs</a
+		>
+	</div>
 </h1>
 
-
 <p>
 	The HaxeFlixel documentation is provided from the
 	<a href="https://github.com/HaxeFlixel/flixel-docs">flixel-docs repository</a> and is open for

diff --git a/content/_layouts/partials/footer.liquid b/content/_layouts/partials/footer.liquid
@@ -6,27 +6,29 @@
 					<ul class="list-unstyled">
 						<li>
 							<a href="https://twitter.com/haxeflixel">
-								Twitter
 								<i class="bi-twitter"></i>
+								Twitter
 							</a>
 						</li>
 						<li>
 							<a href="https://github.com/haxeflixel">
-								Github
 								<i class="bi-github"></i>
+								GitHub
 							</a>
 						</li>
 						<li>
 							<a href="https://discordapp.com/invite/rqEBAgF">
-								Discord
 								<i class="bi-discord"></i>
+								Discord
 							</a>
 						</li>
-						<li >
-							<a href="https://www.patreon.com/haxefliexel">
+						<li>
+							<a href="https://www.patreon.com/haxeflixel">
+								<img
+									class="footer-patreon"
+									src="/images/patreon-logo.svg"
+									width="16px">
 								Patreon
-								<img class="footer-patreon" src="/images/patreon-logo.svg"
-									width="16px"/>
 							</a>
 						</li>
 					</ul>
@@ -45,7 +47,6 @@
 							<li>
 								<a href="https://api.haxeflixel.com">API</a>
 							</li>
-
 						</ul>
 						<ul class="list-unstyled col">
 							<li>
@@ -59,8 +60,6 @@
 							</li>
 						</ul>
 					</div>
-
-
 				</div>
 
 				<div class="footer-powered-by col ">

diff --git a/content/_layouts/showcase.liquid b/content/_layouts/showcase.liquid
@@ -5,15 +5,16 @@ layout: default
 	{{ title }}
 
 	<div class="float-end">
-	<a
-	class="github-button"
-	href="https://github.com/haxeflixel/haxeflixel.com?tab=readme-ov-file#how-to-add-a-showcase-game"
-	data-color-scheme="no-preference: light_high_contrast; light: light_high_contrast; dark: dark_high_contrast;"
-	data-size="large"
-	data-show-count="true"
-	aria-label="Star haxeflixel/flixel on GitHub"
-	>haxeflixel/haxeflixel.com</a>
-	</div>	
+		<a
+			class="github-button"
+			href="https://github.com/haxeflixel/haxeflixel.com?tab=readme-ov-file#how-to-add-a-showcase-game"
+			data-color-scheme="no-preference: light_high_contrast; light: light_high_contrast; dark: dark_high_contrast;"
+			data-size="large"
+			data-show-count="true"
+			aria-label="Star haxeflixel/flixel on GitHub"
+			>haxeflixel/haxeflixel.com</a
+		>
+	</div>
 </h1>
 
 {{ content }}
diff --git a/content/_scss/sections/home.scss b/content/_scss/sections/home.scss
@@ -15,6 +15,7 @@
 	font-size: 30px;
 	font-weight: 200;
 	padding-bottom: 30px;
+	padding-top: 10px;
 }
 
 .lead-line-large {
@@ -80,10 +81,20 @@
 	box-shadow: var(--bs-box-shadow);
 }
 
+.games-home .showcase-list {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-evenly;
+}
+
+.games-home a {
+	margin: 0.5em;
+	gap: 0.25em;
+}
+
 .platform-logos-home img {
 	padding: 10px;
 	@include opacityAll(0.7);
-	@include hover-scale-fx(1.1);
 	@include grayscale();
 }
 
@@ -94,16 +105,6 @@ $color-mode-type: data;
 		@include opacityAll(1);
 		filter: invert(0.7);
 	}
-
-	.platform-logos-home img:hover {
-		@include opacityAll(1);
-		filter: invert(0.9);
-	}
-}
-
-.platform-logos-home img:hover {
-	@include opacityAll(1);
-	@include nograyscale();
 }
 
 .platform-demos-home img {
@@ -117,6 +118,7 @@ $color-mode-type: data;
 
 .home-big-logo img {
 	@include hover-scale-fx(1.1);
+	padding-bottom: 15px;
 }
 
 .navbar-fixed-top {

diff --git a/content/demos.liquid b/content/demos.liquid
@@ -4,7 +4,6 @@ layout: "demos-layout"
 ---
 <div class="demo-page center-align-a row row-cols-sm-2 row-cols-3 g-3 justify-content-center mx-sm-4">
 	{% for demo in collections['demo-item'] %}
-
 		<a
 			class="col-6 col-sm-4 col-md-3"
 			href="{{ demo.url }}">