Change: add slackin badge

developersinvicenza · Jun 20, 2020 · 2db67a6 · 2db67a6
1 parent 8214dc1
commit 2db67a6
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 13 deletions.
diff --git a/download/.keep b/download/.keep
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "parcel src/index.html --no-autoinstall --open",
+    "dev": "parcel src/index.html --no-autoinstall --open --port 3000",
     "build": "parcel build src/index.html -d ."
   },
   "repository": {

diff --git a/src/index.html b/src/index.html
@@ -6,15 +6,46 @@
       html, body {
         margin: 0;
         padding: 0;
+        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
       }
 
       canvas {
         width: 100%;
         height: 100%;
       }
+
+      #join-slackin {
+        position: absolute;
+        top: 30px;
+        right: 30px;
+        color: white;
+        display: block;
+        line-height: 20px;
+        height: 20px;
+        text-decoration: none;
+        transition: all 0.25s ease-in-out;
+        transform: scale(1);
+        border-bottom: 2px solid rgba(121,82,187, 0);
+        padding: 3px;
+      }
+
+      #join-slackin:hover, #join-slackin:active, #join-slackin:focus {
+        transform: scale(1.1);
+        border-bottom: 2px solid rgba(121,82,187, 1);
+      }
+
+      #slackin-badge {
+        display: inline-block;
+        height: 20px;
+        vertical-align: top;
+      }
     </style>
   </head>
   <body>
+    <a href="https://slackin-div.herokuapp.com/" target="_blank" id="join-slackin">
+      Join our slack channel
+      <img src="https://slackin-div.herokuapp.com/badge.svg" id="slackin-badge" />
+    </a>
     <script src="js/main.js"></script>
   </body>
-</html>
+</html>