Fixed defect causing override of FontAwesome icons, updated demo, bum…

…ped version to 0.1.1
rbonestell · Feb 14, 2025 · 48cbbda · 48cbbda
1 parent cc71bb4
commit 48cbbda
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -4,15 +4,23 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Retroify.js Demo</title>
+    <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="../src/retroify.js"></script>
     <style>
         .container { padding: 2rem; }
         .demo-section { margin: 2rem 0; padding: 1rem; border: 1px solid #ddd; }
+        .btn.github { background: #333333; color: #ffffff; }
+        .btn.github:hover { background: #222222; color: #ffffff; }
+        .btn.github:active { background: #111111; color: #ffffff; }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Retroify.js Demo</h1>
+        <div style="display: flex; justify-content: space-between; align-items: center">
+            <h1>Retroify.js Demo</h1>
+            <span><a href="https://github.com/rbonestell/retroify.js" class="btn github">View on GitHub <i class="fab fa-github"></i></a></span>
+        </div>
         <p>This demo shows how Retroify.js works with various HTML elements and Bootstrap components.</p>
         <button onclick="retroify.toggle()" class="btn btn-primary" aria-pressed="false">Toggle Retroification</button>
         <button onclick="retroify.toggleScanlines()" class="btn btn-secondary" aria-pressed="false">Toggle Scanlines</button>
@@ -108,8 +116,6 @@ <h2>Links</h2>
             <p>Try hovering over these links to see the 8-bit hover effect!</p>
         </div>
     </div>
-
-    <script src="../src/retroify.js"></script>
     <script>
         // Event listeners
         const events = ['applied', 'removed'];

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "retroify.js",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A library to apply retro 8-bit styling to web pages",
   "repository": {
     "type": "git",

diff --git a/src/retroify.js b/src/retroify.js
@@ -51,7 +51,7 @@
         }
         
         /* Preserve Tailwind's font-size utilities while maintaining retro font */
-        [data-retroify="true"] * { font-family: 'Press Start 2P'; }
+        [data-retroify="true"] *:not(i[class*="fa"],i[class*="fa"]) {  font-family: 'Press Start 2P'; }
         
         /* Reset FontAwesome icons */
         [data-retroify="true"] i.fa,