From 3f8525f54f3e02e7cf6abaeec73f84d2db4dd108 Mon Sep 17 00:00:00 2001
From: elioat <elioat@tilde.institute>
Date: Sun, 16 Mar 2025 10:47:43 -0400
Subject: *

---
 html/immoral/bookmarklet.js | 25 +++++--------------------
 html/immoral/index.html     | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/html/immoral/bookmarklet.js b/html/immoral/bookmarklet.js
index 613bbf1..7f61ec4 100644
--- a/html/immoral/bookmarklet.js
+++ b/html/immoral/bookmarklet.js
@@ -1,12 +1,11 @@
 (function() {
-    // Prevent multiple instances
+    // Prevent multiple instances from running at once
     if (window.immoralFontVacuum) {
         alert('Web Font Vacuum is already running!');
         return;
     }
     window.immoralFontVacuum = true;
 
-    // Create a logging collector
     const logCollector = {
         logs: [],
         group: function(label) {
@@ -40,7 +39,6 @@ ${this.logs.join('\n')}`;
         }
     };
 
-    // Create an isolated container for our styles
     const styleRoot = document.createElement('div');
     styleRoot.className = 'fv-root';
     styleRoot.style.all = 'initial';  // Reset all styles
@@ -181,12 +179,10 @@ ${this.logs.join('\n')}`;
     styleRoot.appendChild(style);
     document.body.appendChild(styleRoot);
 
-    // Create UI container
     const container = document.createElement('div');
     container.className = 'fv-container';
     styleRoot.appendChild(container);
     
-    // Make the container draggable
     let isDragging = false;
     let currentX;
     let currentY;
@@ -195,7 +191,6 @@ ${this.logs.join('\n')}`;
     let xOffset = 0;
     let yOffset = 0;
 
-    // Create header with drag handle
     const header = document.createElement('header');
     header.className = 'fv-header';
     header.innerHTML = `
@@ -203,7 +198,6 @@ ${this.logs.join('\n')}`;
         <button class="fv-close">&times;</button>
     `;
     
-    // Add drag functionality
     header.addEventListener('mousedown', dragStart);
     document.addEventListener('mousemove', drag);
     document.addEventListener('mouseup', dragEnd);
@@ -231,17 +225,14 @@ ${this.logs.join('\n')}`;
         isDragging = false;
     }
 
-    // Add close button functionality
     header.querySelector('.fv-close').addEventListener('click', () => {
         document.body.removeChild(styleRoot);
         window.immoralFontVacuum = false;
     });
 
-    // Create content area
     const content = document.createElement('div');
     content.className = 'fv-content';
 
-    // Helper to extract font URLs from CSS text
     function extractFontUrls(cssText, baseUrl) {
         const fontUrls = [];
         const fontFaceRegex = /@font-face\s*{[^}]*}/g;
@@ -250,19 +241,19 @@ ${this.logs.join('\n')}`;
         
         function resolveUrl(url, base) {
             try {
-                // Handle protocol-relative URLs
+                // Protocol-relative URLs
                 if (url.startsWith('//')) {
                     return `${location.protocol}${url}`;
                 }
-                // Handle absolute URLs
+                // Absolute URLs
                 if (url.match(/^https?:\/\//)) {
                     return url;
                 }
-                // Handle root-relative URLs
+                // Root-relative URLs
                 if (url.startsWith('/')) {
                     return `${location.origin}${url}`;
                 }
-                // Handle relative URLs - use stylesheet URL as base if available
+                // Relative URLs - use stylesheet URL as base if available
                 return new URL(url, base || location.href).href;
             } catch (e) {
                 console.warn('Failed to resolve URL:', url, e);
@@ -300,7 +291,6 @@ ${this.logs.join('\n')}`;
         return fontUrls;
     }
 
-    // Function to find all fonts on the page
     function findFonts() {
         const fonts = new Map();
         logCollector.group('Font Vacuum: Scanning Stylesheets');
@@ -366,7 +356,6 @@ ${this.logs.join('\n')}`;
         try {
             logCollector.group(`Font Vacuum: Downloading ${filename} from ${url}`);
             
-            // Try to get the font from an already loaded stylesheet first
             logCollector.log('Searching for existing font-face rule...');
             const existingFontRule = Array.from(document.styleSheets)
                 .flatMap(sheet => {
@@ -502,19 +491,16 @@ ${this.logs.join('\n')}`;
             const fontItem = document.createElement('div');
             fontItem.className = 'fv-font-item';
             
-            // Font family name
             const fontName = document.createElement('h3');
             fontName.style.margin = '0 0 1rem 0';
             fontName.textContent = fontData.family;
             fontItem.appendChild(fontName);
             
-            // Preview section
             const preview = document.createElement('div');
             preview.className = 'fv-preview';
             preview.innerHTML = '0123456789<br><br>Society for me my misery<br>Since Gift of Thee --<br><br>The quick brown fox jumps over the lazy dog!?';
             fontItem.appendChild(preview);
             
-            // Download buttons for unique files
             const uniqueDownloads = new Map();
             fontData.variants.forEach(variant => {
                 if (!uniqueDownloads.has(variant.url)) {
@@ -554,7 +540,6 @@ ${this.logs.join('\n')}`;
         });
     }
 
-    // Create footer with debug button
     const footer = document.createElement('div');
     footer.className = 'fv-footer';
     
diff --git a/html/immoral/index.html b/html/immoral/index.html
index 4bece93..9792444 100644
--- a/html/immoral/index.html
+++ b/html/immoral/index.html
@@ -50,6 +50,17 @@
             background: var(--beige);
         }
         
+        @media (max-width: 600px) {
+            .input-group {
+                flex-direction: column;
+                gap: 0.75rem;
+            }
+            
+            .input-group button {
+                width: 100%;
+            }
+        }
+        
         .sr-only {
             position: absolute;
             width: 1px;
@@ -160,10 +171,12 @@
                 <button 
                     id="analyzeBtn" 
                     type="submit"
-                    aria-label="Analyze website for fonts"
-                >Analyze Fonts</button>
+                    aria-label="Find all web fonts on the website"
+                >Find Fonts</button>
             </form>
         </section>
+        <section id="error" class="error" role="alert" aria-live="polite"></section>
+        <section id="results" role="region" aria-label="Font analysis results"></section>
         <section class="bookmarklet-section" style="margin: 2rem 0; padding: 1rem; border: 2px dashed var(--dark); background: var(--beige);">
             <h2>Web Font Vacuum Bookmarklet</h2>
             <p>Drag this link to your bookmarks bar to vacuum web fonts from any webpage:</p>
@@ -183,8 +196,6 @@
                 Use the bookmarklet on any webpage to find and download its fonts directly.
             </p>
         </section>
-        <section id="error" class="error" role="alert" aria-live="polite"></section>
-        <section id="results" role="region" aria-label="Font analysis results"></section>
     </main>
     <footer>
         <br>
-- 
cgit 1.4.1-2-gfad0