Added floating 'join' btn--amended

This commit is contained in:
Thomas Smith 2022-09-19 12:47:40 -04:00
parent e77685608a
commit 3fb5835857
3 changed files with 39 additions and 63 deletions

View file

@ -0,0 +1,36 @@
<style>
.gf-container {
width: 8vw;
height: 8vw;
border-radius: 100px;
display: flex;
flex-direction: column;
position: fixed;
text-align:center;
padding-top: 3vw;
font-size: 1.562vw;
background-color: #1a1a1a !important;
border: 2px solid #949494;
color: #ffffff;
text-decoration: none;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
right: 15px;
top: 5.3vw;
cursor: pointer;
z-index: 3;
transition: 0.2s ease-in-out;
}
.gf-container:hover {
color:#1a1a1a;
box-shadow: inset 0vw 0vw 0vw 0.358vw #1a1a1a !important;
background-color: #00ffd0 !important;
}
</style>
<a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" class="gf-container" style="background-color:#8EC7BF;">
JOIN
</a>

View file

@ -78,5 +78,8 @@
window.location.replace(`${window.location.origin}${window.location.pathname}`) window.location.replace(`${window.location.origin}${window.location.pathname}`)
} }
</script> </script>
{{- partial "floating-join-btn.html" . -}}
</head> </head>
</head> </head>

View file

@ -1,63 +0,0 @@
<style>
.gf-container {
width: 80px;
height: 80px;
border-radius: 60px;
display: flex;
flex-direction: column;
position: fixed;
right: 15px;
bottom: 15px;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
z-index: 200;
}
.gf-container:hover {
animation: none;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
.github-icon {
width: 60%;
margin-top: auto;
margin-bottom: auto;
}
</style>
<a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" class="gf-container" style="background-color:#8EC7BF;">
<img src="/Images/github.svg" alt="" class="github-icon mx-auto">
</a>