ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 22:54:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: social button hover glitch, cleanup: contrib button

Browse Source
This commit is contained in:
Nikita Krupin 2022-08-15 21:35:38 -04:00
parent d1f19bf1a8
commit f9dd805494
3 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/atoms/ContributorButton.svelte
View File

@ -22,6 +22,7 @@
button { button {
color: var(--white); color: var(--white);
border-radius: 200px; border-radius: 200px;
overflow: hidden;
border: 0; border: 0;
/* padding: 5px 5px; */ /* padding: 5px 5px; */
width:86px; width:86px;
@ -40,10 +41,7 @@
} }
img { img {
/* margin: 0; height: 100%;
padding: 0; */ width: 100%;
border-radius: 50%;
max-height: 86px;
max-width: 86px;
} }
</style> </style>

46
src/lib/components/atoms/SocialButton.svelte
View File

@ -1,38 +1,44 @@
<script> <script>
export let src = 'socials/github.svg'; export let src = 'socials/github.svg';
export let alt = 'GitHub'; export let alt = 'GitHub';
export let href = '#'; export let href = '#';
</script> </script>
<button> <div>
<a {href}> <button>
<img {src} {alt}> <a {href}>
</a> <img {src} {alt} />
</button> </a>
</button>
</div>
<style> <style>
button { button {
color: var(--white); border: 0;
border-radius: 200px; width: 60px;
border: 0; height: 60px;
padding: 14px; padding: 14px;
width:60px;
height:60px;
cursor: pointer; cursor: pointer;
border-radius: 200px;
transition: transform 0.4s var(--bezier-one);
background-color: var(--grey-four); background-color: var(--grey-four);
font-size: 1.5rem; color: var(--white);
transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
user-select: none; user-select: none;
margin-right:0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
img { div {
width:30px; display: inline-block;
} }
button:hover { img {
transform: translate(0%, -5%); transition: filter 0.4s var(--bezier-one);
width: 30px;
}
div:hover > button {
transform: translateY(-5%);
} }
button:hover img { button:hover img {

3
src/lib/components/molecules/SocialHost.svelte
View File

@ -12,11 +12,10 @@
<style> <style>
.social-host { .social-host {
justify-content: space-between; justify-content: space-between;
position: absolute;
align-items: center; align-items: center;
position: fixed;
bottom: 3rem; bottom: 3rem;
left: 5.5rem; left: 5.5rem;
user-select: none;
} }
@media screen and (max-width: 1052px) { @media screen and (max-width: 1052px) {