Scaffold in tooltips for later

css/main.css

@@ -1,3 +1,5 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -23,6 +25,7 @@ html {
 }
 
 #mapScreen {
+  @apply pt-12 px-20 pb-0;
   background-image: url(./img/twinkle.gif);
   background-size: cover;
   position: relative;
@@ -42,7 +45,7 @@ html {
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(4, 1fr);
   gap: 10px;
-  padding: 20px;
+
   position: relative;
   overflow: hidden;
 }
@@ -61,6 +64,21 @@ html {
 .passage-choices span {
   @apply underline font-bold cursor-pointer hover:text-neutral-950 text-neutral-800;
 }
+.active-turn {
+  /* Initial state of the glow */
+  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
+  animation: pulseGlow 2s infinite;
+}
+
+@keyframes pulseGlow {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
+  }
+  50% {
+    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8));
+  }
+}
 
 #passageContainer {
   @apply self-end flex-col w-full p-6 md:max-h-96 overflow-y-auto bg-neutral-400;

tailwind.config.js

@@ -1,11 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./twine_src/**/*.{html,js,twee}"],
+  content: [
+    "./twine_src/**/*.{html,js,twee}",
+    "./node_modules/flowbite/**/*.js",
+  ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        body: "Barlow",
+        display: "NB Television Pro",
+        mono: "Courier New",
+        sans: "Neue Montreal, sans-serif",
+      },
+    },
   },
-  plugins: [
-    require("@tailwindcss/typography"),
-    // ...
-  ],
+  plugins: [require("@tailwindcss/typography"), require("flowbite/plugin")],
 };