progress on conversion to tailwind

static/css/base.css

@@ -1,12 +1,12 @@
-/* Helper classes
+/* /* Helper classes
 -------------------------------------------------- */
-.min-width-fit-content {
+/* .min-width-fit-content {
   min-width: fit-content;
-}
+} */
 
 /* Sticky footer styles
 -------------------------------------------------- */
-html {
+/* html {
   position: relative;
   min-height: 100%;
   font-size: 14px;
@@ -18,7 +18,7 @@ html {
 }
 
 body {
-  margin-bottom: 60px; /* Margin bottom by footer height */
+  margin-bottom: 60px; /* Margin bottom by footer height 
 }
 
 .container {
@@ -33,10 +33,10 @@ body {
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: 60px; /* Set the fixed height of the footer here */
-  line-height: 60px; /* Vertically center the text there */
+  height: 60px; /* Set the fixed height of the footer here 
+  line-height: 60px; /* Vertically center the text there 
   background-color: #f5f5f5;
-}
+} */
 /* Trade Offer
 -------------------------------------------------- */
 .trade-offer-grid {
@@ -77,52 +77,6 @@ body {
 
 /* Card Badge
 -------------------------------------------------- */
-span:has(> .card-badge-grid) {
-    display: block;
-}
-
-.card-badge-grid {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: 1fr 1fr;
-  gap: 0.2rem;
-  padding: 0.3rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.9rem;
-  min-width: 150px;
-}
-
-.card-badge-name {
-  grid-column: 1 / span 2;
-  grid-row: 1;  
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.card-badge-rarity {
-  grid-column: 1;
-  grid-row: 2;
-  text-align: left;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  line-height: 1.2;
-}
-
-.card-badge-cardset {
-  grid-column: 2;
-  grid-row: 2;
-  text-align: right;
-  font-size: 0.75rem;
-  opacity: 0.9;
-}
-
 /* Responsive: On narrow viewports, stack the Has and Wants sections */
 @media (max-width: 576px) {
   .trade-offer-grid {
@@ -181,4 +135,4 @@ button.select2-selection__choice__remove {
     display: block !important;
     position: relative;
     opacity: 1;
-}
+}

static/js/base.js

@@ -1,33 +1,26 @@
-$(document).ready(function () {
-  // Initialize Gravatar
-  Gravatar.init();
+const $ = x => Array.from(document.querySelectorAll(x));
+const $$ = x => Array.from(document.querySelector(x));
 
-  // Initialize tooltips
-  $('[data-bs-toggle="tooltip"]').each(function () {
-    new bootstrap.Tooltip(this);
-  });
-
-  // Initialize select2 fields
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize Gravatar if available
+  if (typeof Gravatar !== 'undefined' && typeof Gravatar.init === 'function') {
+    Gravatar.init();
+  }
 
 
-  // Updated slider functionality for tab content
-  $("button[data-bs-toggle='tab']").on("click", function(e) {
-    e.preventDefault(); // Prevent default Bootstrap behavior
-
-    // Get the target pane selector from the button attribute
-    var targetSelector = $(this).attr("data-bs-target");
-    var $targetPane = $(targetSelector);
-
-    // Update active class on the nav buttons
-    $(this).closest("ul").find("button").removeClass("active");
-    $(this).addClass("active");
-
-    // Compute the offset of the target pane relative to the grid container
-    // Using the DOM property offsetLeft ensures any grid gap is taken into account
-    var offset = $targetPane[0].offsetLeft;
-
-    // Slide the grid: translate the container to align the target pane with the viewport
-    $("#cardsetTabsContent").css("transform", "translateX(-" + offset + "px)");
-  });
-});
-
+  const themeToggleBtn = document.getElementById('theme-toggle-btn');
+  if (themeToggleBtn) {
+    themeToggleBtn.addEventListener('click', function() {
+      const root = document.documentElement;
+      if (root.classList.contains("dark")) {
+        root.classList.remove("dark");
+        root.setAttribute("data-theme", "light");
+        localStorage.setItem("theme", "light");
+      } else {
+        root.classList.add("dark");
+        root.setAttribute("data-theme", "dark");
+        localStorage.setItem("theme", "dark");
+      }
+    });
+  }
+});