Add Discord bubble (#14)

Force padding 0

Remove duplicate section

Merge branch 'feature/discord-bubble' of https://git.etztech.xyz/klutz/birbmc.com into feature/discord-bubble

Add Discord bubble

Add Discord bubble

Co-authored-by: Kevin Belisle <kev.belisle@gmail.com>
Reviewed-on: https://git.etztech.xyz/BirbMC/birbmc.com/pulls/14
Reviewed-by: Etzelia <etzelia@hotmail.com>

src/assets/js/main.js

@@ -151,4 +151,16 @@
 	// Listen for keydown events
 	document.addEventListener('keydown', keyHandler, false);
 
+
+	// Discord
+	document.getElementById("discord").addEventListener("click", () => {
+		let widget = document.querySelector("#discord > .widget");
+
+		if (widget.style.display === "block") {
+			widget.style.display = "none";
+		} else {
+			widget.style.display = "block";
+		}
+	});
+
 })(jQuery);

src/assets/sass/components/_discord.scss

@@ -0,0 +1,47 @@
+#discord {
+  .widget {
+    position: fixed;
+    bottom: 80px;
+    right: 15px;
+    display: none;
+
+    iframe {
+      box-shadow: rgba(115, 136, 217, 0.3) 0px 3px 5px -1px,
+        rgba(115, 136, 217, 0.14) 0px 6px 10px 0px,
+        rgba(115, 136, 217, 0.12) 0px 1px 18px 0px;
+    }
+  }
+
+  button {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    min-width: 50px;
+    width: 50px;
+    height: 50px;
+    background-color: #7289da;
+    border-radius: 50%;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: rgba(115, 136, 217, 0.3) 0px 3px 5px -1px,
+      rgba(115, 136, 217, 0.14) 0px 6px 10px 0px,
+      rgba(115, 136, 217, 0.12) 0px 1px 18px 0px;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+
+    i {
+      font-size: 24px;
+    }
+  }
+}
+
+@include breakpoint("<xsmall") {
+  #discord {
+    display: none;
+  }
+}

src/assets/sass/main.scss

@@ -9,9 +9,9 @@
 $fa-font-path: "../webfonts";
 @import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
 @import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
+@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
 @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400";
 
-
 /*
 	Stellar by HTML5 UP
 	html5up.net | @ajlkn
@@ -85,6 +85,7 @@ $fa-font-path: "../webfonts";
 @import "components/features";
 @import "components/statistics";
 @import "components/spotlight";
+@import "components/discord";
 
 // Layout.
 

src/index.html

@@ -371,6 +371,16 @@
       </footer>
     </div>
 
+    <div id="discord">
+      <div class="widget">
+        <iframe src="https://discord.com/widget?id=717858829722845305&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
+      </div>
+
+      <button>
+        <i class="fab fa-discord"></i>
+      </button>
+    </div>
+
     <!-- Scripts -->
     <script src="assets/js/jquery.min.js"></script>
     <script src="assets/js/jquery.scrollex.min.js"></script>