Merge pull request #13 from wompmacho/dev

Dev

src/html/welcome.html

@@ -18,13 +18,22 @@
     
     <div class="container">
       <div class="logo">
-        <img src="../assets/icons/icon512.png" alt="Live Chat Logo">
+        <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/cdn/assets/icons/icon512.png" alt="Live Chat Logo">
       </div>
 
       <h1><span class="fw-light">Welcome to the </span><span class="fw-bold">Chat</span></h1>
 
       <p class="heading-note">This is still very beta</p>
 
+      <div class="shields">
+        <a href="https://discord.gg/pVNnTDA">
+          <img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="discord shield.io">
+        </a>
+        <a href="https://cdn.jsdelivr.net/gh/wompmacho/live-chat/src/assets/img/btc.JPG">
+          <img src="https://img.shields.io/static/v1?label=BTC&style=plastic&message=3QkKHVyT1nZLEeH8f77bUhXorXKPQs5gzN&color=red" alt="BTC shield.io">
+        </a>
+      </div>
+
       <hr>
 
       <div class="links_div">
@@ -65,26 +74,26 @@
       <p>
         Don't forget to pin this extension for easy access. 
       </p>
-      <img src="../assets/gif/pinYourExtension.gif" alt="pinYourExtension.gif">
+      <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/cdn/assets/gif/pinYourExtension.gif" alt="pinYourExtension.gif">
       <p>
         Youtube Live is slow to load its pages currently. 
         Give the extension a moment while the page's iframes are loading. 
         Once you see the Emote Panel Icon you can open the Emote Selection Panel.
       </p>
-      <img src="../assets/gif/emotesMenu.gif" alt="emotesMenu.gif">
+      <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/cdn/assets/gif/emotesMenu.gif" alt="emotesMenu.gif">
       <p>
         Enhanced Theater Mode Is Now Available. Just click the check in the option panel and refresh your page.
       </p>
-      <img style="height: 540px; width: 960px;" src="../assets/gif/theaterMode.gif" alt="theaterMode.gif">
+      <img style="height: 540px; width: 960px;" src="https://cdn.jsdelivr.net/gh/wompmacho/womp/cdn/assets/gif/theaterMode.gif" alt="theaterMode.gif">
       <p>        
         Over around 500 Top and Trending Emotes are loaded from popular sites. 
         You can Enable/Disable them in the Options Menu.
       </p>
-      <img src="../assets/gif/optionsMenu.gif" alt="optionsMenu.gif">
+      <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/cdn/assets/gif/optionsMenu.gif" alt="optionsMenu.gif">
       <p>
         Can Also Click on UserNames To Autofill an @ Notification
       </p>
-      <img src="../assets/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif">
+      <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/cdn/assets/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif">
        
       <h2>Use At Your Own Risk</h2>
 

src/stylus/setupPage.styl

@@ -79,15 +79,12 @@ for fw, w in font-weights
     .material-icons
       margin-right: 7px
 
+.shields
+  float: left;
 
 .links_bottom
   display: inline-block;
   margin: 1%
-
-
-a 
-  background-color: #252526;
-  color: white;
   padding-top: 1em;
   padding-bottom: 1em;
   text-decoration: none;
@@ -95,14 +92,18 @@ a
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
-  text-align: center
   border: 1px solid #4e4e4e
+  background-color: #252526;
+  color: white;
+  text-align: center
+
+a 
+  display: inline-block;
    
 a:hover 
   background-color: #d3d3d3;
   color: black
 
-
 a:active 
   box-shadow: none;
   top: 5px;