Changed tartiflette list to flexbox container.

1 files changed, 39 insertions, 0 deletions

diff --git a/app/assets/stylesheets/components/tartiflette_container.css b/app/assets/stylesheets/components/tartiflette_container.css
new file mode 100644
index 0000000..64c4053
--- /dev/null
+++ b/app/assets/stylesheets/components/tartiflette_container.css
@@ -0,0 +1,39 @@
+.tartiflette-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+
+    .tartiflette-box {
+	border-radius: 1rem;
+	padding: 1rem;
+	width: 8rem;
+	text-align: center;
+	background-color: white;
+    }
+
+    .tartiflette-box:hover {
+	background-color: whitesmoke;
+    }
+
+    .tartiflette-link {
+	display: inline-block;
+	margin-top: 0.5rem;
+	padding: 0.5rem 1rem;
+	text-decoration: none;
+	color: white;
+	border-radius: 1rem;
+    }
+
+    .scored {
+	background-color: forestgreen;
+    }
+
+    .unscored {
+	background-color: firebrick;
+    }
+
+    .tartiflette-link:hover {
+	background-color: #0056b3; /* Darker blue for hover effect */
+    }
+}