ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-23 00:35:07 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Working on floating button resposivity

Browse source
This commit is contained in:
Thomas Smith 2022-09-27 16:57:52 -04:00
parent 013b37c1f6
commit 61255a6034
1 changed files with 170 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

197
src/layouts/partials/floating-join-btn.html
View file

@ -1,33 +1,176 @@
<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;
/* Breakpoints for re-use*/
}
@media only screen and (min-width: 1200px) {
.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;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.gf-container {
width: 8.333vw;
height: 8.333vw;
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: 6.5vw;
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;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.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;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.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;
}
}
@media only screen and (max-width: 576px) {
.gf-container {
width: 15vw;
height: 15vw;
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;
bottom: 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>