Enhance dinosaur forms and templates with improved styling and layout using Bulma CSS framework

2025-12-04 21:46:56 +00:00
parent 75398cf53f
commit 33fbae9426
11 changed files with 229 additions and 117 deletions
@@ -4,19 +4,22 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>TopTrumps - Dinosaurs</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <script src="https://unpkg.com/htmx.org@1.9.5"></script>
    <style>
-      body{font-family:system-ui,Segoe UI,Roboto,Arial;margin:20px}
-      .card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
-      .controls{margin-bottom:12px}
-      .grid{display:flex;flex-wrap:wrap}
-      .grid .card{width:220px}
-      form .row{margin-bottom:8px}
+      .app-container{padding:1.5rem}
+      .card-item{min-height:140px}
+      .highlight-new{animation: highlight 1.6s ease}
+      @keyframes highlight{0%{background:lavenderblush}100%{background:transparent}}
    </style>
  </head>
  <body>
-    <h1>TopTrumps — Dinosaurs</h1>
-    <div id="messages"></div>
-    {% block content %}{% endblock %}
+    <section class="section">
+      <div class="container app-container">
+        <h1 class="title">TopTrumps — Dinosaurs</h1>
+        <div id="messages"></div>
+        {% block content %}{% endblock %}
+      </div>
+    </section>
  </body>
 </html>