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>
main
klutz 2020-10-31 04:45:33 +01:00 committed by Etzelia
parent 3798cf0b62
commit 3b47de3b49
4 changed files with 71 additions and 1 deletions

View File

@ -151,4 +151,16 @@
// Listen for keydown events // Listen for keydown events
document.addEventListener('keydown', keyHandler, false); 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); })(jQuery);

View File

@ -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;
}
}

View File

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

View File

@ -371,6 +371,16 @@
</footer> </footer>
</div> </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 --> <!-- Scripts -->
<script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script> <script src="assets/js/jquery.scrollex.min.js"></script>