From f2bf94371f919d5fb2aca470edcddae3624efdb5 Mon Sep 17 00:00:00 2001
From: Andrea Fazzi <posta@andreafazzi.eu>
Date: Wed, 19 Apr 2023 12:04:09 +0200
Subject: [PATCH] Style the quiz card a bit

---
 frontend/src/QuizCard.svelte | 45 ++++++++++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/frontend/src/QuizCard.svelte b/frontend/src/QuizCard.svelte
index 741c99c..e0214ef 100644
--- a/frontend/src/QuizCard.svelte
+++ b/frontend/src/QuizCard.svelte
@@ -5,8 +5,49 @@
   export let quiz: main.Quiz;
 </script>
 
-<div on:click>
-  <div>
+<style>
+  .card {
+    background-color: #333;
+    border: 1px solid #444;
+    border-radius: 5px;
+    padding: 20px;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    width: 300px;
+    margin: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .card:hover {
+    background-color: #444;
+    cursor: pointer;
+    transform: scale(1.05);
+    transition: all 0.3s ease;
+  }
+  
+  .question {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+  
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  
+  li {
+    margin-bottom: 5px;
+  }
+  
+  li:before {
+    content: '\25A1';
+    margin-right: 5px;
+  }
+</style>
+
+<div class="card" on:click>
+  <div class="question">
     {quiz.Question}
   </div>
   <div>