diff --git a/src/assets/js/main.js b/src/assets/js/main.js index 83f1f47..757ac05 100644 --- a/src/assets/js/main.js +++ b/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); \ No newline at end of file diff --git a/src/assets/sass/components/_discord.scss b/src/assets/sass/components/_discord.scss new file mode 100644 index 0000000..4a35e55 --- /dev/null +++ b/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(" +
+
+ +
+ + +
+