redo some styling on the demo page

HaxeFlixel · Sep 4, 2024 · d452f71 · d452f71
1 parent 02c08a6
commit d452f71
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 57 deletions.
diff --git a/content/_layouts/demos-layout.liquid b/content/_layouts/demos-layout.liquid
@@ -1,7 +1,7 @@
 ---
 layout: default.liquid
 ---
-<h1 class="title ">
+<h1 class="title">
 	{{ title }}
 	<div class="float-end">
 		<a

diff --git a/content/_scss/sections/demos.scss b/content/_scss/sections/demos.scss
@@ -1,55 +1,12 @@
 /* Demos
 -------------------------------------------------- */
-
-.demo-page.center-align-a img {
-	box-shadow: var(--bs-box-shadow);
-	width: 100%;
-	height: auto;
-}
-
-.demo-page.center-align-a p {
-	@include font-size(1rem);
-	text-align: center;
-	position: relative;
-	width: 100%;
-	margin: 0;
-	top: 2em;
-	color: white;
-	background: rgba(0, 0, 0, 0.7);
-}
-
-#page-tr-info {
-	float: right;
-	margin-top: -60px;
-	position: relative;
-	z-index: 99;
-}
-
-.demo-button {
-	cursor: pointer;
-	cursor: hand;
-}
-
-.demo-button .logo {
-	fill: #afafaf;
-}
-
-.flash-button.active .logo,
-.flash-button:hover .logo {
-	fill: red;
-}
-
-.html5-button.active .logo,
-.html5-button:hover .logo {
-	fill: orange;
-}
-
-.html5-demo {
-	border: none;
-	margin: 0 auto;
-	display: block;
+.demo-page a {
+	transition:
+		box-shadow 0.1s ease-out,
+		color 0.1s ease-out;
+	box-shadow: 0px 0px;
 }
 
-.install-flash-player-prompt {
-	width: 110px;
+.demo-page a:hover {
+	box-shadow: 5px 5px;
 }
diff --git a/content/_scss/style.scss b/content/_scss/style.scss
@@ -5,6 +5,9 @@
 @import "./flixel-colors.scss"; // adds flixel colors to bootstrap color map
 
 $btn-border-radius: 0px !important;
+$card-border-width: 0px !important;
+$card-inner-border-radius: 0px !important;
+$card-border-radius: 0px !important;
 $pagination-border-radius: 0px !important;
 $dropdown-border-radius: 0px !important;
 

diff --git a/content/demos.liquid b/content/demos.liquid
@@ -2,16 +2,28 @@
 title: "Demos"
 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">
+<div class="demo-page row row-cols-2 row-cols-md-3 row-cols-lg-5 justify-content-center g-3">
 	{% for demo in collections['demo-item'] %}
-		<a
-			class="col-6 col-sm-4 col-md-3"
-			href="{{ demo.url }}">
-			<p class="fw-semibold py-2">{{ demo.data.title }}</p>
+
+		{% capture shadow_color %}{% cycle  "flixel-yellow", "flixel-red", "flixel-green", "flixel-dark-blue",  "flixel-light-blue" %}{% endcapture %}
+		<div class="col demo-card text-white">
+			<a class="card px-0 text-center text-reset link-{{shadow_color}}" href="{{demo.url}}">
 			{% capture imgURL %}content/_static/images/demos/{{ demo.data.title }}.png{% endcapture %}
 			{% liquid
-				image imgURL, "{{demo.data.title}}", 200, 200
+				image imgURL, "{{demo.data.title}}", 400, 400, "card-img img-fluid"
 			%}
+			<div class="card-img-overlay p-0">
+				<p class="card-title py-2 fw-bold bg-black">{{ demo.data.title }}</p>
+				<p class="card-text">{{ demo.data.description }}</p>
+			</div>
 		</a>
+		</div>
+
+		{% comment %} <a
+			class="col-6 col-sm-4 col-md-3 link-{{shadow_color}}"
+			href="{{ demo.url }}">
+			<p class="fw-bold py-1 text-center text-bg-{{shadow_color}} text-black">{{ demo.data.title }}</p>
+			
+		</a> {% endcomment %}
 	{% endfor %}
 </div>