Updated readme on steps to publish changes to demo site

README.md

@@ -1,30 +1,21 @@
-# Updating Demo Page (GH-Pages branch)
+# Updating Demo Page
+(https://smcllns.github.io/css-social-buttons/)
 
-1. Rebase master to gh-pages
+1. Update zocial files or demo page (`index.html`) in `master`
+
+
+2. Copy latest zocial css and demo page to `gh-pages`
 
 ```bash
 git checkout gh-pages // go to the gh-pages branch
-git rebase master // bring gh-pages up to date with master
+git checkout master css // copy css folder from master to gh-pages
+git checkout master index.html // copy index.html from master to gh-pages
 ```
 
-2. Delete nearly all files, leaving only those remaining to serve gh-pages:
-
-
-- /css
-- .gitignore
-- demo.html
-- README.md
-
-
-3. Rename demo.html to index.html
-
-4. Commit changes and push
+3. Commit changes and push
 
 ```bash
 git add .
 git commit -m 'Some descriptive commit message'
 git push origin gh-pages
 ```
-
----
-I'm sure there's a better way to do this, but these steps work in the meantime

css/zocial.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <!--
-2019-4-27: Created with FontForge (http://fontforge.org)
+2019-4-28: Created with FontForge (http://fontforge.org)
 -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20190413 at Sat Apr 27 20:19:39 2019
+Created by FontForge 20190413 at Sun Apr 28 13:26:10 2019
  By Sam Collins
 
 </metadata>

index.html

@@ -335,6 +335,7 @@
 <p>Under MIT License. <a href="https://github.com/smcllns/css-social-buttons">Zocial on Github.</a></p>
 
 <script type="text/javascript">
+  // interactive demo button
   var sizeInput = document.getElementById('font-size-range');
   var sizeDisplay = document.getElementById('font-size-display');
   var labelInput = document.getElementById('label-input');
@@ -360,6 +361,18 @@
       showcaseButton.classList.toggle('icon');
     })
   }
+
+  // interactive button list
+  var buttons = document.getElementById('samples').querySelectorAll('.zocial');
+  for (var i = 0; i < buttons.length; i++) {
+    buttons[i].addEventListener('click', function(e) {
+      e.preventDefault();
+      this.classList.toggle('icon');
+    })
+  }
+
+
+
 </script>
 
 </body>